/*
 * Section: Icon box.
 *
 * Loaded only on pages carrying the `icon_box` layout.
 *
 * Design: _design/SharpQuery GBP Services.dc.html — concrete band, white
 * bordered boxes, 2-up, condensed uppercase titles, nothing ranked.
 *
 * Every box is the same weight, and that is load-bearing rather than tidy: on
 * the GBP page this answers a numbered problems list, so anything that raised
 * one box above the others would blur the two sections together. No shadow, no
 * accent edge, no featured cell.
 *
 * Ink and paper are named directly rather than taken from the role tokens,
 * matching `.card` in chrome.css: a box stays a light surface on a dark band,
 * which is what keeps it a box rather than a hole. The roles are re-pointed
 * inside it below so copy and links stay legible there.
 */


.icon-box__header {
	/* The comp's 780px: wider than the reading measure because the heading is
	 * display type, but the intro under it is one line and stays short. */
	max-width: 48.75rem;
}

.icon-box__heading {
	line-height: 0.96;
}

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

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


/* ================================================================ GRID == */

.icon-box__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem; /* 14 — the comp's mobile gap */
	margin: 0;
	padding: 0;
	list-style: none;
}

.icon-box__cell {
	display: flex;
	margin: 0; /* base.css spaces li + li; the grid gap owns it here */
}

/*
 * The box. `flex: 1` on the box and `flex: 1 1 auto` on the body is what makes
 * every box in a row the same height without a fixed one — the paragraph takes
 * up the slack, so an uneven set of copy still lines up at the bottom.
 */
.icon-box__box {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem; /* 10 */
	padding: var(--sq-space-5);
	border: var(--sq-border-width) solid var(--sq-color-ink);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

.sq-on-dark .icon-box__box {
	--sq-fg: var(--sq-color-ink);
	--sq-fg-muted: var(--sq-color-support);
	--sq-link: var(--sq-color-blue);
	--sq-link-hover: var(--sq-color-orange-text);
	--sq-border: var(--sq-color-ink);
	--sq-rule: var(--sq-color-hairline);
	--sq-accent: var(--sq-color-orange-text);
}

/*
 * The icon frame. A bordered square that holds its size whether or not there
 * is an icon in it — see the reserved-slot note in the template. `flex: 0 0
 * auto` so a tall box never stretches it.
 */
.icon-box__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.875rem; /* 46 */
	height: 2.875rem;
	border: var(--sq-border-width) solid var(--sq-color-ink);
}

/*
 * Both icon kinds are sized by the frame, not by themselves. A pasted SVG
 * almost always carries its own width and height — usually 24 — and those are
 * overridden here so an icon cannot decide how big the frame's contents are.
 *
 * Colour is deliberately NOT forced. An icon drawn with `currentColor` inherits
 * the box's ink and follows it if the box is ever re-pointed; one with its own
 * hex keeps it. Forcing `stroke: currentColor` here would silently wreck a
 * filled icon, and forcing `fill` would wreck a stroked one.
 */
.icon-box__icon-image,
.icon-box__icon > svg {
	display: block;
	width: 1.75rem; /* 28 */
	height: 1.75rem;
	object-fit: contain;
}

.icon-box__title {
	margin: 0;
	font-size: 1.625rem; /* 26 */
	line-height: 1.05;
	text-transform: uppercase;
}

.icon-box__body {
	flex: 1 1 auto;
}

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

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


/* ============================================================== DESKTOP ==
 *
 * Two up from the tablet breakpoint, not from 480: at 480 a two-column grid
 * leaves about 215px a box, which is roughly twenty characters a line of the
 * 19px copy the comp sets. That is under the readability floor in CLAUDE.md.
 *
 * `columns: 1` stays one column at every width — it is for longer copy, or for
 * a set of three where the second column would sit half empty.
 */

@media (min-width: 48em) {
	.icon-box--cols-2 .icon-box__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sq-space-5); /* 20 — the comp's desktop gap */
	}
}

@media (min-width: 61.25em) {

	.icon-box__header {
		gap: var(--sq-space-4);
	}

	.icon-box__heading {
		line-height: 1;
	}

	/* The comp's desktop box: 26/28 padding, a 52px frame, a 30px title. */
	.icon-box__box {
		gap: 0.875rem; /* 14 */
		padding: 1.625rem 1.75rem; /* 26 28 */
	}

	.icon-box__icon {
		width: 3.25rem; /* 52 */
		height: 3.25rem;
	}

	.icon-box__icon-image,
	.icon-box__icon > svg {
		width: 2rem; /* 32 */
		height: 2rem;
	}

	.icon-box__title {
		font-size: 1.875rem; /* 30 */
	}

	.icon-box__body > * {
		font-size: 1.1875rem; /* 19 */
	}
}