/* ============================================================
   Costa di Ponente — Design tokens
   Palette: mare al crepuscolo + pietra calcarea + bouganville
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Montserrat:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* colore */
  --ink: #10262B;          /* blu petrolio profondo, quasi nero */
  --sea: #1B4B4F;          /* mare al crepuscolo */
  --seafoam: #7FA8A0;      /* verde-azzurro spento */
  --stone: #E8DFC8;        /* pietra calcarea calda */
  --stone-light: #F3EEE1;
  --coral: #E85D4E;        /* bouganville */
  --gold: #D9A441;         /* oro solare, badge sponsor */

  /* tipografia — allineata al logo */
  --font-display: 'Cinzel', serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* layout */
  --radius: 4px;
  --max-width: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--stone-light);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---------- Header ---------- */

/* Mobile-first: di base la topbar è sempre visibile (comportamento
   mobile). Il "nascosta finché non scrolli" è un arricchimento solo
   per schermi larghi, applicato più sotto in @media (min-width:701px). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--stone-light);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.site-header .logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header .logo a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo {
  width: 32px;
  height: 32px;
  display: block;
}

.site-header .logo a { text-decoration: none; }

/* Mobile-first: di base il menu è quello a comparsa dietro l'hamburger
   (nascosto finché non si apre), in colonna. Sopra i 700px diventa la
   fila di link inline classica (vedi @media min-width:701px). */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--ink);
  padding: 10px 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body.nav-aperta .site-nav { display: flex; }

.site-nav .nav-dropdown { width: 100%; }

/* Selettore con due classi (non solo ".nav-dropdown-menu"): specificità
   più alta della regola base più sotto nel file, così vince sempre
   questa qui — non dipende dall'ordine delle regole. */
.site-nav .nav-dropdown-menu {
  position: static;
  box-shadow: none;
  border: none;
  padding-left: 8px;
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--stone-light);
  opacity: 0.85;
}

.site-nav a:hover { opacity: 1; }

.site-header .lang-toggle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: none;
  border: 1px solid var(--seafoam);
  color: var(--stone-light);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
}

/* Hamburger: mobile-first, visibile di default. Sopra i 700px si
   nasconde (vedi @media min-width:701px) e torna il menu inline. */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--stone-light);
}

/* ---------- Hero ---------- */

/* Mobile-first: padding ridotto di base (era il valore della vecchia
   media query max-width:600px). Il padding più ampio per schermi larghi
   è impostato esplicitamente sia su .hero che su .hero--compatta più
   sotto (min-width:601px), invece di affidarsi all'ordine delle regole
   nel file — più robusto, non dipende da quale arriva prima/dopo. */
.hero {
  padding: 40px 16px 28px;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: left;
}

.hero--compatta { padding: 40px 16px 28px; }

/* Video di sfondo — solo nella home. Il video parte muto/loop per essere
   autoplayabile ovunque; su schermi piccoli o con "riduci movimento"
   attivo lo sostituiamo con il solo fotogramma di anteprima (poster),
   fisso, per non gravare sui dati di chi è in giro con la connessione
   del cellulare (il pubblico tipico di questo sito). */
.hero--video {
  position: relative;
  overflow: hidden;
  padding-top: 110px;
  padding-bottom: 90px;
  max-width: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 38, 43, 0.55), rgba(16, 38, 43, 0.78));
  z-index: 1;
}

/* Mobile-first: colonna, centrato, logo ridotto (era la vecchia media
   query max-width:700px). La riga affiancata di schermi larghi è in
   @media (min-width:701px) più sotto. */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hero-text { flex: 1 1 320px; text-align: center; }

.hero-logo-block {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  order: -1;
  align-self: center;
}

.hero-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 70px rgba(255, 255, 255, 0.35));
}

.hero-logo-testo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
}

.hero-logo-titolo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
}

.hero-logo-tagline {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin-top: 4px;
}

/* Il video di sfondo ora resta visibile anche su mobile (richiesto):
   si spegne solo per chi ha attivato "riduci movimento", non più in base
   alla larghezza schermo. Vedi nota a fondo file sul consumo dati. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero--video {
    background: var(--ink) center / cover no-repeat;
    background-image: url("assets/video_home_poster.jpg");
  }
}

/* Schermi larghi (era il valore di base pre-refactor): padding hero
   pieno anche per la variante --compatta, esplicito su entrambe invece
   di affidarsi all'ordine delle regole. */
@media (min-width: 601px) {
  .hero { padding: 64px 20px 40px; }
  .hero--compatta { padding: 40px 20px 24px; }
}

/* Sopra i 700px: header con menu inline, topbar che compare solo dopo
   il primo scroll, hero affiancato a logo. Sotto, restano i valori
   mobile-first impostati come base più sopra. */
@media (min-width: 701px) {
  .hero-content { flex-direction: row; gap: 40px; }
  .hero-text { text-align: left; }
  .hero-logo-block { order: 0; align-self: auto; }
  .hero-logo { width: 340px; height: 340px; }

  /* Su desktop la topbar resta nascosta finché non si inizia a scrollare
     (classe aggiunta su <body> da js/header.js), per lasciare la scena
     libera al logo/hero in arrivo sulla pagina. Su mobile resta sempre
     visibile (vedi base .site-header più sopra). */
  .site-header { opacity: 0; visibility: hidden; }
  body.header-scroll .site-header { opacity: 1; visibility: visible; }

  .site-header .logo { white-space: normal; }

  .nav-toggle { display: none; }

  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    background: none;
    padding: 0;
    border-top: none;
  }

  .site-nav .nav-dropdown { width: auto; }

  /* Versione desktop della stessa regola mobile-first più sopra. */
  .site-nav .nav-dropdown-menu {
    position: absolute;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 0;
  }
}

.hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sea);
  margin-bottom: 14px;
}

.hero h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--ink);
  max-width: 14ch;
}

.hero--compatta h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

.hero p.lead {
  font-size: 1.1rem;
  max-width: 42ch;
  color: var(--sea);
  margin: 0;
}

/* Sopra al video la scritta deve restare bianca: queste regole vengono
   DOPO quelle generiche di .hero qui sopra apposta, perché a parità di
   specificità vince l'ultima dichiarata nel foglio di stile — messe
   prima (come in un passaggio precedente) venivano silenziosamente
   sovrascritte dal colore scuro di default e la scritta non risultava
   mai bianca. */
.hero--video .eyebrow { color: #ffffff; }
.hero--video h1,
.hero--video p.lead { color: #ffffff; }

/* ---------- Layout tappe: sidebar rotta (verticale) + lista ---------- */

/* Mobile-first: colonna (era la vecchia media query max-width:780px).
   La riga con la sidebar affiancata è in @media (min-width:781px). */
.tappe-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 16px 60px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

/* ---------- Rotta (elemento firma, verticale) ---------- */

/* Nascosta di base su mobile (l'elenco delle tappe si toglie, richiesto);
   torna visibile come sidebar sopra i 780px. */
.rotta-nav {
  display: none;
  position: sticky;
  top: 76px;
  flex: 0 0 150px;
  align-self: flex-start;
}

.rotta-nav svg {
  display: block;
  width: 100%;
  height: auto;
}

.rotta-tappa-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  fill: var(--sea);
  text-anchor: start;
  cursor: pointer;
}

.rotta-tappa-label.attiva {
  fill: var(--coral);
  font-weight: 500;
}

.rotta-punto {
  fill: var(--stone-light);
  stroke: var(--sea);
  stroke-width: 2;
  transition: all 0.2s ease;
  cursor: pointer;
}

.rotta-punto:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.rotta-punto.attiva {
  fill: var(--coral);
  stroke: var(--coral);
  r: 7;
}

/* ---------- Tappe a schermo intero, sequenza "pinnata" ----------
   Stessa tecnica di luigigrancagnolo.com (sezione "Chi sono"): il
   wrapper è alto N schermi, il suo interno resta agganciato (sticky)
   in cima mentre quell'altezza extra scorre, e le schede si dissolvono
   l'una nell'altra tramite animation-timeline nativa del browser,
   sincronizzata allo scroll — senza scroll-jacking o script fatti a
   mano. Dove animation-timeline non è supportata (Safari/Firefox meno
   recenti), un fallback in app.js applica la stessa dissolvenza via
   classe .attiva calcolata dalla posizione di scroll. */

.tappe-pin-wrapper {
  flex: 1;
  min-width: 0;
  /* altezza reale impostata via JS in base al numero di schede */
}

/* L'altezza è impostata via JS come stile inline (px, in base al numero
   di schede) per l'effetto "pinnato" desktop: su mobile va spenta con
   !important per tornare all'altezza naturale del contenuto (la galleria
   a scorrimento orizzontale qui sotto). Questa è l'unica eccezione mobile
   "ad hoc" del file: serve proprio perché deve battere uno stile inline,
   quindi non si presta alla forma mobile-first min-width come il resto. */
@media (max-width: 780px) {
  .tappe-pin-wrapper { height: auto !important; }
}

/* Mobile-first: galleria a scorrimento orizzontale (era la vecchia
   media query max-width:780px). L'effetto "pinnato" con dissolvenza è
   in @media (min-width:781px) più sotto. */
.tappe-pin-inner {
  position: static;
  height: auto;
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding-bottom: 8px;
}

/* .fade-section resta in forma "desktop-first" (base = effetto pinnato,
   eccezione mobile qui sotto con !important): su schermi larghi
   l'opacità è pilotata da animation-timeline (vedi @supports più sotto),
   e solo !important riesce a spegnerla in modo affidabile su mobile.
   Forzarla in forma mobile-first richiederebbe !important anche sulle
   regole desktop, rendendo tutto più fragile senza alcun vantaggio. */
.fade-section {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade-section.attiva {
  opacity: 1;
}

@supports (animation-timeline: view()) {
  .tappe-pin-wrapper {
    view-timeline-name: --tappe-progress;
    view-timeline-axis: block;
  }

  .fade-section {
    animation-name: tappa-dissolvenza;
    animation-timeline: --tappe-progress;
    animation-fill-mode: both;
    transition: none;
  }

  @keyframes tappa-dissolvenza {
    0%,
    100% {
      opacity: 0;
    }
    25%,
    75% {
      opacity: 1;
    }
  }
}

.tappa-full {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 20px;
  background: var(--stone-light);
}

.tappa-full-contenuto {
  max-width: 760px;
}

.tappa-full .numero {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--coral);
  margin-bottom: 10px;
}

.tappa-full .nome-tappa {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  margin: 0 0 10px;
}

.badge-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--gold);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: var(--radius);
}

/* ---------- Corpo scheda: foto + descrizione ---------- */

/* Mobile-first: foto e testo incolonnati (era la vecchia media query
   max-width:780px — senza "stretch" il testo non va a capo, resta
   largo solo quanto il contenuto). Affiancati sopra i 780px. */
.tappa-corpo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
}

/* Dimensioni condivise (arrotondata, sfondo, centratura). La misura vera
   e propria (piena larghezza su mobile, 320x320 su desktop) è impostata
   da ".tappa-corpo .tappa-foto" più sotto, così l'uso di ".tappa-foto"
   nella galleria della pagina dedicata (.tappa-foto-galleria) resta
   invariato a 200x200 come prima — non richiesto, non toccato. */
.tappa-foto {
  flex: 0 0 200px;
  width: 200px;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile-first: nella scheda, foto quadrata a piena larghezza della
   scheda (aspect-ratio 1/1 al posto dell'altezza fissa, resta quadrata
   a qualunque larghezza). Sopra i 780px torna fissa ma più grande. */
.tappa-corpo .tappa-foto {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (min-width: 781px) {
  .tappa-corpo .tappa-foto {
    flex: 0 0 320px;
    width: 320px;
    height: 320px;
  }
}

.tappa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tappa-foto-placeholder {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seafoam);
}

.tappa-descrizione {
  flex: 1;
  min-width: 0;
}

.tappa-descrizione p {
  margin: 0;
  color: var(--ink);
}

.link-categorie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.link-categorie a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--stone-light);
  border: 1px solid rgba(16,38,43,0.15);
  border-radius: 999px;
  padding: 6px 12px;
}

.link-categorie a:hover {
  border-color: var(--coral);
  color: var(--coral);
}

/* ---------- Scheda sponsor a schermo intero ---------- */

.sponsor-full {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--gold), #f0d385);
}

.sponsor-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 44px;
  max-width: 520px;
  text-align: center;
}

.sponsor-card--vuota {
  background: rgba(255,255,255,0.6);
  border: 1px dashed rgba(16,38,43,0.3);
}

.sponsor-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.6;
  margin-bottom: 10px;
}

.sponsor-card h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin: 0 0 8px;
}

.sponsor-categoria {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--sea);
  margin-bottom: 12px;
}

.sponsor-contatti {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ---------- Footer ---------- */

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 20px 60px;
  font-size: 0.8rem;
  color: var(--sea);
}

/* ---------- Pagina Eventi ---------- */

.eventi-filtri {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eventi-filtri button {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: #fff;
  border: 1px solid rgba(16,38,43,0.15);
  color: var(--sea);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}

.eventi-filtri button.attivo {
  background: var(--ink);
  color: var(--stone-light);
  border-color: var(--ink);
}

.eventi-feed {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Mobile-first: una colonna sola (era la vecchia media query
   max-width:600px). Data + contenuto affiancati sopra i 600px. */
.evento-card {
  background: #fff;
  border: 1px solid rgba(16,38,43,0.08);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.evento-data {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--coral);
  text-transform: capitalize;
}

.evento-contenuto h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.evento-paese {
  font-size: 0.78rem;
  color: var(--sea);
  margin-bottom: 6px;
}

.evento-contenuto a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--coral);
}

.eventi-vuoto {
  color: var(--sea);
  font-style: italic;
}

/* ---------- Tendina "Tappe" nella barra in alto ---------- */

.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--stone-light);
  opacity: 0.85;
  cursor: pointer;
}

.nav-dropdown-toggle:hover { opacity: 1; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 210px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 8px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}

.nav-dropdown.aperto .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
  display: block;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--stone-light);
  opacity: 0.85;
}

.nav-dropdown-menu a:hover { opacity: 1; background: rgba(255,255,255,0.08); }

/* ---------- Pagina dedicata a una tappa (tappa.html) ---------- */

.tappa-pagina {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 120px 20px 40px;
}

.link-tappa-dedicata {
  background: var(--ink) !important;
  color: var(--stone-light) !important;
  border-color: var(--ink) !important;
}

.tappa-foto-galleria {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tappa-foto-galleria .tappa-foto { flex: none; }

/* ---------- Aziende in evidenza (pagina tappa) ---------- */

.evidenza-sezione {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 60px;
}

.evidenza-sezione h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 16px;
}

.evidenza-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.evidenza-card {
  background: #fff;
  border: 1px solid rgba(16,38,43,0.08);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.evidenza-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 4px;
}

.evidenza-categoria {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--coral);
  margin-bottom: 4px;
}

.evidenza-vuoto {
  color: var(--sea);
  font-style: italic;
}

.badge-evidenza {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--seafoam);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: var(--radius);
}

/* ---------- Responsive ---------- */

/* Unica eccezione "mobile ad hoc" rimasta (oltre all'altezza del
   wrapper più sopra): .fade-section resta desktop-first perché deve
   battere l'animation-timeline di @supports più sopra, e solo
   !important lo fa in modo affidabile — vedi commento sopra
   .fade-section per i dettagli. */
@media (max-width: 780px) {
  .fade-section {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    opacity: 1 !important;
    animation: none !important;
    transition: none;
    scroll-snap-align: start;
  }
}

/* Sopra i 780px: sidebar rotta affiancata, sequenza "pinnata" con
   dissolvenza invece della galleria, scheda tappa con foto e testo
   affiancati. Sotto, restano i valori mobile-first impostati come base
   più sopra. */
@media (min-width: 781px) {
  .tappe-layout { flex-direction: row; align-items: flex-start; padding: 20px 20px 80px; gap: 32px; }

  .rotta-nav { display: block; }

  .tappe-pin-inner {
    position: sticky;
    top: 76px;
    height: calc(100vh - 76px);
    overflow: hidden;
    display: grid;
    /* Senza questa riga l'unica riga della grid si dimensiona sul
       contenuto più alto tra le schede invece che sull'altezza dello
       schermo: ".fade-section" (height:100%) finiva più alto del
       contenitore invece di esserne davvero vincolato, ed era per
       questo che lo scorrimento interno più sotto non funzionava. */
    grid-template-rows: 100%;
  }

  /* Rete di sicurezza per schede con più contenuto del normale (titolo
     lungo + descrizione lunga su uno schermo basso): ora che la riga
     della grid è davvero vincolata all'altezza dello schermo (riga
     sopra), qui lo scorrimento funziona per davvero — invece di
     tagliare via i link li si raggiunge scorrendo dentro la scheda.
     Invisibile quando il contenuto ci sta, come nella quasi totalità
     dei casi. */
  .fade-section { overflow-y: auto; }

  /* align-items: stretch (non flex-start) fa sì che la colonna testo si
     estenda quanto la foto, così il blocco link può essere ancorato al
     suo fondo qui sotto invece che restare dov'è la fine del testo. */
  .tappa-corpo { flex-direction: row; align-items: stretch; }

  .tappa-descrizione {
    min-width: 220px;
    display: flex;
    flex-direction: column;
  }

  /* margin-top:auto spinge i link in fondo alla colonna (allineati al
     bordo inferiore della foto) invece che subito sotto il testo. */
  .link-categorie { margin-top: auto; }
}

/* ---------- Accessibilità ---------- */

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rotta-punto { transition: none; }
}

/* ============================================================
   Pannello amministratore
   ============================================================ */

.admin-body { background: var(--stone-light); }

.admin-login {
  max-width: 360px;
  margin: 80px auto;
  padding: 0 20px;
}

.admin-login h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 20px;
}

#login-form { display: flex; flex-direction: column; gap: 14px; }

#login-form label { font-size: 0.85rem; color: var(--sea); display: flex; flex-direction: column; gap: 4px; }

#login-form input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid rgba(16,38,43,0.2);
  border-radius: var(--radius);
}

#login-form button {
  font: inherit;
  background: var(--ink);
  color: var(--stone-light);
  border: none;
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
}

.admin-errore { color: var(--coral); font-size: 0.85rem; }

.admin-app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(16,38,43,0.1);
}

.admin-tabs button {
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--sea);
  border-bottom: 2px solid transparent;
}

.admin-tabs button.attivo {
  color: var(--ink);
  border-bottom-color: var(--coral);
  font-weight: 600;
}

.admin-tab-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-lista { display: flex; flex-direction: column; gap: 10px; }

.admin-card {
  background: #fff;
  border: 1px solid rgba(16,38,43,0.08);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.admin-card summary { cursor: pointer; font-weight: 600; }

.admin-meta { font-size: 0.8rem; color: var(--sea); }

.admin-azioni { display: flex; gap: 8px; margin-top: 8px; }

.form-tappa, .admin-form-riquadro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.form-tappa label, .admin-form-riquadro label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--sea);
}

.admin-checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }

.foto-repeater { display: flex; flex-direction: column; gap: 14px; }

.foto-riga { display: flex; flex-direction: column; gap: 6px; }

.foto-riga-campo { display: flex; gap: 8px; align-items: center; }

.foto-riga-campo input { flex: 1; }

.foto-upload-label { white-space: nowrap; }

.foto-riga-anteprima { display: flex; align-items: center; gap: 10px; min-height: 24px; }

.foto-riga-anteprima img {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(16,38,43,0.15);
}

.foto-stato { font-size: 0.78rem; color: var(--sea); }

.form-tappa input, .form-tappa textarea,
.admin-form-riquadro input, .admin-form-riquadro textarea, .admin-form-riquadro select {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid rgba(16,38,43,0.2);
  border-radius: var(--radius);
}

.admin-btn-primario, .admin-btn-secondario, .admin-btn-pericolo {
  font: inherit;
  font-size: 0.82rem;
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  width: fit-content;
}

.admin-btn-primario { background: var(--ink); color: var(--stone-light); }
.admin-btn-secondario { background: #fff; border-color: rgba(16,38,43,0.2); color: var(--ink); }
.admin-btn-pericolo { background: #fff; border-color: var(--coral); color: var(--coral); }

.admin-salvato { color: #2e7d32; font-size: 0.82rem; margin-left: 8px; }

.admin-form-riquadro {
  background: var(--stone-light);
  border: 1px dashed rgba(16,38,43,0.2);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}