/**
 * Pattern: CTA Cards — 3-Up  (patterns/cta-cards-3up.php)
 *
 * Figma H7 "Be a part of the largest rubber duck race in Florida!" (10:315,
 * 10:297-10:308, 10:371/10:377/10:380). Centered DynaPuff h2 above a row of
 * 3 pink (392x557) cards: photo (384x234, top radius 9) + title + copy +
 * yellow pill button. Card height is driven by CSS Grid's default
 * align-items:stretch (all 3 match the tallest card's natural content
 * height); the button sits a fixed 1.75rem below its own copy rather than
 * being auto-pushed to the card's bottom edge.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

.cta-cards-3up {
	padding-block: var(--dfd-section-pad);
}

/* ── Section-gap override — desktop only, PG1 rhythm ───────────────────────
 * The sitewide owl (.entry-content > * + *, global.css) gives every pair of
 * stacked sections --kd-section-gap (120px @desktop) of margin-top; this
 * section ALSO carries its own padding-top (--dfd-section-pad, ~100.9px
 * @1440) before the h2, so the two stack. The comp (frame 1:2) measures
 * 115px total from top-fundraisers's own bottom (10:276, y3839) to this
 * h2's top (10:315, y3954): 115 − 100.9 (this section's own padding-top,
 * left untouched — --dfd-section-pad is a shared token) = ~14px of margin
 * needed, not the owl's 120px. Mirrors split-what-is.css's own
 * gap-override selector shape (specificity beats the owl without
 * !important); note this section's real classname has no `dfd-` prefix. No
 * mobile comp exists, so only the desktop breakpoint is corrected.
 * Home-only by construction — a page reusing this pattern must re-check its gap. */
@media (min-width: 1024px) {
	.entry-content > .kd-section.cta-cards-3up {
		--dfd-cta-cards-3up-gap-top: 0.8825rem; /* ~14px — PG1 rhythm, see note above */
		margin-block-start: var(--dfd-cta-cards-3up-gap-top);
	}
}

/* ── Bottom-space override — desktop only, PG1 rhythm ──────────────────────
 * global.css's owl deliberately zeros every section's OWN trailing margin
 * (`.entry-content > .wp-block-group { margin-block-end:0 }`) so trailing
 * space must live in the last section's own padding-bottom, not a margin
 * that would collapse against the footer template part. This is the last
 * section before the footer: comp measures 143px from the card grid's own
 * bottom (10:297-10:308 area, y4688) to the footer top (10:386, y4831).
 * Longhand after the shorthand above, same selector → wins by source order
 * (no specificity trick needed) for the bottom half only; padding-top
 * (still --dfd-section-pad, fluid) is untouched.
 * Home-only by construction — a page reusing this pattern must re-check its gap. */
@media (min-width: 1024px) {
	.cta-cards-3up {
		padding-bottom: 8.9375rem; /* 143px — PG1 rhythm */
	}
}

/* ── Heading — centered, DynaPuff, one spec (--dfd-size-h2-section) ───────── */
.cta-cards-3up__heading {
	text-align: center;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(--dfd-size-h2-section);
	letter-spacing: var(--dfd-track-heading);
	line-height: 1.32; /* 66/50 — Figma two-line set */
	color: var(--kd-color-contrast);
	max-width: 60rem; /* 960px — Figma 10:315 two-line set (720px wrapped to 3 lines) */
	margin: 0 auto var(--kd-space-xl);
}

/* ── 3-up grid — fluid within the 1216px composition, 3 columns down to
     the 1024 breakpoint (cards shrink with the container, per spec).
     No !important needed below (same audit as gallery-grid.css/
     adopt-grid.css): this group renders `is-layout-flow` (a plain
     "default"-type group), not `is-layout-flex`/`is-layout-grid`, so
     core's layout-support display/gap rules — which only target
     `.is-layout-flex`/`.is-layout-grid` — never match it. The container's
     own margin only meets core's `:root :where(.is-layout-constrained) >
     * { margin-block: 24px 0px }` (top/bottom; this grid's parent section
     is constrained) and its left/right "auto" already matches what core's
     `:where(:not(.alignleft)...) { margin-left: auto !important;
     margin-right: auto !important }` forces anyway. Tied specificity,
     non-important, this stylesheet loads after core's — plain
     declarations win. Confirmed live on cta-tidy-test at 1440: 392px
     cards, 20px gap. ─────────────────────────────────────────────────── */
.cta-cards-3up__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kd-space-md);
	max-width: var(--kd-composition);
	margin: 0 auto;
}

/* Above the shrink range, lock cards to the literal Figma width (392px)
   instead of letting them track the flex/grid container's live width: the
   theme's global root padding is a vw-based clamp (theme.json), so on a
   viewport with a visible (non-overlay) scrollbar the available content
   box lands a few px under 1216px even at 1440/1920 — 1fr columns would
   then render ~388px instead of 392px. A fixed 1216px row centers with
   margin:auto and is allowed to bleed a few px into the padding gutter
   (never anywhere near the viewport edge), which keeps the card width
   exact where the spec calls for pixel-match. */
@media (min-width: 1280px) {
	.cta-cards-3up__grid {
		grid-template-columns: repeat(3, var(--kd-card-w));
		width: var(--kd-composition);
	}
}

/* No !important: zeroes the card's own margin-block against core's
   `:root :where(.is-layout-flow) > * { margin-block: 24px 0px }` (this
   grid is a plain is-layout-flow group) — tied (0,1,0) specificity, both
   non-important, this stylesheet loads after core's, so it wins. Without
   this the 2nd/3rd card would carry a stray 24px top margin on top of
   the grid's own gap. Confirmed live. */
.cta-cards-3up__grid > * {
	margin-block: 0;
	min-width: 0;
}

/* ── Card shell — pink, radius 12, 4px inset frame around the photo top ────
   P8-fix follow-up: this group's block layout moved from WP's native
   layout:"flex" (is-layout-flex) to plain layout:"default" — display:flex
   now comes from this class's own `display:flex` below, same technique
   as adopt-grid.css's P8-fix. That sidesteps core's `.is-layout-flex >
   :is(*, div) { margin: 0px; }` child-margin reset entirely and lets a
   real flex-grow + fixed-margin combo bottom-anchor the button at a
   CONSTANT inset from the card's bottom edge regardless of copy length
   (see .cta-cards-3up__text/.cta-cards-3up__btn-row) — the previous
   fixed `margin-top: 1.75rem !important` alone measured 40px inset for
   the Adopt/Sponsor cards but 66px for the shorter-copy Fundraise card. */
.cta-cards-3up__card {
	display: flex;
	flex-direction: column;
	background-color: var(--kd-color-pink);
	border-radius: var(--kd-radius-card);
	overflow: hidden;
	height: 100%;
	padding: 4px 4px 0; /* pink frame — image sits 4px inset (Figma 10:306-308 vs card 10:297-299) */
}

.cta-cards-3up__image {
	margin: 0;
	/* 9px — one-off from Figma (10:306/307/308), no matching --kd-radius token */
	border-radius: 9px 9px 0 0;
	overflow: hidden;
}

.cta-cards-3up__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 384 / 234;
	object-fit: cover;
	border-radius: inherit;
}

/* ── Body — title/copy/button, own flex column (see .cta-cards-3up__card's
     comment on why this is no longer WP's native is-layout-flex). ────────── */
.cta-cards-3up__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--kd-space-md) var(--kd-space-md) var(--kd-space-lg);
}

.cta-cards-3up__title {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.75rem; /* 28px — Figma h3-card */
	letter-spacing: 0.03em; /* .84px @28px ≈ 3% — matches --dfd-track-heading */
	line-height: 1.2;
	color: var(--kd-color-body);
	margin: 0 0 var(--kd-gap-tight);
}

/* ── Copy — P8-fix bottom-anchor mechanic, part 1 (see adopt-grid.css's
     .adopt-grid__text comment for the full derivation): `flex: 1 1 auto`
     makes this paragraph absorb ALL the leftover vertical space in the
     body's row-stretched box (CSS Grid's default align-items:stretch
     already matches every card in a row to the row's tallest card's
     height). For the row's own tallest-copy card there's no leftover to
     absorb, so this is a no-op and the fixed 28px gap below lands
     Figma-exact; for shorter-copy cards the extra height is absorbed
     invisibly inside this paragraph's own box, pushing the button to the
     SAME fixed inset from the card bottom as every other card in the
     row. */
.cta-cards-3up__text {
	flex: 1 1 auto;
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.444; /* 26/18 */
	color: var(--kd-color-body);
	margin: 0;
}

/* ── Button row — P8-fix bottom-anchor mechanic, part 2: a literal 1.75rem
   (28px) margin-top (Figma copy→button gap, 10:315 area, measured ~27px),
   NOT margin-top:auto — auto would eat whatever space .cta-cards-3up__text
   left it (0, since the copy already absorbed it above), collapsing the
   gap to 0 on every card. The fixed margin guarantees the Figma-exact
   28px gap survives on every card, while .cta-cards-3up__text's
   flex-grow (above) is what makes the button's own BOTTOM position
   constant across the row regardless of copy length. No !important
   needed: this group is plain layout:"default" now (see
   .cta-cards-3up__card), so core's is-layout-flex child-margin reset
   never targets it. */
.cta-cards-3up__btn-row {
	margin-top: 1.75rem;
}

/* ── Tablet (768–1023.98px) — 2-up, third card centered on its own row ───── */
@media (max-width: 1023.98px) {
	.cta-cards-3up__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cta-cards-3up__grid > *:nth-child(3) {
		grid-column: 1 / -1;
		max-width: var(--kd-card-w);
		/* No !important: nothing in core's layout-support CSS sets
		   margin-inline on a plain is-layout-flow child (only
		   `.aligncenter` children get a core auto-margin rule, which
		   doesn't apply here) — confirmed live at 900px: the card sits
		   centered (177.8px clear on each side of a 747.6px track). */
		margin-inline: auto;
	}
}

/* ── Mobile (≤767.98px) — 1-up ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.cta-cards-3up__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--kd-card-w);
	}

	.cta-cards-3up__grid > *:nth-child(3) {
		max-width: none;
	}

	/* No font-size override here: --dfd-size-h2-section already clamps
	   down to a 32px floor on narrow viewports on its own — re-declaring a
	   size per partial is the anti-pattern theme-conventions.md names
	   explicitly (caught in the P6/about-card gate, 2026-09-10). */
	.cta-cards-3up__heading {
		line-height: 1.2;
	}
}