/**
 * Pattern: About Card — KID & FCI  (patterns/about-card.php)
 *
 * Figma "About KID & FCI" section, Adopt a Duck page (1:145). Purple
 * (1216x496, radius 12) card split into a text column (yellow DynaPuff
 * 50px h2, white 18/26 body, yellow pill button) and a photo column
 * (535x366, radius 12). Figma nodes 12:905-12:908, 12:945/12:946, 12:906.
 * The card sits directly on the page's lavender background — the purple
 * is confined to the card itself, this is NOT a full-bleed colour band.
 *
 * 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, per the
 * project's "no mobile frame" convention (flag for designer review).
 *
 * Layout choice: both `.about-card__card` and `.about-card__text` use the
 * group block's plain "default" layout (is-layout-flow), NOT WordPress's
 * native flex/grid layout support — that support resets child margins and
 * injects its own blockGap variable (the documented is-layout-flex trap
 * from the P3/P5/P8 handoffs), which this pattern avoids entirely by
 * driving `display:flex` from this partial's own classes instead. Vertical
 * rhythm is therefore plain margins below, no !important fighting needed.
 */

/* .about-card (the outer wrapper) intentionally carries NO rule and NO
   vertical padding. It's a PLAIN section — transparent bg, the purple is
   confined to .about-card__card below — so per global.css's
   `.kd-section { padding-block: 0 }` its only spacing is the
   `--kd-section-gap` owl selector (`.entry-content > * + *`) once this
   pattern sits on a real page. The comp's 58px gap between the header and
   the card (card top y254, header height 196) is a PAGE-level concern —
   this is the first section on the Adopt a Duck page (PG2), and PG2's
   assembly is what should own that gap, not this pattern. Round-1 review
   kickback: a prior version set padding-top/padding-bottom here,
   duplicating the owl's job — removed. Any padding the CARD itself needs
   lives on .about-card__card's children (91px/56px etc. below) — kept. */

/* ── Card shell — purple, radius 12, centred on the content column ───────── */
.about-card__card {
	display: flex;
	background-color: var(--kd-color-secondary);
	border-radius: var(--kd-radius-md);
	max-width: var(--kd-composition);
	margin-inline: auto;
}

/* ── Text column — LEFT. Fixed 618px basis (Figma: photo starts at 618px
     from the card's left edge, so 618 is the true column boundary), but
     shrink:1 (not the P8/adopt-grid grow:0 shrink:0 pattern) so it narrows
     gracefully at 1024 instead of overflowing — this is what gives the
     "two columns, narrower" 1024 behaviour without a dedicated media query.
     Vertical placement: top padding is 91px (Figma: h2 top inset, verified
     exact). Bottom padding is 84px, NOT the same 91 — Figma's raw box math
     is symmetric (h2-top-inset 91 = card-height 496 − button-bottom-inset
     91) only when the copy→button gap is its own raw 29px; this pattern
     uses the brief's specified 36px gap instead (7px more), so bottom
     padding drops by that same 7px (91−7=84) to keep the card's total
     height at the spec's 496px while both the 91px top inset AND the 36px
     button gap stay exact — verified via computed getBoundingClientRect
     (card height 496.0px with this value, was 503.3px at a symmetric 91). */
.about-card__text {
	flex: 0 1 38.625rem; /* 618px */
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 5.6875rem 0 5.25rem 3.5rem; /* 91px top, 84px bottom, 56px left — Figma 12:907 x168 */
}

.about-card__heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(
		--dfd-size-h2-section
	); /* clamp 32px → 50px, one spec sitewide */
	/* 60/50 — Figma 12:907 sets an explicit line-height, unlike every other
	   h2-section instance which uses "normal". Local override, not a new
	   token. */
	line-height: 1.2;
	/* 5px (10%) — the ONLY heading in the whole design that isn't the
	   standard 0.03em (3%) DynaPuff tracking (--dfd-track-heading). Figma
	   12:907 sets this explicitly; matched literally per the brief rather
	   than normalised to the shared token. Left as a literal px (not em):
	   --dfd-size-h2-section clamps down to 32px on narrow viewports, and a
	   fixed 5px grows to ~16% relative tracking at that size instead of
	   staying at 10% — accepted as-is (design-diff round 1), since this is
	   already a Figma-literal one-off with no mobile frame to check against. */
	letter-spacing: 5px;
	color: var(--kd-color-accent); /* yellow */
	max-width: 35.3125rem; /* 565px — Figma 12:907 text box */
	margin: 0 0 1.3125rem; /* 21px — Figma 12:907 bottom (405) → 12:908 top (426) */
}

.about-card__body {
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.444; /* 26/18 */
	color: var(--kd-color-base); /* white */
	max-width: 31.5625rem; /* 505px — Figma 12:908 text box */
	margin: 0;
}

/* 36px below the copy (brief-specified gap; Figma's own text-box arithmetic
   reads a few px tighter — see the pattern's handoff note). */
.about-card__buttons {
	margin-top: 2.25rem;
}

/* Button inherits the theme's default wp-element-button style (yellow
   pill, --kd-btn-*) — no override here, per the "never restyle a button in
   a pattern partial" rule. */

/* ── Photo column — RIGHT. flex:1 auto absorbs whatever the text column's
     fixed-ish basis leaves (598px at 1440: 1216 − 618). Padding reproduces
     the photo's exact inset (61px top, 63px right — Figma 12:906 x730/y315
     within the 730-112=618 boundary), and the image fills the remainder
     (598 − 63 = 535px, an exact match). No bottom padding: the row's
     stretch behaviour gives this column the full 496px card height, and
     the image (366px tall) simply sits top-anchored inside it, leaving the
     unused space below — same effect as the card's own 69px bottom inset
     on the photo (496 − 61 − 366 = 69), achieved for free. ─────────────── */
.about-card__photo {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
	padding: 3.8125rem 3.9375rem 0 0; /* 61px top, 63px right */
}

.about-card__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 535 / 366;
	object-fit: cover;
	border-radius: var(--kd-radius-md);
}

/* ── Tablet (≤1024px) — still two columns (organic flex-shrink above
     handles the narrowing), just tighten the outer card's side reach so it
     never presses the viewport edge. ───────────────────────────────────── */
@media (max-width: 1024px) {
	.about-card__text {
		padding-left: 2rem;
	}

	.about-card__photo {
		padding-right: 2rem;
	}
}

/* ── Mobile (≤768px) — stack: h2, copy, button, photo (photo last — this
     is already the DOM order, no `order` needed). Card padding shrinks.
     Breakpoint set to 800px, not a literal 768px: self-verify at the
     project's fixed 768px test width measured window.innerWidth as 769px
     (browser chrome/scrollbar accounting), so a plain 768px query missed
     the 768 test width entirely — 800px clears that with room to spare
     while staying well under the 1024px two-column floor. ─────────────── */
@media (max-width: 800px) {
	.about-card__card {
		flex-direction: column;
	}

	.about-card__text {
		flex-basis: auto;
		padding: 2.5rem 1.5rem 2rem;
	}

	/* No font-size (or line-height — already 1.2 at the base rule) override
	   here (round-1 review kickback): the shared --dfd-size-h2-section
	   token already clamps down to 32px on narrow viewports on its own —
	   re-declaring a size per partial is the named anti-pattern in
	   theme-conventions.md ("one spec, referenced by every pattern; do not
	   re-declare per partial"). Only max-width is a real mobile-specific
	   override (base rule caps it at 565px for the desktop two-column
	   layout; stacked mobile needs the full column width instead). */
	.about-card__heading {
		max-width: none;
	}

	.about-card__body {
		max-width: none;
	}

	.about-card__photo {
		padding: 0 1.5rem 1.5rem;
	}
}