/*
 * Section: Problem cards.
 *
 * Loaded only on pages carrying the `problem_cards` layout.
 *
 * ---------------------------------------------------------------------------
 * These describe pain, and pain is not an error. The heavy tone borrows the
 * design system's cool dark surface (#15181E) — the band already reserved for
 * the objection block — and stops there.
 *
 * Never add: red or amber, warning triangles, exclamation marks, alert icons,
 * or a left border in a "danger" colour. The moment a card looks like a
 * validation error, the section is about our diagnosis rather than the
 * reader's Tuesday, and the recognition is lost.
 * ---------------------------------------------------------------------------
 */


.problem-cards__inner {
	display: flex;
	flex-direction: column;
	gap: 1.375rem; /* 22 */
}

/* 900, not the 680 measure: the comp runs the headline wider than body copy
 * because it is condensed display type, not something read line by line. The
 * intro under it is capped separately. */
.problem-cards__header {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	max-width: 56.25rem; /* 900 */
}

.problem-cards__header > * {
	margin: 0;
}

.problem-cards__heading {
	font-size: var(--sq-text-h2);
	line-height: 0.98;
}


/* ============================================================== CARDS ==
 *
 * Stacked on mobile, side by side above 30em. Never a carousel: this audience
 * does not swipe, sliders hide content from crawlers, and nothing behind one
 * survives printing.
 */

.problem-cards__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem; /* 14 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.problem-cards__cell {
	display: flex;
	margin: 0;
}

/* Equal heights: the cell stretches to the row, the card fills the cell. */
.problem-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem; /* 10 */
	padding: 1.25rem; /* 20 */
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

/*
 * The ordinal. Enumeration for scanning, not sequence — three recognitions are
 * not three steps — so it is aria-hidden in the template and carries no
 * meaning the title does not already carry. Condensed and large, as the comp
 * draws it, which is also what keeps it above the large-text contrast floor.
 */
.problem-card__number {
	margin: 0;
	/* Raw support ink, not --sq-fg-muted: the card is a light surface whatever
	 * band it sits on, and the on-dark muted grey the role token resolves to
	 * there is 2.6:1 on paper. */
	color: var(--sq-color-support);
	font-family: var(--sq-font-display);
	font-size: 1.75rem; /* 28 */
	font-weight: var(--sq-weight-bold);
	line-height: 1;
}

.problem-card__title {
	margin: 0;
	font-size: 1.375rem; /* 22 */
	font-weight: var(--sq-weight-semibold);
	line-height: 1.2;
	text-wrap: balance;
}

/* margin:0 because base.css gives every `h3 + *` a top margin, and spacing in
 * here comes from the card's flex gap. */
.problem-card__body {
	margin: 0;
	font-size: var(--sq-text-body);
	line-height: 1.55;
}

.problem-card__body > * {
	margin: 0;
}

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


/* =============================================================== HEAVY ==
 *
 * Weight, not warning. The card is one step lighter than the cool band it sits
 * on, with a visible 2px edge — a card painted in --sq-color-cool on a cool
 * band has no edge at all and the grid dissolves.
 *
 * Still nothing but weight: no red, no amber, no warning glyph.
 */

.problem-cards--heavy .problem-card {
	border-color: var(--sq-color-cool-border);
	background-color: var(--sq-color-cool-raised);
	color: var(--sq-color-paper);
}

.problem-cards--heavy .problem-card__number {
	color: var(--sq-color-cool-muted);
}

.problem-cards--heavy .problem-card__body {
	color: var(--sq-color-on-dark-body);
}


/* ============================================================= CLOSING ==
 *
 * The relief, and the only button in the section.
 *
 * Full-bleed and outside the container: it is a sibling of .problem-cards__
 * inner, not a box inside it, because the shift out of the dark band is the
 * entire mechanism. Boxed on the same background it would read as a fourth
 * problem.
 *
 * The section's own bottom padding is cancelled and re-paid as the strip's
 * margin, so the dark band still closes with its full gap and no dark sliver
 * is left under the paper.
 */

.section.problem-cards--has-relief {
	padding-bottom: 0;
}

.problem-cards__relief {
	/*
	 * The section may carry .sq-on-dark, which inherits. Point the roles back
	 * at the light set rather than restating a colour on each child.
	 */
	--sq-fg: var(--sq-color-ink);
	--sq-fg-muted: var(--sq-color-support);
	--sq-border: var(--sq-color-ink);
	--sq-rule: var(--sq-color-hairline);
	--sq-accent: var(--sq-color-orange-text);
	--sq-link: var(--sq-color-blue);
	--sq-link-hover: var(--sq-color-orange-text);

	margin-top: var(--sq-section-padding-end);
	padding-block: 2.75rem 3rem; /* 44 48 */
	background-color: var(--sq-color-paper);
	color: var(--sq-fg);
}

.problem-cards__relief-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.75rem; /* 28 */
}

.problem-cards__closing {
	max-width: 56.25rem; /* 900 */
}

/* The wrapper carries the 900 cap, so the paragraph must give up the 680 one
 * base.css puts on every <p> — otherwise the comp's three centred lines become
 * four narrower ones. This is display type in a strip of its own, not body
 * copy in a column. */
.problem-cards__closing > * {
	margin: 0;
	max-width: none;
	font-size: var(--sq-text-lead);
	font-weight: var(--sq-weight-medium);
	line-height: 1.45;
	text-wrap: pretty;
}

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

/*
 * chrome.css inverts the primary button inside .sq-on-dark — white edge, no
 * shadow. The strip is paper, so it inverts back. Same specificity as the
 * chrome rule; section CSS loads afterwards, which is what settles it.
 */
.problem-cards__relief .btn--primary {
	border-color: var(--sq-color-ink);
	box-shadow: var(--sq-shadow);
}

.problem-cards__relief .btn--primary:active {
	box-shadow: none;
}

/* The comp's 64px closing button. Sized here rather than asking the template
 * for a modifier, the same way hero and cta do it. */
.problem-cards__relief .btn {
	min-height: var(--sq-control-height-lg); /* 64 */
	font-size: var(--sq-text-lead);
}


/* ============================================================== COUNTS ==
 *
 * Two and three go across; four becomes two rows of two rather than four
 * narrow columns. At 1180px, four columns leaves about 260px each, which is
 * too narrow for a paragraph — see the readability floors in CLAUDE.md.
 */

@media (min-width: 30em) {

	.problem-cards__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sq-space-card-gap); /* 20 */
	}

	/*
	 * Centred from here, not at 390px. The comp's own mobile artboard sets the
	 * closing flush left, and the design system bans centred paragraphs over
	 * two lines — which is what this becomes on a phone. At tablet and up it is
	 * the two- or three-line statement the desktop comp centres.
	 */
	.problem-cards__relief-inner {
		align-items: center;
	}

	.problem-cards__closing {
		text-align: center;
	}

}

@media (min-width: 61.25em) {

	/* 40 — the comp's figure, and one of the four steps the documented 8px
	 * scale omits. */
	.problem-cards__inner {
		gap: 2.5rem;
	}

	.problem-cards__header {
		gap: var(--sq-space-4);
	}

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

	.problem-cards--count-3 .problem-cards__list {
		grid-template-columns: repeat(3, 1fr);
	}

	/* count-2 and count-4 both stay at two columns. */

	.problem-card {
		gap: 0.875rem; /* 14 */
		padding: var(--sq-space-card-padding); /* 26 */
	}

	.problem-card__number {
		font-size: 2.125rem; /* 34 */
	}

	.problem-card__title {
		font-size: 1.5625rem; /* 25 */
	}

	.problem-card__body {
		line-height: var(--sq-leading-relaxed); /* 1.6 */
	}

	.problem-cards__relief {
		padding-block: 3.75rem; /* 60 */
	}

	.problem-cards__closing > * {
		font-size: 1.6875rem; /* 27 */
	}

}