/*
 * Section: Timeline.
 *
 * Loaded only on pages carrying the `timeline` layout.
 *
 * Design: _design/Maps SEO Page.dc.html, "How Long Does It Take to Rank on
 * Google Maps?".
 *
 * The whole section is one device repeated three times — a small uppercase
 * label over a block — and the blocks differ only in how their cards are
 * drawn. Phases carry an ink stamp, caveats a blue top edge, and the closing
 * statement is an ink panel. Keeping those three distinct is what stops eight
 * cards reading as one undifferentiated grid.
 *
 * Substitutions against the comp, all of them palette rather than taste:
 *
 *   #14161A  ink         → --sq-color-ink
 *   #F6F5F2  card fill   → --sq-color-concrete
 *   #4A4F57  labels      → --sq-color-support
 *   #1B3A5C  blue edge   → --sq-color-blue   (the comp's navy is not in the
 *                                             palette; the call sub_hero made)
 *   #F3B183  panel label → --sq-accent under .sq-on-dark, which is #FF7A2F
 */


.timeline__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-6); /* 32 — the comp's gap between groups */
}

.timeline__header > * {
	margin: 0;
}

/*
 * 26ch, as the comp caps it. This heading asks a question and is read as a
 * line of language rather than scanned, so it wants a measure — in ch, which
 * holds whether the reader has bumped their default size or the font fell back
 * to one with different metrics.
 */
.timeline__heading {
	max-width: 26ch;
	font-size: var(--sq-text-h2);
	line-height: 1.08;
}

.timeline__intro {
	margin-top: var(--sq-space-3);
	max-width: var(--sq-measure);
}

/* A label and its block. This gap is the comp's 12; the 32 between groups is
 * the flex gap on the inner above. */
.timeline__group {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3); /* 12 */
}

/*
 * The section's one device. Mono, because these are labels on a data block
 * rather than eyebrows over a heading — the comp sets them in its mono face,
 * and that is what separates them from `.eyebrow`.
 *
 * Support ink rather than the comp's #4A4F57: near enough, in the palette, and
 * 7.2:1 on paper.
 */
.timeline__label {
	margin: 0;
	/* base.css caps every <p> at the measure. This one is a label, and the
	 * ruled variant below has to reach the right-hand edge. */
	max-width: none;
	color: var(--sq-color-support);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-micro); /* 12 */
	font-weight: var(--sq-weight-regular);
	letter-spacing: var(--sq-tracking-label-sm); /* 0.12em, as the comp sets it */
	line-height: 1.4;
	text-transform: uppercase;
}

/*
 * The divider label: the rule runs from the words out to the right edge. Drawn
 * by a pseudo-element rather than an empty span in the markup — it is a line,
 * and an empty element is announced as nothing at all.
 */
.timeline__label--ruled {
	display: flex;
	gap: var(--sq-space-3); /* 12 */
	align-items: center;
}

.timeline__label--ruled::after {
	flex: 1;
	border-top: var(--sq-border-width) solid var(--sq-color-ink);
	content: '';
}

/* On the ink panel the label takes the accent, which .sq-on-dark has already
 * re-pointed to the on-dark orange. No colour is named here. */
.timeline__label--accent {
	color: var(--sq-accent);
}


/* =============================================================== GRIDS ==
 *
 * Both blocks use the same track, so a caveat sits exactly under a phase and
 * the two read as one column of thought rather than two unrelated grids.
 *
 * auto-fit against a 20rem floor, the way `channels` and `comparison` do it:
 * two across from about 660px, one below. 320px is where the comp's 17px copy
 * stops holding a readable line.
 */

.timeline__phases,
.timeline__caveats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--sq-space-2); /* 8 — the comp's hairline gutter */
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ============================================================== PHASES ==
 *
 * Card, stamp, copy. The stamp is the span itself reversed out across the top
 * — the one place in this section where a figure takes display weight, because
 * the figure is what the reader came for.
 */

.timeline-phase {
	display: flex;
	flex-direction: column;
	margin: 0; /* base.css spaces li + li; the grid gap owns it here */
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-concrete);
}

.timeline-phase__stamp {
	display: flex;
	gap: 0.625rem; /* 10 */
	align-items: baseline;
	margin: 0;
	/* base.css caps every <p> at the measure, which stops the band halfway
	 * across a card wider than 680px — a lone phase, or any phase at desktop
	 * once the grid is down to one column. */
	max-width: none;
	padding: 0.875rem 1rem 1rem; /* 14 16 16 */
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
}

/*
 * tabular-nums so the stamps sit on one rhythm across a row: proportional
 * digits make two figures of the same length two different widths.
 */
.timeline-phase__figure {
	font-family: var(--sq-font-display);
	font-size: clamp(2.125rem, 1.85rem + 1.1vw, 2.5rem); /* 34 → 40 */
	font-weight: var(--sq-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--sq-tracking-display);
	line-height: 1;
}

.timeline-phase__unit {
	font-family: var(--sq-font-mono);
	font-size: 0.8125rem; /* 13 */
	letter-spacing: var(--sq-tracking-label-sm);
	line-height: 1.2;
	text-transform: uppercase;
}

.timeline-phase__body {
	padding: 1rem 1rem 1.125rem; /* 16 16 18 */
}

.timeline-phase__title,
.timeline-caveat__title {
	margin: 0 0 var(--sq-space-2);
	font-size: 1.25rem; /* 20 */
	font-weight: var(--sq-weight-bold);
	line-height: 1.2;
	text-wrap: balance;
}

.timeline-phase__text,
.timeline-caveat__text {
	margin: 0;
	max-width: var(--sq-measure);
	font-size: var(--sq-text-body);
	line-height: 1.55;
}


/* ============================================================= CAVEATS ==
 *
 * No stamp and no figure — a blue top edge instead, so a caveat can never be
 * taken for a third phase. Paper rather than concrete for the same reason: two
 * cards differing only in a border read as a mistake, two differing in surface
 * and edge read as two kinds of thing.
 */

.timeline-caveat {
	margin: 0;
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-top: 0.5rem solid var(--sq-color-blue); /* 8 */
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-paper);
	padding: 1rem 1rem 1.125rem; /* 16 16 18 */
}


/* ============================================================= CLOSING ==
 *
 * The refusal: an ink panel carrying the section's own label and one
 * statement — the admission the rest of the section is credible because of.
 *
 * Not the shared callout, because this carries the label device used twice
 * above it and the callout has no slot for one.
 */

.timeline__closing {
	margin-top: var(--sq-space-2); /* 8, on top of the 32 gap — the comp's 40 */
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-ink);
	/*
	 * .sq-on-dark re-points the role tokens but declares no colour of its own,
	 * so a panel that paints an ink background has to take --sq-fg with it.
	 * Without this the statement is ink on ink: present, selectable, invisible.
	 */
	color: var(--sq-fg);
	padding: var(--sq-space-5) 1.25rem 1.625rem; /* 24 20 26 */
}

.timeline__closing .timeline__label {
	margin-bottom: var(--sq-space-3); /* 12 */
}

/*
 * A statement, not a heading: the page outline already has its H1 and this
 * section's H2, and a third rung here would put a refusal into the contents
 * list. Set in the body face rather than the condensed one for the same reason
 * `sub_hero`'s statement is — condensed at this size is the vocabulary of a
 * heading. The weight is drawn, so the element stays honest.
 *
 * Paper on ink is 15.9:1, so it passes at any size.
 */
.timeline__statement {
	margin: 0;
	max-width: 46ch;
	font-size: var(--sq-text-h3);
	font-weight: var(--sq-weight-bold);
	line-height: 1.35;
	text-wrap: pretty;
}


/* =========================================================== DESKTOP == */

@media (min-width: 61.25em) {

	.timeline__heading {
		letter-spacing: var(--sq-tracking-display);
	}

	.timeline-phase__stamp {
		padding: 1rem 1.25rem 1.125rem; /* 16 20 18 */
	}

	.timeline-phase__body,
	.timeline-caveat {
		padding: 1.125rem 1.25rem 1.375rem; /* 18 20 22 */
	}

	.timeline-caveat {
		border-top-width: 0.5rem; /* 8 — the shorthand above sets the rest */
	}

	.timeline__closing {
		padding: 1.75rem var(--sq-space-5) 1.875rem; /* 28 24 30 */
	}

}