/**
 * Pattern: Adopt Grid — 4-Up ×2  (patterns/adopt-grid.php)
 *
 * Figma "Every Quack Counts!" section, Adopt a Duck page (1:145). Centered
 * DynaPuff h2 (12:855) + intro paragraph (12:856) above 8 purple
 * (289×435, radius 12) cards, 4-up × 2 rows: photo (281×203, top radius 9,
 * 4px inset) + title (DynaPuff 24px white) + copy (18/26 white) + underlined
 * "Donate $X" text link (DynaPuff 20px white). Figma nodes 12:857–12:904.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 * No mobile/tablet frame exists for this page — the 1024/768/375 behaviour
 * below is derived from the desktop design + the token spec (composition
 * math: at 1024 the 4-up card would render ~202px, under the ~220px legibility
 * floor, so it drops to 2-up a breakpoint early instead of shrinking further;
 * flag for designer review per the project's "no mobile frame" convention).
 *
 * ── PG2: gradient band background (was a plain section, converted here) ──
 * Figma's lower-half node (12:852, frame 1:145 y1182–2433, 1251px tall)
 * paints this section as a full-bleed gradient/skyline band that runs flush
 * to the footer — the SAME gradient PNG as the hero/top-fundraisers (D21,
 * hero-campaign.css; figma-analysis §1.5 "Hero + Top fundraisers + Adopt
 * lower half use the same gradient PNG"), reusing the existing
 * assets/images/hero-bg*.jpg/.webp files verbatim, no new export. Technique
 * copied from hero-campaign.css/top-fundraisers.css: CSS background-image +
 * image-set() on this plain full-bleed group (already `alignfull`, not a
 * `wp:cover` block — fixed theme asset, not a media-library upload, per the
 * P5 gate rule), background-color + a second lower gradient layer as the
 * real 404 fallback (not just an @supports upgrade), mobile/tablet crop at
 * `auto 100%` / 80% bottom position (same asset, same aspect ratio, same
 * "tall narrow stacked band" case as the two siblings — reused, not
 * re-derived). This pattern is otherwise unrelated to the hero/top-
 * fundraisers rhythm; the shared background is a Figma-level asset reuse,
 * not a structural coupling.
 */

.adopt-grid {
	position: relative;
	background-color: var(
		--kd-color-pink
	); /* solid paint before any layer resolves */
	background-repeat: no-repeat;
	background-size: cover, cover;
	background-position:
		center bottom,
		center bottom; /* bottom-aligned per the comp (12:852) */
	background-image:
		url("../../images/hero-bg-1440.jpg"),
		linear-gradient(
			180deg,
			var(--kd-color-pink) 0%,
			var(--kd-color-surface) 100%
		);
	/* 68px (Figma h2 top 1250 − band top 1182) above the h2 (which itself
	   carries margin-top:0, see .adopt-grid__heading below, so this padding
	   is the full offset with nothing to net out); 105px (band bottom 2433
	   − grid bottom 2328) below the grid, which also carries margin:0 on
	   its own bottom edge (.adopt-grid__grid below) — so this is likewise
	   the full offset to the section's own border-box bottom. The band
	   must be flush with the footer: `.entry-content > .wp-block-group`
	   already zeroes trailing margin sitewide (global.css), so no
	   additional override is needed here for that.
	   Enqueue-order note (PG2 gate kickback): global.css's `.kd-section {
	   padding-block: 0 }` and this rule are tied on specificity (0,1,0
	   each), and `padding-block-start`/`-end` resolve to the same physical
	   box edges as `padding-top`/`-bottom` here (horizontal-tb, ltr) — the
	   cascade treats logical and physical declarations for the same edge
	   as one bucket, so the tie comes down to source order, not a
	   shorthand/longhand override. Every pattern stylesheet is a hard
	   dependency of `kd-global` (inc/enqueue.php's glob loop registers each
	   `patterns/*.css` with `array('kd-global')`), so this file always
	   prints after global.css in `<head>` and wins the tie — confirmed
	   live (padding-top/bottom compute to the values below, not 0). */
	padding-top: 4.25rem; /* 68px */
	padding-bottom: 6.5625rem; /* 105px */
}

@supports (background-image: image-set(url("a.jpg") 1x)) {
	.adopt-grid {
		background-image:
			image-set(
				url("../../images/hero-bg-1440.webp") 1x type("image/webp"),
				url("../../images/hero-bg.webp") 2x type("image/webp"),
				url("../../images/hero-bg-1440.jpg") 1x type("image/jpeg"),
				url("../../images/hero-bg.jpg") 2x type("image/jpeg")
			),
			linear-gradient(
				180deg,
				var(--kd-color-pink) 0%,
				var(--kd-color-surface) 100%
			);
	}
}

/* Mobile/tablet crop fix — identical fix to hero-campaign.css's round-2
   correction / top-fundraisers.css's reuse of it (see hero-campaign.css for
   the full derivation): `cover` at a tall narrow stacked band crops most of
   the skyline's width; `auto 100%` fills the band's full height (matching
   the gradient layer beneath, so no exposed-gradient seam is possible) with
   the empirically-verified 80% position keeping the ferris wheel on-screen.
   Same asset, same aspect ratio, same band type — reused, not re-derived. */
@media (max-width: 1023.98px) {
	.adopt-grid {
		background-size:
			auto 100%,
			cover;
		background-position:
			80% bottom,
			center bottom;
	}
}

/* ── Section-gap override — desktop only, PG2 rhythm ───────────────────────
 * The sitewide owl (.entry-content > * + *, global.css) gives every pair of
 * stacked sections --kd-section-gap (120px @desktop) of margin-top. The
 * comp (frame 1:145) measures 75px from pillars-3up's own bottom (y1107) to
 * this band's top (12:852, y1182). Mirrors top-fundraisers.css's own
 * gap-override selector shape (specificity beats the owl without
 * !important). No mobile comp exists, so only the desktop breakpoint is
 * corrected.
 * Adopt-only by construction — a page reusing this pattern must re-check
 * its own gap to whatever precedes it. */
@media (min-width: 1024px) {
	.entry-content > .kd-section.adopt-grid {
		--dfd-adopt-grid-gap-top: 4.6875rem; /* 75px — PG2 rhythm */
		margin-block-start: var(--dfd-adopt-grid-gap-top);
	}
}

/* ── Inner wrapper — P8-fix: the ONE box that owns composition-width +
     centering for the heading, intro AND grid together, so all three
     share exactly one left edge at every viewport. Previously the
     heading/intro/grid were THREE separate direct children of the outer
     "constrained"-layout group, each independently sized + centered by
     WP's own `.is-layout-constrained > :where(...) { max-width: ...;
     margin-inline: auto !important }` rule — the heading/intro (Figma
     text-box max-widths, 787px/665px) and the grid (--kd-composition,
     1216px) each centered against their OWN width. That coincided at
     1440 (measured 110px for all three) but diverged at wider viewports
     since two different-width boxes both centered on the same midpoint
     do NOT share a left edge — measured 201px apart at 1920 (h2/intro
     144px, grid/about-card/pillars 345px). Fix: give the heading/intro/
     grid ONE shared parent instead (this wrapper) and make IT the sole
     direct child of the constrained outer group — the exact same
     mechanism about-card.php/pillars-3up.php already use for their own
     sole `__card`/`__grid` child. No CSS needed here at all: WP's own
     per-child rule sizes this box to contentSize (76rem, theme.json) and
     centers it with `margin-inline: auto !important` — contentSize and
     --kd-composition both resolve to 1216px, so this lands at the same
     width the grid always used. Deliberately NOT overridden with a
     redundant width/margin rule here — one source of truth. */

/* ── Heading — LEFT-aligned on the wrapper, DynaPuff, one spec
     (--dfd-size-h2-section). Round-1 design-diff: this section is NOT
     centred like cta-cards-3up/steps-band — Figma 12:855 sits flush at the
     column's left edge (x116), not centred across it. No !important
     needed post P8-fix: the outer group is layout:"default" now, so
     core's constrained-layout child-centering rule never matches this
     element — a plain margin-inline:0 is uncontested. ────────────────── */
.adopt-grid__heading {
	text-align: left;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(--dfd-size-h2-section);
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-contrast);
	max-width: 49.1875rem; /* ~787px — Figma 12:855 text box */
	margin-top: 0;
	margin-bottom: var(--kd-gap-tight);
	margin-inline: 0;
}

/* ── Intro paragraph — LEFT-aligned, Helvetica Neue body (same fix) ──────── */
.adopt-grid__intro {
	text-align: left;
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.444; /* 26/18 */
	color: var(--kd-color-body);
	max-width: 41.5625rem; /* 665px — Figma 12:856 text box */
	margin-top: 0;
	margin-bottom: var(--kd-space-xl);
	margin-inline: 0;
}

/* ── 4-up grid — fills the inner wrapper's own width (which already caps
     at the 1216px composition and centers itself); the grid no longer
     needs its own max-width/margin:auto now that .adopt-grid__inner does
     that job for the heading/intro/grid as one unit (P8-fix). Row gap
     (34px, Figma 1893 − 1424 − 435) is a literal one-off — no matching
     --kd-space token — kept distinct from the 20px column gap
     (--kd-space-md, the shared card-grid gap used sitewide). No
     !important needed: this element renders `is-layout-flow` (a plain
     "default"-type group), not `is-layout-flex`/`is-layout-grid`, so
     core's layout-support display/gap rules never match it. ──────────── */
.adopt-grid__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--kd-space-md);
	row-gap: 2.125rem; /* 34px — Figma row gap, one-off */
	width: 100%;
}

/* No !important: this zeroes the card's own margin-block against core's
   `:root :where(.is-layout-flow) > * { margin-block: 24px 0px }` (the
   generic owl gap between grid children, since this grid is a plain
   is-layout-flow group) — tied (0,1,0) specificity, both non-important,
   and this stylesheet loads after core's, so it wins on source order.
   Without this the 2nd/3rd/4th card in each row would carry a stray 24px
   top margin on top of the grid's own row-gap. Confirmed live. */
.adopt-grid__grid > * {
	margin-block: 0;
	min-width: 0;
}

/* ── Card shell — purple, radius 12, 4px inset frame around the photo top ──
   P8-fix: 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 instead of core's
   layout-support CSS. That sidesteps core's `.is-layout-flex > :is(*,
   div) { margin: 0px; }` child-margin reset entirely (no more chasing it
   with !important on every child, see .adopt-grid__title/__link-wrap
   below), and — the actual point of this round's fix — it lets a genuine
   flex-grow + fixed-margin combo on the body's children bottom-anchor the
   donate link at a CONSTANT inset from the card's bottom edge regardless
   of copy length (see .adopt-grid__text/.adopt-grid__link-wrap). Card
   height target ≈435-438px @1440 (Figma 12:857) comes from the image
   (203) + body padding-top (34) + title/copy/link stack + body
   padding-bottom (34, tuned to land there). */
.adopt-grid__card {
	display: flex;
	flex-direction: column;
	background-color: var(--kd-color-secondary);
	border-radius: var(--kd-radius-card);
	overflow: hidden;
	height: 100%;
	padding: 4px 4px 0; /* purple frame — image sits 4px inset (Figma 289 card vs 281 photo) */
}

.adopt-grid__image {
	margin: 0;
	/* 9px — one-off from Figma (12:881-888), no matching --kd-radius token
	   (same one-off as cta-cards-3up's photo radius). */
	border-radius: 9px 9px 0 0;
	overflow: hidden;
}

.adopt-grid__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 281 / 203;
	object-fit: cover;
	border-radius: inherit;
}

/* ── Body — title/copy/link, own flex column (see .adopt-grid__card's
     comment on why this is no longer WP's native is-layout-flex). Image→
     title gap is body's own padding-top (34px, Figma 1664 − 1630); bottom
     padding is 34px (Figma card-bottom pad, P8-fix — was 32px/2rem). ──── */
.adopt-grid__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 2.125rem var(--kd-space-md) 2.125rem; /* 34px top/bottom (Figma), 20px sides */
}

.adopt-grid__title {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.5rem; /* 24px — Figma h3-adopt */
	letter-spacing: var(--dfd-track-heading);
	line-height: 1.2;
	color: var(--kd-color-base); /* white */
	margin: 0 0 var(--kd-gap-tight);
}

/* ── Copy — P8-fix bottom-anchor mechanic, part 1: `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
     makes every card in a row match the row's tallest card's height, so
     "leftover space" is real and differs per card). For the row's own
     tallest-copy card there's no leftover to absorb (its natural content
     already fills the body), so this is a no-op there and the fixed 24px
     gap below lands untouched — Figma-exact. For shorter-copy cards
     (measured: $250/$500 landed the link 90px above the card bottom vs
     35px for the long-copy cards, before this fix) the extra height is
     absorbed invisibly inside this paragraph's own box (no visible text
     reflow — a <p> has no vertical-align concept, so growing its box
     below the last line of text is undetectable), which pushes the link
     down to the SAME fixed inset from the card bottom on every card in
     the grid. See .adopt-grid__link-wrap for part 2. ───────────────────── */
.adopt-grid__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-base); /* white */
	margin: 0;
}

/* ── Donate link — text link, NOT a button. DynaPuff 20px white, underlined.
   P8-fix bottom-anchor mechanic, part 2: a literal 24px margin-top (Figma
   gap ~23px, 1804 − 1781), NOT margin-top:auto — auto would eat whatever
   space .adopt-grid__text left it (0, since text already absorbed it
   above), collapsing the copy→link gap to 0 on every card. The fixed
   margin guarantees the Figma-exact 24px gap survives on every card,
   while .adopt-grid__text's flex-grow (above) is what makes the link's
   own BOTTOM position constant across the row regardless of copy length —
   the two rules divide the job. No !important needed: this group is
   plain layout:"default" now (see .adopt-grid__card), so core's
   is-layout-flex child-margin reset never targets it. */
.adopt-grid__link-wrap {
	margin-top: 1.5rem;
}

/* Specificity note: global.css's shared `.entry-content a:not(.wp-element-button):not([class*="kd-btn"])`
   rule (3 classes + the `a` type selector) outranks a single `.adopt-grid__link`
   class, which repainted this link navy instead of white during self-verify.
   Can't edit global.css (shared file) from this pattern, so the fix stays
   local. Round-1 cleanup: self-repeating the SAME class 4× beats an
   ancestor-chain selector — identical specificity (4 classes), but it no
   longer depends on this card's DOM nesting staying exactly 3 levels deep. */
.adopt-grid__link.adopt-grid__link.adopt-grid__link.adopt-grid__link {
	display: inline-block;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.25rem; /* 20px — Figma sets 19.5px, spec calls for 20 */
	letter-spacing: var(--dfd-track-heading);
	line-height: normal;
	color: var(--kd-color-base); /* white */
	text-transform: capitalize;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.adopt-grid__link.adopt-grid__link.adopt-grid__link.adopt-grid__link:hover,
.adopt-grid__link.adopt-grid__link.adopt-grid__link.adopt-grid__link:focus {
	color: var(--kd-color-base);
	text-decoration-thickness: 2px;
}

/* ── Tablet (≤1024px) — 2-up. Composition math at a 1024px viewport: gutter
     = 7.64% × 1024 ≈ 78.3px/side → available width ≈ 1024 − 156.6 ≈ 867.4px
     → 4-up card = (867.4 − 3×20) ÷ 4 ≈ 202px. Live measurement reads
     ~198.4px (the ~3.5px gap is the vertical scrollbar eating into the
     vw-based gutter clamp — same effect P5 documented for its own card
     width). Either number is under the ~220px legibility floor, so this
     pattern breaks to 2-up AT 1024 rather than the sitewide 1023.98 nav
     breakpoint — the 4-up only earns its keep again above ≈1109px viewport
     (same formula solved for card ≥220px), which sits between this
     project's fixed 1024/1440 test widths, hence the earlier break here. ── */
@media (max-width: 1024px) {
	.adopt-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Mobile (≤767.98px) — 1-up ────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.adopt-grid__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--kd-card-w);
		/* P8-fix: the grid no longer gets margin:auto from its own base
		   rule (that job moved to .adopt-grid__inner, which is wider than
		   a single mobile card) — needs its own centering once max-width
		   caps it below the inner wrapper's full width. */
		margin-inline: auto;
	}

	/* 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). */
	.adopt-grid__heading {
		line-height: 1.2;
	}
}