/**
 * Pattern: Pillars — 3-Up  (patterns/pillars-3up.php)
 *
 * Figma "Adopt a Duck" page (1:145), y784-1107. Three navy (392x323,
 * radius 10) cards: Foster Care (12:913/914/915), Family and
 * Community-Based Services (12:853/910/912), Early Childhood Education
 * (12:854/909/911). Title DynaPuff 26px white at +35/+33 from the card's
 * top-left; bullet list Helvetica Neue 18/26 white at +22/+106, real disc
 * markers with a 27px marker-to-text indent (get_design_context's own
 * Tailwind export on 12:915/12:912 used `list-disc` + `ms-[27px]` per
 * <li> — reproduced here as ul { padding-left: 27px }, the plain-CSS
 * equivalent).
 *
 * Card height is NOT set explicitly — CSS Grid's default
 * align-items:stretch on .pillars-3up__grid makes every card match the
 * row's tallest natural-content height (Foster Care's, the longest list),
 * so shorter cards (Family, Early Childhood) simply show more empty
 * bottom space, exactly like the comp screenshot — same technique as
 * cta-cards-3up's card height.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* Plain wrapper — no vertical padding of its own (global.css's
   `.kd-section { padding-block: 0 }`); these cards ARE the visual band. */

/* Gap to the About card (P6) above: the sitewide owl selector
   (`.entry-content > * + *`) would otherwise apply the desktop
   `--kd-section-gap` (120px) between two stacked plain .kd-section
   groups, but the comp measures this specific gap at 34px (About card
   bottom y750 -> pillars top y784). Confirmed live on a composed test
   page (about-card + pillars-3up stacked): default owl gap rendered
   120px, so the override below is needed, not optional. Scoped to
   desktop (>=1024px, matching the about-card/split-what-is precedent for
   this project) and selector-scoped like split-what-is's own top-gap
   override (.entry-content > .kd-section.<slug>, (0,3,0) specificity —
   beats the owl's (0,1,0) without !important). No mobile/tablet frame
   exists for this page, so 768/375 keep the system default (96px/64px). */
@media (min-width: 1024px) {
	.entry-content > .kd-section.pillars-3up {
		--dfd-pillars-3up-gap-top: 2.125rem; /* 34px */
		margin-block-start: var(--dfd-pillars-3up-gap-top);
	}
}

/* ── 3-up grid — fluid within the 1216px composition, shrinking with the
     container down to the 1024 breakpoint, same approach as
     cta-cards-3up/adopt-grid. ─────────────────────────────────────────── */
.pillars-3up__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kd-space-md) !important; /* 20px */
	max-width: var(--kd-composition); /* 1216px */
	margin: 0 auto !important;
}

/* Lock to the literal Figma card width above the shrink range — same
   root-padding/scrollbar rationale documented in cta-cards-3up.css: a
   fluid 1fr column lands a few px under 392 at 1440/1920 otherwise. */
@media (min-width: 1280px) {
	.pillars-3up__grid {
		grid-template-columns: repeat(3, var(--kd-card-w));
		width: var(--kd-composition);
	}
}

.pillars-3up__grid > * {
	margin-block: 0 !important;
	min-width: 0;
}

/* ── Card shell — navy, radius 10, top-anchored content ───────────────── */
.pillars-3up__card {
	background-color: var(--kd-color-primary);
	border-radius: var(--dfd-radius-pillar);
	height: 100%; /* stretch to the grid row's tallest card */
	box-sizing: border-box;
	padding: 2.0625rem 1.5rem 2.5rem 0; /* 33px top, 24px right, 40px bottom, 0 left (title/list set their own left inset) */
}

.pillars-3up__title {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.625rem; /* 26px — Figma card title, component-level (not the shared --dfd-size-h2-section token) */
	line-height: 1.2;
	/* 0.78px in Figma = exactly 3% of 26px, i.e. the standard DynaPuff
	   heading tracking token — using the token instead of the literal px
	   so it scales correctly if this title's size ever changes. */
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-base); /* white */
	margin: 0 0 0.6875rem 2.1875rem; /* 11px gap to the list, 35px left inset */
}

/* Per-card max-width, desktop-lock only (matches the grid's own 1280px
   card-width lock): reproduces Figma's exact per-instance line break
   (12:914/910/909 text-box widths) without baking a <br> into the copy.
   Below 1280px the title wraps naturally against the shrinking card. */
@media (min-width: 1280px) {
	.pillars-3up__grid > *:nth-child(1) .pillars-3up__title {
		max-width: 8.8125rem; /* 141px — Foster Care */
	}

	.pillars-3up__grid > *:nth-child(2) .pillars-3up__title {
		max-width: 21.0625rem; /* 337px — Family and Community-Based Services */
	}

	.pillars-3up__grid > *:nth-child(3) .pillars-3up__title {
		max-width: 15.6875rem; /* 251px — Early Childhood Education */
	}
}

/* ── Bullet list — real <ul>/<li>, white disc markers ─────────────────── */
.pillars-3up__list {
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.444; /* 26/18 */
	color: var(--kd-color-base); /* white — marker inherits currentColor */
	list-style: disc outside;
	margin: 0 0 0 1.375rem; /* 22px left inset (Figma list-box x+22) */
	padding-left: 1.6875rem; /* 27px marker-to-text indent (Figma ms-[27px] per li) */
}

.pillars-3up__list li {
	margin: 0;
}

.pillars-3up__list li + li {
	margin-top: 0.625rem; /* 10px between items (Figma mb-[10px] on all but the last) */
}

/* ── Tablet (<1024px) — 2-up, third card centered on its own row ─────────
   Unlike the image-led cards (cta-cards-3up/adopt-grid), these are
   text-heavy (a full bullet list each), so a fluid 3-up shrink reads badly
   well before the sitewide 1024 nav breakpoint: measured live at a true
   768px viewport, 3-up cards land at ~198.6px and bullet items wrap to
   3-4 lines each — under adopt-grid's documented ~220px legibility floor.
   Switches to the same "2-up + centered 3rd" pattern cta-cards-3up/
   adopt-grid use for their own tablet step, at max-width:1023.98px so
   1024 itself (confirmed live at ~270.9px cards, comfortably readable)
   still gets the full 3-up row. */
@media (max-width: 1023.98px) {
	.pillars-3up__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pillars-3up__grid > *:nth-child(3) {
		grid-column: 1 / -1;
		max-width: var(--kd-card-w);
		margin-inline: auto !important;
	}

	.pillars-3up__card {
		padding-right: 1rem;
	}

	.pillars-3up__title,
	.pillars-3up__list {
		margin-left: 1.25rem;
	}

	.pillars-3up__list {
		padding-left: 1.5rem;
	}
}

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

	.pillars-3up__card {
		padding: 1.75rem 1.25rem 1.75rem 0;
	}

	.pillars-3up__title,
	.pillars-3up__list {
		margin-left: 1.5rem;
	}
}