/**
 * Pattern: Sponsors Closing CTA (patterns/sponsors-cta.php)
 *
 * Sponsors page closing band, pink (was lavender; 2026-10-14, see the
 * band rule below). Figma desktop `2086:332` (inside
 * composition `2085:2`), mobile `2086:150` (inside `2086:2`). Decision log
 * D28, build-tracker SP7. See patterns/sponsors-cta.php's own header for
 * the heading-size and button-reuse rationale (both borrowed verbatim from
 * sponsor-presenting.css / sponsors-hero.css's own techniques, just
 * re-scoped to this pattern's classes).
 *
 * Mobile-first, ascending media queries — same discipline sponsors-hero.css
 * documents at length (a desktop-first structure let an unconditional base
 * rule silently out-order a `min-width` rule earlier in this build).
 */

.sponsors-cta {
	/* Pink band (2026-10-14, KD suggestion answering Janel's 10-12 "all the
	   purple makes the sections blend together"; Figma proposal 2100:735).
	   Was --kd-color-surface (lavender = the page background, D28 "closing
	   CTA (lavender)"), which painted nothing visible. On #FFB5B5: navy
	   heading/links 9.84:1, black body copy 12.53:1. */
	background-color: var(--kd-color-pink);
	padding-block: var(--dfd-section-pad);
	/* Gate round 1: `text-align: center` used to live on THIS wrapper —
	   removed. The heading and contact paragraph already declare their own
	   `text-align: center` below, and the buttons row centres via
	   `justify-content`, not text-align — so scoping it to the actual
	   children (rather than the group) means an editor adding a fourth
	   block to this group later doesn't silently inherit a centring it
	   never asked for. */
}

/* Neutralise WP's default blockGap margin on this pattern's own direct
   children (h2, contact paragraph, buttons group) — every gap below is
   this file's own explicit margin, not WP's (same footgun sponsors-hero.css
   and sponsor-presenting.css both document for their own top-level rule). */
.sponsors-cta > * {
	margin-block-start: 0;
}

/* ── Heading — DynaPuff navy fill + white contour, ACTUALLY visible here
   (pink band, not white-on-white like sponsor-presenting.css's h2).
   font-size: see this pattern's PHP file header for the max()-floor
   derivation — 36px@375 → 50px@1440, one rule, no breakpoint needed. ──── */
.sponsors-cta__heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: max(
		2.25rem,
		var(--dfd-size-h2-section)
	); /* 36px floor, 50px ceiling */
	line-height: 1.2;
	letter-spacing: var(--dfd-track-heading); /* 3% — every DynaPuff heading */
	text-align: center;
	color: var(--kd-color-contrast); /* navy fill */
	-webkit-text-stroke: 0.125rem var(--kd-color-base); /* 2px white contour */
	paint-order: stroke fill;
	margin: 0;
}

/* ── Contact line — body font at 18px (--kd-size-body), centred, capped at
   Figma's own ~700px measure (2086:334's rendered box is narrower still;
   this is a ceiling, not an assertion). Restored 2026-10-14 (Alain: the
   email and phone as real mailto:/tel: links, for accessibility); the
   "Email the team" button removed on 09-16 stays removed. ─────────────── */
.sponsors-cta__contact {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body); /* 18px */
	line-height: var(--kd-lh-body);
	text-align: center;
	color: var(--kd-color-body);
	max-width: 43.75rem; /* 700px */
	margin: 1rem auto 0; /* 16px — Figma mobile gap (2086:151/152) */
}

/* Contact links on the pink band (2026-10-14, Alain): navy in EVERY state,
   medium (500), no underline at rest, underline on hover; keyboard focus keeps
   the sitewide `*:focus-visible` navy outline (global.css), untouched here.
   Medium navy is the link cue against the regular-weight black sentence,
   so it doesn't rely on colour alone (WCAG 1.4.1). Navy on #FFB5B5 = 9.84:1.

   Replaces the 09-16 hover override (--dfd-color-purple-ink), which was
   tuned for lavender (5.26:1 there) and measures 3.67:1 on pink: fails AA
   for 18px text. No hover colour change at all now, so the global
   `a:hover` purple (--kd-color-secondary) must never win either.

   Specificity (counted, not guessed): global.css has
   `.entry-content a:not(.wp-element-button):not([class*="kd-btn"])` at
   (0,3,1), unconditional, so it applies in every state. The old
   `.sponsors-cta .sponsors-cta__contact a:hover` was only (0,3,1) too,
   a TIE that won on source order alone. `.kd-section.sponsors-cta` (both
   classes are on this pattern's own group) plus `:any-link` makes the
   resting rule (0,4,1) and the hover rule (0,5,1): they win on specificity
   whatever the stylesheet order. */
.kd-section.sponsors-cta .sponsors-cta__contact a:any-link {
	color: var(--kd-color-contrast); /* navy */
	font-weight: 500; /* Medium: the Adobe kit has no 600 (Alain, 10-14) */
	text-decoration: none;
}

.kd-section.sponsors-cta .sponsors-cta__contact a:any-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ── Buttons — reuses sponsors-hero.css's exact treatment (pattern-scoped
   duplicate, see this pattern's PHP header for why it isn't shared).
   Base = mobile: full-width stacked column, smaller mobile button size. ── */
.sponsors-cta__buttons.wp-block-buttons {
	gap: 1rem; /* 16px — Figma button-to-button gap, mobile AND desktop (2086:153/155, 2086:336/338) */
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 1rem; /* 16px — Figma mobile gap (2086:152/153) */
}

.sponsors-cta__buttons.wp-block-buttons .wp-block-button,
.sponsors-cta__buttons.wp-block-buttons .wp-block-button__link {
	width: 100%;
}

.sponsors-cta__buttons.wp-block-buttons .wp-block-button__link {
	justify-content: center;
	text-align: center;
	font-size: 1.25rem; /* 20px, down from the sitewide 22px */
	padding: 1.25rem 1.75rem; /* 20px/28px, down from --kd-btn-pad's 24px/36px */
}

/* Pending packet-download state (`dfd_links('packet')` empty pre-Phase 6) —
   same visual convention as sponsors-hero.css's own `.is-pending` rule. */
.sponsors-cta .is-pending .wp-block-button__link {
	opacity: 0.55;
	pointer-events: none;
	cursor: not-allowed;
}

/* Specificity note (identical to sponsors-hero.css's own comment):
   global.css's default-button rule is
   `.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
   .wp-block-button__link` — 4 classes deep (0,4,0). Matching the real
   ancestor chain this button actually has
   (.sponsors-cta .wp-block-buttons.sponsors-cta__buttons
   .sponsors-cta__btn-outline .wp-block-button__link — 5 classes, 0,5,0)
   beats it on specificity alone, no `!important` needed. */
.sponsors-cta
	.wp-block-buttons.sponsors-cta__buttons
	.sponsors-cta__btn-outline
	.wp-block-button__link {
	background-color: transparent;
	/* Gate round 1, item 3: --kd-btn-outline (tokens.css, "outline border
	   + text") instead of --kd-color-primary directly — same value today
	   (both resolve to navy), but the semantically correct token, so the
	   eventual promotion of this navy-outline treatment to a named
	   --kd-btn3-* pair (flagged in this pattern's own PHP header) is a
	   rename instead of a rewrite. The hover fill below is left reading
	   --kd-color-primary: that's a genuine fill colour, not "outline
	   border + text", so it isn't the same semantic role. */
	color: var(--kd-btn-outline);
	border: 2px solid var(--kd-btn-outline);
	transition:
		background-color var(--kd-transition-fast),
		color var(--kd-transition-fast);
}

/* Derived hover/focus (no interaction state exists in the static Figma
   comp) — fills solid, consistent with every other button on the site. */
.sponsors-cta
	.wp-block-buttons.sponsors-cta__buttons
	.sponsors-cta__btn-outline
	.wp-block-button__link:hover,
.sponsors-cta
	.wp-block-buttons.sponsors-cta__buttons
	.sponsors-cta__btn-outline
	.wp-block-button__link:focus-visible {
	background-color: var(--kd-color-primary);
	color: var(--kd-color-base);
}

/* ══════════════════════════════════════════════════════════════════════
   900px — generic switch to a single row (no comp exists between the two
   hard breakpoints; same derived-band technique sponsors-hero.css uses
   for its own two-column split). ══════════════════════════════════════ */
@media (min-width: 900px) {
	.sponsors-cta__contact {
		margin-top: 1.25rem; /* 20px — Figma desktop gap (2086:333/334) */
	}

	.sponsors-cta__buttons.wp-block-buttons {
		flex-direction: row;
		justify-content: center;
		width: auto;
		margin: 1.25rem auto 0; /* 20px — Figma desktop gap (2086:334/335) */
	}

	.sponsors-cta__buttons.wp-block-buttons .wp-block-button,
	.sponsors-cta__buttons.wp-block-buttons .wp-block-button__link {
		width: auto;
	}

	.sponsors-cta__buttons.wp-block-buttons .wp-block-button__link {
		font-size: var(--kd-size-btn); /* 22px, sitewide default */
		padding: var(
			--kd-btn-pad
		); /* sitewide default (24px/36px) until the 1300 lock trims it */
	}
}

/* ══════════════════════════════════════════════════════════════════════
   81.25rem (1300px) — exact pixel lock, identical fix and rationale to
   sponsors-hero.css's own gate-round-3 finding: DynaPuff renders a couple
   of px wider per button than Figma's own number implies, so the two
   buttons' combined natural width can juuust force a wrap even though both
   fit the comp visually. 32px side padding (down from --kd-btn-pad's 36px)
   plus `flex-shrink:0` (stop the default flex compression from being the
   thing that pushes a label onto a second line) reproduces that fix here,
   verbatim, so the two sections match (per this item's own spec). ══════ */
@media (min-width: 81.25rem) {
	.sponsors-cta__buttons.wp-block-buttons .wp-block-button {
		flex-shrink: 0;
	}

	.sponsors-cta__buttons.wp-block-buttons .wp-block-button__link {
		padding: 1.5rem 2rem; /* 24px/32px */
	}
}

/* ── Section gap: adjacent full-bleed bands touch ───────────────────────────
 * The sitewide owl (`.entry-content > * + *`, --kd-section-gap) applies a
 * 120px margin between every pair of sections "regardless of whether the
 * adjacent section is plain or banded" (global.css). On /sponsors/ every
 * section IS a full-bleed band, so that margin renders as a strip of the
 * lavender page background between two coloured bands — Alain, 2026-09-16:
 * "on top of the Our sponsor section, there's a left over pale purple
 * section". The compositions (2085:2 / 2086:2) show the bands touching.
 * Each band already carries its own --dfd-section-pad top and bottom, so
 * that padding is the rhythm; the external margin only adds the strip.
 * Selector shape + mechanism copied from info-band.css's own gap override
 * (3 classes beats the owl's 1 — no !important). */
.entry-content > .kd-section.sponsors-cta {
	margin-block-start: 0;
}