/*
 * Section: Sub hero.
 *
 * Loaded only on pages carrying the `sub_hero` layout.
 *
 * The strip under the hero: prose on the left, the offer panel on the right,
 * fenced by a heavy rule top and bottom. It is the second half of the page's
 * opening statement rather than the first section of its argument, and every
 * decision below follows from that.
 */

/* ================================================================ FENCE ==
 *
 * The two rules are what mark this as part of the opening rather than a
 * section in its own right: it is closed off above and below instead of
 * separated by air. Written at (0,2,0) so it settles the tie with chrome.css's
 * `.section--paper + .section--paper` rule on source order — same property,
 * same value, so the pair never draws twice — and takes --sq-border so it
 * follows the band rather than naming ink.
 *
 * PADDING IS DELIBERATELY NOT SET HERE. The shared "Space above / Space
 * below" props are also (0,2,0) and also load from chrome.css, so a padding
 * declaration on this selector would win on source order and silently
 * overrule the editor's choice on every page. The comp runs this strip tight
 * against the hero; the way to get that is the Tight spacing step, not a rule
 * in here.
 */
.section.section-sub-hero {
	border-block: var(--sq-border-width) solid var(--sq-border);
}

.sub-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sq-space-6);
	/* The panel is a fixed-height object; nothing gains from it stretching to
	 * the height of three paragraphs beside it. */
	align-items: start;
}


/* ================================================================ PROSE ==
 *
 * 62ch, which is the comp's own measure and inside the design system's 60–72.
 * In `ch` rather than px for the reason narrative.css sets out: one ch is the
 * width of "0" in the current font, so the line length survives a reader
 * bumping their default size or the webfont failing to load.
 */

.sub-hero__prose {
	max-width: 62ch;
}

.sub-hero__lead > *,
.sub-hero__body > * {
	margin: 0;
	text-wrap: pretty;
}

.sub-hero__lead > * + *,
.sub-hero__body > * + * {
	margin-top: var(--sq-space-5);
}

/*
 * Type rules target the elements at any depth, never `> *` — see the long
 * note in narrative.css. A wysiwyg that has been pasted into arrives wrapped
 * (`<div><p>…</p></div>`), and `> *` then styles the wrapper while the
 * paragraph inside takes its size from base.css and the rule looks dead.
 */
.sub-hero__lead :is(p, ul, ol, blockquote),
.sub-hero__body :is(p, ul, ol, blockquote) {
	font-size: var(--sq-text-body);
	line-height: var(--sq-leading-relaxed);
}

.sub-hero__body ul,
.sub-hero__body ol {
	padding-left: 1.25em;
}

.sub-hero__body li + li {
	margin-top: var(--sq-space-2);
}


/* ============================================================ STATEMENT ==
 *
 * The one line worth stopping on, marked by the accent bar the design system
 * reserves for a testimonial edge — --sq-border-width-accent is that 10px.
 *
 * Set in the BODY face, not the condensed one, and that is the point rather
 * than an oversight: condensed at 26px bold is the vocabulary of a heading,
 * and this must not read as one. It is a paragraph said louder, in the middle
 * of a page whose only H1 belongs to the hero.
 *
 * --sq-text-h3 is used for its numbers (22 → 26, which is the comp) and not
 * for its meaning. Nothing here is an H3.
 */

.sub-hero__statement {
	margin-block: var(--sq-space-6);
	padding-block: var(--sq-space-1);
	padding-left: var(--sq-space-4);
	border-left: var(--sq-border-width-accent) solid var(--sq-accent);
	font-size: var(--sq-text-h3);
	font-weight: var(--sq-weight-bold);
	line-height: var(--sq-leading-snug);
	text-wrap: pretty;
}


/* ================================================================ PANEL ==
 *
 * A DEPARTURE FROM THE COMP, and it is arithmetic rather than taste. The comp
 * paints this panel #1B3A5C and its label #E0A57A — a pairing that works at
 * 5.3:1, but neither colour is in the palette. The two in-system candidates
 * are Trade Blue and ink, and only one of them survives:
 *
 *   label #FF7A2F on Trade Blue #23478C   3.37:1   fails AA at 13–14px
 *   label #FF7A2F on ink #131313          7.2:1    passes at any size
 *
 * Nothing lighter rescues the blue either, because the label has to stay the
 * accent to read as a label rather than as the first line of the list. So the
 * panel takes ink and becomes the same object as the filled callout — which is
 * also why nothing below names a dark colour: `.sq-on-dark` on the element
 * re-points --sq-fg, --sq-accent and --sq-border, and the label, markers and
 * button all follow from that one class.
 */

/*
 * The fill is the palette value rather than a role token, exactly as
 * `.callout--filled` does it: this panel is ink on every band, and a panel
 * that followed the band would be a hole in the section on a dark one.
 *
 * The EDGE is the role token, and takes its value from the `.sq-on-dark` the
 * element itself carries — so it resolves to paper. On a light band that is
 * 2px of paper against paper and reads as nothing, which is right, because the
 * ink fill is already the edge. On a dark band it becomes the visible outline
 * the panel needs to sit off the field.
 */
.sub-hero__panel {
	padding: var(--sq-space-5) var(--sq-space-5) var(--sq-space-6);
	border: var(--sq-border-width) solid var(--sq-border);
	background-color: var(--sq-color-ink);
	/*
	 * .sq-on-dark re-points the role tokens but declares no colour of its own,
	 * and `.section` sets `color: var(--sq-fg)` — which on a light band is ink.
	 * So a panel that paints an ink background has to take --sq-fg with it, or
	 * its list items are ink on ink: present, selectable, invisible.
	 *
	 * Everything else in the panel escaped it by naming a colour explicitly —
	 * the label through .eyebrow, the marker through --sq-accent, the button
	 * through `.sq-on-dark .btn--secondary` — which is exactly why it went
	 * unnoticed. Same fix `timeline` needed on its closing panel.
	 */
	color: var(--sq-fg);
}

/* The shared .eyebrow already carries the size, tracking and accent colour. */
.sub-hero__panel-label {
	margin-bottom: var(--sq-space-4);
}


/* =============================================================== SPEC ==
 *
 * The second drawing: a build-spec table rather than an offer panel. Where
 * `filled` is a dark surface with a light role re-point, this is the opposite
 * — a light surface that names ink and paper itself, exactly as `.card` does,
 * so it stays legible on any band the section is given without a dark variant
 * of every rule.
 *
 * It carries no .sq-on-dark, which is why nothing in this block reads a role
 * token: on a dark band those would repaint the table into the field it is
 * sitting on.
 */

.sub-hero__panel--spec {
	/* The rows carry their own padding, so the box only insets the edges. */
	padding: 0;
	border-color: var(--sq-color-ink);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

/*
 * The header row. Mono, because this is the caption on a table of figures
 * rather than an eyebrow over a heading — the same distinction `timeline`
 * draws — and the template leaves `.eyebrow` off in this style for it.
 */
.sub-hero__panel--spec .sub-hero__panel-label {
	margin: 0;
	padding: var(--sq-space-4) var(--sq-space-5); /* 16 24 */
	border-bottom: var(--sq-border-width) solid var(--sq-color-ink);
	color: var(--sq-color-support);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-micro); /* 12 */
	letter-spacing: var(--sq-tracking-label-sm);
	line-height: 1.4;
	text-transform: uppercase;
}

.sub-hero__spec {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A rule between rows, drawn as each row's own top edge except the first —
 * so a one-row table never draws a rule under nothing, and the last row never
 * doubles up against the note's own edge.
 */
.sub-hero__spec-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-2) var(--sq-space-4);
	align-items: baseline;
	justify-content: space-between;
	margin: 0; /* base.css spaces li + li; the rows are flush here */
	padding: var(--sq-space-4) var(--sq-space-5); /* 16 24 */
}

.sub-hero__spec-row + .sub-hero__spec-row {
	border-top: 1px solid var(--sq-color-hairline);
}

.sub-hero__spec-label {
	font-size: var(--sq-text-body);
	line-height: var(--sq-leading-normal);
	text-wrap: pretty;
}

/*
 * The value. Mono and tabular so a column of figures lines up, and right
 * aligned so the eye can run down it — that is the whole reason the row is a
 * pair rather than a sentence.
 *
 * --sq-color-orange-text (#A8420C), not the #B0480F of the mockup: it is the
 * palette's designated orange-as-text, 6.1:1 on paper against that value's
 * 5.6:1, and the theme normalises the comps' near-miss oranges rather than
 * carrying one shade per drawing. Safety Orange itself is a fill only — it is
 * 3.9:1 here and would fail.
 */
.sub-hero__spec-value {
	margin-left: auto;
	color: var(--sq-color-orange-text);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-small);
	font-variant-numeric: tabular-nums;
	line-height: var(--sq-leading-normal);
	text-align: right;
}

/*
 * The measurement footnote. Support ink and small — this is the one place in
 * the panel where that is right, because it is genuinely an aside about how
 * the figures above were taken rather than something anybody is asked to read
 * first. It is above the design system's 15px floor at --sq-text-small.
 */
.sub-hero__panel--spec .sub-hero__panel-note {
	margin: 0;
	padding: var(--sq-space-4) var(--sq-space-5) var(--sq-space-5);
	border-top: var(--sq-border-width) solid var(--sq-color-ink);
	color: var(--sq-color-support);
	font-size: var(--sq-text-small);
	line-height: var(--sq-leading-normal);
	text-wrap: pretty;
}

/*
 * The button needs the inset the rows have, since the box itself no longer
 * pads — and it is not full width here: spanning a table reads as a footer row
 * rather than a control.
 *
 * Written at (0,3,0) so it beats the `.sub-hero__panel .btn` rule further down
 * this file on specificity rather than on source order, which is what would
 * otherwise decide it at (0,2,0) each.
 */
.sub-hero__panel.sub-hero__panel--spec .btn {
	width: auto;
	margin: var(--sq-space-5);
}

.sub-hero__panel-list {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The marker is a square drawn in CSS, the same call working-with-us.css
 * makes: in the markup it would only be a character read out before every
 * line, and a tick would frame three promises as three features already
 * delivered. --sq-accent, so it inverts with the panel and never needs a
 * second declaration.
 *
 * Sized in `em` so it tracks the line it sits beside, and nudged down by the
 * cap height so it aligns with the first line's text rather than its box.
 */
.sub-hero__panel-item {
	display: grid;
	grid-template-columns: 0.625rem minmax(0, 1fr); /* 10 */
	gap: var(--sq-space-3);
	align-items: start;
	margin: 0; /* base.css spaces li + li; the flex gap owns it here */
	font-size: var(--sq-text-body);
	line-height: var(--sq-leading-normal);
	text-wrap: pretty;
}

.sub-hero__panel-item::before {
	width: 0.625rem; /* 10 */
	height: 0.625rem;
	margin-top: 0.45em;
	background-color: var(--sq-accent);
	content: '';
}

/*
 * Full width, because it is the only control in the panel and a button that
 * spans its container cannot be mistaken for one of the list items. The
 * variant is `secondary` — see the note in the template about not spending
 * orange here.
 */
.sub-hero__panel .btn {
	width: 100%;
	margin-top: var(--sq-space-5);
}


/* ============================================================== EXTREMES ==
 *
 * A panel with no prose is capped rather than stretched: an offer panel 1200px
 * wide is a band, not a panel. The form width is the right cap — it is the
 * same object doing the same job.
 */

.sub-hero--no-prose .sub-hero__panel {
	max-width: var(--sq-container-form);
}


/* =============================================================== DESKTOP ==
 *
 * 61.25em is the theme's two-column switch. Two equal columns, as the comp
 * draws them — the prose keeps its own measure inside its half rather than
 * taking a narrower track, so the panel gets the slack on a wide screen.
 */

@media (min-width: 61.25em) {

	.sub-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sq-space-gutter-desktop);
	}

	/* One column and no second cell to balance against. */
	.sub-hero--no-panel .sub-hero__inner,
	.sub-hero--no-prose .sub-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sub-hero__statement {
		padding-left: var(--sq-space-5);
	}

	.sub-hero__panel {
		padding: var(--sq-space-6);
	}
}