/* =========================================================
   Rally Città di Bassano — pagine interne (pages.css)
   Caricare DOPO style.css. Solo classi nuove, stessi token
   var(--*) definiti in style.css. NON ridefinire qui le
   classi del design system esistente.
   ========================================================= */

/* ---------- Header sempre solido sulle pagine interne ---------- */
/* index.html ha l'header trasparente sopra l'hero video; le pagine
   interne non hanno un hero abbastanza scuro in cima, quindi qui
   l'header è sempre pieno (asfalto), non solo dopo lo scroll. */
.page .site-header {
  background: var(--asphalt);
}

/* ---------- Page hero (banda scura di apertura pagina) ---------- */
.page-hero {
  background: var(--asphalt);
  color: #fff;
  min-height: 32vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* padding-top compensa l'header fixed sovrapposto in alto in modo fluido e sicuro */
  padding-top: calc(var(--header-height, 76px) + clamp(1.5rem, 5vh, 4rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  /* Allineato alla scala della home (--fs-2xl): con i titoli di sezione a 5.5rem
     un page-title a 4rem faceva sembrare le pagine interne un altro sito. */
  font-size: var(--fs-2xl);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-block: 0.75rem 0;
}
.page-hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--grigio-chiaro);
  max-width: 40rem;
  margin-top: 1rem;
}

/* ---------- Voce nav corrente ---------- */
.main-nav a.active,
.mobile-nav a.active {
  border-color: var(--rosso);
}
.mobile-nav a.active {
  color: var(--rosso);
}

/* ---------- Testi lunghi (storia, contenuti editoriali) ---------- */
.prose {
  max-width: 44rem;
}
.prose p {
  margin-bottom: 1.15rem;
}
.section-light .prose p {
  color: var(--grigio);
}
.section-dark .prose p {
  color: var(--grigio-chiaro);
}

.prose-image {
  margin: 2.5rem 0;
  max-width: 44rem;
}
.prose-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.prose-image.img-fallback {
  background: var(--carbon);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}
.prose-image.img-fallback img {
  display: none;
}
.prose-image figcaption {
  font-size: 0.8rem;
  color: var(--grigio);
  margin-top: 0.6rem;
}
.section-dark .prose-image figcaption {
  color: var(--grigio-chiaro);
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
  margin: 1.75rem 0 0.75rem;
}
.prose ul {
  margin: 0 0 1.15rem;
  padding-left: 1.25rem;
}
.prose ul li {
  list-style: disc;
  margin-bottom: 0.5rem;
}

/* ---------- Riga di bottoni affiancati (es. pagina 404) ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* ---------- Data table (albo d'oro, direttivo) ---------- */
.table-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.table-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--carbon);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.12);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-light .table-chip {
  background: #fff;
  color: var(--ink);
  border-color: rgb(16 20 24 / 0.12);
  box-shadow: 0 2px 8px rgb(16 20 24 / 0.04);
}
.table-chip strong {
  color: var(--rosso);
}
.section-dark .table-chip strong {
  color: var(--giallo);
}
.table-wrap {
  overflow-x: auto;
  margin-bottom: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid rgb(16 20 24 / 0.08);
  box-shadow: 0 8px 24px rgb(16 20 24 / 0.06);
}
.section-dark .table-wrap {
  border-color: rgb(255 255 255 / 0.08);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
}
.data-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: #fff;
}
.section-dark .data-table {
  background: var(--carbon);
}
.data-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.85rem;
  padding-inline: 1.15rem;
  color: var(--ink);
}
.section-dark .data-table caption {
  color: #fff;
}
.data-table thead th {
  background: var(--asphalt);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  text-align: left;
  padding: 0.95rem 1.15rem;
  white-space: nowrap;
  border-bottom: 2px solid var(--rosso);
}
.data-table tbody td {
  padding: 0.75rem 1.15rem;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px solid rgb(16 20 24 / 0.06);
  transition: background-color 0.15s ease;
}
.section-dark .data-table tbody td {
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.data-table tbody tr:nth-child(even) {
  background: var(--paper);
}
.section-dark .data-table tbody tr:nth-child(even) {
  background: hsl(214 20% 17%);
}
.data-table tbody tr:hover {
  background: hsl(45 96% 51% / 0.08);
}
.section-dark .data-table tbody tr:hover {
  background: hsl(214 20% 21%);
}
.data-table td.col-anno,
.data-table th.col-anno {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.data-table td.col-anno {
  color: var(--ink);
}
.section-dark .data-table td.col-anno {
  color: var(--giallo);
}
.data-table .row-highlight {
  font-weight: 600;
}
.table-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 2px 7px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  vertical-align: middle;
  line-height: 1.2;
}
.table-badge--gold {
  background: var(--giallo);
  color: var(--asphalt);
}
.table-badge--red {
  background: var(--rosso);
  color: #fff;
}
.table-badge--dark {
  background: rgb(255 255 255 / 0.15);
  color: #fff;
}
.section-light .table-badge--dark {
  background: rgb(16 20 24 / 0.1);
  color: var(--ink);
}

/* Sotto ~560px: colonna Vettura invisibile (169px fuori viewport, scroll
   orizzontale nascosto). Layout a due righe per record senza toccare il
   markup: riga 1 anno+equipaggio, riga 2 vettura rientrata, corpo minore. */
@media (max-width: 560px) {
  .table-summary-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .table-chip {
    width: 100%;
    justify-content: space-between;
  }
  .data-table {
    min-width: 0;
  }
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }
  .data-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid rgb(16 20 24 / 0.06);
  }
  .section-dark .data-table tbody tr {
    border-bottom-color: rgb(255 255 255 / 0.06);
  }
  .data-table tbody td {
    display: block;
    padding: 0;
    border-bottom: none;
  }
  .data-table tbody td:nth-child(1) {
    flex: 0 0 auto;
    margin-right: 0.6rem;
  }
  .data-table tbody td:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .data-table tbody td:nth-child(3) {
    flex: 1 0 100%;
    margin-top: 0.35rem;
    padding-left: 1.15rem;
    font-size: 0.85rem;
    color: var(--grigio);
  }
  .section-dark .data-table tbody td:nth-child(3) {
    color: rgb(255 255 255 / 0.6);
  }
}

/* ---------- Doc card (documento scaricabile) ---------- */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
  margin-block: 1.5rem 2rem;
}
/* Il padding-bottom della sezione (--section-space) già dà respiro: quando la
   griglia è l'ultimo elemento, il margin-bottom si somma e crea un vuoto in
   eccesso dopo l'ultima card (gruppo K4). */
.doc-grid:last-child {
  margin-bottom: 0;
}
/* Cornice a due strati (vedi "Bordo + chamfer" in DESIGN.md): il colore
   ex-bordo è il background del box (frame), ::before inset 1px porta il vero
   fondo. Il border-left resta un border reale: quel lato non è mai toccato
   dal clip-path (angolo tagliato solo in basso a destra), quindi un border
   letterale lì funziona già perfettamente. */
.doc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  background: rgb(16 20 24 / 0.12);
  border-radius: var(--radius);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  padding: 1.25rem 1.4rem;
  min-width: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.doc-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  z-index: -1;
  transition: background-color 0.2s ease;
}
.doc-card:hover,
.doc-card:focus-visible {
  box-shadow: 0 12px 30px rgb(16 20 24 / 0.12);
  transform: translateY(-3px);
  background: var(--rosso);
}
.doc-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--asphalt);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  border-radius: var(--radius);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.doc-card:hover .doc-card-icon,
.doc-card:focus-visible .doc-card-icon {
  background: var(--carbon);
  transform: translateY(1px);
}
.doc-card-body {
  min-width: 0;
  flex: 1 1 auto;
}
.doc-card-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin-bottom: 0.2rem;
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
.doc-card-meta {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grigio);
  overflow-wrap: break-word;
  word-break: break-word;
}
.doc-card-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc-card-note {
  font-size: 0.85rem;
  color: var(--grigio);
  margin-top: 0.35rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
}
.section-dark .doc-card {
  background: rgb(255 255 255 / 0.08);
  border-left: 1px solid var(--rosso);
}
.section-dark .doc-card::before {
  background: var(--carbon);
}
.section-dark .doc-card:hover,
.section-dark .doc-card:focus-visible {
  background: rgb(255 255 255 / 0.08);
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.45);
  border-left-color: var(--giallo);
}
.section-dark .doc-card:hover::before,
.section-dark .doc-card:focus-visible::before {
  background: hsl(214 20% 16%);
}
.section-dark .doc-card-meta,
.section-dark .doc-card-note {
  color: var(--grigio-chiaro);
}
.section-dark .doc-card-body h3 {
  color: #fff;
}

/* ---------- Contact cards (contatti dedicati stampa / referenti) ---------- */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  background: var(--carbon);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-card:hover {
  border-color: rgb(255 255 255 / 0.18);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.3);
}
.section-light .contact-card {
  background: #fff;
  border-color: rgb(16 20 24 / 0.08);
}
.section-light .contact-card:hover {
  border-color: rgb(16 20 24 / 0.16);
  box-shadow: 0 12px 30px rgb(16 20 24 / 0.08);
}
.contact-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  margin-bottom: 1.25rem;
}
.contact-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  color: var(--grigio-chiaro);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
}
.section-light .contact-card-icon {
  color: var(--grigio);
  border-color: rgb(16 20 24 / 0.16);
}
.contact-card-title-group {
  min-width: 0;
  flex: 1 1 auto;
}
.contact-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.25rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.section-light .contact-card-name {
  color: var(--ink);
}
.contact-card-role {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--giallo);
}
.section-light .contact-card-role {
  color: var(--grigio);
}
.contact-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  margin-top: auto;
}
.section-light .contact-card-details {
  border-top-color: rgb(16 20 24 / 0.08);
}
.contact-detail-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  font-size: 0.9rem;
}
.contact-detail-icon {
  flex: none;
  width: 1.25rem;
  text-align: center;
  color: var(--grigio-chiaro);
  font-size: 0.95rem;
}
.section-light .contact-detail-icon {
  color: var(--grigio);
}
.contact-detail-link {
  color: var(--grigio-chiaro);
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  transition: color 0.15s ease;
}
.contact-detail-link:hover,
.contact-detail-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section-light .contact-detail-link {
  color: var(--ink);
}
.section-light .contact-detail-link:hover {
  color: var(--rosso);
}

/* ---------- Press documents wrap ---------- */
.press-docs-wrap {
  margin-top: 2rem;
}
.press-docs-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 1rem;
}
.section-light .press-docs-title {
  color: var(--ink);
}

/* ---------- Notice Banner (avvisi di servizio / stato documenti) ---------- */
.media-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: hsl(45 96% 51% / 0.08);
  border: 1px solid hsl(45 96% 51% / 0.4);
  border-radius: var(--radius);
  color: var(--giallo);
  font-size: 0.92rem;
  line-height: 1.5;
}
.media-notice-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--giallo);
  margin-top: 0.1rem;
}
.media-notice-content {
  flex: 1 1 auto;
}
.media-notice-content strong {
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-right: 0.35rem;
}

/* ---------- Gallery Zoom Badge & Hover Refinement ---------- */
.gallery-zoom-badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: rgb(16 20 24 / 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.2);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}
.gallery-item:hover .gallery-zoom-badge,
.gallery-item:focus-visible .gallery-zoom-badge {
  opacity: 1;
  transform: scale(1);
  background: var(--rosso);
  border-color: var(--rosso);
}

/* ---------- Doc card: stato "in arrivo" (non cliccabile) ---------- */
/* Bordo tratteggiato: la cornice a due strati sopra non riproduce un
   tratteggio (è un fondo pieno), quindi qui si torna al border reale su
   tutti i lati — corretto e generico com'è, il `clip-path` taglia via quel
   bordo nell'angolo (family B, 10px): ::after ridisegna solo la tacca
   mancante con `--chamfer-notch-10` (vedi :root in style.css). */
.doc-card--pending {
  position: relative;
  opacity: 0.6;
  cursor: default;
  background: #fff;
  border: 1px dashed var(--grigio);
}
.doc-card--pending::before {
  content: none;
}
.doc-card--pending::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  background-color: var(--grigio);
  mask: var(--chamfer-notch-10) center / 100% 100% no-repeat;
  -webkit-mask: var(--chamfer-notch-10) center / 100% 100% no-repeat;
  pointer-events: none;
}
.doc-card--pending:hover,
.doc-card--pending:focus-visible {
  box-shadow: none;
  transform: none;
}
.section-dark .doc-card--pending {
  background: var(--carbon);
  border-color: var(--grigio);
}
.doc-card--pending .doc-card-icon {
  background: rgb(16 20 24 / 0.12);
  color: var(--grigio);
}
.section-dark .doc-card--pending .doc-card-icon {
  background: rgb(255 255 255 / 0.1);
  color: var(--grigio-chiaro);
}
/* Cornice a due strati: solo 2 contesti reali nel build (dentro .doc-card
   chiara o .section-dark .doc-card), non un fondo davvero arbitrario —
   quindi il trucco regge dichiarando il fill per ciascuno, come .doc-card
   stesso. */
.doc-card-pending-badge {
  position: relative;
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--giallo);
  background: var(--giallo);
  padding: 2px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.doc-card-pending-badge::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  z-index: -1;
}
.section-dark .doc-card-pending-badge::before {
  background: var(--carbon);
}

/* ---------- Targa gara (moderno/storico) ----------
   Le due targhe (logo-moderno.png, logo-storico.png) hanno proporzioni
   diverse (una più larga, un ovale allungato; l'altra un rettangolo
   arrotondato). Nessuna delle due ruota nell'asset originale: `rotate(0deg)`
   qui è un fermo esplicito, non una correzione di un tilt reale. L'ingombro
   coerente fra le due arriva da `.page-hero-gara-plate`, che le fa scalare
   dentro lo stesso riquadro con `object-fit: contain`, non da un'altezza
   fissa sull'immagine (che avrebbe reso la più larga anche più "pesante"). */
.gara-logo {
  display: block;
  height: 68px;
  width: auto;
  margin-block: 0.75rem 1rem;
  transform: rotate(0deg);
}

/* ---------- Page hero a due colonne (concorrenti-gara.njk, percorso-gara.njk) ----------
   Colonna testo (eyebrow → badge sigla → h1 → sottotitolo → switch) + colonna
   targa, allineate su desktop/tablet; sotto 768px resta il flusso a colonna
   singola del .page-hero standard. */
/* .page-hero-gara è anche un item flex di .page-hero (column). Il
   margin-inline:auto ereditato da .container, dentro un flex item, sopprime
   lo stretch e fa collassare il box al proprio contenuto (shrink-to-fit),
   ricentrandolo con quei margini auto invece di riempire la riga: su
   Rally Moderno il sottotitolo lungo saturava comunque la larghezza
   disponibile mascherando il problema, su Rally Storico (sottotitolo più
   corto) il box si restringeva e finiva centrato invece che a filo sinistro
   come Moderno. `width: 100%` forza il riempimento indipendentemente dal
   contenuto (bug chiuso 2026-08-26). */
.page-hero-gara {
  width: 100%;
}
.page-hero-gara-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Slot sempre presente (anche vuoto su Rally Storico, che non ha sigla):
   riserva lo stesso ingombro verticale su entrambe le pagine, così h1,
   sottotitolo e switch atterrano alla stessa quota indipendentemente dalla
   presenza del badge — altrimenti lo switch di Storico saliva di ~59px
   rispetto a quello di Moderno. */
.page-hero-gara-badge-slot {
  min-height: 3.7rem;
  display: flex;
  align-items: center;
}
.page-hero-gara-badge {
  margin: 0;
}
/* Blocco h1 + sottotitolo: min-height calcolato sui token esistenti
   (--fs-2xl per l'h1, lo stesso clamp del sottotitolo per 2 righe) invece
   che sulla lunghezza reale delle due stringhe. Il badge-slot sopra fissa
   già la quota di partenza (D4/E2-style): questo blocco fissa anche quella
   di arrivo, così lo switch non si sposta più nemmeno se in futuro un
   sottotitolo va a capo su 2 righe e l'altro no. */
.page-hero-gara-titlegroup {
  min-height: calc(var(--fs-2xl) * 0.9 + 0.75rem + clamp(1rem, 1.6vw, 1.15rem) * 1.6 * 2 + 1rem);
}
.page-hero-gara-plate {
  display: flex;
}
@media (min-width: 768px) {
  .page-hero-gara {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
  }
  .page-hero-gara-plate {
    width: clamp(220px, 22vw, 320px);
    height: clamp(120px, 12vw, 170px);
  }
  .page-hero-gara .gara-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
  }
}

/* ---------- Switch pill moderno/storico (Paddock Segmented Control) ---------- */
.gara-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.85rem;
  background: rgb(16 20 24 / 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.15);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.4);
}
.gara-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  color: var(--grigio-chiaro);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
a.gara-pill:hover,
a.gara-pill:focus-visible {
  border-color: color-mix(in srgb, var(--giallo) 40%, transparent);
  color: #fff;
  background: rgb(255 255 255 / 0.08);
}
.gara-pill--active {
  background: var(--giallo);
  border-color: var(--giallo);
  color: var(--asphalt);
  font-weight: 800;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
  cursor: default;
}
@media (max-width: 480px) {
  .gara-switch {
    width: 100%;
    justify-content: stretch;
  }
  .gara-pill {
    flex: 1 1 0;
    padding-inline: 0.75rem;
    font-size: 0.82rem;
  }
}

/* ---------- Hub cards (Concorrenti, Percorso, Albo di Gara) ---------- */
.hub-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 1.75rem;
  margin-bottom: 2rem;
}
/* Stesso principio di .doc-grid:last-child sopra (gruppo K4). */
.hub-cards:last-child {
  margin-bottom: 0;
}
/* Cornice a due strati (stessa tecnica di .btn--ghost/.countdown): un
   `border` reale viene tagliato dal clip-path lungo lo spigolo diagonale e
   sparisce lì (il border segue il rettangolo del box, il taglio no). Il
   fondo del box è il colore ex-bordo (frame); ::before, inset 1px, porta il
   fondo vero e lo stesso clip-path: il bordo visibile è la cornice non
   coperta dall'inset, quindi segue lo spigolo per costruzione. */
.hub-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  padding: 2.25rem 2rem;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
.hub-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--carbon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  z-index: -1;
  transition: background-color 0.25s ease;
  pointer-events: none;
}
.hub-card:hover,
.hub-card:focus-visible {
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.45);
  transform: translateY(-5px);
  background-color: var(--giallo);
}
.hub-card:hover::before,
.hub-card:focus-visible::before {
  background: hsl(214 20% 16%);
}
.hub-card-body {
  min-width: 0;
  flex: 1 1 auto;
}
.hub-card-tag {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--giallo);
  background: color-mix(in srgb, var(--giallo) 25%, transparent);
  padding: 3px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  margin-bottom: 0.75rem;
}
.hub-card-tag::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: color-mix(in srgb, var(--giallo) 12%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  z-index: -1;
}
.hub-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.4rem;
}
.hub-card-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--grigio-chiaro);
  line-height: 1.5;
  margin: 0;
}
.hub-card-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 1.83rem;
  width: 3rem;
  height: 3rem;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 50%;
  color: var(--giallo);
  font-size: 1.35rem;
  font-weight: 800;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hub-card-action .card-arrow {
  margin-top: 0;
}
.hub-card:hover .hub-card-action,
.hub-card:focus-visible .hub-card-action {
  background: var(--rosso);
  border-color: var(--rosso);
  color: #fff;
  transform: translateX(4px);
}
.hub-card--pending {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  opacity: 0.55;
  cursor: default;
}
@media (max-width: 768px) {
  .hub-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .hub-card {
    padding: 1.75rem 1.5rem;
  }
}

/* ---------- Timing links (live timing FICR) ---------- */
.timing-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-block: 1.75rem 2rem;
}
.timing-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  padding: 1.35rem 1.6rem;
  border-radius: var(--radius);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}
.timing-link::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--carbon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  z-index: -1;
  transition: background-color 0.25s ease;
}
.timing-link:hover,
.timing-link:focus-visible {
  background: var(--rosso);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--rosso) 35%, transparent);
}
.timing-link:hover::before,
.timing-link:focus-visible::before {
  background: var(--rosso);
}
.timing-link-content {
  min-width: 0;
  flex: 1 1 auto;
}
.timing-link-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--giallo);
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}
.timing-link:hover .timing-link-tag,
.timing-link:focus-visible .timing-link-tag {
  color: #fff;
  opacity: 0.9;
}
.timing-link-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.timing-link-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 0.84rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgb(255 255 255 / 0.08);
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--giallo);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.timing-link:hover .timing-link-arrow,
.timing-link:focus-visible .timing-link-arrow {
  background: #fff;
  color: var(--rosso);
  transform: translate(2px, -2px);
}

/* ---------- Safety lists (NON FARE MAI / FARE SEMPRE) ---------- */
.safety-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: hsl(356 78% 48% / 0.12);
  border: 1px solid hsl(356 78% 48% / 0.4);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  color: #fff;
}
.safety-warning-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--rosso);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.15rem;
}
.safety-warning-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 0.25rem;
}
.safety-warning-text p {
  color: var(--grigio-chiaro);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
.safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.safety-panel {
  padding: 2rem;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.1);
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  display: flex;
  flex-direction: column;
}
.safety-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--carbon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  z-index: -1;
}
.safety-panel--dont {
  background: color-mix(in srgb, var(--rosso) 35%, transparent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--rosso) 8%, transparent);
}
.safety-panel--do {
  background: color-mix(in srgb, var(--verde) 35%, transparent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--verde) 8%, transparent);
}
.safety-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px 4px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  margin-bottom: 0.85rem;
}
.safety-badge--danger {
  background: var(--rosso);
  color: #fff;
}
.safety-badge--success {
  background: var(--verde);
  color: #fff;
}
.safety-panel h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
  color: #fff;
}
.safety-panel ul {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.safety-panel li {
  padding-left: 1.75rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--grigio-chiaro);
}
.safety-panel li strong {
  color: #fff;
  font-weight: 700;
}
/* Icona ✓/✕ (.icon icon--check / icon--cross, style.css) al posto del
   content generato via ::before (MOBILE-AUDIT.md punto 1). */
.icon-safety {
  position: absolute;
  left: 0;
  top: 0.2em;
}
.safety-panel--dont .icon-safety {
  color: var(--rosso);
}
.safety-panel--do .icon-safety {
  color: color-mix(in srgb, var(--verde) 60%, white);
}
@media (max-width: 768px) {
  .safety-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Il badge .hub-card-tag nasce per stare dentro .hub-card (fondo scuro
   proprio, indipendente dalla sezione): qui invece è dentro .sportity-info,
   che non ha fondo suo e eredita quello della sezione. In .section-dark
   regge (giallo trasparente su scuro); in .section-light (albo-di-gara,
   concorrenti) il tint giallo al 12-25% finisce su bianco: testo giallo su
   quasi-bianco, contrasto insufficiente. Stessa regola di .eyebrow-tab —
   giallo pieno, testo --asphalt (Yellow-on-Dark-Text Rule, DESIGN.md). */
.section-light .sportity-info .hub-card-tag {
  color: var(--asphalt);
  background: var(--giallo);
}
.section-light .sportity-info .hub-card-tag::before {
  content: none;
}

/* ---------- Sportity block & Code Pill ----------
   Un solo livello: niente card attorno al testo, resta solo il riquadro
   tratteggiato col codice. Titolo e testo ereditano il colore dalla
   sezione (chiara o scura) che li ospita. */
.sportity-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.sportity-info {
  flex: 1 1 320px;
}
.sportity-info h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.sportity-info p {
  color: var(--grigio);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
.section-dark .sportity-info p {
  color: var(--grigio-chiaro);
}
.sportity-code-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: hsl(214 20% 14%);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--giallo) 40%, transparent);
}
.sportity-code-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grigio-chiaro);
}
.sportity-code-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--giallo);
  font-variant-numeric: tabular-nums;
}

/* ---------- Historical Storytelling & Quotes (Il Rally) ---------- */
.milestones-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.milestone-card {
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  display: flex;
  flex-direction: column;
}
.milestone-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--carbon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  z-index: -1;
}
.milestone-year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--giallo);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}
.milestone-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.milestone-desc {
  font-size: 0.85rem;
  color: var(--grigio-chiaro);
  line-height: 1.4;
  margin: 0;
}
@media (max-width: 860px) {
  .milestones-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .milestones-strip {
    grid-template-columns: 1fr;
  }
}

.rally-quote-card {
  background: rgb(255 255 255 / 0.12);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  margin: 2.5rem 0;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.rally-quote-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--carbon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  z-index: -1;
}
.rally-quote-text {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.65;
  color: #fff;
  margin-bottom: 1.25rem;
}
.rally-quote-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.quote-author-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.18);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
}
.quote-author-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  line-height: 1.1;
}
.quote-author-role {
  font-size: 0.8rem;
  color: var(--giallo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ---------- Press Accreditation Deadline Card (Media) ---------- */
.press-deadline-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: hsl(356 78% 48% / 0.12);
  border: 1px solid hsl(356 78% 48% / 0.4);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
}
.press-deadline-info {
  flex: 1 1 340px;
}
.press-deadline-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--rosso);
  color: #fff;
  padding: 3px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  margin-bottom: 0.5rem;
}
.press-deadline-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 0.35rem;
}
.press-deadline-desc {
  font-size: 0.92rem;
  color: var(--grigio-chiaro);
  line-height: 1.5;
  margin: 0;
}
.press-deadline-datebox {
  background: hsl(214 20% 14%);
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / 0.1);
  text-align: center;
}
.press-deadline-date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--giallo);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.press-deadline-time {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--grigio-chiaro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* ---------- Gallery Item Category Tag ---------- */
.gallery-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgb(16 20 24 / 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / 0.15);
  pointer-events: none;
  z-index: 2;
}

/* ---------- Map placeholder (tracciato segreto / in arrivo) ---------- */
.map-placeholder {
  position: relative;
  background: hsl(214 20% 13%);
  color: #fff;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius);
  padding: 2.5rem 1.75rem;
  border: 1px dashed color-mix(in srgb, var(--giallo) 40%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  gap: 0.75rem;
  box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.3);
}
/* Fondo fisso: .map-placeholder è sempre hsl(214 20% 13%), unico contesto
   nel build — cornice a due strati regge senza indovinare nulla. */
/* Bordo tratteggiato reale (family B, 14px): il clip-path taglia via il
   bordo nell'angolo come su .doc-card--pending — stessa tacca ridisegnata
   con `--chamfer-notch-14`. */
.map-placeholder::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  background-color: color-mix(in srgb, var(--giallo) 40%, transparent);
  mask: var(--chamfer-notch-14) center / 100% 100% no-repeat;
  -webkit-mask: var(--chamfer-notch-14) center / 100% 100% no-repeat;
  pointer-events: none;
}
.map-placeholder-tag {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--giallo);
  background: var(--giallo);
  padding: 2px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.map-placeholder-tag::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: hsl(214 20% 13%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  z-index: -1;
}
.map-placeholder-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.15;
}
.map-placeholder-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--grigio-chiaro);
  max-width: 38rem;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Placeholder note ---------- */
.placeholder-note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--grigio);
  margin-top: 1rem;
}
.section-dark .placeholder-note {
  color: var(--grigio-chiaro);
}

/* ---------- Two-column simple content blocks (spettatori, corsi) ---------- */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* =========================================================
   REFINED SECTIONS: SPONSOR, NEWS, CONTATTI, 404 & LEGAL
   ========================================================= */

/* ---------- Section Dividers & General Section Headers ---------- */
.section-divider {
  border: 0;
  border-top: 1px solid rgb(16 20 24 / 0.1);
  margin: clamp(2.5rem, 5vw, 4rem) 0;
}
.section-dark .section-divider {
  border-top-color: rgb(255 255 255 / 0.1);
}
.section-header-block {
  margin-bottom: 2rem;
}

/* ---------- Sponsor Tiers & Racing Cards (sponsor.html) ---------- */
.sponsor-tier-block {
  margin-bottom: 2rem;
}
.sponsor-tier-header {
  margin-bottom: 1.75rem;
}
.sponsor-tier-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
}
.section-dark .sponsor-tier-title {
  color: #fff;
}
.sponsor-tier-desc {
  font-size: 0.95rem;
  color: var(--grigio);
  max-width: 48rem;
  margin: 0;
}
.section-dark .sponsor-tier-desc {
  color: var(--grigio-chiaro);
}

.sponsor-cards-grid {
  display: grid;
  gap: 1.5rem;
}
.sponsor-cards-grid--main {
  grid-template-columns: 1fr;
}
.sponsor-cards-grid--gold {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.sponsor-cards-grid--silver,
.sponsor-cards-grid--tech {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.sponsor-cards-grid--inst {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.sponsor-racing-card {
  background: rgb(16 20 24 / 0.1);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.sponsor-racing-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  z-index: -1;
  transition: background-color 0.25s ease;
}
.sponsor-racing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgb(16 20 24 / 0.12);
  background: rgb(16 20 24 / 0.22);
}

/* Varianti a bordo tratteggiato/spesso: la cornice a due strati non li
   riproduce (tratteggio) o li vorrebbe più sottili di quanto intendano
   (2px "featured"), quindi tornano al border reale — resta la tacca
   d'angolo minore di famiglia B. */
.sponsor-racing-card--main {
  border: 2px solid var(--rosso);
  background: linear-gradient(135deg, #ffffff 0%, hsl(210 20% 97%) 100%);
  padding: 2.25rem;
}
.sponsor-racing-card--main::before {
  content: none;
}
.sponsor-racing-card--slot {
  background: hsl(210 20% 97%);
  border: 1px dashed rgb(16 20 24 / 0.2);
}
.sponsor-racing-card--slot::before {
  content: none;
}

.sponsor-racing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.sponsor-card-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--carbon);
  color: #fff;
  padding: 3px 10px 3px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.sponsor-card-tag--available {
  background: var(--giallo);
  color: var(--asphalt);
}
.sponsor-card-tag--tech {
  background: var(--rosso);
  color: #fff;
}
.sponsor-card-tag--inst {
  background: hsl(214 20% 28%);
  color: #fff;
}

.sponsor-racing-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sponsor-placeholder-logo {
  min-height: 72px;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.sponsor-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
.sponsor-card-logo-wrap {
  min-height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.sponsor-card-logo {
  max-height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(0.2);
  transition: filter 0.25s ease, transform 0.25s ease;
}
.sponsor-racing-card:hover .sponsor-card-logo {
  filter: grayscale(0);
  transform: scale(1.02);
}
.sponsor-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}
.sponsor-card-role {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--grigio);
  margin: 0;
  line-height: 1.4;
}
.sponsor-card-note {
  font-size: 0.82rem;
  color: var(--grigio);
  font-style: italic;
  margin: 0.35rem 0 0;
}
.sponsor-inst-badge {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--grigio);
  font-style: italic;
  margin-top: 0.25rem;
}

/* Sponsor CTA Box */
.sponsor-cta-box {
  position: relative;
  margin-top: 3.5rem;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.sponsor-cta-box::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--asphalt);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  z-index: -1;
}
.sponsor-cta-content .eyebrow-tab {
  margin-bottom: 0.75rem;
}
.sponsor-cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 0.95;
  margin: 0.5rem 0 1rem;
}
.sponsor-cta-desc {
  font-size: 1.05rem;
  color: var(--grigio-chiaro);
  max-width: 46rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

/* ---------- News Archive, Cards & Chamfers (news.njk, news-card.njk) ---------- */
.news-archive-header {
  margin-bottom: 2.5rem;
}
.news-archive-info .section-title {
  margin-top: 0;
}
.news-archive-info .section-intro {
  font-size: 1.05rem;
  color: var(--grigio);
  max-width: 48rem;
}

.news-card {
  position: relative;
  background: rgb(16 20 24 / 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.news-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  z-index: -1;
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgb(16 20 24 / 0.14);
  background: rgb(16 20 24 / 0.18);
}
.news-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.news-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--carbon);
  overflow: hidden;
}
.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.news-card:hover .news-card-image img {
  transform: scale(1.04);
}
.news-card-date-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  background: rgb(255 255 255 / 0.15);
  color: #fff;
  padding: 4px 12px 4px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  z-index: 2;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
}
.news-card-date-badge::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--asphalt);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  z-index: -1;
}
.news-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.news-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.65rem;
  transition: color 0.15s ease;
}
.news-card:hover .news-card-title {
  color: var(--rosso);
}
.news-excerpt {
  color: var(--grigio);
  font-size: 0.95rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.news-card-more {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rosso);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.news-card-arrow {
  transition: transform 0.2s ease;
}
.news-card:hover .news-card-arrow {
  transform: translateX(4px);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 3rem 0 1.5rem;
}
.pagination-btn {
  font-size: 0.85rem;
}
.pagination-status {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grigio);
  font-variant-numeric: tabular-nums;
}
/* ---------- Single Article Layout (news-article.njk) ---------- */
.page-article .page-hero {
  min-height: 32vh;
  padding-bottom: 2.5rem;
}
.article-hero-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}
.article-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--giallo);
  background: hsl(214 20% 17%);
  border: 1px solid rgb(255 255 255 / 0.12);
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius);
}
.article-title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 0.95;
  margin-top: 0.75rem;
}

.article-section {
  padding-top: 2.5rem;
}
.article-container {
  max-width: 52rem;
}
.article-top-nav {
  margin-bottom: 2rem;
}
.article-back-link {
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article-featured-image {
  margin: 0 0 2.5rem;
  max-width: 100%;
}
.article-featured-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(16 20 24 / 0.12);
}
.article-prose {
  max-width: 100%;
  font-size: 1.05rem;
  line-height: 1.7;
}
.article-prose p:first-of-type {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
}

.article-footer-box {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgb(16 20 24 / 0.1);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.article-footer-nav {
  display: flex;
  justify-content: flex-start;
}

/* ---------- Contact Cards & Board Cards (contatti.html) ---------- */
.contact-card-address {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: var(--grigio);
  line-height: 1.45;
}
.section-dark .contact-card-address {
  color: var(--grigio-chiaro);
}
.contact-fiscal-meta {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--grigio);
  margin-top: 0.35rem;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.board-card {
  background: rgb(255 255 255 / 0.08);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.board-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--carbon);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  z-index: -1;
  transition: background-color 0.2s ease;
}
.board-card:hover {
  transform: translateY(-3px);
  background: rgb(255 255 255 / 0.2);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.35);
}
.board-card-badge {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--giallo);
  color: var(--asphalt);
  padding: 2px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  margin-bottom: 0.85rem;
}
.board-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 0.2rem;
}
.board-card-role {
  font-size: 0.85rem;
  color: var(--grigio-chiaro);
  margin-bottom: 1.25rem;
}
.board-card-action {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}
.board-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--giallo);
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.15s ease;
}
.board-card-link:hover,
.board-card-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.board-card-meta {
  font-size: 0.8rem;
  color: var(--grigio-chiaro);
  font-style: italic;
}
/* Sei card × ~225px CSS = ~1.350px di scroll su mobile (gruppo L2). Restano
   card: si stringono padding e margini interni, non diventano tabella. */
@media (max-width: 560px) {
  .board-card {
    padding: 1.1rem 1.25rem;
  }
  .board-card-badge {
    margin-bottom: 0.6rem;
  }
  .board-card-name {
    font-size: 1.2rem;
    margin-bottom: 0;
  }
  .board-card-action {
    padding-top: 0.6rem;
  }
}

/* Social Channels */
.social-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.social-channel-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgb(16 20 24 / 0.08);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.social-channel-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  z-index: -1;
}
.social-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgb(16 20 24 / 0.12);
  background: rgb(16 20 24 / 0.18);
}
.social-channel-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  color: #fff;
}
.social-channel-icon--fb {
  background: #1877f2;
}
.social-channel-icon--ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-channel-body {
  flex: 1 1 auto;
}
.social-channel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.social-channel-handle {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rosso);
  margin-bottom: 0.35rem;
}
.social-channel-desc {
  font-size: 0.85rem;
  color: var(--grigio);
  line-height: 1.4;
  margin: 0;
}
.social-channel-arrow {
  flex: none;
  font-size: 1.25rem;
  color: var(--grigio);
  transition: transform 0.2s ease, color 0.2s ease;
}
.social-channel-card:hover .social-channel-arrow {
  transform: translateX(4px);
  color: var(--rosso);
}

/* ---------- 404 Error Page (404.njk) ---------- */
.error-hero {
  min-height: 35vh;
}
.error-section {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.error-container {
  max-width: 48rem;
  text-align: center;
}
.error-visual-badge {
  margin-bottom: 1.5rem;
}
.error-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 15vw, 9rem);
  line-height: 0.85;
  color: var(--rosso);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.error-prose {
  margin-inline: auto;
  max-width: 38rem;
  margin-bottom: 2.25rem;
}
.error-lead {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.6;
}
.btn-row--center {
  justify-content: center;
  margin-bottom: 3.5rem;
}
.error-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  text-align: left;
  margin-top: 2rem;
}
.error-link-card {
  position: relative;
  background: rgb(16 20 24 / 0.08);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.error-link-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  z-index: -1;
}
.error-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(16 20 24 / 0.1);
  background: rgb(16 20 24 / 0.18);
}
.error-link-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rosso);
  margin-bottom: 0.35rem;
}
.error-link-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.error-link-card p {
  font-size: 0.85rem;
  color: var(--grigio);
  line-height: 1.45;
  margin: 0;
}

/* ---------- Legal Pages (privacy.html, cookie-policy.html) ---------- */
.page-legal .page-hero {
  min-height: 32vh;
}
.legal-card {
  max-width: 52rem;
}
.legal-card-header {
  margin-bottom: 1.25rem;
}
.legal-section-title {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.legal-prose {
  max-width: 52rem;
  font-size: 1rem;
  line-height: 1.7;
}
.legal-prose p {
  margin-bottom: 1.15rem;
}
.legal-entity-box {
  background: #fff;
  border: 1px solid rgb(16 20 24 / 0.12);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.25rem 0;
}
.legal-entity-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 0.5rem !important;
}
.legal-card--dark .legal-prose p,
.legal-card--dark .legal-prose ul li {
  color: var(--grigio-chiaro);
}
.legal-card--dark .legal-prose ul li strong {
  color: #fff;
}
.legal-actions {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(16 20 24 / 0.1);
}