/*
 * Section: Campaign — what the work involves.
 *
 * Loaded only on pages carrying the `campaign` layout.
 *
 * Rows separated by rules, never cards. On the Local SEO page this follows the
 * trades grid; boxed, the two would read as one continuous grid and the second
 * would stop being read. Everything here is the row vocabulary from the
 * `differentiators` note in CLAUDE.md — one rule between items, rows as tall as
 * their copy, one per row, full width.
 *
 * A DEPARTURE FROM THE COMP: the comp sets non-lead bodies in #4A4A47. The
 * design system bans grey body copy and reserves support ink for captions and
 * labels, so bodies here stay at full contrast and the lead row is marked by
 * its rule, its label and a step up in size instead. `factors` made the same
 * call on the same comp.
 */


.campaign__header {
	max-width: 68ch;
}


.campaign__intro > * {
	margin: 0;
	text-wrap: pretty;
}

.campaign__intro > * + * {
	margin-top: var(--sq-space-4);
}


/* ================================================================= ROWS == */

.campaign__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.campaign__item {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-2);
	margin: 0; /* base.css spaces li + li; the rule and padding own it here */
	padding: var(--sq-space-5) 0;
	border-top: var(--sq-border-width-hair) solid var(--sq-rule);
}

.campaign__side {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-2);
	align-items: flex-start;
}

.campaign__side > *,
.campaign__main > * {
	margin: 0;
}

/*
 * Generated in PHP from the loop index and aria-hidden — the <ol> already
 * carries the sequence. Mono, so nine numerals sit on one width and the column
 * of them reads as a column.
 */
.campaign__number {
	color: var(--sq-fg-muted);
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-micro);
	line-height: 1;
}

.campaign__title {
	font-size: 1.5625rem; /* 25 — the comp's row title */
	line-height: 1.05;
	text-transform: uppercase;
}

.campaign__main {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	min-width: 0;
}

.campaign__body {
	max-width: 62ch;
}

.campaign__body > * {
	margin: 0;
	text-wrap: pretty;
}

.campaign__body > * + * {
	margin-top: var(--sq-space-3);
}

/*
 * The links out to the service pages. Wrapping row rather than a list: a row
 * carries one or two, and two on one line reads as a pair of routes rather
 * than the start of a menu.
 */
.campaign__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-1) var(--sq-space-5);
}


/* ================================================================= LEAD ==
 *
 * The highest-leverage piece. Marked three ways — a heavy rule, a stated label
 * and a step up in type — so it survives any one of them failing, and none of
 * them is a colour a reader has to interpret.
 */

.campaign__item--lead {
	padding: var(--sq-space-6) 0;
	border-top: var(--sq-border-width-accent) solid var(--sq-border);
}

.campaign__item--lead .campaign__title {
	font-size: 1.875rem; /* 30 */
}

.campaign__item--lead .campaign__body > * {
	font-size: var(--sq-text-lead);
	line-height: var(--sq-leading-normal);
}

/*
 * Orange fill, paper text: 4.80:1 the other way round, so the label is legible
 * at label size. It is a fill, which is the only thing Safety Orange is for.
 */
.campaign__label {
	align-self: flex-start;
	padding: var(--sq-space-1) var(--sq-space-2);
	background-color: var(--sq-color-orange);
	color: var(--sq-color-paper);
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	line-height: 1.4;
	text-transform: uppercase;
}


/* ============================================================== DESKTOP ==
 *
 * Title column left, body right. 264px is the comp's figure and it is a fixed
 * track on purpose: the titles line up down the page, which is what makes the
 * nine rows scannable as a list of the work rather than nine paragraphs.
 */

@media (min-width: 61.25em) {

	.campaign__item {
		display: grid;
		grid-template-columns: 16.5rem minmax(0, 1fr);
		gap: var(--sq-space-6);
		align-items: start;
	}
}