/*!
 * LBF Car & Bike Show — v2 HEADER ONLY
 * assets/css/car-show-hero-v2.css
 *
 * Loads AFTER car-show-page-v2.css (declared as a dependency so the order can
 * never flip) and overrides only the hero. Sections 2 through 9 are untouched.
 *
 * NAMING WARNING, because it is a genuine trap in this theme:
 * car-show-page-v2.css is NOT "page version 2". The -v2 there is a cache-bust
 * rename of the ORIGINAL car-show-page.css, and it is the base stylesheet for
 * BOTH template versions. This file is the page-v2 header. They are different
 * things that happen to share a suffix.
 *
 * Every rule is scoped under body.lbf-cs-v2, a class only page-car-show-v2.php
 * adds, so page-car-show.php is completely unaffected.
 *
 * ── WHY DARK, having shipped light in 32.76.0 ──────────────────────────────
 * The light panel was chosen because both logos are dark artwork: the Buckeye
 * lockup's visible pixels average 63/255 and its five sub-brand marks are thin
 * grey outlines, so on the v1 night gradient it measured 1.89:1 and vanished.
 * That reasoning still holds for the SPONSOR, which is why it now sits on a
 * cream card — the same answer the fireworks header uses for Charter.
 *
 * It was the wrong call for the show badge. That artwork was drawn to glow,
 * and the headlights inside it cannot read as headlights against a pale
 * background. Sponsor on cream, badge on navy, and both get what they need.
 *
 * ── THE LIGHT HAS ONE SOURCE ───────────────────────────────────────────────
 * No spotlight rig, no ambient sweep, no blueprint grid. Two halos sit behind
 * the badge, one per vehicle, running the same curves as the bulbs driving
 * them. The Chevelle lights the left, holds, hands over to the bagger lighting
 * the right, and back — a 16 second cycle with long holds and gentle
 * crossfades. An earlier build ran this at 7.2s with a strike-and-dip flicker
 * on every repeat, which read as blinking.
 */

/* Text tokens. Festival blue (#0537A4) is used as a FILL throughout but never
   as text on this panel: against the darkest stop it measures 1.92:1. Every
   text colour below is a lighter blue that clears AA. */
body.lbf-cs-v2{
	--csv2-cream:#FBF7EF;
	--csv2-body:#c6d3ea;
	--csv2-muted:#9ab0d8;
	--csv2-accent:#c2d8ff;
	--csv2-blue:#0537A4;
	--csv2-edge:rgba(122,162,240,.42);
}

/* ════════════════════════════════════════════════════════════
   §1  PANEL
   ════════════════════════════════════════════════════════════ */

body.lbf-cs-v2 .csv2-hero{
	position:relative; overflow:hidden;
	border-radius:18px;
	padding:clamp(1.4rem,2.45vw,2.1rem) clamp(1.3rem,2.6vw,2.1rem);
	background:
		radial-gradient(ellipse 62% 58% at 26% 50%, rgba(14,58,152,.52), transparent 68%),
		radial-gradient(ellipse 90% 70% at 88% 6%, rgba(30,74,176,.22), transparent 64%),
		linear-gradient(168deg,#0e1a3a 0%,#091228 54%,#050a1c 100%);
	border:1px solid rgba(140,175,255,.16);
	box-shadow:0 22px 48px rgba(0,4,20,.5), inset 0 1px 0 rgba(190,215,255,.10);
}

/* The base .cs-hero paints a diagonal sheen through ::before plus two orbs.
   All three are tuned for the v1 hero and fight the halos here. */
body.lbf-cs-v2 .csv2-hero::before{ content:none; }
body.lbf-cs-v2 .csv2-hero .cs-hero-bg,
body.lbf-cs-v2 .csv2-hero .cs-hero-orb-a,
body.lbf-cs-v2 .csv2-hero .cs-hero-orb-b{ display:none; }

/* Falloff, so the badge stays the brightest thing on the panel. */
body.lbf-cs-v2 .csv2-vig{
	position:absolute; inset:0; z-index:1; pointer-events:none;
	background:radial-gradient(ellipse 82% 88% at 28% 50%, transparent 30%, rgba(2,6,20,.62) 100%);
}

/* Corner bolts. The shared .rivet is a mid-grey stud built for a light panel;
   re-lit here as chrome catching the same light as everything else. */
body.lbf-cs-v2 .csv2-hero .rivet{
	width:9px; height:9px; z-index:7; border:0;
	background:radial-gradient(circle at 34% 30%, #cfd9ee 0%, #8492b4 48%, #4a5570 100%);
	box-shadow:0 1px 3px rgba(0,4,20,.75), inset 0 -1px 1px rgba(0,0,0,.4), 0 0 8px rgba(150,186,255,.25);
}
body.lbf-cs-v2 .csv2-hero .rivet--tl{ top:13px; left:13px; }
body.lbf-cs-v2 .csv2-hero .rivet--tr{ top:13px; right:13px; }
body.lbf-cs-v2 .csv2-hero .rivet--bl{ bottom:13px; left:13px; }
body.lbf-cs-v2 .csv2-hero .rivet--br{ bottom:13px; right:13px; }

/* ════════════════════════════════════════════════════════════
   §2  GRID
   ════════════════════════════════════════════════════════════ */

body.lbf-cs-v2 .csv2-grid{
	position:relative; z-index:6;
	display:grid; grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
	gap:clamp(.8rem,1.8vw,1.5rem);
	align-items:center;
}
body.lbf-cs-v2 .csv2-logowrap{
	position:relative; min-width:0;
	display:flex; align-items:center; justify-content:center;
}

/* ════════════════════════════════════════════════════════════
   §3  BADGE + HEADLIGHTS
   ════════════════════════════════════════════════════════════ */

/* Locked to the artwork's ratio and filling its column. This is the
   positioning context every lamp percentage below depends on — without it they
   would resolve against .csv2-logowrap, a centring flex column wider than the
   image at most viewport sizes, and every lamp would sit off the vehicle. */
body.lbf-cs-v2 .csv2-art{
	position:relative; z-index:2;
	width:100%; max-width:385px; aspect-ratio:516/538;
	animation:csv2-rise 1.1s cubic-bezier(.16,1,.3,1) both;
}
body.lbf-cs-v2 .csv2-mark{
	position:absolute; inset:0; z-index:1;
	width:100%; height:100%; display:block;
	filter:drop-shadow(0 22px 38px rgba(0,3,14,.78));
}
@keyframes csv2-rise{
	from{ opacity:0; transform:translateY(14px) scale(.98); }
	to  { opacity:1; transform:none; }
}

/* Positions are percentages of the TRIMMED 516x538 artwork this theme ships.
   The untrimmed 600x600 original gives different numbers — if the logo is ever
   replaced, re-measure against whatever file actually goes in.

   mix-blend-mode:screen is doing real work even on a dark panel: it keeps the
   lamp additive over the vehicle's paint instead of laying an opaque disc over
   the artwork's own bezel detail. */
body.lbf-cs-v2 .csv2-lamp{
	position:absolute; z-index:2; pointer-events:none;
	transform:translate(-50%,-50%) scale(.7);
	border-radius:50%;
	mix-blend-mode:screen;
	opacity:0;
	background:radial-gradient(circle at center,
		rgba(255,251,235,1)   0%,
		rgba(255,241,196,.92) 22%,
		rgba(255,226,140,.55) 42%,
		rgba(255,226,140,.20) 64%,
		transparent           78%);
}
body.lbf-cs-v2 .csv2-lamp--car{ width:9.5%; aspect-ratio:1; }
body.lbf-cs-v2 .csv2-lamp--c1{ left:3.20%;  top:62.58%; }
body.lbf-cs-v2 .csv2-lamp--c2{ left:6.20%;  top:62.68%; }
body.lbf-cs-v2 .csv2-lamp--c3{ left:25.39%; top:63.79%; }
body.lbf-cs-v2 .csv2-lamp--c4{ left:29.52%; top:64.13%; }
body.lbf-cs-v2 .csv2-lamp--bike{ left:76.86%; top:50.58%; width:17%; aspect-ratio:1; }

/* One gentle fade up on load for the car, then both hand over to the shared
   alternating cycle. No flicker: the strike-and-dip an earlier build repeated
   every cycle is what read as blinking. */
body.lbf-cs-v2 .csv2-lamp--car{
	animation:csv2-lamp-on 1.4s ease-out .8s both,
	          csv2-alt-car 16s ease-in-out 2.2s infinite;
}
body.lbf-cs-v2 .csv2-lamp--bike{
	animation:csv2-alt-bike 16s ease-in-out 2.2s infinite;
}
@keyframes csv2-lamp-on{
	0%  { opacity:0;   transform:translate(-50%,-50%) scale(.7); }
	100%{ opacity:.92; transform:translate(-50%,-50%) scale(1); }
}

/* The unlit side settles at .30, not near-black. Dropping it to .08 made the
   hand-over register as a switch being thrown rather than light moving. */
@keyframes csv2-alt-car{
	0%  { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	38% { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	50% { opacity:.30; transform:translate(-50%,-50%) scale(.95); }
	88% { opacity:.30; transform:translate(-50%,-50%) scale(.95); }
	100%{ opacity:.92; transform:translate(-50%,-50%) scale(1); }
}
@keyframes csv2-alt-bike{
	0%  { opacity:.30; transform:translate(-50%,-50%) scale(.95); }
	38% { opacity:.30; transform:translate(-50%,-50%) scale(.95); }
	50% { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	88% { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	100%{ opacity:.30; transform:translate(-50%,-50%) scale(.95); }
}

/* Two halos, one per vehicle, sitting behind the badge on the side its lamps
   are on. They run the same curves as the bulbs, so the light behind the badge
   is never out of step with the lamp supposed to be making it. */
body.lbf-cs-v2 .csv2-halo{
	position:absolute; z-index:0; pointer-events:none;
	opacity:0; transform:translate(-50%,-50%) scale(.93);
	filter:blur(6px);
	animation-duration:16s;
	animation-timing-function:ease-in-out;
	animation-delay:2.2s;
	animation-iteration-count:infinite;
}
body.lbf-cs-v2 .csv2-halo--car{
	left:26%; top:60%; width:106%; aspect-ratio:1.25;
	animation-name:csv2-halo-car;
	background:radial-gradient(ellipse at 42% 56%,
		rgba(255,247,225,.62) 0%, rgba(255,232,180,.40) 18%,
		rgba(186,210,255,.24) 40%, rgba(90,140,235,.12) 58%, transparent 76%);
}
body.lbf-cs-v2 .csv2-halo--bike{
	left:73%; top:48%; width:88%; aspect-ratio:1.15;
	animation-name:csv2-halo-bike;
	background:radial-gradient(ellipse at 58% 52%,
		rgba(255,249,232,.66) 0%, rgba(255,235,190,.42) 16%,
		rgba(192,214,255,.25) 38%, rgba(90,140,235,.12) 56%, transparent 76%);
}
@keyframes csv2-halo-car{
	0%  { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	38% { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	50% { opacity:.22; transform:translate(-50%,-50%) scale(.93); }
	88% { opacity:.22; transform:translate(-50%,-50%) scale(.93); }
	100%{ opacity:.92; transform:translate(-50%,-50%) scale(1); }
}
@keyframes csv2-halo-bike{
	0%  { opacity:.22; transform:translate(-50%,-50%) scale(.93); }
	38% { opacity:.22; transform:translate(-50%,-50%) scale(.93); }
	50% { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	88% { opacity:.92; transform:translate(-50%,-50%) scale(1); }
	100%{ opacity:.22; transform:translate(-50%,-50%) scale(.93); }
}

/* ════════════════════════════════════════════════════════════
   §4  COPY COLUMN
   ════════════════════════════════════════════════════════════ */

body.lbf-cs-v2 .csv2-copy{
	min-width:0; max-width:700px;
	display:flex; flex-direction:column; align-items:flex-start; text-align:left;
}

/* The badge carries the event name as artwork, so the real heading is
   available to screen readers and search engines but not painted twice. */
body.lbf-cs-v2 .csv2-sr{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ════════════════════════════════════════════════════════════
   §5  BUCKEYE SUPERSTORE
   ════════════════════════════════════════════════════════════ */

/* The sponsor block takes the PARAGRAPH'S OWN BOX. It used to be centred in
   the copy column while the paragraph below is left-aligned, so at a 670px
   column against a 490px measure the rule hung about 90px past the text.
   Matching the box fixes it at the source rather than nudging the rule.

   The two font declarations are here because ch resolves against the element's
   own font. Without them this box would compute a different 58ch than
   .csv2-lead does and the rule would drift again. Change one, change the
   other — there is a test asserting they match. */
body.lbf-cs-v2 .csv2-presents{
	width:min(100%,58ch);
	font-family:'Plus Jakarta Sans',system-ui,sans-serif;
	font-size:clamp(.8rem,.95vw,.88rem);
	margin:0 0 1.15rem;
	display:flex; flex-direction:column; align-items:center;
	text-align:center;
}

/* Cream card. Their lockup is near-black with five thin grey sub-brand marks;
   on the navy panel it measures 1.89:1 and the sub-brands would go first.
   Same answer the fireworks header uses for Charter. */
body.lbf-cs-v2 .csv2-bk-logo{
	display:block; line-height:0; width:fit-content;
	background:var(--csv2-cream); border-radius:10px;
	padding:.46rem .86rem; margin:0 auto .56rem;
	box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 10px 22px rgba(0,4,20,.55);
	transition:transform .18s ease, box-shadow .18s ease;
}
body.lbf-cs-v2 .csv2-bk-logo img{
	display:block; width:auto;
	/* Height-driven so the five sub-brand marks along the bottom stay above the
	   size they stop being readable at. */
	height:clamp(40px,4vw,55px);
}
body.lbf-cs-v2 a.csv2-bk-logo:hover{
	transform:translateY(-2px);
	box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 14px 30px rgba(0,4,20,.65);
}
body.lbf-cs-v2 a.csv2-bk-logo:focus-visible{
	outline:3px solid var(--csv2-accent); outline-offset:4px;
}

body.lbf-cs-v2 .csv2-bk-line{
	display:flex; align-items:baseline; justify-content:center;
	flex-wrap:wrap; gap:.4rem;
	margin:0 0 .6rem; text-align:center;
	font-family:'Outfit',system-ui,sans-serif; line-height:1;
}
body.lbf-cs-v2 .csv2-bk-presented{
	font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
	color:var(--csv2-muted);
}
body.lbf-cs-v2 .csv2-bk-name{
	font-size:.9rem; font-weight:800; color:var(--csv2-cream);
}
body.lbf-cs-v2 .csv2-bk-sep{ color:rgba(200,220,255,.4); font-size:.85rem; }
body.lbf-cs-v2 .csv2-bk-role{
	font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:var(--csv2-muted);
}

/* ── The rule, and the headlight crossing it ──────────────────
   Two problems were solved here in sequence and both fixes have to stay.

   First: the beam had no clipping at all, on the theory that clipping would
   flatten the bloom. Wrong — this wrapper is 22px tall and the bloom is 19px,
   so it fits entirely inside and clipping costs nothing vertically. Without it
   the beam ran its full travel across the whole panel, appearing out beside
   the badge column and carrying on off the right-hand edge.

   Second: clipping alone made it snap on and off at both ends. So the wrapper
   fades its last 9% to transparent with a mask, AND the beam's own brightness
   ramp is long — full only from about a fifth to four fifths of the way across
   — so the mask always has something already dim to fade out. Either fix alone
   is not enough.

   mask-repeat:no-repeat is what makes the mask clip at all; the default
   `repeat` would tile the gradient and contain nothing. overflow:hidden stays
   underneath as the fallback where masks are unsupported. */
body.lbf-cs-v2 .csv2-rulewrap{
	position:relative; width:100%; height:22px;
	display:flex; align-items:center;
	overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
	        mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
	-webkit-mask-size:100% 100%;   mask-size:100% 100%;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
body.lbf-cs-v2 .csv2-rule{
	width:100%; height:3px; border-radius:3px;
	background:linear-gradient(90deg,
		rgba(200,220,255,.07), rgba(200,220,255,.30) 22%,
		rgba(200,220,255,.30) 78%, rgba(200,220,255,.07));
}
body.lbf-cs-v2 .csv2-beam{
	position:absolute; top:50%; left:0; width:30%; height:3px;
	border-radius:3px; transform:translate(-50%,-50%); pointer-events:none;
	background:linear-gradient(90deg,
		transparent 0%, rgba(255,244,214,.14) 26%, rgba(255,248,232,.55) 41%,
		#ffffff 50%, rgba(255,248,232,.55) 59%, rgba(255,244,214,.14) 74%, transparent 100%);
	animation:csv2-beam 9s ease-in-out infinite;
}
/* The bloom. Clipped by .csv2-rulewrap two levels up, which is why it shows
   above and below the line but cannot leave its ends. */
body.lbf-cs-v2 .csv2-beam::before{
	content:""; position:absolute; left:50%; top:50%;
	width:190%; height:19px; transform:translate(-50%,-50%); pointer-events:none;
	background:radial-gradient(ellipse at center,
		rgba(255,247,224,.52) 0%, rgba(255,234,178,.22) 30%,
		rgba(190,214,255,.08) 52%, transparent 72%);
	filter:blur(5px);
}
@keyframes csv2-beam{
	0%  { left:-14%; opacity:0; }
	16% { opacity:1; }
	44% { opacity:1; }
	60% { left:114%; opacity:0; }
	100%{ left:114%; opacity:0; }
}

/* ════════════════════════════════════════════════════════════
   §6  KICKER, HEADLINE, LEAD, PILLS, FOOT
   ════════════════════════════════════════════════════════════ */

body.lbf-cs-v2 .csv2-kicker{
	font-family:'Outfit',system-ui,sans-serif;
	font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
	color:#93a9d2; margin:0 0 .62rem;
}

/* One line. nowrap plus a viewport-tracking size capped at 1.8rem, measured
   against the 46-character string at the narrowest copy column this layout
   produces — roughly 69px of clearance at the tightest point. If the wording
   changes, re-check it: a longer string will overflow silently. */
body.lbf-cs-v2 .csv2-hl{
	font-family:'Outfit',system-ui,sans-serif;
	font-size:clamp(.86rem,2.2vw,1.8rem); font-weight:900; line-height:1.08;
	letter-spacing:-.04em; color:var(--csv2-cream);
	margin:0 0 .92rem; white-space:nowrap;
}

body.lbf-cs-v2 .csv2-lead{
	margin:0 0 1.12rem; max-width:58ch;
	font-family:'Plus Jakarta Sans',system-ui,sans-serif;
	font-size:clamp(.8rem,.95vw,.88rem);
	font-weight:400; line-height:1.55; letter-spacing:0;
	color:var(--csv2-body);
}

body.lbf-cs-v2 .csv2-pills{
	display:flex; flex-wrap:wrap; gap:.46rem; margin:0 0 1.06rem;
}
body.lbf-cs-v2 .csv2-pill{
	display:inline-flex; align-items:center; gap:.35rem;
	font-family:'Outfit',system-ui,sans-serif;
	font-size:.72rem; font-weight:700; color:var(--csv2-accent);
	padding:.34rem .74rem; border-radius:99px;
	background:rgba(5,55,164,.38);
	border:1px solid var(--csv2-edge);
}
body.lbf-cs-v2 .csv2-pill svg{ color:var(--csv2-accent); flex:none; }

body.lbf-cs-v2 .csv2-ctas{ margin:0 0 1.06rem; gap:.64rem; }

/* The shared .cs-hero-btn--primary is a violet-leaning gradient. Retoned to
   festival blue so the header uses one blue rather than two. */
body.lbf-cs-v2 .csv2-ctas .cs-hero-btn--primary{
	background:var(--csv2-blue);
	color:#fff !important;
	box-shadow:0 10px 20px rgba(5,55,164,.5);
}
/* The shared .cs-hero-btn--outline is white on rgba(255,255,255,.08) with a
   white border. That survives on a dark panel, but the fill and border were
   tuned for the v1 gradient and read washed out against this one. The
   !important flags match the base file's, which uses them throughout this
   button group; without them the base rules win. */
body.lbf-cs-v2 .csv2-ctas .cs-hero-btn--outline{
	background:rgba(5,55,164,.26);
	color:#dfe9fd !important;
	border:1.5px solid rgba(122,162,240,.52) !important;
	backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.lbf-cs-v2 .csv2-ctas .cs-hero-btn--outline:hover{
	background:rgba(5,55,164,.4);
	border-color:rgba(160,192,255,.8) !important;
}
body.lbf-cs-v2 .csv2-ctas .cs-hero-btn--outline:focus-visible{
	outline:3px solid var(--csv2-accent); outline-offset:3px;
}

body.lbf-cs-v2 .csv2-foot{
	display:flex; align-items:center; flex-wrap:wrap; gap:.9rem;
	padding-top:.92rem; width:100%;
	border-top:1px solid rgba(200,220,255,.2);
}
body.lbf-cs-v2 .csv2-foot-item{ display:flex; flex-direction:column; gap:.12rem; }
body.lbf-cs-v2 .csv2-foot-lbl{
	font-family:'Outfit',system-ui,sans-serif;
	font-size:.58rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
	color:var(--csv2-muted);
}
body.lbf-cs-v2 .csv2-foot-val{
	font-family:'Outfit',system-ui,sans-serif;
	font-size:.84rem; font-weight:800; color:var(--csv2-cream);
}
body.lbf-cs-v2 .csv2-foot-sep{
	width:1px; height:22px; background:rgba(200,220,255,.24);
}

/* ════════════════════════════════════════════════════════════
   §7  RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width:900px){
	body.lbf-cs-v2 .csv2-grid{
		grid-template-columns:1fr; justify-items:center; text-align:center;
	}
	body.lbf-cs-v2 .csv2-copy{ align-items:center; text-align:center; max-width:600px; }
	body.lbf-cs-v2 .csv2-presents{ align-items:center; }
	body.lbf-cs-v2 .csv2-lead{ text-align:center; max-width:60ch; }
	body.lbf-cs-v2 .csv2-pills{ justify-content:center; }
	body.lbf-cs-v2 .csv2-ctas{ justify-content:center; }
	body.lbf-cs-v2 .csv2-foot{ justify-content:center; }
	/* A single column has nowhere near the width for 46 characters. */
	body.lbf-cs-v2 .csv2-hl{ white-space:normal; font-size:clamp(1.15rem,4.6vw,1.6rem); }
	body.lbf-cs-v2 .csv2-art{ width:min(68vw,306px); }
}

@media (max-width:600px){
	body.lbf-cs-v2 .csv2-art{ width:min(78vw,290px); }
	body.lbf-cs-v2 .csv2-bk-logo img{ height:clamp(36px,11vw,48px); }
	/* Full-width buttons, matching how the shared hero CTA rules already
	   behave at this width. */
	body.lbf-cs-v2 .csv2-ctas{ flex-direction:column; align-items:stretch; width:100%; }
	body.lbf-cs-v2 .csv2-ctas .cs-hero-btn{ width:100%; justify-content:center; }
}

/* ════════════════════════════════════════════════════════════
   §8  REDUCED MOTION
   Every animated thing this file introduces is listed. The headlights STAY
   LIT rather than being switched off — they are part of the picture, not an
   effect. The modifiers are named explicitly: the base class would win on
   source order alone, but only because this block sits later at equal
   specificity, which is fragile if the file is ever reordered or split.
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
	body.lbf-cs-v2 .csv2-art{ animation:none; opacity:1; transform:none; }

	body.lbf-cs-v2 .csv2-lamp,
	body.lbf-cs-v2 .csv2-lamp--car,
	body.lbf-cs-v2 .csv2-lamp--bike{
		animation:none; opacity:.9; transform:translate(-50%,-50%) scale(1);
	}
	body.lbf-cs-v2 .csv2-halo,
	body.lbf-cs-v2 .csv2-halo--car,
	body.lbf-cs-v2 .csv2-halo--bike{
		animation:none; opacity:.7; transform:translate(-50%,-50%) scale(1);
	}
	/* The travelling beam is pure decoration and carries nothing. */
	body.lbf-cs-v2 .csv2-beam{ animation:none; display:none; }
	body.lbf-cs-v2 a.csv2-bk-logo:hover{ transform:none; }
}

/* ════════════════════════════════════════════════════════════
   §9  PRINT
   Entrants print this page for the show field. Drop the decoration, invert to
   ink on paper, and keep the facts.
   ════════════════════════════════════════════════════════════ */

@media print{
	body.lbf-cs-v2 .csv2-vig,
	body.lbf-cs-v2 .csv2-halo,
	body.lbf-cs-v2 .csv2-lamp,
	body.lbf-cs-v2 .csv2-beam,
	body.lbf-cs-v2 .csv2-hero .rivet{ display:none; }
	body.lbf-cs-v2 .csv2-hero{
		background:#fff; border:1px solid #ccc; box-shadow:none;
	}
	body.lbf-cs-v2 .csv2-art{ animation:none; width:200px; }
	body.lbf-cs-v2 .csv2-mark{ filter:none; }
	body.lbf-cs-v2 .csv2-bk-logo{ background:none; box-shadow:none; padding:0; }
	body.lbf-cs-v2 .csv2-hl,
	body.lbf-cs-v2 .csv2-bk-name,
	body.lbf-cs-v2 .csv2-foot-val{ color:#000; }
	body.lbf-cs-v2 .csv2-kicker,
	body.lbf-cs-v2 .csv2-lead,
	body.lbf-cs-v2 .csv2-bk-presented,
	body.lbf-cs-v2 .csv2-bk-role,
	body.lbf-cs-v2 .csv2-foot-lbl{ color:#333; }
	body.lbf-cs-v2 .csv2-pill{ color:#000; background:none; border-color:#999; }
	body.lbf-cs-v2 .csv2-rule{ background:#999; }
}

/* ════════════════════════════════════════════════════════════
   §10  CAR SHOW SPONSORS
   The grid that replaced the "Questions about the show?" card at the foot of
   the Event Information left column. Lives in this file rather than the base
   stylesheet because only the v2 template renders it.

   NOTE this block is NOT on the dark header — it sits in the light part of
   the page, so everything below is tuned against the page background, not the
   navy panel above.
   ════════════════════════════════════════════════════════════ */

body.lbf-cs-v2 .cs-sponsors-card{
	background:#fff;
	border:1px solid rgba(20,28,48,.12);
	border-radius:18px;
	padding:1.1rem 1.1rem 1rem;
	box-shadow:0 6px 22px rgba(0,55,167,.05);
}

/* Three across. The left column is roughly 1.2 of a 2.2 split on a 1200px
   section — about 620px — which gives each tile a shade under 200px. Two would
   look sparse and four drops each logo to ~130px, below what a dealership
   lockup with sub-brand marks can survive. */
body.lbf-cs-v2 .cs-sponsors-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:.7rem;
	margin-top:.75rem;
	/* A short last row is centred rather than left-hugging. Four sponsors
	   would otherwise sit 3 + 1 with a lonely tile against the left edge. */
	justify-items:stretch;
	justify-content:center;
}

body.lbf-cs-v2 .cs-sponsor-tile{
	display:flex; flex-direction:column; align-items:center;
	background:#fff;
	border:1px solid rgba(20,28,48,.12);
	border-radius:12px;
	padding:.85rem .6rem .7rem;
	text-decoration:none; color:inherit;
	min-height:130px;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.lbf-cs-v2 a.cs-sponsor-tile:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 24px rgba(0,55,167,.12);
	border-color:var(--blue,#1a2b8c);
}
body.lbf-cs-v2 a.cs-sponsor-tile:focus-visible{
	outline:3px solid var(--blue,#1a2b8c); outline-offset:3px;
}

/* Fixed logo box. Sponsors send wildly different shapes — a wide dealership
   lockup, a tall crest, a square badge — and letting each tile size itself to
   its logo makes the row ragged. A fixed box with object-fit:contain means
   every cell matches and nothing is cropped or stretched. */
body.lbf-cs-v2 .cs-sponsor-logo{
	flex:1;
	display:flex; align-items:center; justify-content:center;
	width:100%; height:62px; margin-bottom:.6rem;
	overflow:hidden;
}
body.lbf-cs-v2 .cs-sponsor-logo img{
	max-height:62px; max-width:100%; width:auto; height:auto;
	object-fit:contain; display:block;
}

body.lbf-cs-v2 .cs-sponsor-name{
	width:100%; text-align:center;
	border-top:1px solid rgba(20,28,48,.10);
	padding-top:.55rem;
	font-family:'Plus Jakarta Sans',system-ui,sans-serif;
	font-size:.78rem; font-weight:600; line-height:1.3;
	color:var(--text,#0e1525);
}

body.lbf-cs-v2 .cs-sponsors-help{
	margin:.85rem 0 0;
	font-size:.78rem; line-height:1.5;
	color:var(--text-2,#374151);
}
body.lbf-cs-v2 .cs-sponsors-help a{
	color:var(--blue,#1a2b8c); font-weight:700;
	border-bottom:1.5px solid var(--blue,#1a2b8c); padding-bottom:.05rem;
	text-decoration:none;
}

/* The pill whose icon was removed: without the svg the flex gap would leave a
   phantom indent before the text. */
body.lbf-cs-v2 .csv2-pill--noicon{ gap:0; }

@media (max-width:1000px){
	/* The Event Information grid has already collapsed to one column here, so
	   the card is full width and can take a fourth tile. */
	body.lbf-cs-v2 .cs-sponsors-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:700px){
	body.lbf-cs-v2 .cs-sponsors-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:400px){
	body.lbf-cs-v2 .cs-sponsors-grid{ grid-template-columns:1fr; }
}