/*
 * ggc-theme-hero (TH-R): the hero, the client strip and what a walkthrough helps define.
 * Loads on the front page. Registered and enqueued only by inc/assets.php (docs/contracts.md
 * §5.3). Unlayered. The two light-ground Lichen uses live here and nowhere else:
 * .hero-copy::before (the 6 px bar over the H1) and .hero .geography (the 4 px rule).
 *
 * Source: identity spec §9.2 and §10 (planning/identity/implementation-spec.md) and
 * direction-b/identity.css at design/identity 0e1d416, mapped to the block markup of
 * patterns/home-hero.php and blocks/hero-base:
 *
 * - .hero is the pattern's full-width, constrained group and .hero-grid its wide inner group,
 *   so WordPress's root padding and the 78rem wide size do what the prototypes' .wrap did. Rules
 *   here set block-direction padding only, never the inline padding the layout owns.
 * - Groups in flow layout get WordPress's block gap as a top margin on each child; the hero sets
 *   its own spacing, so it resets those margins where it lays children out.
 * - Sizes use the presets (theme.json), which base.css steps at px widths (README, "Type"), so
 *   every size doubles exactly at 200% text. Layout breakpoints stay in em.
 * - Lichen is used whole, with no fallback colour: on a light ground only for the bar and the
 *   geography rule, which the owner chose (2026-10-29), and on Deep Green for the plate's tab.
 */

/* ---------- The hero and its grid ---------- */
.hero {
	position: relative;
	isolation: isolate; /* the skyline and the plinth sit behind the hero's content, never behind the page */
	overflow-x: clip; /* the skyline runs five cores wide; the hero cuts it at the page's edges */
	padding-block: clamp(1.25rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
}

@supports not (overflow-x: clip) {
	.hero {
		overflow-x: hidden;
	}
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* a definite track, so the form takes its width from it (build-01 spec §2.5) */
	grid-template-areas: "copy" "base" "panel" "define";
	gap: 1.75rem;
	align-items: start;
}

.hero-grid > * {
	min-width: 0;
	margin-block: 0;
}

.hero-copy {
	grid-area: copy;
}

.hero-base {
	grid-area: base;
	position: relative; /* the skyline's containing block (skyline.css) */
}

.request-panel {
	grid-area: panel;
}

.define {
	grid-area: define;
}

/* From 64em the panel stands beside the copy: copy, then the strip, then the define list on the
   left; the panel right, in a 24rem track (26rem from 80em), so the copy column grows to about
   770 px at 1440 (identity spec §9.2). */
@media (min-width: 64em) {
	.hero {
		padding-top: 2.25rem;
	}

	.hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		grid-template-rows: auto auto 1fr;
		grid-template-areas: "copy panel" "base panel" "define panel";
		gap: 2.25rem 3.5rem;
	}
}

@media (min-width: 80em) {
	.hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		column-gap: 4rem;
	}
}

/* ---------- The copy ---------- */
.hero-copy > * {
	margin-block: 0;
}

.hero h1 {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 12em;
	margin-block: 0 0.4em;
}

/* A 6 px bar over the headline, level with the plate's tab on the panel, so both columns start
   on one line. Lichen on the light ground, as the owner chose and confirmed (2026-10-29): one
   of the two light-ground uses, decorative, beside the headline it introduces. */
@media (min-width: 48em) {
	.hero-copy::before {
		content: "";
		display: block;
		width: 3rem;
		height: var(--wp--custom--rule);
		background: var(--wp--preset--color--lichen);
		margin-bottom: 1.25rem;
	}
}

.hero .lead {
	font-size: var(--wp--preset--font-size--lead);
	max-width: 34rem;
	margin-block: 0 1em;
}

/* The geography line's 4 px rule is Lichen, where Direction B had its retired tan (the owner,
   2026-10-29: "lichen any where tan used to be"). The whole declaration is Lichen, with no
   fallback: a colour-only override over a dropped token would leave no rule at all. The other
   light-ground use. */
.hero .geography {
	font-weight: 700;
	border-left: 4px solid var(--wp--preset--color--lichen);
	padding-left: 0.75rem;
	margin-block: 0 1em;
}

/* The actions: Request a walkthrough and the phone. */
.hero .hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	margin-block: 1.25rem 0;
}

.hero-actions > * {
	margin: 0;
}

.hero-request .wp-element-button {
	min-width: min(100%, 16rem);
}

/* "Prefer to talk?" and the bound Call button, set as one line of text with a link in it. */
.hero-phone {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.3em;
	font-weight: 700;
}

.hero-phone > *,
.hero-phone .wp-block-buttons {
	margin: 0;
	gap: 0;
}

.hero .hero-call .wp-element-button {
	display: inline-block;
	min-height: 0;
	padding: 0.625rem 0; /* with the body's line height, a target of at least 44 px */
	border: 0;
	background: none;
	color: var(--wp--preset--color--action);
	font-weight: 700;
	line-height: inherit; /* not the button's 1.25: the line reads as text, at the prototype's height */
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

.hero .hero-call .wp-element-button:hover {
	background: none;
	color: var(--wp--preset--color--action);
	text-decoration-thickness: 0.14em;
}

/* When the shared facts can't be read, the plugin drops the bound button (contract §6.3); the
   question then has nothing to answer it. */
.hero-phone:not(:has(.wp-block-button)) {
	display: none;
}

@media (min-width: 64em) {
	.hero .lead {
		margin-bottom: 0.75em;
	}

	.hero .hero-actions {
		margin-top: 0.75rem;
	}

	/* Beside the copy, the form is the hero's action; the header keeps Request a walkthrough. */
	.hero .hero-request {
		display: none;
	}
}

@media (max-width: 47.99em) {
	.hero .lead {
		margin-bottom: 0.75rem;
	}

	.hero .hero-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		margin-top: 1rem;
	}

	.hero-request .wp-block-button,
	.hero-request .wp-element-button {
		width: 100%;
	}
}

/* Small and short screens (320 × 568 with the consent notice open): the lead moves below the
   actions, so category, promise, geography, the primary action and the phone stay on the first
   screen. The phone link keeps a 44 px target. Only there. */
@media (max-width: 22.5em) and (max-height: 40em) {
	.hero {
		padding-top: 0.75rem;
	}

	.hero-copy {
		display: flex;
		flex-direction: column;
	}

	.hero .geography {
		margin-bottom: 0;
	}

	.hero .lead {
		order: 2;
		margin-top: 0.75rem;
	}

	.hero .hero-actions {
		order: 1;
		gap: 0.25rem;
		margin-top: 0.625rem;
	}

	.hero .hero-call .wp-element-button {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0;
	}
}

/* Short desktop screens (1366 × 768, 1280 × 800): keep the client logos on the first screen. */
@media (min-width: 64em) and (max-height: 50em) {
	.hero {
		padding-top: 1.5rem;
	}

	.hero-copy::before {
		margin-bottom: 1rem;
	}

	.hero .lead {
		margin-bottom: 0.5em;
	}

	.hero-grid {
		row-gap: 1.75rem;
	}
}

/* ---------- The client strip (ggc/hero-base) ----------
   The hero's base course. Its top edge is the 6 px Deep Green datum the skyline stands on; the
   owner's proof line heads it; one labelled group, every logo one colour in one common box. */
.clients {
	position: relative;
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--deep-green);
	padding-top: 0.75rem;
}

.clients-title {
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--deep-green);
	max-width: 48rem;
	margin: 0 0 0.5rem;
	overflow-wrap: anywhere;
}

/* Before any logo: the line alone on its datum. */
.clients-title:last-child {
	margin-bottom: 0;
}

.clients-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
}

.clients-label {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.clients-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.client-logo {
	width: 7.5rem;
	height: 2.75rem;
	max-width: none;
	margin: 0;
	color: var(--wp--preset--color--deep-green);
}

.client-logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

@media (max-width: 47.99em) {
	.clients-groups {
		display: grid;
		gap: 0.625rem;
	}

	.clients-row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.client-logo {
		width: auto;
		height: 3rem;
	}
}

/* From 64em the strip sits on a full-bleed Band plinth, its datum running edge to edge, and the
   panel passes in front. The plinth is the strip's own box, carried to both page edges by a
   border-image outset, which paints outside the box without adding scrollable overflow: neither
   moving the strip nor a style that resets the hero's overflow can make the page scroll
   sideways (identity spec §10.2). The border stays declared, so the datum keeps its 6 px. */
@media (min-width: 64em) {
	.clients {
		border-top: 0;
		padding: calc(var(--wp--custom--rule) + 0.75rem) 0 1.125rem;
	}

	.clients::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background: var(--wp--preset--color--band);
		border-top: var(--wp--custom--rule) solid var(--wp--preset--color--deep-green);
		border-image: linear-gradient(var(--wp--preset--color--deep-green) 0 var(--wp--custom--rule), var(--wp--preset--color--band) 0) 0 fill / 0 / 0 100vmax;
	}
}

@media (min-width: 64em) and (max-height: 50em) {
	.clients {
		padding-top: calc(var(--wp--custom--rule) + 0.5rem);
	}

	.clients-title {
		margin-bottom: 0.25rem;
	}
}

/* Forced colours: the datum takes the text colour. Logos are images, which forced colours leave
   alone, so a Deep Green logo would sit on a dark Canvas at about 1.5:1; a white backplate keeps
   it legible in either theme. */
@media (forced-colors: active) {
	.clients {
		border-top-color: CanvasText;
	}

	.clients::before {
		border-image: none;
		border-top-color: CanvasText;
	}

	.client-logo img {
		forced-color-adjust: none;
		background: #FFFFFF;
		padding: 0.25rem;
	}
}

/* ---------- The request panel ----------
   A white panel under a Deep Green plate with a Lichen tab (on Deep Green, so not a light-ground
   use), holding build-01's block; request.css themes the block inside it. */
.request-panel {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--muted);
	scroll-margin-top: 1rem;
}

.request-panel > * {
	margin-block: 0;
}

/* The plate covers the panel's 1 px frame, so the plate and its tab start on the panel's top edge. */
.request-panel > .panel-plate {
	position: relative;
	margin: -1px -1px 0;
	padding: 1rem 1.25rem 0.875rem;
	background: var(--wp--preset--color--deep-green);
	color: var(--wp--preset--color--white);
}

.panel-plate::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.25rem;
	width: 3rem;
	height: var(--wp--custom--rule);
	background: var(--wp--preset--color--lichen);
}

.panel-plate > * {
	margin-block: 0;
}

.panel-plate h2 {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--plate);
	margin: 0.25rem 0 0.125rem;
}

.panel-plate p {
	margin: 0;
	max-width: none;
	font-size: 1rem;
}

@media (max-width: 47.99em) {
	.request-panel > .panel-plate {
		padding-inline: 1rem;
	}

	.panel-plate::before {
		left: 1rem;
	}
}

/* ---------- What a walkthrough helps define: four short courses, two by two ---------- */
.define > * {
	margin-block: 0;
}

.define .define-title {
	font-size: 1.125rem;
	margin: 0 0 0.75rem;
}

.define-list {
	display: grid;
	gap: 1rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

@media (min-width: 48em) {
	.define-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.define-list > .define-item {
	margin: 0;
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--deep-green);
	padding-top: 0.625rem;
}

.define-item > * {
	margin: 0;
}

.define-term {
	font-weight: 700;
}

.define-item .define-text {
	color: var(--wp--preset--color--muted);
}

@media (forced-colors: active) {
	.define-list > .define-item {
		border-top-color: CanvasText;
	}
}