/**
 * Homepage hero band (template-parts/home/hero.php, Figma node 197:617).
 * Designer rulings applied: global container alignment, viewport height,
 * no backdrop blur, shared .btn-primary on the button.
 */

/* The frame (inset, cap, radius, media slot, container math) comes from the
   shared .band component in base.css; below are the hero-only additions. */
.hero {
	margin-block: var(--page-inset);
	min-height: calc(100svh - 2 * var(--page-inset));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.hero .band__overlay {
	/* Alpha stops are surface-darkest (#0A0B0D) at .75/.12/.75; no alpha
	   tokens exist for these, values per spec. */
	background: linear-gradient(180deg, rgba(10, 11, 13, 0.75) 0%, rgba(10, 11, 13, 0.12) 30%, rgba(10, 11, 13, 0.75) 58%, var(--color-surface-darkest) 100%);
}

.hero__content {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 164px;
	padding-bottom: 64px; /* node value; deliberately not --container-pad, unrelated knob */
}

.hero__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.hero__aside {
	flex: 0 0 328px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.hero__headline {
	font-size: var(--type-display-size);
	line-height: var(--type-display-line);
	letter-spacing: var(--type-display-spacing);
	font-weight: var(--type-display-weight);
	color: var(--color-heading-text-on-dark);
}

.hero__intro {
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-heading-text-on-dark);
}

/* The hero button is the shared .btn-primary component (base.css), no overrides. */

/* --------------------------------------------------------------------
 * Responsive (<=1024): one bottom-left stack
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* An equal 32px inset from all four sides of the band, by ruling. The
	   container's own width math is dropped entirely so the padding is the
	   only thing setting the inset (top matters only if the content ever
	   grows tall enough to reach it; the band is 100svh and bottom-aligned). */
	/* Two classes deliberately: .band .container also has two, and a single
	   .hero__content would lose to it and leave the box inset 16px with the
	   32px padding stacked on top (a 48px inset). */
	.hero .hero__content {
		width: 100%;
		max-width: none;
		padding: 32px;
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	/* Source order already gives eyebrow, headline, intro, button. */
	.hero__aside {
		flex: 0 0 auto;
		width: 100%;
	}
}