/**
 * Landing page — deck page 1.
 *
 * Loaded only on the front page. Six stacked bands:
 *   header · hero · three action cards · quick links · value band · footer
 *
 * Depends on tokens.css + base.css + components.css.
 */

/* ═══ Hero ══════════════════════════════════════════════════════════════ */

.aik-hero {
	background: linear-gradient(180deg, var(--aik-surface-alt) 0%, #eef4fa 100%);
	/* The deck fits the whole page into roughly one viewport — keep bands tight. */
	padding-block: var(--sp-8) var(--sp-16);
	overflow: hidden;
}

.aik-hero__inner {
	display: grid;
	/* Measured: text column ends ~x700, artwork runs to the viewport edge. */
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--sp-10);
	align-items: center;
	width: var(--aik-container);
	margin-inline: auto;
}

.aik-hero__title {
	/* Measured: "Find Your Path" is 594px wide over two lines with a 160px ink
	   block, which works out at roughly 78px type. */
	font-size: clamp(2.5rem, 5.4vw, 4.9rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin-bottom: var(--sp-4);
}

.aik-hero__lede {
	/* Measured: 614px wide, three lines over 90px — 18px type, 30px leading. */
	font-size: var(--fs-lg);
	line-height: 1.66;
	color: var(--aik-text);
	max-width: 615px;
	margin-bottom: var(--sp-6);
}

.aik-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.aik-hero__signin {
	font-size: var(--fs-base);
	color: var(--aik-text);
}

.aik-hero__signin a {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.aik-hero__art {
	position: relative;
	/* Measured: artwork runs x700..1445 of a 1450px canvas — it bleeds past the
	   container to the viewport edge rather than sitting inside it. */
	margin-right: calc((100vw - var(--aik-container)) / -2);
	align-self: center;
}

.aik-hero__art img {
	width: 100%;
	height: auto;
	display: block;
	/* The deck's artwork dissolves into the page rather than ending on a hard
	   rectangle, so the same fade is applied on the left and bottom edges. */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%),
		linear-gradient(to bottom, #000 82%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0%, #000 14%),
		linear-gradient(to bottom, #000 82%, transparent 100%);
	mask-composite: intersect;
}

/* ═══ Action-card band — the three-up grid only ════════════════════════
   The card itself (.aik-action*), its benefit list, the password toggle and
   the notices moved to components.css when the registration page started
   using them too. Only the band and its grid are landing-specific.
   ═════════════════════════════════════════════════════════════════════════ */

.aik-actions {
	width: var(--aik-container);
	margin: calc(var(--sp-16) * -1) auto 0;
	position: relative;
	z-index: 1;
}

.aik-actions__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Measured: cards span x133..1316 with ~24px gaps, ~379px each. */
	gap: 24px;
}

/*
 * The three cards share their rows, so the lists line up across them.
 *
 *   "The bullets … should align with each other across Create account and
 *    Institutional one."                                   — client
 *
 * Each card sized its own contents, so a description that wrapped to one more
 * line in one card started that card's list lower, and a bullet that wrapped
 * pushed the next one down on its side only. Now, while the cards stand side by
 * side, the grid has six rows every card takes part in (grid-template-rows:
 * subgrid):
 *
 *   1  icon, title, description
 *   2  first bullet
 *   3  second bullet
 *   4  third bullet
 *   5  whatever space is left
 *   6  the button
 *
 * A row is as tall as its tallest cell across all three cards, so the headings
 * end together, each bullet sits level with its counterpart, and the buttons
 * share a baseline. The sign-in form has no bullets; it spans rows 2 to 6 and
 * keeps its button pinned to the bottom, so that button stays level with the
 * other two. Row 5 is the only flexible one, so any spare height from the form
 * goes there rather than spreading the bullets apart.
 *
 * Only from 1024px. Below that the cards stack and nothing here applies.
 */
@media (min-width: 1024px) {
	.aik-actions__grid {
		grid-template-rows: auto auto auto auto 1fr auto;
		row-gap: 0;
	}

	.aik-actions__grid > .aik-action {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.aik-action > .aik-action__head {
		grid-row: 1;
	}

	.aik-action > .aik-action__cta {
		grid-row: 6;
	}

	/* The bullets become rows of the card themselves. */
	.aik-action__body--list,
	.aik-action__body--list > .aik-benefits {
		display: contents;
	}

	.aik-action__body--list .aik-benefits > li:nth-child(1) { grid-row: 2; }
	.aik-action__body--list .aik-benefits > li:nth-child(2) { grid-row: 3; }
	.aik-action__body--list .aik-benefits > li:nth-child(3) { grid-row: 4; }

	/* Each bullet's gap is its own margin now, and the last one needs none. */
	.aik-action__body--list .aik-benefits > li {
		align-self: start;
	}

	.aik-action__body--form {
		grid-row: 2 / 7;
		display: flex;
		flex-direction: column;
	}

	.aik-action__body--form > form {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.aik-action__body--form > form > button[type="submit"] {
		margin-top: auto;
	}
}

/* ═══ Quick links strip ════════════════════════════════════════════════ */

.aik-quicklinks {
	width: var(--aik-container);
	margin: var(--sp-8) auto 0;
}

.aik-quicklinks__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid var(--aik-border);
	border-radius: var(--r-xl);
	background: var(--aik-surface);
	overflow: hidden;
}

.aik-quicklink {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	border-right: 1px solid var(--aik-border);
	text-decoration: none;
	color: inherit;
	transition: background var(--t-fast);
}

.aik-quicklink:last-child {
	border-right: 0;
}

.aik-quicklink:hover {
	background: var(--aik-surface-alt);
	text-decoration: none;
}

.aik-quicklink__icon {
	color: var(--aik-sky);
	flex: none;
}

.aik-quicklink__title {
	display: block;
	font-weight: var(--fw-semibold);
	color: var(--aik-navy-900);
	margin-bottom: var(--sp-1);
	font-size: var(--fs-base);
}

.aik-quicklink__desc {
	display: block;
	font-size: var(--fs-xs);
	color: var(--aik-muted);
	line-height: var(--lh-snug);
}

.aik-quicklink__chevron {
	margin-left: auto;
	align-self: center;
	color: var(--aik-faint);
	flex: none;
}

/* The value band's styles moved to components.css — see parts/value-band.php. */

/* ═══ Responsive — proposals, the deck is desktop-only ═════════════════ */

@media (max-width: 1279px) {
	.aik-quicklinks__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.aik-quicklink:nth-child(3) {
		border-right: 0;
	}
	.aik-quicklink:nth-child(n + 4) {
		border-top: 1px solid var(--aik-border);
	}
}

@media (max-width: 1023px) {
	.aik-hero__inner {
		grid-template-columns: 1fr;
	}
	.aik-hero__art {
		order: -1;
	}
	.aik-actions__grid {
		grid-template-columns: 1fr;
	}
	.aik-actions {
		margin-top: var(--sp-10);
	}
}

@media (max-width: 767px) {
	.aik-hero {
		padding-block: var(--sp-10) var(--sp-8);
	}
	.aik-hero__actions .aik-btn {
		width: 100%;
	}
	.aik-quicklinks__grid {
		grid-template-columns: 1fr;
	}
	.aik-quicklink {
		border-right: 0;
		border-top: 1px solid var(--aik-border);
	}
	.aik-quicklink:first-child {
		border-top: 0;
	}
}