/* ==========================================================================
   Event Brand page — task-262 / ADR-011
   Editorial-minimal, photo/video-led. One accent (brand --brand-primary), hairline
   rules, sharp corners, big type (Space Grotesk display + Inter text), generous
   whitespace, gradient scrim ON photos. Deliberately NOT the gradient-card / pill /
   multicolor / heavy-shadow "AI website" look.
   App-prefixed (.bd-*) to avoid cross-section conflicts. Mobile-first.
   ========================================================================== */

.bd {
  --bd-accent: var(--brand-primary, #138577);
  --bd-accent-2: var(--brand-secondary, #d4a24c);
  --bd-ink: #14201d;
  --bd-paper: #ffffff;
  --bd-muted: #5d6b66;
  --bd-hairline: #e4e8e6;
  --bd-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --bd-text: 'Inter', system-ui, sans-serif;
  color: var(--bd-ink);
  font-family: var(--bd-text);
  background: var(--bd-paper);
}

.bd *,
.bd *::before,
.bd *::after { box-sizing: border-box; }

.bd-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.bd-eyebrow {
  font-family: var(--bd-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-accent);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bd-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bd-accent);
  display: inline-block;
}

.bd-h2 {
  font-family: var(--bd-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

/* ---------- HERO ---------- */
/* TRUE full-viewport hero that sits UNDER the fixed site navbar.
   The site base wraps content in #main-content { padding-top: var(--navbar-height) }
   (80px desktop / 70px mobile) which would otherwise push the hero photo below the bar.
   We cancel that with a negative top margin equal to the navbar height so the photo
   bleeds to the very top of the viewport, behind the transparent navbar. The hero's own
   top padding (.bd-hero__inner) then clears the bar so the text never sits under it. */
.bd-hero {
  position: relative;
  /* Own stacking context so poster → video → scrim → lockup → sound stay ordered
     even when a child (e.g. `.bd-hero__embed`) is absolutely positioned with a z-index. */
  isolation: isolate;
  /* Fill the viewport: svh/dvh account for mobile browser chrome; vh is the fallback. */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Pull up under the fixed navbar (height from the global design-system token). */
  margin-top: calc(-1 * var(--navbar-height, 80px));
  /* Branded default backdrop — looks designed even before a hero photo/video is set.
     A real hero_media/hero_image (object-fit:cover, absolute) paints over this. */
  background:
    radial-gradient(125% 85% at 82% -10%, color-mix(in srgb, var(--bd-accent) 42%, transparent) 0%, rgba(11,21,19,0) 55%),
    linear-gradient(158deg, #0e211c 0%, #0b1513 58%, #07100e 100%);
  color: #fff;
}
/* On phones the navbar is shorter — pull up by the mobile navbar height instead. */
@media (max-width: 900px) {
  .bd-hero { margin-top: calc(-1 * var(--navbar-height-mobile, 70px)); }
}
.bd-hero__media,
.bd-hero__media img,
.bd-hero__media video,
.bd-hero__embed,
.bd-hero__embed video,
.bd-hero__embed iframe,
.bd-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Stacking with hero video: media (0) → scrim (1) → lockup (2) → sound (3).
   Giving the embed z-index:1 without raising the lockup made date/place/chips/CTAs
   look “removed” — they were still in the DOM, painted under the video.
   Media is one layer so the video cannot escape above the copy; the Audio control
   is relocated to `.bd-hero` by JS so it is not trapped inside media’s context. */
.bd-hero__media { z-index: 0; }
.bd-hero__poster { z-index: 0; }
.bd-hero__embed {
  border: 0;
  overflow: hidden;
  z-index: 1;
  /* Video is decorative; clicks go to CTAs / the relocated sound button. */
  pointer-events: none;
}
.bd-hero__embed iframe,
.bd-hero__embed video { border: 0; pointer-events: none; }
.bd-hero > .media-embed__sound,
.bd-hero .media-embed__sound {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(8,16,14,.55);
  color: #fff;
  font: 600 .85rem/1 var(--bd-display, "Space Grotesk", sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bd-hero > .media-embed__sound:hover,
.bd-hero .media-embed__sound:hover { background: rgba(8,16,14,.78); }
.bd-hero > .media-embed__sound[aria-pressed="true"],
.bd-hero .media-embed__sound[aria-pressed="true"] {
  border-color: var(--bd-accent, #c4a35a);
  color: var(--bd-accent, #c4a35a);
}
.bd-hero--compact { min-height: 42vh; min-height: 42svh; }
.bd-hero--compact .bd-hero__title { font-size: clamp(2rem, 6vw, 3.6rem); max-width: 14ch; }
/* Gradient scrim ON the photo — keeps text legible, gives the editorial mood */
.bd-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,16,14,0.15) 0%, rgba(8,16,14,0.0) 30%, rgba(8,16,14,0.78) 100%),
    linear-gradient(90deg, rgba(8,16,14,0.55) 0%, rgba(8,16,14,0.0) 55%);
}
.bd-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Clear the fixed navbar (height token) + breathing room, so the logo/title never
     tuck under the bar on short viewports where the bottom-aligned content grows tall. */
  padding-top: calc(var(--navbar-height, 80px) + 48px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
.bd-hero__lockup {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}
@media (max-width: 900px) {
  .bd-hero__inner { padding-top: calc(var(--navbar-height-mobile, 70px) + 36px); }
}
.bd-hero__logo {
  height: clamp(52px, 8vw, 88px);
  width: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35));
}
.bd-hero__title {
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 16ch;
  /* Direct color — inherited #fff from .bd-hero loses to a global `h1{color}` rule
     (inheritance is weaker than any direct selector). Keep the hero title legible. */
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.bd-hero__tagline {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 46ch;
  color: rgba(255,255,255,0.92);
  margin: 0 0 30px;
}
.bd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.86);
  margin-bottom: 30px;
}
.bd-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.bd-hero__meta i { color: var(--bd-accent-2); }

/* ---------- Buttons ---------- */
.bd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--bd-text);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border-radius: var(--rr-radius-btn, 6px);   /* squared, shared with partner + event (task-281) */
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.bd-btn--primary { background: var(--bd-accent); color: #fff; }
.bd-btn--primary:hover { background: #0f6f64; color: #fff; transform: translateY(-2px); }
.bd-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.bd-btn--ghost:hover { border-color: #fff; transform: translateY(-2px); color: #fff; }
.bd-btn--outline {
  background: transparent; color: var(--bd-ink);
  border-color: var(--bd-hairline);
}
.bd-btn--outline:hover {
  border-color: var(--bd-accent); color: var(--bd-accent); transform: translateY(-2px);
}
.bd-btn--ink { background: var(--bd-ink); color: #fff; }
.bd-btn--ink:hover { background: var(--bd-accent); color: #fff; transform: translateY(-2px); }

/* Hero CTAs stay compact so the video/photo remains visible behind the lockup.
   Full-size `.bd-btn` is kept for the rest of the page (next edition, callouts, …). */
.bd-hero .bd-actions {
  gap: 8px;
  margin-top: 18px;
}
.bd-hero .bd-btn {
  padding: 9px 16px;
  font-size: 0.875rem;
  gap: 7px;
}
.bd-hero .media-embed__sound,
.bd-hero > .media-embed__sound {
  padding: 8px 12px;
  font-size: 0.75rem;
  gap: 6px;
}

/* ---------- Section frame ---------- */
/* Double class (.bd-section.bd-section--X) + .bd ancestor = specificity (0,3,0), which beats the
   global `.events-page section:nth-child(2n)` (0,2,1) in events.css that was tinting even-indexed
   sections (it had hidden the dark closing CTA band). */
.bd .bd-section { padding: clamp(56px, 9vw, 120px) 0; }
.bd .bd-section.bd-section--paper { background: var(--bd-paper); }
.bd .bd-section.bd-section--alt { background: #f6f8f7; }
.bd .bd-section.bd-section--ink { background: var(--bd-ink); color: #fff; }
.bd .bd-section--ink .bd-h2,
.bd .bd-section--ink .bd-eyebrow { color: #fff; }

/* ---------- Stats strip ---------- */
.bd-stats {
  display: grid;
  /* auto-fit so N stats fill the row. Dividers are drawn by the cells (inset shadow),
     NOT by a hairline parent bg — so a wrapped odd cell never shows as an empty grey box. */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0;
  background: var(--bd-paper);
  border: 1px solid var(--bd-hairline);
}
.bd-stat {
  background: var(--bd-paper);
  padding: clamp(28px, 4vw, 44px) 24px;
  text-align: center;
  box-shadow: inset 1px 0 0 var(--bd-hairline), inset 0 1px 0 var(--bd-hairline);
}
.bd-stat__num {
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bd-accent);
}
.bd-stat__label {
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bd-muted);
}

/* ---------- Lead paragraph ---------- */
.bd-lead {
  max-width: 640px;
  color: var(--bd-muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  margin: 0 0 32px;
}

/* ---------- Distances (5K · 10K · 21K) ---------- */
.bd-distances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0;
  border: 1px solid var(--bd-hairline);
}
.bd-distance {
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  background: var(--bd-paper);
  box-shadow: inset 1px 0 0 var(--bd-hairline), inset 0 1px 0 var(--bd-hairline);
  transition: background-color .2s ease;
}
.bd-distance:hover { background: #fafcfb; }
.bd-distance__km {
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bd-accent);
}
.bd-distance__km span {
  font-size: 0.85rem; font-weight: 600; color: var(--bd-muted);
  margin-left: 7px; letter-spacing: 0.08em; text-transform: uppercase;
}
.bd-distance__title {
  font-family: var(--bd-display); font-weight: 600; font-size: 1.3rem;
  margin: 16px 0 8px; letter-spacing: -0.01em;
}
.bd-distance__desc { color: #3a4742; font-size: 0.96rem; line-height: 1.55; margin: 0 0 16px; }
.bd-distance__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bd-distance__meta li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--bd-muted); }
.bd-distance__meta i { color: var(--bd-accent-2); width: 16px; text-align: center; }

/* ---------- Brand story ---------- */
.bd-story {
  max-width: 720px;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: #34423d;
}
.bd-story p { margin: 0 0 1.1em; }

/* ---------- Editions archive ---------- */
.bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 26px;
}
.bd-edition {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0b1513;
}
.bd-edition img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.bd-edition:hover img { transform: scale(1.05); }
.bd-edition__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,16,14,0.05) 30%, rgba(8,16,14,0.85) 100%);
}
.bd-edition__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
}
.bd-edition__year {
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.bd-edition__name { font-size: 0.98rem; font-weight: 500; opacity: 0.92; margin-top: 4px; }
/* A lone past edition: a CONTAINED, centred feature card — NOT a full-width letterbox banner
   that stretches awkwardly on large monitors (task-281, was a 16/6 max-1080px band). */
.bd-grid--single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
@media (min-width: 760px) {
  .bd-grid--single .bd-edition { aspect-ratio: 16 / 10; }
  .bd-grid--single .bd-edition__body { padding: 32px; }
  .bd-grid--single .bd-edition__year { font-size: clamp(2.4rem, 5vw, 3.4rem); }
  .bd-grid--single .bd-edition__name { font-size: 1.1rem; }
}
.bd-gallery-cta { text-align: center; margin-top: 30px; }
.bd-edition__cta {
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bd-accent-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Sponsors ---------- */
.bd-sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--bd-hairline);
  border: 1px solid var(--bd-hairline);
}
.bd-sponsor {
  background: var(--bd-paper);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.bd-sponsor img {
  /* Cap to a uniform height so logos of wildly different source dimensions read at the SAME visual
     scale (standardized wall). task-273. */
  max-width: 80%;
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter .2s ease, opacity .2s ease;
}
.bd-sponsor:hover img { filter: grayscale(0); opacity: 1; }

/* Main sponsors (tier=main or sponsor_type order 0): larger cells, full colour, shown above the
   rest as a prominent row. task-270. */
.bd-sponsors--main {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  max-width: 920px;
  margin: 0 auto 2px;
}
.bd-sponsor--main {
  aspect-ratio: 16 / 9;
  padding: 30px;
}
.bd-sponsor--main img {
  max-height: 84px;
  max-width: 78%;
  filter: none;
  opacity: 1;
}

/* ---------- Comuni / patrocini ----------
   Institutional band, deliberately distinct from the commercial sponsors grid above:
   centered pill chips (optional crest + name), not a logo wall. */
.bd-comuni {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.bd-comuni { gap: 20px; }
.bd-comune__inner {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 124px;            /* uniform cell height so every patrocinio aligns. task-281. */
  padding: 18px 30px;
  border: 1px solid var(--bd-hairline);
  border-radius: var(--rr-radius-card, 10px);
  background: var(--bd-paper);
  font-family: var(--bd-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--bd-ink);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.bd-comune__inner:hover { border-color: var(--bd-accent); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(8,20,36,.10); }
.bd-comune__crest {
  /* Big institutional crest — towns/enti are headline supporters, sized like a real emblem. task-281. */
  height: 100px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.bd-comune__name { line-height: 1.2; }
@media (max-width: 560px) {
  .bd-comune__crest { height: 76px; }
  .bd-comune__inner { font-size: 1.05rem; padding: 16px 22px; min-height: 100px; }
}

/* Sub-label inside a wall section (e.g. "Main partner" / "Con il supporto di"), matching the
   partner page's .ppx-wall-label so the two pages read identically. task-281. */
.bd-wall-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bd-muted);
  text-align: center;
}
.bd-wall-label::before, .bd-wall-label::after {
  content: "";
  width: clamp(20px, 6vw, 40px);
  height: 1px;
  background: var(--bd-hairline);
}
.bd-wall-label--spaced { margin-top: clamp(2rem, 4vw, 3rem); }
.bd-section--ink .bd-wall-label { color: rgba(255,255,255,.6); }
.bd-section--ink .bd-wall-label::before, .bd-section--ink .bd-wall-label::after { background: rgba(255,255,255,.2); }

/* ---------- Video reels / carousel (task-268, task-272) ----------
   Vertical 9:16 clips. Desktop: a centered row (all visible; `safe center` so it still scrolls if it
   overflows). Mobile: a swipe carousel — one-ish clip per view with scroll-snap. Holds re-hosted MP4
   (autoplay on scroll) and Google Drive embeds (iframe player, click-to-play). On an --ink section. */
.bd-reels {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;        /* fluent scrolling (task-282) */
  justify-content: safe center;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bd-reel {
  flex: 0 0 auto;
  width: min(92vw, 360px);        /* bigger; near full-width on mobile (task-283) */
  scroll-snap-align: center;
  scroll-snap-stop: always;       /* stop on each video, no skipping (mobile) */
  margin: 0;
  position: relative;
}
@media (min-width: 700px) {
  .bd-reel { width: 360px; scroll-snap-align: start; }
}
.bd-reel__video,
.bd-reel__embed {
  width: 100%;
  aspect-ratio: 9 / 16;     /* vertical clips */
  border-radius: 14px;
  background: #0b1d33;
  display: block;
}
.bd-reel__video { object-fit: cover; }   /* fill the frame — no black borders */
.bd-reel__embed { border: 0; }
.bd-reel__ig {
  position: absolute;
  left: 10px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(8, 20, 36, .72);
  color: #fff;
  font-size: .82rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.bd-reel__ig:hover { background: var(--bd-accent); }
.bd-reel__caption {
  margin-top: 8px;
  color: var(--bd-muted);     /* dark text — the section is now white (task-283) */
  font-size: .9rem;
  line-height: 1.3;
}

/* ---------- Gallery ----------
   Mobile-first compact grid (NOT one big image at a time):
   2 columns on phones → 3 on small tablets → 4 on desktop, square thumbs, tight gap. */
.bd-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 600px) {
  .bd-gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 992px) {
  .bd-gallery { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.bd-gallery__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0b1513;
}
.bd-gallery__item img,
.bd-gallery__item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.bd-gallery__item:hover img { transform: scale(1.06); }
.bd-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ---------- Child brands (task-348) ----------
   An umbrella brand's page IS its children, so these are the primary content, not a footnote:
   photo-led cards on the same 3:2 editorial rhythm as the reason tiles, with the next edition's
   date surfaced so the card answers "when" without a click. */
.bd-children {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.bd-child {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--bd-hairline);
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  isolation: isolate;
  transition: transform .2s ease;
}
.bd-child__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .6s ease;
}
.bd-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(11, 26, 23, 0) 28%,
              rgba(11, 26, 23, .58) 62%,
              rgba(11, 26, 23, .9) 100%);
}
.bd-child:hover { color: #fff; transform: translateY(-3px); }
.bd-child:hover .bd-child__img { transform: scale(1.04); }
.bd-child__body { position: relative; z-index: 2; padding: clamp(18px, 2.2vw, 26px); width: 100%; }
.bd-child__logo { height: 40px; width: auto; margin-bottom: 12px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.bd-child__name { font-family: var(--bd-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); color: #fff; }
.bd-child__tag { color: rgba(255,255,255,.84); margin-top: 6px; font-size: 0.95rem; }
.bd-child__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  font-size: 0.85rem;
  color: #fff;
}
/* No photo yet: fall back to the brand gradient so the card never renders as a grey box. */
.bd-child--noimg { background: linear-gradient(158deg, #0e211c 0%, var(--bd-accent) 320%); }
@media (prefers-reduced-motion: reduce) {
  .bd-child, .bd-child__img { transition: none; }
  .bd-child:hover { transform: none; }
  .bd-child:hover .bd-child__img { transform: none; }
}

/* ---------- Follow us (task-348) ----------
   A brand builds an audience between editions; the page had no follow path at all. */
.bd-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 2.5vw, 26px); }
.bd-social__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--rr-radius-btn, 6px);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.bd-social__link:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-2px); }
.bd-social__link i { font-size: 1.15rem; }
.bd-section--paper .bd-social__link,
.bd-section--alt .bd-social__link { color: var(--bd-ink); border-color: var(--bd-hairline); }
.bd-section--paper .bd-social__link:hover,
.bd-section--alt .bd-social__link:hover { background: #f2f5f4; border-color: var(--bd-accent); color: var(--bd-ink); }

/* ---------- Closing CTA band ---------- */
.bd-cta {
  text-align: center;
}
.bd-cta .bd-h2 { margin-bottom: 26px; }

/* ---------- Route / "Il percorso" ----------
   Full-width map image with a hairline frame + caption, plus optional per-distance
   route-line thumbnails. Editorial: sharp corners, one accent, no card shadows. */
.bd-route__map {
  position: relative;
  border: 1px solid var(--bd-hairline);
  background: var(--bd-paper);
  overflow: hidden;
}
.bd-route__map img {
  display: block;
  width: 100%;
  height: auto;
}
.bd-route__caption {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--bd-muted);
  display: flex;
  align-items: center;
  gap: 9px;
}
.bd-route__caption i { color: var(--bd-accent-2); }
.bd-route__lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 28px;
  background: var(--bd-hairline);
  border: 1px solid var(--bd-hairline);
}
.bd-route__line {
  background: var(--bd-paper);
  padding: 22px 20px;
  text-align: center;
}
.bd-route__line img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  margin-bottom: 14px;
}
.bd-route__line-km {
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--bd-accent);
}
.bd-route__line-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bd-muted);
  margin-top: 4px;
}
@media (max-width: 640px) {
  .bd-route__lines { grid-template-columns: 1fr; }
  .bd-route__line img { height: 96px; }
}

/* ---------- Interactive GPX map (live Leaflet, same engine as the event page) ----------
   Full-bleed map framed with a single hairline top/bottom rule, editorial distance toggle
   in the brand accent. No rounded corners, no card shadow — fits the .bd-* aesthetic. */
.bd-route__map-block {
  margin-top: 32px;
  border-top: 1px solid var(--bd-hairline);
  border-bottom: 1px solid var(--bd-hairline);
  background: var(--bd-paper);
}
.bd-route__tabs {
  list-style: none;
  margin: 0;
  padding: 18px 0 16px;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.bd-route__tab {
  background: none;
  border: 1px solid var(--bd-hairline);
  padding: 8px 18px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--bd-muted);
  transition: border-color .15s, background .15s, color .15s;
}
.bd-route__tab--active {
  background: var(--bd-accent);
  border-color: var(--bd-accent);
  color: #fff;
}
.bd-route__tab-km {
  font-family: var(--bd-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.bd-route__tab-dist {
  font-size: 0.72rem;
  opacity: 0.85;
}
.bd-route__leaflet {
  width: 100%;
  display: block;
  background: #e8edf2;
}
.bd-route__leaflet-loading {
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-route__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 16px 20px;
  background: #fff;
}
.bd-route__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bd-accent);
  text-decoration: none;
  border: 1px solid var(--bd-accent);
  transition: background .15s, color .15s;
}
.bd-route__action:hover {
  background: var(--bd-accent);
  color: #fff;
}
@media (max-width: 640px) {
  .bd-route__leaflet-loading { height: 420px; }
}

/* ---------- "Diventa partner" recruitment band ----------
   Gold-accent ink band inviting businesses to sponsor. On-brand: sharp button,
   one accent, no gradient-card/pill. */
.bd-partner-cta {
  text-align: center;
  border-top: 3px solid var(--bd-accent-2);
}
/* Beat the .bd .bd-section--ink .bd-eyebrow (#fff) override (0,3,0) — keep the gold accent. */
.bd .bd-partner-cta .bd-eyebrow {
  justify-content: center;
  color: var(--bd-accent-2);
}
.bd-partner-cta .bd-eyebrow::before { background: var(--bd-accent-2); }
.bd-partner-cta .bd-lead {
  margin: 0 auto 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.84);
}
.bd-btn--gold { background: var(--bd-accent-2); color: var(--bd-ink); }
.bd-btn--gold:hover { background: #c08f33; color: var(--bd-ink); transform: translateY(-2px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bd-edition img,
  .bd-gallery__item img,
  .bd-btn { transition: none; }
  .bd-edition:hover img,
  .bd-gallery__item:hover img { transform: none; }
}

/* ---------- Entrance reveal ----------
   Content is server-rendered and MUST be visible without JS, so we never park it at opacity:0
   waiting on a scroll observer (that left the stats strip blank). Instead a self-contained
   keyframe fades each item in once and ends visible. */
@media (prefers-reduced-motion: no-preference) {
  .bd .animate-on-scroll { animation: bd-reveal .6s ease both; }
}
@keyframes bd-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Custom staff-built sections (task-263) ----------
   Modern editorial blocks added from /dashboard/brands/. One media (image OR video) + rich text,
   laid out horizontal (2-col grid, media + text) or vertical (media above text). Same .bd-*
   language: one accent, hairline frame, sharp corners, big type. Mobile-first → stacks on phones. */
.bd-customsec {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* Vertical (default): media on top, text below — single column. */
.bd-customsec--vertical {
  grid-template-columns: 1fr;
  max-width: 900px;
}
/* Horizontal: media + text side-by-side on wide screens; stacks below 860px. */
@media (min-width: 860px) {
  .bd-customsec--horizontal { grid-template-columns: 1fr 1fr; }
}
.bd-customsec--text-only { max-width: 760px; }

.bd-customsec__media {
  position: relative;
  overflow: hidden;
  background: #0b1513;
  border: 1px solid var(--bd-hairline);
}
.bd-customsec__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Horizontal media gets a fixed editorial aspect so the two columns balance. */
@media (min-width: 860px) {
  .bd-customsec--horizontal .bd-customsec__media { aspect-ratio: 4 / 3; }
  .bd-customsec--horizontal .bd-customsec__media img,
  .bd-customsec--horizontal .bd-customsec__media .bd-customsec__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
}
/* Self-hosted autoplay video: cap height + contain so portrait clips don't dominate
   the page and landscape clips still fill width. Centered on a dark stage. */
.bd-customsec__media--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1513;
}
.bd-customsec__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  background: #0b1513;
}
/* Vertical layout (the reel/phone-video case): size the <video> to its own aspect and drop the dark
   stage, so a portrait clip shows as a clean centered frame instead of being pillarboxed (black side
   bars). task-270. */
.bd-customsec--vertical .bd-customsec__media--video {
  background: transparent;
  border: none;
}
.bd-customsec--vertical .bd-customsec__video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 14px;
}
@media (max-width: 600px) {
  .bd-customsec__video { max-height: 70vh; }
  .bd-customsec--vertical .bd-customsec__video { max-height: 78vh; }
}
/* Drive video embed: 16:9 responsive iframe wrapper (Drive shows player chrome — expected). */
.bd-customsec__video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.bd-customsec__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* In a horizontal layout the 16:9 wrapper would over-tall the row; let it fill the cell instead. */
@media (min-width: 860px) {
  .bd-customsec--horizontal .bd-customsec__video-frame { padding-top: 0; height: 100%; }
}

.bd-customsec__body { min-width: 0; }
.bd-customsec__content {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: #34423d;
}
.bd-customsec__content p { margin: 0 0 1.1em; }
.bd-customsec__content p:last-child { margin-bottom: 0; }
.bd-customsec__content a { color: var(--bd-accent); }
.bd-customsec__cta { margin-top: 26px; }

/* On an --ink band (rare, if a caller wraps it dark) keep text legible. */
.bd-section--ink .bd-customsec__content { color: rgba(255,255,255,0.86); }

.bd-customsec--no-mobile { /* hidden on phones when show_on_mobile is off */ }
@media (max-width: 640px) {
  .bd-customsec--no-mobile { display: none; }
}

/* ---------- Responsive ---------- */
/* Stats use auto-fit (see .bd-stats) so they fill the row regardless of count —
   no fixed 4-col override (that left an empty hairline cell when only 3 stats). */

/* ---------- Perché partecipare — photographic reasons band (task-346) ----------
   Each tile is a real photo of the event with the copy sitting on a scrim over it. Replaces the
   task-284 icon cards: the argument for taking part is the picture, not a pictogram. Editorial
   rules kept from the rest of the page — squared corners, hairline border, no drop shadows. */
.bd-reasons {
  display: grid;
  /* Two large tiles per row on desktop. The source photos are landscape (3:2 from the race, 16:9
     from the drone) — packing four narrow columns cropped them into portraits and threw away the
     subject, which is the whole point of using a photo instead of an icon. */
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(24px, 4vw, 40px);
}
.bd-reason {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bd-hairline);
  border-radius: 4px;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
@media (max-width: 520px) {
  /* One column: give the copy a bit more room under a shorter crop. */
  .bd-reason { aspect-ratio: 4 / 3; }
}
.bd-reason__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .6s ease;
}
.bd-reason:hover .bd-reason__img { transform: scale(1.04); }
/* Scrim: transparent at the top so the photo reads, opaque behind the copy so it stays legible on
   any image. Sized generously — a short caption on a bright sky still needs the full ramp. */
.bd-reason::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(11, 26, 23, 0) 30%,
              rgba(11, 26, 23, .55) 62%,
              rgba(11, 26, 23, .88) 100%);
}
.bd-reason__body {
  position: relative;
  z-index: 2;
  padding: clamp(18px, 2.2vw, 26px);
}
.bd-reason__title {
  font-family: var(--bd-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: #fff;
}
.bd-reason__text {
  color: rgba(255, 255, 255, .84);
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .bd-reason__img, .bd-reason:hover .bd-reason__img { transition: none; transform: none; }
}

/* ---------- Sponsor tecnico — dedicated band (task-346 / task-363) ----------
   The top placement sold each edition. Ink background, white lockup large and centred.
   Do NOT invert: an opaque white plate becomes a white square on teal, and hover
   `filter: none` would drop a coloured mark onto ink. Ship a white-on-transparent PNG. */
.bd-techsponsor__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(20px, 3vw, 32px);
}
.bd-techsponsor__item {
  flex: 0 1 min(100%, 560px);
  text-align: center;
}
.bd-techsponsor__link {
  display: block;
  padding: clamp(18px, 2.4vw, 28px) 0;
}
.bd-techsponsor__logo {
  display: block;
  margin: 0 auto;
  max-width: min(100%, 420px);
  max-height: clamp(96px, 16vw, 180px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .96;
  transition: opacity .35s ease, transform .35s ease;
}
.bd-techsponsor__link:hover .bd-techsponsor__logo {
  opacity: 1;
  transform: translateY(-2px) scale(1.04);
}
.bd-techsponsor__text {
  color: rgba(255, 255, 255, .72);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 8px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .bd-techsponsor__logo { transition: none; }
  .bd-techsponsor__link:hover .bd-techsponsor__logo { transform: none; }
}

/* ---------- Prossima edizione — countdown band (task-285) ---------- */
/* Editorial, squared, hairline grid on the ink band — echoes the event-hero countdown:
   cells in a row, big Space Grotesk numbers, small uppercase labels. One accent (gold). */
.bd-next { text-align: center; }
/* Gold eyebrow on the dark band — same trick the partner CTA uses: this rule sits LATER in the
   file, so at equal (0,3,0) specificity it beats the `.bd .bd-section--ink .bd-eyebrow` #fff rule. */
.bd .bd-next .bd-eyebrow { color: var(--bd-accent-2); justify-content: center; }
.bd-next .bd-eyebrow::before { background: var(--bd-accent-2); }
.bd-next__title {
  font-family: var(--bd-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: #fff;
}
.bd-next__date {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  margin: 0 0 clamp(26px, 4vw, 40px);
}
.bd-next__date i { color: var(--bd-accent-2); margin-right: 6px; }
.bd-countdown {
  display: flex;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--rr-radius-sharp, 0);   /* squared editorial grid — no rounded corners */
}
.bd-countdown__cell {
  flex: 1 1 0;
  min-width: 0;                                /* equal shrink on a 375px phone — never overflow */
  padding: clamp(14px, 2.4vw, 24px) 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.bd-countdown__cell:first-child { border-left: 0; }
.bd-countdown__num {
  display: block;
  font-family: var(--bd-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 8vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;          /* digits don't jitter as they tick */
}
.bd-countdown__label {
  display: block;
  margin-top: 8px;
  font-size: clamp(0.56rem, 2.4vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.bd-next__cta { margin-top: clamp(26px, 4vw, 40px); }

/* Height floor ONLY for engines without aspect-ratio. Declared alongside it, a min-height drives
   the box width back up through the ratio (260px x 3/2 = 390px) and overflows a narrow grid track —
   that was the reported "cards go outside the screen" on phones (task-348). */
@supports not (aspect-ratio: 3 / 2) {
  .bd-reason, .bd-child { min-height: 260px; }
}

/* ---------- Il pacco gara — kit showcase (task-350 + RR2026 Mizuno drop) ----------
   Product cut-outs on transparent PNGs: staged on soft colour washes (cyan shirt /
   violet bag). Header is a centered collab lockup: colour RR emblem + wordmark ×
   horizontal Mizuno mark — equal visual weight, no tiny squashed logos. */
.bd-kit-head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto clamp(8px, 1.5vw, 16px);
}
.bd-kit-head__title { margin-bottom: 14px; }
.bd-kit-head__lead { margin-left: auto; margin-right: auto; }

.bd-eyebrow--center {
  justify-content: center;
}
.bd-eyebrow--center::before { display: none; }
.bd-eyebrow--center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bd-accent);
  display: inline-block;
}

.bd-kit-collab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 28px);
  flex-wrap: wrap;
  margin: 0 auto clamp(22px, 3.5vw, 34px);
  padding: clamp(14px, 2.2vw, 22px) clamp(18px, 3vw, 32px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,249,0.88) 100%);
  border: 1px solid var(--bd-hairline);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(20, 32, 29, 0.03);
}
.bd-kit-collab__brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 14px);
  min-width: 0;
}
.bd-kit-collab__emblem {
  height: clamp(52px, 8vw, 72px);
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(19, 133, 119, 0.18));
}
.bd-kit-collab__wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.92;
  font-family: var(--bd-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: left;
}
.bd-kit-collab__rise {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  color: var(--bd-ink);
}
.bd-kit-collab__run {
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  color: var(--bd-accent);
}
.bd-kit-collab__mizuno {
  display: block;
  height: clamp(28px, 4.2vw, 36px);
  width: auto;
  max-width: min(220px, 42vw);
  object-fit: contain;
}
.bd-kit-collab__x {
  font-family: var(--bd-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: color-mix(in srgb, var(--bd-muted) 70%, transparent);
  line-height: 1;
  padding: 0 2px;
}

/* Accessibility helper used by the RR wordmark pairing */
.bd .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.bd-kit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: clamp(24px, 4vw, 40px);
}
.bd-kit__item {
  margin: 0;
  background: var(--bd-paper);
  border: 1px solid var(--bd-hairline);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .35s ease, transform .45s ease;
}
.bd-kit__item:hover {
  border-color: color-mix(in srgb, var(--bd-accent) 35%, var(--bd-hairline));
}
.bd-kit__media {
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 36px);
  background:
    radial-gradient(120% 90% at 50% 20%, #f4f7f6 0%, #e8eeec 55%, #dfe6e3 100%);
}
.bd-kit__item--shirt .bd-kit__media {
  background:
    radial-gradient(90% 80% at 30% 15%, rgba(80, 210, 230, 0.35) 0%, transparent 55%),
    radial-gradient(100% 90% at 80% 90%, rgba(19, 133, 119, 0.12) 0%, transparent 50%),
    linear-gradient(165deg, #eef8f9 0%, #e4f0f2 45%, #d8e8ea 100%);
}
.bd-kit__item--bag .bd-kit__media {
  background:
    radial-gradient(85% 75% at 70% 20%, rgba(160, 90, 200, 0.22) 0%, transparent 55%),
    radial-gradient(100% 90% at 20% 95%, rgba(90, 40, 120, 0.1) 0%, transparent 50%),
    linear-gradient(165deg, #f6f0f8 0%, #ebe3f0 50%, #e2d8ea 100%);
}
.bd-kit__item--medal .bd-kit__media {
  background:
    radial-gradient(90% 80% at 35% 18%, rgba(90, 210, 190, 0.32) 0%, transparent 55%),
    radial-gradient(100% 90% at 85% 88%, rgba(212, 162, 76, 0.14) 0%, transparent 50%),
    linear-gradient(165deg, #eef8f5 0%, #e5f2ee 48%, #d9ebe4 100%);
}
.bd-kit__item--cap .bd-kit__media {
  background:
    radial-gradient(90% 80% at 30% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    radial-gradient(100% 90% at 75% 90%, rgba(20, 40, 70, 0.06) 0%, transparent 50%),
    linear-gradient(165deg, #f3f4f5 0%, #eceeef 55%, #e7e9ea 100%);
}
/* Soft drop-shadow muddies white fabric — keep a lighter lift only. */
.bd-kit__item--cap .bd-kit__media img {
  filter: drop-shadow(0 10px 18px rgba(20, 32, 29, 0.08));
}
.bd-kit__item--request {
  border-color: color-mix(in srgb, var(--bd-accent) 28%, var(--bd-hairline));
}
.bd-kit__tag--request {
  color: var(--bd-accent);
}
.bd-kit__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(20, 32, 29, 0.14));
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.bd-kit__item:hover .bd-kit__media img { transform: scale(1.045) translateY(-4px); }
.bd-kit__body {
  padding: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--bd-hairline);
}
.bd-kit__tag {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bd-accent);
}
.bd-kit__title {
  font-family: var(--bd-display);
  font-weight: 600;
  font-size: 1.12rem;
  margin: 0 0 8px;
  color: var(--bd-ink);
  letter-spacing: -0.01em;
}
.bd-kit__text {
  color: var(--bd-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 560px) {
  .bd-kit-collab {
    gap: 14px 18px;
    padding: 16px 18px;
  }
  .bd-kit-collab__emblem { height: 48px; }
  .bd-kit-collab__mizuno {
    height: 26px;
    max-width: 160px;
  }
  .bd-kit-collab__rise { font-size: 1rem; }
  .bd-kit-collab__run { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-kit__media img,
  .bd-kit__item:hover .bd-kit__media img,
  .bd-kit__item { transition: none; transform: none; }
}

/* ==========================================================================
   task-971 — la pagina dell'EDIZIONE CONCLUSA (events/event_concluded.html)
   parla la stessa lingua dell'hub: stessi token, stessi bottoni, stesse
   tile. Qui solo cio' che l'hub non ha: chip di stato, riga distanze, riga
   azioni, tessere della classifica, richiamo «trova le tue foto», archivio
   ripiegato. Niente colori nuovi: --bd-accent / --bd-ink / --bd-hairline.
   ========================================================================== */
/* task-994 — l'edizione conclusa usa lo stesso eroe a tutto schermo dell'hub.
   Prima `.bd-hero--edition` tagliava a 72vh/82svh e sotto l'eroe si vedeva
   subito la fascia numeri: su ogni viewport l'altezza torna a quella di
   `.bd-hero` (100vh/svh/dvh). La galleria resta corta via `.bd-hero--compact`. */
.bd-hero--edition {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}
.bd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin: 0 0 18px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
}
.bd-chip--done i { color: var(--bd-accent-2); }
/* Chip delle distanze sull'eroe dell'edizione conclusa.
   Classe propria: fino al task-977 riusavano `.bd-distance`, che e' la griglia a
   schede della pagina del marchio (riga ~242). Da li' ereditavano due cose che
   sull'eroe scuro erano difetti: `:hover { background: #fafcfb }` — piu'
   specifico della regola base, quindi il chip diventava quasi bianco con il
   testo bianco, illeggibile — e i filetti `box-shadow: inset`. */
.bd-racechips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0;
  list-style: none; padding: 0;
}
.bd-racechip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 9.5rem; height: 38px; padding: 0 14px;
  font-size: 0.86rem; font-weight: 500; line-height: 1; text-align: center;
  /* `nowrap`: senza, l'etichetta piu' lunga («Percorso lungo 21 km») va a capo
     dentro il `min-width` e quel chip diventa alto 46 px contro 38. */
  white-space: nowrap;
  color: #fff; border: 1px solid rgba(255,255,255,.28); background: rgba(8,16,14,.45);
  transition: background-color .2s ease, border-color .2s ease;
}
.bd-racechip:hover { background: rgba(8,16,14,.62); border-color: rgba(255,255,255,.5); }

@media (max-width: 480px) {
  /* Larghezza al contenuto: una base al 50% rimanderebbe a capo l'etichetta lunga. */
  .bd-racechips { gap: 6px; }
  .bd-racechip { min-width: 0; font-size: 0.82rem; padding: 0 11px; }
}
.bd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.bd-actions .bd-btn i:first-child { margin-right: 2px; }
.bd .bd-section.bd-section--tight { padding: clamp(28px, 4vw, 48px) 0; }
.bd-headrow {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.bd-headrow .bd-h2 { margin-bottom: 0; }
.bd-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--bd-accent); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.bd-link:hover { color: var(--bd-accent); border-bottom-color: var(--bd-accent); }
.bd-note { margin: 18px 0 0; color: var(--bd-muted); font-size: 0.95rem; }

/* Tessere della classifica: una per gara, stessa geometria delle .bd-stat */
.bd-sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; border: 1px solid var(--bd-hairline); }
.bd-set {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px;
  padding: 22px 24px; text-decoration: none; color: var(--bd-ink); background: var(--bd-paper);
  box-shadow: inset 1px 0 0 var(--bd-hairline), inset 0 1px 0 var(--bd-hairline);
  transition: background .15s ease;
}
.bd-set:hover { background: #f2f5f4; color: var(--bd-ink); }
.bd-set__label { font-family: var(--bd-display); font-weight: 600; font-size: 1.15rem; }
.bd-set__count { grid-column: 1; color: var(--bd-muted); font-size: 0.9rem; margin-top: 4px; }
.bd-set i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--bd-accent); font-size: 1.2rem; }

/* Foto: la griglia condivisa (media/css/gallery.css) senza il suo header — `.bd-gallery` e' gia' dell'hub */
.bd-photos { margin-bottom: 28px; }
.bd-photos .media-gallery__header,
.bd-photos .media-gallery__empty[hidden] { display: none !important; }
.bd-photos .media-gallery__load-more--link {
  text-decoration: none;
}
.bd-photos--full .media-gallery__filters {
  margin-bottom: 28px;
}
.bd-photos--full .media-gallery__filters [data-category] {
  border-radius: 0;
  border-color: var(--bd-hairline, #d7ddd9);
  font-family: var(--bd-display, "Space Grotesk", sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .72rem;
}
.bd-photos--full .media-gallery__filters [data-category].active {
  background: var(--bd-ink, #0b1513);
  border-color: var(--bd-ink, #0b1513);
  color: #fff;
  box-shadow: none;
}
.bd-callout {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  padding: 24px 28px; border: 1px solid var(--bd-hairline); border-left: 4px solid var(--bd-accent);
  background: var(--bd-paper);
}
.bd-callout strong { font-family: var(--bd-display); font-size: 1.1rem; display: block; margin-bottom: 6px; }
.bd-callout p { margin: 0; color: var(--bd-muted); max-width: 62ch; }

/* Prossima edizione: banda scura, due colonne */
.bd-next { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.bd-next .bd-actions { margin-top: 0; }
.bd-next__text { margin: 0; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.bd .bd-section--ink .bd-eyebrow--light { color: rgba(255,255,255,.7); }
.bd .bd-section--ink .bd-eyebrow--light::before { background: rgba(255,255,255,.7); }

/* Archivio: <details> esterno + pannelli .bd-panel (task-979).
   Prima: sei sezioni legacy (.section-padding) scaricate insieme → ~6700 px a 390.
   Ora: un tema alla volta, stessa lingua dell'hub. */
.bd-archive { border: 1px solid var(--bd-hairline); background: var(--bd-paper); }
.bd-archive > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 22px 28px;
}
.bd-archive > summary::-webkit-details-marker { display: none; }
.bd-archive > summary .bd-eyebrow { margin: 0; grid-column: 1; }
.bd-archive__title { grid-column: 1; font-family: var(--bd-display); font-weight: 600; font-size: 1.35rem; }
.bd-archive__hint { grid-column: 1; color: var(--bd-muted); font-size: 0.92rem; }
.bd-archive > summary > i { grid-column: 2; grid-row: 1 / span 3; font-size: 1.3rem; color: var(--bd-accent); transition: transform .2s ease; }
.bd-archive[open] > summary > i { transform: rotate(180deg); }
.bd-archive__body {
  border-top: 1px solid var(--bd-hairline);
  display: flex; flex-direction: column;
}

/* Pannello argomento (programma / kit / regole / …) */
.bd-panel { border-bottom: 1px solid var(--bd-hairline); }
.bd-panel:last-child { border-bottom: 0; }
.bd-panel__sum {
  list-style: none; cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px 14px; align-items: center;
  padding: 16px 22px;
  transition: background-color .2s ease;
}
.bd-panel__sum::-webkit-details-marker { display: none; }
.bd-panel__sum:hover { background: #f7f9f8; }
.bd-panel__ico {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bd-accent) 12%, transparent);
  color: var(--bd-accent); font-size: 1rem;
}
.bd-panel__label {
  font-family: var(--bd-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.bd-panel__meta { color: var(--bd-muted); font-size: 0.82rem; font-weight: 500; }
.bd-panel__chev { color: var(--bd-accent); transition: transform .2s ease; }
.bd-panel[open] > .bd-panel__sum .bd-panel__chev { transform: rotate(180deg); }
.bd-panel__body { padding: 4px 22px 24px; }
.bd-panel__lead { margin-bottom: 18px; font-size: 0.98rem; }

/* Timeline programma */
.bd-timeline {
  list-style: none; margin: 0; padding: 0 0 0 4px;
  border-left: 2px solid var(--bd-hairline);
  display: flex; flex-direction: column; gap: 18px;
}
.bd-timeline__item {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr; gap: 12px 16px;
  padding-left: 18px;
}
.bd-timeline__item::before {
  content: "";
  position: absolute; left: -5px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bd-accent); box-shadow: 0 0 0 3px var(--bd-paper);
}
.bd-timeline__item--feat::before { background: var(--bd-accent-2); }
.bd-timeline__time {
  font-family: var(--bd-display); font-weight: 600; font-size: 0.95rem;
  color: var(--bd-accent); letter-spacing: -0.01em;
}
.bd-timeline__card {
  padding: 12px 14px;
  border: 1px solid var(--bd-hairline);
  background: var(--bd-paper);
}
.bd-timeline__item--feat .bd-timeline__card {
  border-left: 3px solid var(--bd-accent-2);
}
.bd-timeline__title {
  margin: 0 0 4px; font-family: var(--bd-display); font-weight: 600;
  font-size: 1.02rem; display: flex; align-items: center; gap: 8px;
}
.bd-timeline__title i { color: var(--bd-accent); font-size: 0.95rem; }
.bd-timeline__cat {
  margin: 0 0 6px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bd-muted);
}
.bd-timeline__text { margin: 0; color: #3a4742; font-size: 0.94rem; line-height: 1.55; }
.bd-timeline__loc {
  margin: 8px 0 0; color: var(--bd-muted); font-size: 0.88rem;
  display: flex; align-items: center; gap: 6px;
}

/* Kit in archivio: griglia un po' piu' compatta */
.bd-kit--archive { margin-top: 8px; }
.bd-kit__fallback {
  font-size: 2.4rem; color: var(--bd-accent); opacity: 0.55;
}

/* Accordion interno (regole / FAQ / sicurezza) */
.bd-acc { display: flex; flex-direction: column; gap: 8px; }
.bd-acc__item {
  border: 1px solid var(--bd-hairline);
  background: var(--bd-paper);
}
.bd-acc__sum {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 10px 12px; align-items: center;
  padding: 14px 16px;
}
.bd-acc__sum--plain { grid-template-columns: 1fr auto; }
.bd-acc__sum::-webkit-details-marker { display: none; }
.bd-acc__item[open] > .bd-acc__sum { border-bottom: 1px solid var(--bd-hairline); }
.bd-acc__ico {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bd-ink); color: #fff; font-size: 0.78rem;
}
.bd-acc__name { font-weight: 600; font-size: 0.98rem; }
.bd-acc__count { color: var(--bd-muted); font-size: 0.8rem; }
.bd-acc__chev { color: var(--bd-muted); transition: transform .2s ease; }
.bd-acc__item[open] > .bd-acc__sum .bd-acc__chev { transform: rotate(180deg); }
.bd-acc__body { padding: 14px 16px 18px; }

.bd-rule { padding: 14px 0; border-bottom: 1px solid var(--bd-hairline); }
.bd-rule:last-child { border-bottom: 0; padding-bottom: 0; }
.bd-rule:first-child { padding-top: 0; }
.bd-rule--hl {
  padding-left: 12px;
  border-left: 3px solid var(--bd-accent-2);
}
.bd-rule__title {
  margin: 0 0 8px; font-family: var(--bd-display); font-weight: 600; font-size: 1.05rem;
}
.bd-rule__text { color: #3a4742; font-size: 0.95rem; line-height: 1.6; }
.bd-rule__text p { margin: 0 0 0.75em; }
.bd-rule__text p:last-child { margin-bottom: 0; }
.bd-rule__text ul, .bd-rule__text ol { margin: 0 0 0.75em; padding-left: 1.2em; }
.bd-rule__text blockquote,
.bd-rule__text .callout,
.bd-rule__text [class*="highlight"] {
  margin: 12px 0; padding: 14px 16px;
  background: #f3f5f4;
  border-left: 3px solid var(--bd-accent-2);
  font-style: italic;
}

.bd-faq-cat { margin-bottom: 22px; }
.bd-faq-cat:last-child { margin-bottom: 0; }
.bd-faq-cat__name {
  margin: 0 0 10px; font-family: var(--bd-display); font-weight: 600;
  font-size: 1.05rem; display: flex; align-items: center; gap: 8px;
}
.bd-faq-cat__name i { color: var(--bd-accent); }

/* Documenti */
.bd-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bd-docs--refs { margin-top: 8px; }
.bd-doc {
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
  padding: 16px 18px; border: 1px solid var(--bd-hairline); background: var(--bd-paper);
}
.bd-doc--featured { margin-bottom: 16px; border-left: 3px solid var(--bd-accent); }
.bd-doc--ref { padding: 10px 0; border: 0; border-bottom: 1px solid var(--bd-hairline); }
.bd-doc--ref:last-child { border-bottom: 0; }
.bd-doc__ico {
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bd-accent) 12%, transparent);
  color: var(--bd-accent); font-size: 1.25rem;
}
.bd-doc__main { flex: 1 1 200px; min-width: 0; }
.bd-doc__title {
  margin: 0; font-family: var(--bd-display); font-weight: 600; font-size: 1.02rem;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bd-doc__badge {
  font-family: var(--bd-text); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; background: var(--bd-ink); color: #fff;
}
.bd-doc__desc { margin: 4px 0 0; color: var(--bd-muted); font-size: 0.88rem; }
.bd-doc__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-doc__soon { color: var(--bd-muted); font-size: 0.88rem; }

/* Contatti emergenza */
.bd-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bd-contact {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--bd-hairline);
}
.bd-contact__who { display: flex; flex-direction: column; gap: 2px; }
.bd-contact__who span { color: var(--bd-muted); font-size: 0.85rem; }
.bd-contact__tel { white-space: nowrap; }

.bd-callout--compact { padding: 18px 20px; margin-top: 20px; }
.bd-callout--compact .bd-btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .bd-actions .bd-btn { width: 100%; justify-content: center; }
  /* Hero: two columns of compact CTAs instead of four full-width bars. */
  .bd-hero .bd-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .bd-hero .bd-actions .bd-btn { width: auto; }
  .bd-next .bd-actions { width: 100%; }
  .bd-callout .bd-btn { width: 100%; justify-content: center; }
  .bd-archive > summary { padding: 18px 18px; }
  .bd-panel__sum { grid-template-columns: auto 1fr auto; padding: 14px 16px; }
  .bd-panel__meta { display: none; }
  .bd-panel__body { padding: 4px 16px 20px; }
  .bd-timeline__item { grid-template-columns: 52px 1fr; gap: 8px 10px; }
  .bd-doc__actions { width: 100%; }
  .bd-doc__actions .bd-btn { flex: 1 1 auto; justify-content: center; }
  .bd-contact__tel { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-archive > summary > i,
  .bd-panel__chev,
  .bd-acc__chev,
  .bd-set { transition: none; }
}
@media (max-width: 480px) {
  .bd-chip { font-size: 0.72rem; letter-spacing: 0.06em; }
}