/* ==========================================================================
   Gemial Digital v2 — Lead pages (tpl-lead.php)
   --------------------------------------------------------------------------
   The page around the form: hero, offer strip, the two-column form section,
   the content blocks and "What happens next". LEAD-PAGES-BRIEF.md §1 and §2.

   The FORM ITSELF is not styled here. It is v2/lead-forms.css, which is the
   form component and is deleted when the custom Gemial forms plugin outputs
   that component natively (brief §3). Keeping the two apart is what makes
   that deletion one file.

   Role tokens only, per CLAUDE.md §5's role layer: accent text and strokes
   read --accent-ink, never --lime. The FAQ is v2/base.css section 11.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero. No image, no plate, no button: the form is the CTA.
   -------------------------------------------------------------------------- */

:where(body.gd2-page) .lead-hero {
	padding-block-start: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));
	padding-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

:where(body.gd2-page) .lead-hero__h {
	max-width: 20ch;
	margin-block-end: 1.25rem;
}

:where(body.gd2-page) .lead-hero__deck {
	max-width: 58ch;
	color: var(--text);
}

/* --------------------------------------------------------------------------
   2. The offer strip MOVED to v2/base.css section 12 at 2.24.0, unchanged:
   tpl-about.php prints the same cards (template-parts/lead/offer-strip.php).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. The form section. Panel about two-thirds, "What happens next" beside it
   from 1024; one column below, the steps after the form (brief §2).
   -------------------------------------------------------------------------- */

:where(body.gd2-page) .lead-main {
	padding-block-start: clamp(1rem, 2vw, 1.5rem);
}

/*
 * minmax(0, 1fr), not the implicit auto column. Measured at 390: an auto
 * column grows to its widest child's min-content, and the booking widget's
 * details step is 417px of it, so the panel came out 459px wide on a 390px
 * screen and the fields and the Schedule button were cut off.
 */
:where(body.gd2-page) .lead-main__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 1024px) {
	:where(body.gd2-page) .lead-main__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	/* Stays in view beside a long multi-step form. */
	:where(body.gd2-page) .lead-next {
		position: sticky;
		top: calc(var(--header-h-scrolled) + 1.5rem);
	}
}

/* Content blocks before the form: audit and call. */
:where(body.gd2-page) .lead-blocks {
	display: grid;
	gap: 1.75rem;
	margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 768px) {
	:where(body.gd2-page) .lead-blocks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

:where(body.gd2-page) .lead-block__h {
	margin-block-end: .6rem;
}

:where(body.gd2-page) .lead-block p,
:where(body.gd2-page) .lead-block__list {
	color: var(--text);
	font-size: 15px;
	line-height: 1.6;
}

:where(body.gd2-page) .lead-block__list {
	margin: 0;
	padding-inline-start: 1.1rem;
}

:where(body.gd2-page) .lead-block__list li + li {
	margin-block-start: .3rem;
}

:where(body.gd2-page) .lead-block__list li::marker {
	color: var(--accent-ink);
}

:where(body.gd2-page) .lead-block a,
:where(body.gd2-page) .lead-above a,
:where(body.gd2-page) .lead-received a,
:where(body.gd2-page) .lead-next a {
	color: var(--accent-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
}

:where(body.gd2-page) .lead-above {
	margin-block-end: 1.25rem;
	color: var(--text);
	font-size: 15px;
	line-height: 1.6;
}

/* "What happens next": numbered, three steps. */
:where(body.gd2-page) .lead-next__h {
	margin-block-end: 1.25rem;
}

:where(body.gd2-page) .lead-next__list {
	counter-reset: lead-next;
	display: grid;
	gap: 1.25rem;
}

/*
 * NOT a grid. The first version was, and a grid makes every child a cell: the
 * §0 claim span inside step 3 dropped out of its sentence into the next row
 * as a one-word-wide column. The number is positioned instead, so the line
 * is one run of inline text whatever markup it carries.
 */
:where(body.gd2-page) .lead-next__item {
	counter-increment: lead-next;
	position: relative;
	padding-inline-start: 2.75rem;
	color: var(--text);
	font-size: 15px;
	line-height: 1.55;
}

:where(body.gd2-page) .lead-next__item::before {
	content: counter(lead-next, decimal-leading-zero);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	font-family: var(--f-mono);
	font-size: 12px;
	line-height: 1.95;
	color: var(--accent-ink);
}

/* "Other ways to reach us" (Contact, 2.23.0): the column in "What happens
   next"'s place, so it keeps .lead-next's heading and its sticky position and
   adds a label/value list. Labels are mono like the step numbers but in
   --text-mid, not the accent: they name a channel, they do not count. */
:where(body.gd2-page) .lead-reach__list {
	display: grid;
	gap: 1.1rem;
	margin: 0;
}

:where(body.gd2-page) .lead-reach__item {
	display: grid;
	gap: .3rem;
}

:where(body.gd2-page) .lead-reach__k {
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-mid);
}

:where(body.gd2-page) .lead-reach__v {
	margin: 0;
	color: var(--text);
	font-size: 15px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

:where(body.gd2-page) .lead-reach__note {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--hairline);
	color: var(--text-mid);
	font-size: 14px;
	line-height: 1.55;
}

/* The line under the form's button (Contact). */
:where(body.gd2-page) .lead-after {
	margin-block-start: 1rem;
	color: var(--text-mid);
	font-size: 14px;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. Reduced motion. The only transitions here are hover affordances.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:where(body.gd2-page) .lead-offer {
		transition: none;
	}
}