/**
 * Pattern: Sponsor Tiers  (patterns/sponsor-tiers.php)
 *
 * Sponsors page body — no Figma frame (build-tracker P10, **apply-system**
 * fidelity). Reuses the site's established tokens/rhythm rather than
 * inventing new values: the 1216px composition (--kd-composition), the
 * pink/purple/navy card surfaces already used by cta-cards-3up (pink),
 * about-card (purple) and pillars-3up (navy), DynaPuff headings on the
 * shared --dfd-size-h2-section token, and the card-grid gap
 * (--kd-space-md). All internal vertical rhythm below (the gaps between
 * intro / Duck'chella / presenting card / tier grid / underwrite panel /
 * closing CTA) is an apply-system judgment call — there's no comp to
 * measure against — flagged for the Q4 client batch review.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 * No shared-file edits.
 */

/* padding-block 2-value shorthand: --dfd-section-pad (top, internal
   rhythm) / --kd-section-gap (bottom, PG-POLISH-1 — this is the last
   section on the Sponsors page; --kd-section-gap is the sitewide
   trailing-footer-space token used the same way in gallery-grid.css/
   faq-collapsible.css). Sponsors-only by construction — a page reusing
   this pattern as a non-final section stacks this on top of the owl's
   own --kd-section-gap margin and must re-check the total. */
.sponsor-tiers {
	padding-block: var(--dfd-section-pad) var(--kd-section-gap);
}

/* ── Intro — "Be A Very Important Duck!" — LEFT-aligned, not centred like
     cta-cards-3up/steps-band. `.sponsor-tiers__intro` itself carries no
     CSS (PG-POLISH-1, 2026-09-12): core's own constrained-layout
     child rule already caps a direct child of `.sponsor-tiers` at
     contentSize (== --kd-composition) and centers it — a prior
     `max-width:100%` override here was fighting that default instead of
     relying on it, which is what misaligned the heading. See
     adopt-grid.css's P8-fix block ("one source of truth") for the full
     rationale. ───────────────────────────────────────────────────────── */
.sponsor-tiers__intro-heading {
	text-align: left;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: var(
		--dfd-size-h2-section
	); /* one spec, sitewide — never re-declared per breakpoint */
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-contrast);
	margin: 0 0 var(--kd-gap-tight);
}

.sponsor-tiers__intro-body {
	font-family: var(--kd-font-body);
	font-size: 1.125rem; /* 18px */
	line-height: 1.444; /* 26/18 */
	color: var(--kd-color-body);
	max-width: 42rem; /* readable measure — no comp to match */
	margin: 0 0 var(--kd-gap-tight);
}

.sponsor-tiers__intro-body + .sponsor-tiers__intro-body {
	margin-bottom: 0;
}

.sponsor-tiers__intro-buttons {
	margin-top: var(--kd-space-lg);
}

/* ── Duck'chella lead-in — same left-aligned treatment, spaced below the
     intro. ─────────────────────────────────────────────────────────────── */
.sponsor-tiers__duckchella {
	margin-top: var(--kd-space-xxl); /* 96px desktop */
}

.sponsor-tiers__duckchella-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);
	margin: 0 0 var(--kd-gap-tight);
}

.sponsor-tiers__duckchella-body {
	font-family: var(--kd-font-body);
	font-size: 1.125rem;
	line-height: 1.444;
	color: var(--kd-color-body);
	max-width: 48rem;
	margin: 0;
}

/* ── Presenting sponsor — purple card, centred heading + JMFE logo, same
     card radius as about-card (--kd-radius-md). ───────────────────────── */
.sponsor-tiers__presenting {
	margin-top: var(--kd-space-xl); /* 64px */
	background-color: var(--kd-color-secondary);
	border-radius: var(--kd-radius-md);
	max-width: var(--kd-composition);
	margin-inline: auto;
	padding: var(--kd-space-xl) var(--kd-space-lg);
	text-align: center;
}

.sponsor-tiers__presenting-heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.625rem; /* 26px — component-level, matches pillars-3up__title's card-heading size */
	letter-spacing: var(--dfd-track-heading);
	line-height: 1.2;
	color: var(--kd-color-base); /* white on purple */
	margin: 0 0 var(--kd-space-md);
}

/* $40,000 — same DynaPuff/yellow amount treatment as the tier cards
   (.sponsor-tiers__card-amount), added round-1 gate (client doc: "Duck'chella
   Presenting Sponsor – JM Families $40,000" — see the Q4 PHP comment above
   this card in the pattern for the tier-name discrepancy). */
.sponsor-tiers__presenting-amount {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.5rem; /* 24px, matches .sponsor-tiers__card-amount */
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-yellow);
	margin: 0 0 var(--kd-space-md);
}

.sponsor-tiers__presenting-logo {
	margin: 0 auto;
	width: 32.6875rem; /* 523px — same display size as split-what-is.php's jmfe-logo.png usage */
	max-width: 100%;
}

.sponsor-tiers__presenting-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Tier grid — 5 navy cards. Plain flexbox (not WP's is-layout-flex) so
     no is-layout-flex blockGap-reset fight; `flex-wrap` + `justify-content:
     center` auto-centres whatever's left on the last row (2 cards on a
     3-up grid), which a fixed 3-column CSS Grid can't do for an odd
     remainder without nth-child gymnastics — the same "3-up, remainder
     centred" result the 3-card patterns get via a `grid-column:1/-1` +
     margin:auto hack on a SINGLE leftover card, generalised here to a
     leftover PAIR.
     Round-1 gate finding: the wrapper's "default" layout is still
     is-layout-FLOW, and WP core's own block-library CSS gives that layout
     a blockGap fallback too — `:where(.is-layout-flow) > :first-child {
     margin-block-start: 0 }` + `:where(.is-layout-flow) > * {
     margin-block-start: var(--wp--style--block-gap, ...) }` (measured
     24px). Only the FIRST card matched the `:first-child` rule, so it kept
     a 0 top margin while cards 2-5 got 24px — in a flex row with
     align-items:stretch (the default for "normal"), the line's cross-size
     is set by the tallest item's OUTER (margin-included) box, so card 1
     (no margin) stretched to the full 257.9px line height while cards 2-5
     (24px margin) stretched to 233.9px content + the 24px margin, landing
     24px lower with 24px less height — exactly what the design-diff
     measured. `:where()` carries zero specificity, so a plain
     `> *` class selector below wins outright, no `!important` needed. ── */
.sponsor-tiers__grid {
	margin-top: var(--kd-space-xl);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; /* explicit — was already the "normal" default, kept for clarity now that the real bug (above) is understood */
	justify-content: center;
	gap: var(--kd-space-md); /* 20px — shared card-grid gap */
	max-width: var(--kd-composition);
	margin-inline: auto;
}

.sponsor-tiers__grid > * {
	margin: 0; /* kills the is-layout-flow blockGap fallback described above — see that comment */
}

.sponsor-tiers__card {
	box-sizing: border-box;
	flex: 1 1 calc((100% - 2 * var(--kd-space-md)) / 3); /* 3-up, fluid 1024→1440 */
	max-width: var(
		--kd-card-w
	); /* 392px — locks to the literal card width above the fluid range */
	min-width: 0;
	background-color: var(--kd-color-primary);
	border-radius: var(
		--dfd-radius-pillar
	); /* 10px — same token as pillars-3up's navy cards */
	padding: 2rem 1.5rem;
	text-align: center;
}

.sponsor-tiers__card-title {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.625rem; /* 26px, per the build brief */
	letter-spacing: var(--dfd-track-heading);
	line-height: 1.2;
	color: var(--kd-color-base); /* white */
	margin: 0 0 var(--kd-gap-tight);
}

.sponsor-tiers__card-amount {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.5rem; /* 24px, per the build brief */
	letter-spacing: var(--dfd-track-heading);
	color: var(
		--kd-color-yellow
	); /* the unambiguous alias — never --kd-color-accent-2, see tokens.css */
	margin: 0 0 var(--kd-space-md);
}

/* Empty logo-slot placeholder — labelled, no image (client will supply new
   sponsor logos later; see the Q12 PHP comment in sponsor-tiers.php). A
   dashed inset box keeps its reserved footprint visible in both the editor
   and the front end so an editor knows exactly where a future logo lands. */
.sponsor-tiers__card-logo-slot {
	border: 1px dashed color-mix(in srgb, var(--kd-color-base) 45%, transparent);
	border-radius: var(--kd-radius-sm);
	min-height: 4.5rem; /* 72px — reserved logo footprint */
	display: flex;
	align-items: center;
	justify-content: center;
}

.sponsor-tiers__card-logo-label {
	font-family: var(--kd-font-body);
	font-size: 0.875rem; /* 14px */
	color: color-mix(in srgb, var(--kd-color-base) 70%, transparent);
	margin: 0;
}

/* ── Underwrite opportunities — pink rounded panel, two-column list. Panel
     radius reuses --dfd-radius-panel (34px) — the system's only
     "large soft panel" radius token (introduced for the leaderboard panel),
     reused here per the token-reuse rule rather than adding a new one. ─── */
.sponsor-tiers__underwrite {
	margin-top: var(--kd-space-xl);
}

.sponsor-tiers__underwrite-heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 1.625rem; /* 26px — matches the other component-level h3s in this pattern */
	letter-spacing: var(--dfd-track-heading);
	color: var(--kd-color-contrast);
	margin: 0 0 var(--kd-space-md);
}

.sponsor-tiers__underwrite-list {
	background-color: var(--kd-color-pink);
	border-radius: var(--dfd-radius-panel);
	max-width: var(--kd-composition);
	margin: 0 auto;
	padding: var(--kd-space-lg) var(--kd-space-xl);
	list-style: none;
	column-count: 2;
	column-gap: var(--kd-space-xl);
}

.sponsor-tiers__underwrite-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--kd-space-sm);
	break-inside: avoid;
	padding-block: 0.75rem;
	margin: 0;
}

.sponsor-tiers__underwrite-title {
	font-family: var(--kd-font-body);
	font-weight: 700;
	font-size: 1.125rem; /* 18px */
	color: var(
		--kd-color-body
	); /* black on pink, same as cta-cards-3up's card text */
}

.sponsor-tiers__underwrite-amount {
	font-family: var(--kd-font-body);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(
		--kd-color-contrast
	); /* navy — reads clearly on pink, distinguishes the amount from the title */
	white-space: nowrap;
}

/* ── Closing CTA row — centred, two buttons (Become A Sponsor / download
     the packet again). Second button uses the theme's existing secondary
     (outline) style — never a restyled button in a pattern partial. ───── */
.sponsor-tiers__closing {
	margin-top: var(--kd-space-xl);
	justify-content: center;
}

/* ── Pending packet-download state — used by both packet buttons (intro +
     closing) when `dfd_links('packet')` is empty (round-1 gate finding:
     the PDF isn't uploaded yet, so `#dfd-link:packet` would otherwise
     resolve to a live-looking button that opens a blank tab). The pattern
     branches to this markup directly (aria-disabled, no target/rel) —
     this rule only supplies the visual state. Label/colours/shape are
     untouched (still the theme's default button style), just dimmed and
     inert. ──────────────────────────────────────────────────────────── */
.sponsor-tiers .is-pending .wp-block-button__link {
	opacity: 0.55;
	pointer-events: none;
	cursor: not-allowed;
}

/* ── Tablet (≤1023.98px) — tier grid drops to 2-up (2+2+1, last row
     auto-centred by justify-content:center); everything else keeps its
     desktop rhythm at a reduced scale. No mobile/tablet frame exists for
     this page — derived per the project's convention, flag for designer
     review (Q3/Q4). ────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
	.sponsor-tiers__duckchella {
		margin-top: var(--kd-space-xl);
	}

	.sponsor-tiers__card {
		flex-basis: calc((100% - var(--kd-space-md)) / 2);
	}

	.sponsor-tiers__underwrite-list {
		padding: var(--kd-space-lg);
	}
}

/* ── Mobile (≤767.98px) — 1-up tier cards, single-column underwrite list,
     buttons stack full width. ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.sponsor-tiers__presenting {
		padding: var(--kd-space-lg) var(--kd-space-md);
	}

	.sponsor-tiers__card {
		flex-basis: 100%;
		max-width: var(--kd-card-w);
	}

	.sponsor-tiers__underwrite-list {
		column-count: 1;
		padding: var(--kd-space-md);
	}

	.sponsor-tiers__closing .wp-block-button,
	.sponsor-tiers__closing .wp-block-button__link {
		width: 100%;
	}

	.sponsor-tiers__closing .wp-block-button__link {
		justify-content: center;
		text-align: center;
	}
}