/*
 * Section: Hero.
 *
 * Loaded only on pages carrying the `hero` layout — see
 * sharpquery_current_section_layouts() in inc/template-tags.php.
 *
 * Design: _design/SharpQuery Hero.dc.html. Desktop comp is 1280 wide with a
 * 1fr/496px split; mobile is 390 single column. Shared values come from
 * tokens.css; the geometry that belongs to this section alone is written as
 * literals here rather than polluting the global token set.
 */

/* The hero sits directly under the sticky header, so it runs tighter at the
 * top than a mid-page band. 16/20 mobile, 52/44 desktop, from the comps. */
.section-hero {
	padding-block: var(--sq-space-4) var(--sq-space-5);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sq-space-4);
	align-items: start;
}

.hero__copy {
	display: flex;
	flex-direction: column;
	/* 14 on mobile, 22 on desktop. */
	gap: 0.875rem;
	max-width: 41.25rem; /* 660 */
}

/* Everything in the copy column is a flex child, so the element margins from
 * base.css would double up on the gap. */
.hero__copy > * {
	margin: 0;
}


.hero__heading {
	/* 41 → 64. The isolated hero comp draws 68 at desktop; see the note in the
	 * handover about the competing display scales. */
	font-size: var(--sq-text-display);
	line-height: 0.94;
	letter-spacing: -0.005em;
}

.hero__subheading {
	max-width: var(--sq-measure-narrow);
	line-height: 1.45;
}


/* ============================================================ BULLETS == */

/* Two columns at every width — the comps do this at 390 as well as 1280 —
 * fenced by a rule top and bottom. */
.hero__bullets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem 0.875rem; /* 10 14 */
	margin: 0;
	/* 17px above and below, so the rules fence the block rather than underline it. */
	padding: 1.0625rem 0;
	border-top: var(--sq-border-width) solid var(--sq-border);
	border-bottom: var(--sq-border-width) solid var(--sq-border);
	list-style: none;
}

.hero__bullet {
	display: flex;
	gap: var(--sq-space-2);
	align-items: flex-start;
	margin: 0; /* base.css puts a gap on li + li; the grid owns spacing here */
	font-size: var(--sq-text-small);
	font-weight: var(--sq-weight-medium);
	line-height: 1.3;
}

/* The tick is decoration — the list itself carries the meaning, so it is
 * drawn rather than written into the markup. */
.hero__bullet::before {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.25rem;  /* 20 */
	height: 1.25rem;
	margin-top: 1px;
	background-color: var(--sq-color-success);
	color: var(--sq-color-paper);
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-bold);
	line-height: 1;
	content: '\2713'; /* ✓ */
}

/* On a dark band the solid green loses too much contrast against the panel. */
.sq-on-dark .hero__bullet::before {
	background-color: var(--sq-color-success-on-dark);
	color: var(--sq-color-ink);
}


/* ============================================================ ACTIONS == */

/* Invariant: the primary button must look identical whether or not the
 * secondary link is present. Nothing in this block may key on sibling count —
 * no :only-child, no :not(:only-child), no nth-child, no space-between. The
 * flex gap simply has nothing to apply to when there is one child. */
.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	align-items: stretch;
	margin-top: var(--sq-space-1);
}

/* Full width and taller on mobile, per the comp. */
.hero__actions .btn--primary {
	min-height: 3.875rem; /* 62 */
	font-size: 1.1875rem; /* 19 */
}

.hero__actions .btn--text {
	align-self: flex-start;
	font-size: 1.0625rem; /* 17 */
}

/* The arrow belongs to the pattern, not to the editor's link text. */
.hero__actions .btn--text::after {
	content: '\00a0\2192'; /* nbsp + → */
}

.hero__note {
	max-width: var(--sq-measure-narrow);
}


/* ============================================================== MEDIA == */

.hero__media {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-2);
	margin: 0;
}

/*
 * Image controls.
 *
 * Driven by custom properties so the four options are four one-line rules
 * rather than a matrix. With no ratio set the image keeps its natural
 * proportions and is never cropped, which is the default and the safe case.
 */
.hero__image {
	width: 100%;
	height: auto;
	aspect-ratio: var(--hero-image-ratio, auto);
	object-fit: var(--hero-image-fit, fill);
	object-position: var(--hero-image-pos, center);
	border: var(--sq-border-width) solid var(--sq-color-ink);
	/* Matches the hatched placeholder box in the comps while the file loads. */
	background-color: var(--sq-color-surface-sunken);
}

.hero--ratio-4-3 { --hero-image-ratio: 4 / 3; }
.hero--ratio-16-9 { --hero-image-ratio: 16 / 9; }
.hero--ratio-1-1 { --hero-image-ratio: 1 / 1; }
.hero--ratio-3-4 { --hero-image-ratio: 3 / 4; }

.hero--fit-cover { --hero-image-fit: cover; }

/* Contain leaves letterboxing, so the gap picks up the placeholder surface. */
.hero--fit-contain { --hero-image-fit: contain; }

.hero--pos-top { --hero-image-pos: center top; }
.hero--pos-bottom { --hero-image-pos: center bottom; }
.hero--pos-left { --hero-image-pos: left center; }
.hero--pos-right { --hero-image-pos: right center; }

.hero__caption {
	margin-top: 0;
	font-size: 0.9375rem; /* 15 */
}


/* ========================================================== TWO COLUMN == */

@media (min-width: 61.25em) {
	.section-hero {
		padding-block: 3.25rem 2.75rem; /* 52 44 */
	}

	.hero__inner {
		/* 1fr + a fixed media column, as drawn. minmax(0,…) stops a wide image
		 * from forcing the copy column to overflow. */
		/*
		 * 416px media column, not 460. The copy column has to hold the primary
		 * button and the secondary link side by side; at 460 the pair lands
		 * within ~8px of the column width and wraps the moment a label grows
		 * or a fallback font renders wider than Barlow.
		 */
		grid-template-columns: 1fr minmax(0, var(--hero-media-width, 26rem)); /* 416 */
		gap: var(--sq-space-7);
	}

	/*
	 * Column width. Wide takes room from the copy column — at 30rem it drops
	 * below what the two buttons need side by side, which is why the field
	 * says so rather than pretending the choice is free.
	 */
	.hero--media-narrow { --hero-media-width: 20rem; } /* 320 */
	.hero--media-wide { --hero-media-width: 30rem; }   /* 480 */

	/* A hero with no image gets the whole row back. */
	.hero--no-media .hero__inner {
		grid-template-columns: 1fr;
	}

	.hero__copy {
		gap: 1.375rem; /* 22 */
	}


	.hero__heading {
		line-height: var(--sq-leading-display);
		letter-spacing: var(--sq-tracking-display);
	}

	.hero__subheading {
		line-height: var(--sq-leading-normal);
	}

	.hero__bullets {
		gap: var(--sq-space-3) 1.75rem; /* 12 28 */
		padding: 1.0625rem 0;           /* 17 */
	}

	.hero__bullet {
		font-size: 1.125rem; /* 18 */
		line-height: 1.4;
	}

	.hero__bullet::before {
		width: var(--sq-space-5);  /* 24 */
		height: var(--sq-space-5);
		margin-top: 2px;
		font-size: 0.9375rem; /* 15 */
	}

	.hero__actions {
		flex-direction: row;
		/* Still wraps rather than overflowing if a label is very long. */
		flex-wrap: wrap;
		gap: var(--sq-space-5);
		align-items: center;
	}

	/* Neither button breaks mid-label; they wrap as whole items or not at all. */
	.hero__actions .btn {
		white-space: nowrap;
	}

	.hero__actions .btn--primary {
		min-height: var(--sq-control-height-lg); /* 64 */
		padding-inline: 1.875rem;                /* 30 */
		font-size: var(--sq-text-lead);          /* 21 */
	}

	.hero__actions .btn--text {
		font-size: 1.125rem; /* 18 */
	}

	.hero__media {
		gap: var(--sq-space-3);
	}
}