/**
 * Homepage hero.
 *
 * The only section-specific stylesheet so far. It composes the design-system
 * primitives (.ha-media, .ha-eyebrow, .ha-h1, .ha-body--lead, .ha-meta) and
 * adds only what the split composition needs: the grid, the
 * hero headline size, and the mobile collapse.
 *
 * Loaded on the homepage only, enqueued by inc/home-hero.php after the design
 * system so it can lean on the tokens.
 *
 * @package GeneratePress_Child
 */

/* The hero opens the page, so it sits closer to the header than a mid-page
   band would. Still fluid, still generous, never a fixed viewport height. */
.ha-hero {
	padding-top: clamp(1.75rem, 4vw, 3rem);
}

/* Editorial split: image is the dominant element at roughly 59/41. */
.ha-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: var(--ha-gap-lg);
	align-items: center;
}

.ha-hero__media {
	display: block;
}

.ha-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ha-gap-sm);
	min-width: 0;
}

/* Sized down from the full display scale: the headline shares the row with an
   image and sits in a narrower column, so it reads as a lead story rather than
   swallowing the viewport. Family, weight and leading come from .ha-h1. */
.ha-hero__title {
	font-size: clamp(1.75rem, 2.5vw, 2.375rem);
}

.ha-hero__title a {
	color: inherit;
	text-decoration: none;
}

.ha-hero__title a:hover,
.ha-hero__title a:focus-visible {
	color: var(--ha-accent-deep);
}

/* Slightly tighter than the global measure: this column is narrow. */
.ha-hero__deck {
	max-width: 44ch;
}

/* Tablet and below: single column, image first in source order so it leads. */
@media (max-width: 63.9375em) {

	.ha-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--ha-gap);
		align-items: start;
	}

	.ha-hero__deck {
		max-width: none;
	}
}