/*
	.card-grid-item is a purpose-built variant of the shared .card
	(components.css), not a reuse of .card itself. .card hardcodes its own
	background-color: var(--color-surface) — layering a .bg-* class on top
	of literal .card would fight it. Both rules have equal specificity (one
	class each), and because layout.css (home of .bg-*) loads before
	components.css in main.css's import order, .card's own background-color
	would silently win, making the per-card Background field appear to do
	nothing. Giving this element its own class, with no background-color of
	its own, means .bg-* is the only thing that ever sets it.
*/
/*
	.card-grid is the shared grid primitive (components.css) that the Team
	block also renders into — this widens the gap for Card Grid only, scoped
	via the section's own flex-section--card-grid class, so Team's cards
	aren't affected.
*/
.flex-section--card-grid .card-grid {
	gap: var(--space-10);
}

.card-grid-item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

/*
	Same resting shadow Team cards get from the shared .card rule
	(components.css's --shadow-sm) — but only when no Background is set:
	rd_background_class() always resolves to bg-default in that case (never
	an empty class), so this needs no separate "no background" flag. A
	real coloured background already reads as its own distinct surface
	against the section, the same reasoning Team's card never needed a
	shadow to lift it off a plain page background were it colored — here
	it's the reverse (the cards are the ones colored, not the section), but
	the same "shadow only where there's no colour doing that job already"
	principle applies. No hover-lift variant, matching Team's own cards:
	neither is a link, so there's no interactive state to animate toward.
*/
.card-grid-item.bg-default {
	box-shadow: var(--shadow-sm);
}

.card-grid-item__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-8); /* 48px */
	flex: 1;
}

/*
	Same shape as .card__media (components.css) — flush with the card's own
	top edge, clipped by .card-grid-item's own overflow:hidden + border-radius
	rather than carrying its own.
*/
.card-grid-item__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--color-surface);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Icon sits to the left of the header, not stacked above it — same pattern
   as .faqs__header-row. Top-aligned rather than centered so the header text
   sits flush with the top of a tall icon instead of floating at its
   vertical middle. Spacing to the header comes from the icon wrap's own
   margin (below), not a gap here, so the two don't stack. */
.card-grid-item__header-row {
	display: flex;
	align-items: flex-start;
	margin-block-end: var(--space-8);
}

/*
	Fixed width regardless of the uploaded icon's own aspect ratio, so the
	header always starts at the same x position no matter which icon file is
	used. The img itself still scales proportionally within this box (width:
	auto, height fixed) — narrower icons are just centered in the leftover
	space rather than shifting the header.
*/
.card-grid-item__icon {
	flex: none;
	display: flex;
	justify-content: center;
	width: 8.75rem; /* 140px */
	margin-inline-end: var(--space-5); /* 24px */

	& img {
		display: block;
		width: auto;
		height: 6.875rem; /* 110px */
		object-fit: contain;
	}
}

/*
	Same treatment as .faqs__header-row/.faqs__icon: display: block turns
	the flex row into normal block flow, which is what stacks the icon
	above the header — the row's own margin-block-end (space above the
	underline/text below it) still applies either way, since that's not a
	flex-only property. margin-inline-end on the icon (the desktop side
	gap) is swapped for margin-block-end (the same 8px FAQ's own icon
	gets), since flex's inline gap has nothing to space out once stacked.

	Icon height is 6rem (96px) — normalized to match FAQ's own mobile icon
	exactly (assets/faqs.css), not scaled down from Card Grid's own desktop
	size independently, so the two read as the same size sitting on the
	same page. The box width grows to 7.636rem to match: same 8.75 : 6.875
	ratio the desktop box/image pairing already uses (14:11), applied to
	the new 6rem height, so the box still comfortably contains the image
	at its new size without clipping or the image overflowing past the
	box's own edges — a plain 60%-of-everything scale (this rule's own
	previous version) got the ratio right but the actual height wrong,
	since FAQ was never scaled by that same 60% to begin with.
*/
@media (max-width: 47.99em) {
	.card-grid-item__header-row {
		display: block;
		margin-block-end: var(--space-4); /* 16px, down from space-8 */
	}

	.card-grid-item__icon {
		width: 7.636rem; /* ~122px */
		margin-inline-end: 0;
		margin-block-end: var(--space-2); /* 8px */

		& img {
			height: 6rem; /* 96px */
		}
	}
}

/*
	The underline: a fixed part of the Standard Card's design, not an editor
	field. flex: 1 so it stretches to fill the row and the border spans the
	full remaining width next to the icon, not just the header text's own
	width.

	Fixed to --color-accent-bg rather than currentColor — worth knowing if
	a card's own Background is ever set to Accent: the underline would then
	match its own background almost exactly and read as barely-there rather
	than a visible rule, the one combination this fixed colour doesn't stay
	legible against.
*/
.card-grid-item__header {
	flex: 1;
	padding-block-end: var(--space-2);
	border-block-end: 3px solid var(--color-accent-bg);
}

/*
	.button is display: inline-flex, so text-align on this block-level p is
	what actually centers it — same mechanism One Column Content's own
	.columns__cta.is-centered relies on.

	margin-block-start: auto pins it to the bottom of .card-grid-item__body
	(a flex column) regardless of type or how much content precedes it —
	same technique Team's own .team-card__links row uses. .card-grid-item__body's
	own `gap` still guarantees a minimum space above it when there's no
	leftover height to push into (a full card with no free space left).
*/
.card-grid-item__cta {
	margin-block-start: auto;
	text-align: center;
}

.card-grid-item__text {
	margin: 0;

	/* The Text field's own toolbar now includes headings (full, not basic)
	   — .prose's own heading rules would otherwise set margin-block-start
	   too, floating a heading an editor adds away from whatever precedes
	   it in the same field. */
	& :is(h1, h2, h3, h4, h5, h6) {
		margin: 0;
	}

	& p {
		margin: 0 0 var(--space-5); /* 0 0 24px */
	}
}