/*
	A dedicated grid/card, not .card-grid or .grid-3 — same reasoning Benefits
	already gives for not reusing .card: these cards end in a trailing
	Download button, not a stretched full-card link, so they don't fit
	.card's shape; and a fixed three-column count shouldn't be coupled to
	Three Column Content's own .grid-3 CSS, which a future change to either
	one could then silently affect.
*/
.resources-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.resources-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.resource-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dark-card-border-color);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	overflow: hidden;
}

/*
	Dark card treatment — same tokens/reasoning as .benefit (blocks/benefits/
	benefits.css): a specific requested gradient + text colour, neither
	Style-Guide-editable brand colours, so they live in tokens.css as their
	own tokens. Scoped off .resource-card--connect on purpose — that card is
	deliberately a different KIND of card (its own Accent background, see
	its own rule below), not one more resource. The border itself (above) is
	shared by every card in this block, connect included, not part of this
	dark-only treatment.
*/
.resource-card:not(.resource-card--connect) {
	background: var(--dark-card-gradient);
	/* Inherited by the title and body text below — same "state it
	   explicitly, don't rely on the surrounding section's own light/dark
	   pairing" reasoning as .benefit's own colour. */
	color: var(--dark-card-fg);
}

/*
	Explicit, not inherited — layout.css's `.bg-default h1..h6 { color:
	var(--color-heading); }` rule targets the bare <h3> element directly,
	and an explicit rule on an element always beats an inherited value
	regardless of specificity — the exact issue already hit and fixed this
	way for .benefit__header. Only fires on a Default-background section, so
	it's easy to miss without this override.
*/
.resource-card:not(.resource-card--connect) .resource-card__title {
	color: var(--dark-card-fg);
}

/*
	No aspect-ratio/object-fit: cover — the image shows at its own natural
	proportions instead of a hard crop, capped at --resource-media-max-height
	(200px) and centred both ways within a 24px (--space-5) padded box, the
	same "inline, not full-bleed" treatment Banner's own image and Accordion's
	own media column already use (see their own docblocks). The box's total
	height is that cap plus the padding on each side, so a short image, a
	tall one, the no-image fallback icon below, and the Connect card's own
	ZOOK icon (resources.php) all occupy the exact same space in a row —
	shared by every one of them via .resource-card__media, not a class
	specific to real resource images.

	No background-color of its own — the card's own background (the dark
	gradient below, or the Connect card's Accent colour) shows through
	behind the image uniformly, rather than a lighter muted box sitting
	behind just this area.
*/
.resource-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5); /* 24px */
	height: calc(var(--resource-media-max-height) + (var(--space-5) * 2));

	& img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: var(--resource-media-max-height);
	}
}

/*
	Image Fit override — the same concept as Options'/Products' own
	field_fpi_fit (components.css, .card__media img.has-fit-contain), but
	this block reads its OWN separate field_resource_image_fit instead
	(zk_render_image()'s 'respect_fit' opt-in, inc/acf-focal-point.php; see
	that field's own instructions, group_resource_details.json, for why it
	needs a different field rather than the shared one). Contain — showing
	the whole image uncropped, centred in a padded box — is this block's
	own pre-existing base rule above, unconditionally, since most resources
	are a screenshot of a document cover (portrait) where cropping would
	cut off real content. So it's Cover that needs the override here, not
	Contain — the inverse of Options'/Products' own default. Drops the
	padding and lets the image fill the exact SAME total box height
	(--resource-media-max-height + the padding this removes) edge to edge
	instead, so a row mixing a Cover card and a Contain card still lines up
	— same "keep the box uniform, let content fill differently" reasoning,
	just applied the other way around.

	Two classes: resources.php adds has-fit-cover to THIS wrapping element
	itself (removes the padding a Cover image doesn't want) and
	zk_render_image() adds it to the <img> separately (actually sets
	object-fit) — the wrapper and the image need different overrides, so
	one shared class on each does its own half of the job.
*/
.resource-card__media.has-fit-cover {
	padding: 0;
}

.resource-card__media img.has-fit-cover {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

/* Same total height as .resource-card__media above, so the no-image state
   occupies the same space in a row rather than collapsing. */
.resource-card__media-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(var(--resource-media-max-height) + (var(--space-5) * 2));
	color: var(--color-text-muted);

	& svg {
		width: 3rem;
		height: 3rem;
	}
}

.resource-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-3);
	padding: var(--space-5);
	padding-block-end: var(--space-6); /* 32px, overrides the shorthand's own 24px on this side only */
}

.resource-card__title {
	margin: 0;
}

/* .resource-card__body's own flex `gap` (12px) already covers this pair
   like every other adjacent pair in the column — this adds the remaining
   20px on top, only when a title is immediately followed by text, to reach
   the requested 32px header-to-text gap specifically without changing the
   text-to-button gap that shares the same flex `gap` value. */
.resource-card__title + .resource-card__text {
	margin-block-start: calc(var(--space-6) - var(--space-3)); /* 32px total */
}

/* Explicit body-copy styling — matches <body>'s own defaults (base.css)
   rather than leaving it to inherit silently, the same "state it outright"
   call this session already made for .benefit__text. font-size/line-height
   now match Options'/Benefits' own card text (var(--card-text-font-size),
   20px, and var(--line-height-prose), 1.5) by request, so card copy reads
   the same size and style across all three blocks — was var(--prose-font-
   size)/var(--line-height-body) (24px/1.6) before. */
.resource-card__text {
	font-family: var(--font-body);
	font-size: var(--card-text-font-size);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-prose);
}

/* Pushes the button to a consistent bottom position across a row of cards
   with different summary lengths — the grid row's own default stretch is
   what gives each .resource-card the extra height for this to push into.
   Same trick as .benefit__button in blocks/benefits/benefits.css. 32px
   gap above the button (was 8px), by request — margin-block-start: auto
   still absorbs any EXTRA leftover space beyond that, so this is the
   guaranteed minimum gap, not a fixed one. Also applies to the Connect
   card's own button below (its own override only zeroes margin-block-
   start, not this padding), for the same consistent breathing room. */
.resource-card__button {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block-start: auto;
	padding-block-start: var(--space-6);
}

/*
	The Connect card: styled distinctly so it reads as a different KIND of
	card, not just one more resource — but structurally the SAME shape as
	every other card now (its own .resource-card__media up top, its own
	.resource-card__body below, left-aligned) rather than one centred flex
	column of its own — so its content starts at the same vertical position
	as the rest of the row and its button gets pushed to the same consistent
	bottom position via .resource-card__button's own margin-block-start:
	auto (no override needed here any more). Accent is this theme's own
	semantic token for exactly this ("buttons and Accent sections" — see
	"Colour token names are SEMANTIC" in CLAUDE.md), not a one-off colour
	choice.

	--section-bg / --section-fg still resolve to the flat Accent colours
	(not the gradient below) because the button inside is rendered with the
	button--outline modifier (resources.php) — its own hover state inverts
	against these two custom properties (components.css), the same "invert
	against the section, not currentColor" mechanism every .bg-* class
	already provides, and that mechanism needs a flat colour to invert to,
	not a gradient. The default (non-outline) .button is itself
	accent-coloured, so on an accent card it would render invisibly —
	accent-on-accent, no visible edge. color here is inherited down through
	.resource-card__media/__body/__text with no extra rule needed — the
	title is the one exception, overridden separately below.

	background is its own gradient (--connect-card-gradient, tokens.css),
	not --section-bg — same "background, not just background-color"
	shorthand the dark cards use for their own gradient above, so this card
	reads as a different KIND of card (its own light/teal gradient) rather
	than one more dark one.
*/
.resource-card--connect {
	--section-bg: var(--color-accent-bg);
	--section-fg: var(--color-accent-fg);
	background: var(--connect-card-gradient);
	color: var(--section-fg);
}

/* Title colour, by request: Dark BG's own token (var(--color-dark-bg)) used
   here as a foreground colour against the card's own Accent background, not
   its usual role as a section background — reads as a strong, deliberate
   contrast against Accent rather than the lighter --section-fg the rest of
   the card's text uses. */
.resource-card--connect .resource-card__title {
	color: var(--color-dark-bg);
}