/**
 * Pattern: Sponsor Presenting  (patterns/sponsor-presenting.php)
 *
 * "Presented by" section, white band. Figma desktop `2079:103` (D8c, inside
 * composition `2085:2`), mobile M3 `2082:80` (inside `2086:2`). Decision log
 * D28, build-tracker SP2.
 *
 * ── Gate round 1, item 1 — cqi must resolve against a FRAME, not the card
 * itself ────────────────────────────────────────────────────────────────────
 * An element is never its own query container, so `cqi` declared directly
 * on `.sponsor-presenting__card` (round 0) silently resolved against the
 * VIEWPORT instead — the border-radius drifted with viewport width (28.4px
 * @1440, 37.9px @1920) instead of staying pinned to the card's own size.
 * Fixed with tier-card.css's exact shape: `.sponsor-presenting__card-frame`
 * carries `container-type: inline-size` + the real sizing (width,
 * aspect-ratio, the external layout margin), and `.sponsor-presenting__card`
 * is `position: absolute; inset: 0` inside it, filling it exactly. Every
 * `cqi` below — on the card itself or any descendant, any nesting depth —
 * now resolves against the FRAME's rendered inline-size.
 *
 * ── Gate round 1, item 2 — every cqi size is now clamped with a floor ───────
 * Unclamped cqi shrinks with the frame with no floor, which read as ~8px
 * body copy once the desktop card itself shrinks small (see the next
 * section). Every font-size below is `clamp(floor, Ncqi, ceiling)` — floor
 * is the minimum legible size the reviewer set (kicker/date/CTA ≥15px,
 * sub-line ≥13px), ceiling is this file's own original Figma-derived target
 * (28px/15px/18px desktop, 17px/13px/16px mobile) — same technique
 * tier-card.css already uses for its own type scale.
 *
 * ── Gate round 2, item 1 — breakpoint moved to 1024px (64em); the CAP does
 * the real work, not the breakpoint number ─────────────────────────────────
 * Round 1 moved the switch to 600px on the theory that the small end of the
 * desktop landscape ticket (aspect-ratio-locked, cqi-floored) would beat an
 * oversized portrait card — but the floored type has a MINIMUM height the
 * aspect-ratio-locked box can't always provide once it gets small enough:
 * measured/derived ~20px of CTA clipped at 600px, ~5px at 768px, in the
 * 600–823px range. The actual fix was always the mobile branch's own
 * `width: min(24rem, 100%)` cap (gate round 1, item 3) — that's what stops
 * the portrait card from growing past its design size — so the breakpoint
 * itself just needed to move far enough out that desktop mode never has to
 * render the landscape ticket at a floor-breaking size. 1024px (64em) is
 * comfortably past the widest width the landscape ticket needed (823px);
 * the capped mobile portrait card (`min(24rem, 100%)`, centred) now serves
 * the ENTIRE 600–1023px range at a constant 384×527.7 instead of two
 * different, both-flawed, branches splitting it. The `@container
 * (max-width: 50rem)` stacking branch round 1 added for the bottom row is
 * unreachable now — at ≥1024px the card-frame is always ≥852px (the
 * measured frame width AT 1024), well above that 800px threshold — so it's
 * removed rather than kept as dead code.
 *
 * ── Gate round 1, item 4 — mobile-only contrast fix ────────────────────────
 * White kicker / yellow date sit on the vertical gradient's LIGHT top stop
 * on the mobile (top→bottom) orientation — measured ~3.4:1 / ~2.6:1, both
 * fail. Same fix tier-card.css's own Headliner card took for its kicker:
 * navy (`--kd-color-contrast`) on the light top stop instead. Desktop is
 * unaffected — the left→right orientation puts the kicker/date row over a
 * DARKER part of the gradient there (already measured ≥4.5:1 at the SP2
 * self-verify), so white/yellow stay for that mode only.
 *
 * ── Gate round 1, item 5 — CTA focus-visible ring ───────────────────────────
 * The inherited default (a plain browser outline, navy-on-navy on the
 * `#2e2466` bottom stop) is invisible. Same two-tone ring
 * tier-card.css's own `.dfd-tier-card__link:focus-visible` uses (a solid
 * navy ring + a white halo) — one fixed colour can't read on both the
 * lighter top stop and the navy bottom stop this button can sit near
 * depending on card size, the halo guarantees contrast against either.
 *
 * ── Card scaling — percentages + cqi off the FRAME's own box ────────────────
 * No comp exists between the two hard breakpoints, so within each mode
 * every internal measurement scales continuously with the frame's own
 * rendered width instead of holding a size — same derived-scaling
 * philosophy as tier-card.css, Alain's stated preference from the SP1 live
 * review ("a real CSS container query, not a viewport breakpoint"). Because
 * `.sponsor-presenting__card` fills its frame exactly (`inset: 0`), every
 * percentage below (padding, gaps, the ghost's own box, the logo/sub-line
 * widths) written against the CARD's box is equally a percentage of the
 * FRAME's box — no numbers needed to change when the frame wrapper was
 * introduced, only the `cqi`/radius calibration did (see item 1 above).
 * Percentage padding/margin resolve against the containing block's WIDTH on
 * every side, and `aspect-ratio` makes the frame's height a constant
 * multiple of its width, so a width-relative percentage is already the
 * correct fraction of the height too, at every size.
 *
 * ── Gradient — reuses SP1's tier tokens, no new token added ─────────────────
 * D28: "gradient = the Headliner tier tokens ... left→right on desktop" /
 * "gradient top→bottom" on mobile. `--dfd-tier-grad-headliner-top/-bottom`
 * already exist in tokens.css (SP1's pre-approved shared-file edit) — this
 * pattern only READS them, no tokens.css edit needed.
 *
 * ── Skyline ghost — same ::before + image-set() technique as tier-card.css,
 * different opacity/mask (D28: ~22% here vs tier-card's 16%; masked fade
 * instead of a flat opacity) ────────────────────────────────────────────────
 * Desktop: left 520px column (42.7632% of the 1216px card), full height,
 * `mask-image: linear-gradient(to right, #000 55%, transparent)` — solid
 * through the left 55% of ITS OWN 520px box, fading to transparent by its
 * right edge (D28: "fading out toward the logo"). Mobile: bottom band,
 * 160px of the 470px card height (34.0426%), full width,
 * `mask-image: linear-gradient(to top, #000 55%, transparent)` — same 55%
 * ratio, flipped to fade toward the top edge (mirrors the desktop rule;
 * Figma's own mask geometry wasn't re-readable for the mobile frame, so the
 * ratio is carried over rather than invented from nothing — flag for
 * designer review if the fade reads differently than the comp intends).
 * Gate round 1, item 7: the desktop override only changed `mask-image` and
 * `background-position` — the plain (non-`@supports`) `background-image`
 * fallback was left pointing at the mobile band crop. Fixed: the desktop
 * block now also sets the plain fallback to `ticket-skyline-left.png`.
 *
 * ── Sub-line contrast (SP2 self-verify) ─────────────────────────────────────
 * The brief flagged white-at-85%-opacity as borderline on the gradient's
 * lighter (left/top) end and said to use white 100% if it measures under
 * 4.5:1. Sampled the actual rendered pixel at the sub-line's leftmost/
 * lightest point (desktop): white/100% measured 5.84:1 against the
 * gradient there — passes AA with real margin.
 *
 * ── Drop shadow — no matching --kd-shadow-* token ───────────────────────────
 * D28 calls for "navy 18%, 0/16/40". Checked the shared scale
 * (`--kd-shadow-sm/md/lg/image/card`, tokens.css) — none is a navy-tinted,
 * 40px-blur, 18%-alpha shadow; the closest (`--kd-shadow-lg`,
 * `0 8px 40px rgba(0,0,0,.16)`) is neutral-black and a different
 * offset/alpha, not this component's own spec. `color-mix()` against the
 * semantic navy token (`--kd-color-contrast`) instead of a hand-picked rgba
 * triplet, so a re-skin only needs the token to change.
 *
 * ── Mobile copy — two sibling paragraphs, not a class-only <span> ──────────
 * Gate round 1, item 10: split in patterns/sponsor-presenting.php into two
 * real `core/paragraph` blocks (`__copy` always shown, `__copy-extra` the
 * D28/M3 second sentence, hidden below the mode-switch breakpoint) instead
 * of a class-only `<span>` nested inside one paragraph, which an editor
 * re-save could silently strip. Both share zero margin between them so
 * they read as one continuous block when both are visible — trade-off:
 * the sentence boundary is now always also a line-box boundary (no longer
 * lets "Their support…" wrap onto the same visual line as "…Derby." the
 * way one merged paragraph could) — a deliberate, reviewer-directed
 * robustness-over-pixel-fidelity call.
 */

.sponsor-presenting {
	background-color: var(--kd-color-base); /* white band, D28 page rhythm */
	padding-block: var(--dfd-section-pad);
}

.sponsor-presenting > * {
	margin-block-start: 0; /* logical property — neutralise WP's default
		blockGap margin on every direct child (h2, both copy paragraphs, the
		card frame); every gap below is this file's own explicit margin, not
		WP's, same footgun sponsors-hero.css's file header documents for its
		own __inner rule */
}

.sponsor-presenting__heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: 2.25rem; /* 36px — M3 node `2082:81` gives an exact 342×43
		text box for "Presented by"; 43px / 1.2 line-height ≈ 36px. This is a
		Figma-exact FIXED mobile size, not a derivation of the shared
		--dfd-size-h2-section clamp (that token floors at 32px, not 36px) —
		the desktop override below switches TO that shared token instead, so
		this pattern gets the token's own 50px ceiling at the desktop lock
		without losing the mobile frame's own verified number. */
	line-height: 1.2;
	letter-spacing: var(--dfd-track-heading); /* 3% — every DynaPuff heading */
	text-align: center;
	color: var(--kd-color-contrast); /* navy fill */
	/* White contour — identical mechanism to the hero H1 / tier-card name
	   (-webkit-text-stroke + paint-order), invisible here since the band
	   itself is white (stroke colour == background colour) — kept for
	   mechanism consistency across the site's DynaPuff "poster" headings,
	   not for a visible effect on THIS band. */
	-webkit-text-stroke: 0.125rem var(--kd-color-base); /* 2px */
	paint-order: stroke fill;
	margin: 0;
}

.sponsor-presenting__copy,
.sponsor-presenting__copy-extra {
	font-family: var(--kd-font-body);
	font-size: 1rem; /* 16px */
	line-height: 1.5rem; /* 24px */
	text-align: center;
	color: var(--kd-color-body);
	max-width: 45rem; /* 720px, Figma-exact desktop measure */
	margin: 0 auto;
}

.sponsor-presenting__copy {
	margin-block-start: 0.75rem; /* 12px — mobile gap, see vertical-rhythm note below */
}

/* Second sentence is desktop-only copy (D28/M3: the mobile frame's own copy
   block is the FIRST sentence only, not a reflow truncation — a genuine
   shorter mobile copy, not a CSS ellipsis). A real sibling paragraph (see
   this file's header), hidden below the mode-switch breakpoint. */
.sponsor-presenting__copy-extra {
	display: none;
}

/* ── Vertical rhythm — exact Figma gaps, not the shared blockGap ─────────────
 * desktop (2079:103): h2 bottom 156 → copy top 176  = 20px gap
 *                      copy bottom 280 → card top 328 = 48px gap
 * mobile  (2082:80):  h2 bottom 83  → copy top 95   = 12px gap
 *                      copy bottom 191 → card top 219 = 28px gap
 * Mobile-first: base rules are the mobile numbers, the desktop block below
 * overrides to the desktop numbers — same convention as every sibling SP
 * pattern. */

.sponsor-presenting__card-frame {
	position: relative;
	container-type: inline-size;
	container-name: dfd-sponsor-presenting-card;
	width: min(24rem, 100%); /* mobile ceiling — gate round 1, item 3 */
	margin-inline: auto;
	aspect-ratio: 342 / 470; /* mobile Figma frame, M3 */
	margin-block-start: 1.75rem; /* 28px — mobile gap */
}

.sponsor-presenting__card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; /* clips the skyline ghost + gradient to the radius */
	box-sizing: border-box;
	border-radius: clamp(
		1.125rem,
		5.848cqi,
		1.25rem
	); /* 18px floor → 20px @342 ceiling */
	background-image: linear-gradient(
		to bottom,
		var(--dfd-tier-grad-headliner-top),
		var(--dfd-tier-grad-headliner-bottom)
	);
	box-shadow: 0 16px 40px
		color-mix(in srgb, var(--kd-color-contrast) 18%, transparent); /* D28 comp, no matching --kd-shadow-* — see file header */
	display: flex;
	flex-direction: column;
}

/* Skyline ghost — bottom band on mobile (D28/M3), image-set() 1x/2x webp
   with a plain-png fallback, same two-layer technique as tier-card.css's
   own ::before (a working image FIRST, then an @supports upgrade). */
.sponsor-presenting__card::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	width: 100%;
	height: 34.0426%; /* 160px @470 */
	z-index: 0;
	opacity: 0.22;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	background-image: url("../../images/ticket-skyline-band.png");
	mask-image: linear-gradient(to top, #000 55%, transparent);
	-webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
}

@supports (background-image: image-set(url("a.jpg") 1x)) {
	.sponsor-presenting__card::before {
		background-image: image-set(
			url("../../images/ticket-skyline-band.webp") 1x type("image/webp"),
			url("../../images/ticket-skyline-band-2x.webp") 2x
				type("image/webp"),
			url("../../images/ticket-skyline-band.png") 1x type("image/png"),
			url("../../images/ticket-skyline-band-2x.png") 2x type("image/png")
		);
	}
}

.sponsor-presenting__top,
.sponsor-presenting__logo,
.sponsor-presenting__bottom {
	position: relative;
	z-index: 1;
}

.sponsor-presenting__top {
	display: flex;
	width: 100%; /* explicit rather than relied-upon: `.card`'s align-items
		is the flex default (`stretch`), which already fills the cross-axis
		for a child with no width of its own — this just makes that
		explicit instead of depending on the default never changing, so
		kicker/date's `justify-content: space-between` below always has a
		full-width box to spread across. */
	align-items: center;
	justify-content: space-between;
	padding: 9.3567% 8.1871% 0; /* 32px top, 28px sides @342 */
}

/* Mobile-only contrast fix (gate round 1, item 4): white kicker / yellow
   date measured ~3.4:1 / ~2.6:1 on the light top of the vertical
   (top→bottom) gradient here — both navy instead, same fix tier-card.css's
   Headliner card took. Desktop overrides back to white/yellow below, where
   the left→right orientation puts this row over a darker part of the
   gradient (already verified ≥4.5:1). */
.sponsor-presenting__kicker,
.sponsor-presenting__date {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-variation-settings: "wdth" 100;
	font-size: clamp(
		0.9375rem,
		4.9708cqi,
		1.0625rem
	); /* 15px floor → 17px @342 ceiling, D28 mobile spec */
	line-height: 1.2;
	margin: 0;
	color: var(--kd-color-contrast);
}

.sponsor-presenting__logo {
	display: block;
	width: 83.6257%; /* 286px @342, D28 mobile spec */
	height: auto;
	margin: 10.5263% 8.1871% 0; /* 36px top gap, 28px sides */
}

/* Mobile (D28/M3): subline sits right under the logo (16px gap, this
   element's own top padding) — it is NOT grouped with the button at the
   card's bottom edge on this frame (button top y394 vs subline bottom
   y210, a 184px gap that belongs to the BUTTON alone, not to this whole
   block — unlike the desktop frame, where subline+button share one row).
   `flex: 1` lets this box grow to fill the remaining card height so its
   OWN child (.cta, margin-top: auto below) has room to push down to the
   bottom edge; the desktop override below switches this back to a
   content-sized, bottom-pinned ROW instead. */
.sponsor-presenting__bottom {
	display: flex;
	flex: 1;
	width: 100%; /* explicit for the same reason .top's own comment gives
		above — `.card`'s default `stretch` already provides this, made
		explicit rather than implicit */
	flex-direction: column;
	align-items: flex-start;
	padding: 4.6784% 8.1871% 8.1871%; /* 16px top gap, 28px sides + bottom */
}

/* ⚠️ .subline and .cta are children of .bottom, NOT of .card — a
   percentage on either of them resolves against .BOTTOM's width, not the
   card's. .bottom's mobile content-box (after its own 8.1871%-per-side
   padding above) already equals the same 286px-@342 target the logo's own
   width hits directly, so .subline just needs `max-width: 100%` here, not
   a second copy of the logo's card-relative percentage (that value,
   applied to .bottom's narrower box instead of the card, would come out
   roughly HALF the intended width — exactly the bug this comment is
   guarding against; caught live at the round-0 gate). .cta's padding is
   likewise re-expressed as a percentage of .bottom's content-box (286px
   @342), not of the card (342px). */
.sponsor-presenting__subline {
	font-family: var(--kd-font-body);
	font-weight: 500;
	/* Flat, not clamp() — the reviewer's floor (13px) and this file's own
	   Figma-derived @342 target (13px) are the same number, so a
	   clamp(13px, Ncqi, 13px) can never produce anything but 13px; a plain
	   value says that honestly instead of a clamp() that pins itself. */
	font-size: 0.8125rem; /* 13px */
	line-height: 1.4;
	color: var(
		--kd-color-base
	); /* white 100% — see file header contrast note */
	max-width: 100%; /* .bottom's own content-box already = 286px @342 */
	margin: 0;
}

.sponsor-presenting__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-variation-settings: "wdth" 100;
	font-size: clamp(
		0.9375rem,
		4.678cqi,
		1rem
	); /* 15px floor → 16px @342 ceiling */
	line-height: 1.2;
	letter-spacing: var(--dfd-track-btn);
	color: var(--kd-btn-fg);
	background-color: var(--kd-btn-bg);
	border-radius: var(--kd-radius-pill);
	padding: 4.8951% 8.3916%; /* 14px / 24px of .bottom's 286px-@342
		content-box (NOT the card's 342px — see the comment above) */
	text-decoration: none;
	transition: background-color var(--kd-transition-fast);
	margin-top: auto; /* mobile only — pushes the button to this box's
		bottom edge (see .sponsor-presenting__bottom's own comment); reset
		to 0 at the desktop breakpoint, where the row is pinned as a whole
		instead */
}

.sponsor-presenting__cta:hover {
	background-color: var(--kd-btn-bg-hover);
}

/* Focus ring (gate round 1, item 5) — the inherited default is a plain
   outline that goes invisible navy-on-navy against this card's darker
   stop. Same two-tone ring tier-card.css's own
   `.dfd-tier-card__link:focus-visible` uses: a solid navy ring plus a
   white halo, so it reads on both the lighter top stop (mobile) and the
   navy bottom stop (desktop) this button can sit near. */
.sponsor-presenting__cta:focus-visible {
	outline: 2px solid var(--kd-color-contrast);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--kd-color-base);
}

/* ══════════════════════════════════════════════════════════════════════
   64em (1024px) — D8c desktop ticket takes over (a different Figma frame,
   not a scaled-up mobile one — see file header, gate round 2 item 1 for why
   this is 1024px and not round 1's 600px). ════════════════════════════ */
@media (min-width: 64em) {
	.sponsor-presenting__copy-extra {
		display: block;
	}

	.sponsor-presenting__copy {
		margin-block-start: 1.25rem; /* 20px, desktop gap */
	}

	.sponsor-presenting__heading {
		/* Shared section-heading scale (round-1 design-diff, item 6) — every
		   other section h2 in the theme sizes off this token
		   (adopt-grid.css, about-card.css, sponsor-tiers.css, etc.); this
		   pattern's own mobile-fixed 36px above is a genuine Figma-verified
		   exception (the token's own floor is 32px, not 36 — see that
		   rule's comment), so the token only takes over here, at the
		   desktop lock, where it reaches its own 50px ceiling.
		   Gate round 2, item 2: `max()`, not a bare `var()` — the token's
		   OWN floor (32px) is below the mobile-fixed 36px above it, so a
		   bare token reference would step the heading backwards (36→32px)
		   right at the mode switch before climbing back up with the
		   viewport. `max(2.25rem, token)` can't ever go below 36px; with
		   the switch now at 1024px the token is already past 36px there
		   anyway, so this is a guarantee against ever stepping backwards,
		   not a correction actively engaging at the lock itself. */
		font-size: max(
			2.25rem,
			var(--dfd-size-h2-section)
		); /* 50px @1440 (clamp ceiling) */
	}

	.sponsor-presenting__card-frame {
		width: 100%; /* no more mobile ceiling — fills the content column,
			capped at 1216px by theme.json contentSize */
		margin-inline: auto; /* gate round 2, item 3: was `0` — harmless
			today only because `width: 100%` already fills the parent
			exactly, which makes the centring silently DEPENDENT on core's
			own `.is-layout-constrained > *` margin-inline:auto rule (an
			`!important` in core's block-library styles) never changing or
			being beaten by something more specific. `auto` here makes this
			frame self-centering regardless of that. */
		aspect-ratio: 1216 / 400; /* D8c desktop frame */
		margin-block-start: 3rem; /* 48px, desktop gap */
	}

	.sponsor-presenting__card {
		border-radius: clamp(
			1.25rem,
			1.9737cqi,
			1.5rem
		); /* 20px floor → 24px @1216 ceiling */
		background-image: linear-gradient(
			to right,
			var(--dfd-tier-grad-headliner-top),
			var(--dfd-tier-grad-headliner-bottom)
		);
	}

	.sponsor-presenting__card::before {
		inset: 0 auto 0 0;
		width: 42.7632%; /* 520px @1216 */
		height: 100%;
		background-position: left bottom;
		background-image: url("../../images/ticket-skyline-left.png"); /* gate
			round 1, item 7 — the plain (no image-set support) fallback was
			still pointing at the mobile band crop */
		mask-image: linear-gradient(to right, #000 55%, transparent);
		-webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
	}

	@supports (background-image: image-set(url("a.jpg") 1x)) {
		.sponsor-presenting__card::before {
			background-image: image-set(
				url("../../images/ticket-skyline-left.webp") 1x
					type("image/webp"),
				url("../../images/ticket-skyline-left-2x.webp") 2x
					type("image/webp"),
				url("../../images/ticket-skyline-left.png") 1x type("image/png"),
				url("../../images/ticket-skyline-left-2x.png") 2x
					type("image/png")
			);
		}
	}

	/* Content column — the three real children stay stacked (base rule's
	   `flex-direction: column`) but shift right of the ghost: every child
	   gets the SAME `margin-left: 46.0526%` (content starts at x=560/1216 —
	   see file header) and `.top`/`.bottom` get `width: 50%` (content right
	   edge x=1168/1216 − 560/1216 = 50% exactly); `.logo` keeps its own
	   narrower 36.1842% width (440px) since the logo doesn't span the full
	   content column. */
	.sponsor-presenting__top,
	.sponsor-presenting__logo,
	.sponsor-presenting__bottom {
		flex: none;
		margin-left: 46.0526%;
	}

	/* Desktop-only contrast reset (gate round 1, item 4) — back to white/
	   yellow, this row sits over a darker part of the left→right gradient
	   here (measured ≥4.5:1 at the SP2 self-verify). */
	.sponsor-presenting__kicker {
		color: var(--kd-color-base);
	}

	.sponsor-presenting__date {
		color: var(--kd-color-accent);
	}

	.sponsor-presenting__top {
		width: 50%;
		padding: 3.2895% 0 0; /* 40px top @1216 */
	}

	.sponsor-presenting__kicker,
	.sponsor-presenting__date {
		font-size: clamp(
			0.9375rem,
			2.3026cqi,
			1.75rem
		); /* 15px floor → 28px @1216 ceiling */
	}

	.sponsor-presenting__logo {
		width: 36.1842%; /* 440px @1216, D28 desktop spec */
		margin: 4.7697% 0 0 46.0526%; /* 58px top gap @1216 + left offset */
	}

	.sponsor-presenting__bottom {
		width: 50%;
		flex: none; /* desktop: content-sized row, not a fill-and-push box —
			see this element's own base-rule comment */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		padding: 0 0 3.2895%; /* 40px bottom @1216 */
		margin-top: auto; /* pins the whole row to the card's bottom edge */
	}

	/* .subline/.cta are children of .bottom, which is width:50% of the card
	   with zero side padding at this breakpoint (see .bottom's own rule
	   above) — so its content-box IS the full 608px-@1216 box, and a
	   percentage here must be expressed against THAT (608px), not the
	   card's 1216px, or it comes out at half the intended size (the same
	   bug the mobile rules above flag and explain in detail). */
	.sponsor-presenting__subline {
		font-size: clamp(
			0.8125rem,
			1.2336cqi,
			0.9375rem
		); /* 13px floor → 15px @1216 ceiling */
		max-width: 66.7763%; /* 406px of .bottom's 608px-@1216 box */
	}

	.sponsor-presenting__cta {
		flex: none;
		font-size: clamp(
			0.9375rem,
			1.4803cqi,
			1.125rem
		); /* 15px floor → 18px @1216 ceiling */
		padding: 2.3026% 3.9474%; /* 14px / 24px of .bottom's 608px-@1216 box */
		margin-top: 0; /* the ROW is pinned to the bottom now (.bottom's own
			margin-top: auto), not this button individually */
	}

	/* Gate round 1 added a `@container (max-width: 50rem)` stacking branch
	   here for the bottom row (sub-line + CTA), because at the OLD 600px
	   mode switch the desktop landscape ticket had to render as small as
	   ~527px of card-frame width, where the row didn't fit side-by-side.
	   Round 2 moved the mode switch itself to 1024px instead (see this
	   file's header) — the landscape ticket's frame is never smaller than
	   ~852px now (its width AT the 1024px lock), safely above that 800px
	   threshold, so the branch was unreachable dead code and has been
	   removed rather than kept. */
}

/* ── 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.sponsor-presenting {
	margin-block-start: 0;
}

/* ── Duck'chella logo in the card's left half (client edit) ─────────────────
 * Janel/Userback 8521763, 2026-10-12: "add the Duck'chella logo to the left
 * of the JM logo so the graphic feels more full". Desktop landscape ticket
 * only: it sits centred in the 520px skyline-ghost zone (x 130→390 of
 * 1216, i.e. 10.69% / 21.38%), above the ::before ghost. The portrait
 * mobile card has no room for it next to the JM logo, so it stays hidden
 * there until a mobile layout is agreed (no mobile frame in Figma yet).
 * Decorative (alt=""): the section heading already names the event.
 * Figma: page "Client edits 10-12 (Janel) — KD proposal", node 2100:766. */
.sponsor-presenting__brand {
	display: none;
}

@media (min-width: 64em) {
	.sponsor-presenting__brand {
		display: block;
		position: absolute;
		z-index: 1;
		left: 10.6908%; /* 130px @1216 */
		top: 50%;
		width: 21.3816%; /* 260px @1216 */
		height: auto;
		transform: translateY(-50%);
	}
}