/**
 * Layout primitives.
 *
 * Grid and flow utilities only — no component styling here.
 */

.container {
	width: 100%;
	max-width: var(--ih-container);
	margin-inline: auto;
	padding-inline: var(--ih-gutter);
}

.container--narrow {
	max-width: var(--ih-container-narrow);
}

/*
 * 🔴 PER-PAGE-TYPE CONTAINERS, 2026-09-14. This is how the handoff keeps
 * long-form text readable now that the per-child measure is gone — "content
 * container max-width 1180px (FAQ 980px, article 880px)".
 *
 * The distinction it draws is worth stating, because it replaces a rule this
 * theme had already moved three times. A marketing page is a sequence of
 * BLOCKS — cards, photographs, bands — and those want the full width. A page
 * that is one long argument is TEXT, and the honest way to keep its lines
 * readable is to narrow the PAGE, not to run a narrow column down the middle
 * of a wide one. The second produces the "squeezed into the middle" look the
 * client reported twice; the first cannot, because there is no leftover
 * margin to read as emptiness.
 *
 * 880px of 17px text is roughly 105 characters — still above the 45-75 ideal.
 * That is the packet's compromise rather than an oversight, and the client has
 * asked for it exactly.
 */
.container--reading {
	max-width: 55rem; /* ≈880px — the packet's article width */
}

.container--faq {
	max-width: 61.25rem; /* ≈980px */
}

/* Vertical rhythm between page sections */
.section {
	padding-block: var(--ih-space-8);
}

.section--tight {
	padding-block: var(--ih-space-6);
}

.section--alt {
	background: var(--ih-surface-alt);
}

/*
 * The red tint band. The handoff uses `#fbeaec` as a full-width section
 * background on EVERY ONE of its thirteen prototypes — eight times on the
 * homepage alone — for the billing band, the money band, the insurance strip
 * and the closing note on Standard Charges.
 *
 * The set had `--alt` (the warm ground, #FDFCFB) and `--dark` (ink) and
 * nothing between, so a child wanting the packet's tint had to either paint
 * it locally — a fork of a shared surface, which DESIGN-SYSTEM rule 4
 * forbids — or settle for the ground, which at a two-point luminance step
 * from a white card reads as no band at all. That is the same defect core
 * 1.38.1 fixed on the comparison table header.
 *
 * ⚠️ Text on this surface must clear 4.5 against #FBEAEC, not against white.
 * The tint column in tokens.css is there for exactly this: `--ih-muted` is
 * **4.70** on it and is the binding constraint in the whole palette. Body
 * copy and headings are fine (7.60 and 12.34); small muted print is the one
 * that breaks first.
 */
.section--tint {
	background: var(--ih-brand-tint);
}

/**
 * Auto-fitting card grid.
 *
 * min() keeps the single column from overflowing on narrow viewports, which a
 * bare minmax(280px, 1fr) does at widths below 280px + gutters.
 *
 * ⚠️ GAP IS `--ih-space-4` (16px), NOT `--ih-space-5` (24px). The handoff
 * specifies "gap 16–20px" for grids; 24px sat outside that range and made
 * every card grid on the site read looser than the prototype.
 *
 * That changes the arithmetic `grid--tight` is justified by. Its note has
 * been recomputed rather than left standing as though it were still true.
 */
.grid {
	display: grid;
	gap: var(--ih-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

/*
 * Added 2026-09-13. The set had 2 and 4 and nothing between, so a three-card
 * row had to be faked — which is how `grid--3` came to be written into a child
 * template with no rule behind it. `check-theme` caught it on the same run,
 * which is the gate doing its job: a class with no rule renders unstyled, and
 * unstyled looks broken rather than absent.
 *
 * 300px keeps three across on a laptop and drops cleanly to two then one,
 * sitting between grid--2's 400 and grid--4's 220.
 */
.grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/*
 * 🔴 A THREE-CARD ROW INSIDE THE NARROW READING MEASURE. ADDED 2026-09-13
 * AFTER I RECREATED, IN PAGE CONTENT, THE EXACT DEFECT THE CLIENT REPORTED
 * ON THE HOMEPAGE.
 *
 * His homepage report was that the fourth card sat below the other three by
 * itself. The cause was arithmetic: `.grid` asks for a 280px minimum, four of
 * those want more than the 1120px container, and `auto-fit` drops a column
 * without saying so. `grid--4` fixed it there.
 *
 * **Then I shipped three-card grids into `container--narrow`, whose content
 * box is 680px, and never redid the arithmetic for the smaller box.** Three
 * 280px columns plus two gaps wanted 888px at the 24px gap in force then. So
 * it dropped to two and the third card sat alone — measured on staging as
 * `perRow: [2, 1]`. `grid--3` would not have helped either: at 300px it wants
 * 948px and orphans the same card. **The fix I had already made was for one
 * container, and I treated it as a fix for the pattern.**
 *
 * 200px is chosen against the narrow box specifically. When this was written
 * `.grid` used a 24px gap, so `(680 - 2 × 24) / 3` was 210.67px — three fit
 * with about 10px of headroom. **The gap is now 16px**, the handoff's range,
 * so the same sum is `(680 - 2 × 16) / 3` = 216px: the headroom grew rather
 * than shrank and the 200px minimum holds more easily than before.
 * Recomputed when the gap changed rather than left to read as true, since
 * this arithmetic is the entire justification for the number. Verified on the
 * rendered page rather than calculated and assumed — that is the whole lesson
 * above.
 *
 * ⚠️ USE THIS ONLY WITH EXACTLY THREE ITEMS. With a 200px minimum a 1120px
 * container would take five columns, so six items would go 5 + 1 — this class
 * is a narrow-box remedy, not a general small-card grid. `em_cards` emits it
 * only when the card count is three, which is why that constraint holds
 * rather than merely being documented.
 */
.grid--tight {
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Content beside a sidebar; collapses to one column below 900px */
.with-sidebar {
	display: grid;
	gap: var(--ih-space-7);

	/*
	 * `minmax(0, 1fr)`, not `1fr`: a bare `1fr` is `minmax(auto, 1fr)`
	 * and its `auto` minimum is floored at min-content, so the track
	 * outgrows its container instead of wrapping. See the fuller note on
	 * `.symptom-grid` in components.css.
	 */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

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

.stack--lg > * + * {
	margin-top: var(--ih-space-6);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ih-space-3);
	align-items: center;
}

.site-main {
	min-height: 50vh;
}

/* Full-bleed element inside a constrained container */
.full-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}