/**
* Pattern: Sponsor Wall (patterns/sponsor-wall.php)
*
* Sponsors page "Our 2027 sponsors" section, full-bleed band (D10). YELLOW
* band + navy text since 2026-10-14 (KD proposal `2100:569` for Janel's
* 10-12 "inverted, yellow background" ask; was purple + yellow/white type).
* Navy on yellow #FFDE17 = 12.3:1 (purple text would be 3.45:1, which
* fails for the 12-18px lines, so the proposal uses navy). The band and
* the h2 colour are block-support presets in the PHP markup
* (`has-accent-background-color`, `has-contrast-color`); the rest is here.
* Figma desktop `2086:290` (1440, composition `2085:2`), mobile `2086:116`
* (390, composition `2086:2`). Decision log D27/D28, build-tracker SP4. See
* the PHP file's own header for the query/data-model rationale, the alt-text
* "printed once" logic, and the derived-tablet-breakpoint math — this file
* only states the resulting rules.
*
* ── Mobile-first ───────────────────────────────────────────────────────────
* Written base-first (the mobile/stacked state) with ascending breakpoints
* after it, same discipline as sponsor-packages.css/sponsors-hero.css's own
* headers document the reason for (a base rule declared AFTER a min-width
* rule silently wins on source order at equal specificity).
*
* ── Breakpoints ────────────────────────────────────────────────────────────
* - base (<40rem/640px): Figma-exact mobile (`2086:116`) — tier name full
* width above its own logo row, 2-up tiles.
* - 40rem–89.99rem (640–1439.98px): DERIVED tablet band, no Figma frame.
* Same stacked shape as mobile, logo grid becomes a real 3-column CSS
* Grid (not a width-dependent wrap) — deterministic 3-up the brief asks
* for, verified at 768/1024. See the PHP file's header for why the
* desktop row layout can't simply extend down this far (a 232px reserved
* tier column starves the logo area well before 3 fixed 220px tiles
* would fit).
* - 90rem (1440px): Figma-exact desktop (`2086:290`) — tier name in a
* 232px left column, logos as a flex-wrap row of fixed 220×120 tiles.
* This is also where `--kd-edge-pad`'s gutter formula lets the content
* column reach its true 1216px cap (solved crossover ≈1435.6px — see the
* PHP header) — below 1440 the "desktop" content column is genuinely
* narrower than 1216, which is why the row layout is gated here and not
* at the sitewide 1024px breakpoint other patterns use.
*
* ── Tile sizing — one formula reproduces BOTH Figma frames exactly ────────
* 165×90 (mobile) and 220×120 (desktop) share the identical aspect ratio
* (11:6 = 1.8333) and near-identical inset ratios (get_design_context on
* 2086:290/2086:116): sides 18/165 = 24/220 = 10.909% EXACTLY; top/bottom
* 16/90 = 17.78% vs 22/120 = 18.33% (Figma rounding, <1px difference at
* either scale). `.dfd-sponsor-wall__tile` therefore sets `aspect-ratio: 11/6`
* plus one percentage-padding rule with NO per-breakpoint override needed —
* it reproduces 129×58 at a 165px tile and ~172×76 at a 220px tile, and
* gives the fluid tablet band a sane in-between inset for free instead of a
* guessed fixed px value.
*
* ── Focus ring — two-tone, purple band (tier-card.css precedent) ─────────
* (Band is yellow since 2026-10-14; the two-tone ring still reads there:
* navy 12.3:1 on yellow, white gap against the white tile.)
* The sitewide `*:focus-visible` default (global.css) is a single navy
* ring — fine on the lavender/white bands, but the SP4 brief specifically
* calls out verifying it reads on THIS purple band, where the ring can sit
* half over the white tile and half over the purple band itself. Reuses
* `.dfd-tier-card__link:focus-visible`'s exact two-tone technique (navy
* outline, separated from the tile by a white inner gap via box-shadow) for
* the same reason that file gives: a single fixed colour can't guarantee
* contrast against both a light AND a mid-tone purple background at once.
*
* ── Tablet tile cap (gate round 1 finding) ─────────────────────────────────
* `.dfd-sponsor-wall__logos`'s tablet grid tracks are `minmax(0, 13.75rem)`,
* not a bare `1fr` — an unbounded `1fr` track grows the tile past its
* Figma-exact 220px desktop size well before the 1440px breakpoint (~273px
* @1024, ~389px @1439), upscaling the 172×76 `dfd-logo` file inside it
* (soft logos) and pushing the emitted `sizes` attribute past what
* `dfd-logo-2x` covers, so the browser never reaches for it. Capped +
* `justify-content: start` keeps the grid's own deterministic 3-up (unlike
* the desktop flex-wrap's naturally-reflowing 4/3/2-up) while the tile
* itself never exceeds its real asset size.
*/
.dfd-sponsor-wall {
/* No background-color here (gate round 1 finding): the block-support
preset class below (`has-secondary-background-color has-background`)
is emitted by core with `!important` and always wins — confirmed live,
this declaration was dead weight. */
padding-block: var(--dfd-section-pad);
}
/* P8-fix (adopt-grid.php's own header explains the underlying bug): the
outer alignfull "constrained" group has exactly ONE direct child so the
heading/intro/rows share one centered box instead of three independently
max-width'd ones. */
.dfd-sponsor-wall__inner > * {
margin-top: 0;
}
.dfd-sponsor-wall__heading {
/* Gate round 1 finding: the shared `--dfd-size-h2-section` clamp
(2rem→3.125rem over 3.5vw) floors at 32px, but the Figma MOBILE frame
(2086:117) is 36px, not 32 — reusing the generic token silently
shipped the wrong mobile size. This component's own two Figma-exact
endpoints (36px mobile / 50px desktop) aren't what that shared token
encodes, so the mobile/tablet band states a literal size instead and
only switches to the shared token at the desktop breakpoint below,
where the clamp already resolves to exactly 50px anyway. */
font-size: 2.25rem; /* 36px, Figma-exact mobile (2086:117) — holds through the whole 320–1439px range, see the 90rem override below */
letter-spacing: var(
--dfd-track-heading
); /* 3% — matches Figma's 0.72px@36 / 1.5px@50 tracking */
line-height: var(--kd-lh-tight);
margin-bottom: 1rem; /* 16px, Figma-exact mobile flex-col gap (2086:116) — desktop overridden below */
}
/* Mobile composition (2086:116) renders NO intro paragraph at all (verified
via get_screenshot — "Our 2027 sponsors" wraps to 2 lines and the very
next element is the first tier name). Mobile-first: hidden is the BASE
state, `display:block` from the tablet breakpoint on (below) turns it
back on — gate round 1 finding replaced the earlier
hide-below/re-show-above-desktop pair (redundant three-state toggle for
what is really one switch). */
.dfd-sponsor-wall__intro {
font-family: var(--kd-font-body);
font-size: 1.125rem; /* 18px, Figma-exact */
line-height: var(
--kd-lh-body
); /* 1.4444 — matches Figma's 26px @18px exactly */
color: var(--kd-color-contrast); /* navy on the yellow band (2100:571) */
max-width: 45rem; /* 720px, Figma-exact (2086:290) */
margin-bottom: 2.5rem; /* 40px — matches the row gap below for one consistent rhythm */
display: none;
}
.dfd-sponsor-wall__rows {
display: flex;
flex-direction: column;
gap: 2.5rem; /* 40px between tier rows, Figma-exact (2086:293) */
}
.dfd-sponsor-wall__row {
display: flex;
flex-direction: column;
gap: 1rem; /* 16px, Figma-exact mobile gap between a tier name and its logo row */
}
.dfd-sponsor-wall__tier-name {
/* Real
(see the PHP file's header) — inherits global.css's sitewide
h1-h6 rule (font-variation-settings + drop shadow) for free, so no
explicit contour/shadow declaration is needed here unlike
.dfd-tier-card__name (a