/* ==========================================================================
   Cabaret amoremio! — components.css
   Ogni componente usa solo le variabili semantiche di tema (tokens.css).
   Eccezioni di marca ammesse e dichiarate dove compaiono:
   - rosso delle CTA (--red-600 / --red-700);
   - testo --navy-900 sui fill --accent-graphic (badge data, chip accent, tab attiva, targa vincitore);
   - piastra --white dietro i loghi istituzionali (sono disegnati per fondo bianco).
   Classi di stato forzato usate SOLO dalla styleguide: .is-hover .is-active .is-focus .is-open.
   Indice
     5.1 Bottoni · 5.2 Occhiello, badge, chip · 5.3 Tooltip · 5.4 Hero · 5.5 Section-head
     5.6 Card serata · 5.7 Card artista · 5.8 Rail · 5.9 Stat-row · 5.10 Step-list
     5.11 Tabs · 5.12 Price-card · 5.13 Info-box · 5.14 Info-banner · 5.15 Code-copy
     5.16 Card luogo · 5.17 Card ente · 5.18 Timeline · 5.19 Year-list · 5.20 Year-grid
     5.21 Accordion · 5.22 Sponsor-grid · 5.23 Gallery-grid e lightbox · 5.24 Countdown
     5.25 Empty-state · 5.26 Breadcrumb · 5.27 Header · 5.28 Drawer · 5.29 Sticky CTA
     5.30 Banner cookie · Footer
     Composizioni richieste dalla §6: icon-list, media-placeholder, card-link,
     card-vincitore, card-acquisto, cta-band, campi form, toc, locandina-preview, photo
   ========================================================================== */


/* ==========================================================================
   5.1 Bottoni — il rosso è riservato all'acquisto dei biglietti
   ========================================================================== */
.btn{
  --btn-h:3rem;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  min-height:var(--btn-h);
  padding:var(--sp-1) var(--sp-6);
  border:var(--bw-thick) solid transparent;
  border-radius:var(--r-0);
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:normal;
  line-height:1.1;
  letter-spacing:var(--ls-btn);
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn .icon{ width:1.15em; height:1.15em; stroke-width:2; }

/* Taglie */
.btn--sm{ --btn-h:2.25rem; padding-inline:var(--sp-4); gap:var(--sp-2); font-size:.875rem; }
.btn--sm::before{ /* area tattile 44px */
  content:'';
  position:absolute;
  top:50%; left:0; right:0;
  min-width:44px;
  height:44px;
  transform:translateY(-50%);
}
.btn--lg{ --btn-h:3.5rem; padding-inline:var(--sp-8); font-size:1.25rem; }

/* Primario — solo biglietteria */
.btn--primary{
  width:100%;
  background:var(--red-600);
  border-color:var(--red-600);
  color:var(--white);
}
.btn--primary:is(:hover,.is-hover){
  background:var(--red-700);
  border-color:var(--red-700);
  transform:translateY(-1px);
}
.btn--primary:is(:active,.is-active){ transform:translateY(0); background:var(--red-700); }
@media (min-width:600px){ .btn--primary{ width:auto; } }
.btn--primary.btn--sm,
.btn--inline{ width:auto; }

/* Secondario — navigazione interna */
.btn--secondary{
  background:transparent;
  border-color:currentColor;
  color:var(--fg);
}
.btn--secondary:is(:hover,.is-hover){
  background:var(--fg);
  border-color:var(--fg);
  color:var(--bg);
}
.btn--secondary:is(:active,.is-active){ transform:translateY(1px); }

/* Ghost — link di navigazione con freccia */
.btn--ghost{
  --btn-h:44px;
  /* padding per dare respiro all'anello di focus; il margine negativo
     tiene l'etichetta allineata alla colonna di testo */
  padding-inline:var(--sp-3);
  margin-inline:calc(var(--sp-3) * -1);
  border:0;
  background:none;
  color:var(--accent);
  justify-content:flex-start;
  text-align:left;
}
.btn__arrow{ transition:transform var(--dur) var(--ease); }
.btn--ghost:is(:hover,.is-hover) .btn__arrow{ transform:translateX(4px); }
.btn--ghost:is(:active,.is-active){ color:var(--fg); }

/* Disabilitato */
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  pointer-events:none;
}


/* ==========================================================================
   5.2 Occhiello, badge, chip
   ========================================================================== */
.eyebrow{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  line-height:1.35;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--muted{ color:var(--fg-muted); }

.badge-edizione{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border:var(--bw) solid var(--accent-graphic);
  border-radius:var(--r-sm);
  color:var(--accent);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.badge-data{ /* fill arancio + testo navy: eccezione di marca */
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:4.75rem;
  padding:var(--sp-2) var(--sp-3);
  background:var(--accent-graphic);
  color:var(--navy-900);
  line-height:1;
}
.badge-data__day{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:.95;
}
.badge-data__month{
  margin-block-start:var(--sp-1);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
}

.chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:32px;
  padding:var(--sp-1) var(--sp-3);
  border:var(--bw) solid var(--border-strong);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.2;
  text-align:left;
  text-decoration:none;
}
.chip--accent{
  background:var(--accent-graphic);
  border-color:var(--accent-graphic);
  color:var(--navy-900);
}
.chip--toggle{
  border-color:var(--border-control);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip--toggle::before{ /* area tattile 44px */
  content:'';
  position:absolute;
  top:50%; left:0; right:0;
  height:44px;
  transform:translateY(-50%);
}
.chip--toggle:is(:hover,.is-hover){ border-color:var(--accent-graphic); background:var(--bg-elev); }
.chip__check{ display:none; }
.chip--toggle[aria-pressed="true"]{
  background:var(--accent-graphic);
  border-color:var(--accent);
  color:var(--navy-900);
}
.chip--toggle[aria-pressed="true"] .chip__check{ display:block; }
.chip--toggle[aria-disabled="true"]{
  border-style:dashed;
  background:transparent;
  color:var(--fg-muted);
  cursor:not-allowed;
}


/* ==========================================================================
   5.3 Tooltip — hover + focus, Esc per chiudere, mai l'attributo title
   ========================================================================== */
.tooltip{
  position:relative;
  display:inline-flex;
  vertical-align:middle;
}
.tooltip__trigger{ cursor:help; }
.tooltip__trigger.chip::before{ /* area tattile 44px */
  content:'';
  position:absolute;
  top:50%; left:0; right:0;
  height:44px;
  transform:translateY(-50%);
}
.tooltip__trigger--icon{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:-10px;
  color:var(--accent);
}
.tooltip__bubble{
  position:absolute;
  z-index:20;
  bottom:calc(100% + var(--sp-2));
  left:50%;
  width:max-content;
  max-width:min(16rem, 80vw);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);
  background:var(--fg);
  color:var(--bg);
  box-shadow:var(--shadow-float);
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:500;
  line-height:1.4;
  letter-spacing:0;
  text-align:left;
  text-transform:none;
  white-space:normal;
  /* chiuso = fuori dal layout: un fumetto solo invisibile creerebbe scroll orizzontale ai bordi */
  display:none;
  transform:translate(-50%, 0);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tooltip__bubble::before{ /* ponte per il puntatore fra trigger e fumetto */
  content:'';
  position:absolute;
  left:0; right:0; top:100%;
  height:var(--sp-3);
}
.tooltip__bubble::after{ /* freccia */
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  border:6px solid transparent;
  border-top-color:var(--fg);
  transform:translateX(-50%);
}
.tooltip:hover .tooltip__bubble,
.tooltip__trigger:focus + .tooltip__bubble,
.tooltip.is-open .tooltip__bubble{ display:block; }
@starting-style{
  .tooltip:hover .tooltip__bubble,
  .tooltip__trigger:focus + .tooltip__bubble{ opacity:0; }
}
.tooltip--start .tooltip__bubble{ left:0; transform:none; }
.tooltip--start .tooltip__bubble::after{ left:1.25rem; }
.tooltip--end .tooltip__bubble{ left:auto; right:0; transform:none; }
.tooltip--end .tooltip__bubble::after{ left:auto; right:1.25rem; transform:translateX(50%); }
.tooltip.is-dismissed .tooltip__bubble{ display:none; }


/* ==========================================================================
   Composizione: icon-list — righe con icona (meta hero, recapiti, orari)
   ========================================================================== */
.icon-list{
  display:grid;
  gap:var(--sp-3);
  list-style:none;
}
.icon-list__item{
  display:grid;
  grid-template-columns:var(--icon) minmax(0,1fr);
  gap:var(--sp-3);
  align-items:start;
}
.icon-list__item > .icon{ margin-block-start:.15em; color:var(--accent); }
.icon-list a{
  display:inline-block;
  padding-block:.6rem;
  margin-block:-.6rem;
  color:var(--fg);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  text-decoration-color:var(--accent-graphic);
  overflow-wrap:anywhere; /* email lunghe (ufficiostampa@comune…) a 360px sbordavano dalla card */
}
.icon-list a:hover{ color:var(--accent); text-decoration-thickness:2px; }
.icon-list--inline{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); }
.icon-list--lg{ font-size:var(--fs-body-lg); font-weight:600; }


/* ==========================================================================
   Composizione: media-placeholder — ritratto o copertina non disponibile
   ========================================================================== */
.media-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:var(--navy-700);
  box-shadow:inset 0 0 0 var(--bw) var(--border);
  font-family:var(--font-display);
  font-size:3rem;
  line-height:1;
  text-transform:uppercase;
  color:var(--slate-500); /* 3.92:1 su navy-700, testo grande */
}


/* ==========================================================================
   5.4 Hero — scheletro: breadcrumb → occhiello/badge → H1 → sottotitolo → meta → azioni
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg);
  color:var(--fg);
}
.hero__inner{ position:relative; z-index:1; }
.hero__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-5);
}
.hero__title{ color:var(--fg); }
.hero__subtitle{
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  font-weight:600;
  max-width:36ch;
}
.hero__accent{ color:var(--accent); }
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  width:100%;
  margin-block-start:var(--sp-2);
}
.hero__content > .empty-state{ align-self:stretch; max-width:var(--measure); } /* segnaposto di un testo (bio): largo come un paragrafo */
.hero__actions .btn{ width:100%; }
@media (min-width:600px){ .hero__actions .btn{ width:auto; } }

/* Foto + scrim obbligatorio */
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.45) 50%, rgba(var(--scrim),.15) 100%);
}

/* --display — solo Home
   La foto è una cover a tutta area, ancorata in basso: il cielo del file è
   trasparente, quindi l'edificio "sale" dal fondo blu notte come nel concept.
   Su mobile l'hero è compatto (niente altezza minima) per lasciar vedere le serate. */
.hero--display{
  display:grid;
  align-items:end;
  padding-block:var(--sp-6) var(--sp-7);
}
.hero--display .hero__content{
  gap:var(--sp-4);
  text-shadow:0 1px 1.5rem rgba(var(--scrim),.55);
}
.hero--display .hero__title{
  font-size:var(--fs-display);
  line-height:var(--lh-display);
}
.hero--display .hero__content .btn{ text-shadow:none; }
.hero--display .hero__actions{ margin-block-start:var(--sp-1); }
.hero--display .hero__actions .btn--lg{ --btn-h:3rem; font-size:1.0625rem; } /* compatte su mobile */
.hero--display .hero__media img{ object-fit:cover; object-position:50% 100%; }
.hero--display .hero__media::after{
  background:
    linear-gradient(to right, rgba(var(--scrim),.5) 0%, rgba(var(--scrim),.1) 70%, rgba(var(--scrim),0) 100%),
    linear-gradient(to top, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.45) 50%, rgba(var(--scrim),.15) 100%);
}
@media (min-width:600px){
  .hero--display .hero__actions .btn--lg{ --btn-h:3.5rem; font-size:1.25rem; }
  /* Fra 600 e 899px il testo sta ancora su una colonna sola, ma la foto è già
     larga: la facciata illuminata arrivava sotto «a Grottammare.» (arancio 17px)
     e il contrasto scendeva a 3.8:1. Velo sinistro più fitto: misurato 5.5:1. */
  .hero--display .hero__media::after{
    background:
      linear-gradient(to right, rgba(var(--scrim),.82) 0%, rgba(var(--scrim),.5) 45%, rgba(var(--scrim),0) 85%),
      linear-gradient(to top, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.45) 50%, rgba(var(--scrim),.15) 100%);
  }
}
@media (min-width:900px){
  .hero--display{
    align-items:center;
    min-height:80vh;
    min-height:80svh;
    padding-block:var(--sp-10);
  }
  .hero--display .hero__content{ gap:var(--sp-5); }
  .hero--display .hero__inner{
    display:grid;
    grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  }
  .hero--display .hero__media img{ object-position:60% 100%; }
  .hero--display .hero__media::after{
    background:
      linear-gradient(to right, rgba(var(--scrim),.92) 0%, rgba(var(--scrim),.6) 35%, rgba(var(--scrim),0) 70%),
      linear-gradient(to top, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.45) 50%, rgba(var(--scrim),.15) 100%);
  }
}

/* --page — pagine interne */
.hero--page{ padding-block:var(--sp-10); }
.hero--page .hero__title{ font-size:var(--fs-h1); line-height:var(--lh-title); }
.hero--page .hero__inner::after{ /* filetto sfumato di chiusura, dal concept Biglietti */
  content:'';
  display:block;
  height:1px;
  margin-block-start:var(--sp-9);
  background:linear-gradient(to right, var(--accent-graphic), rgba(var(--orange-500-rgb),0) 75%);
}
.hero--page .hero__split{ display:grid; gap:var(--sp-8); }
.hero--page .hero__inner > .breadcrumb{ margin-block-end:var(--sp-5); } /* scheda artista: il breadcrumb sta sopra il ritratto */
.hero--page .hero__aside{ position:relative; width:min(100%, 18rem); aspect-ratio:3 / 4; overflow:hidden; background:var(--navy-700); }
.hero--page .hero__aside img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
@media (min-width:900px){
  .hero--page .hero__split{ grid-template-columns:minmax(0,18rem) minmax(0,1fr); align-items:end; gap:var(--sp-10); }
}

/* --page + --photo — foto di sfondo (pagine Il Festival, Fase 4)
   Il testo occupa l'intera altezza, breadcrumb compreso: lo scrim di sistema
   (.15 in alto) non basta. Opacità minima .82 ovunque ci sia testo, cioè 4.5:1
   per l'arancio piccolo anche sopra un pixel bianco. Da md il testo sta nel 60%
   sinistro: gradiente da sinistra, la foto si vede a destra. */
.hero--photo .hero__content{ text-shadow:0 1px 1.25rem rgba(var(--scrim),.6); }
.hero--photo .hero__content :is(.btn,.badge-edizione,.chip){ text-shadow:none; }
.hero--photo .hero__media img{ object-position:var(--hero-pos, 50% 50%); }
.hero--photo .hero__media::after{
  background:linear-gradient(to top, rgba(var(--scrim),.95) 0%, rgba(var(--scrim),.86) 55%, rgba(var(--scrim),.82) 100%);
}
@media (min-width:900px){
  .hero--photo{ padding-block:var(--sp-12) var(--sp-10); }
  .hero--photo .hero__media::after{
    background:linear-gradient(to right, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.86) 60%, rgba(var(--scrim),.45) 100%);
  }
}

/* --media — serate ed eventi
   Il rapporto 4/3 → 16/7 è un'altezza MINIMA data da un segnaposto nella stessa
   cella di griglia: con overflow:hidden un aspect-ratio diretto taglierebbe il testo. */
.hero--media{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
.hero--media::before{ content:''; grid-area:1 / 1; align-self:start; aspect-ratio:4 / 3; }
.hero--media > .hero__inner{ grid-area:1 / 1; padding-block:var(--sp-10) var(--sp-8); }
.hero--media .hero__content{ text-shadow:0 1px 1.25rem rgba(var(--scrim),.6); }
.hero--media .hero__content :is(.btn,.badge-data){ text-shadow:none; }
/* Scrim rinforzato, misurato sulle due foto delle serate (Fase 3).
   Sotto md il testo copre quasi tutta la foto: velo quasi uniforme, altrimenti
   breadcrumb e occhiello arancio (12–13px) scendono a 1.2–2.5:1 sulla foglia
   dorata del 1° agosto e sulle luci del palco del 31 luglio. Da md il testo sta
   a sinistra: basta un gradiente da sinistra sopra lo scrim di sistema. */
.hero--media .hero__media::after{
  background:
    linear-gradient(to bottom, rgba(var(--scrim),.85) 0%, rgba(var(--scrim),0) 45%),
    linear-gradient(to top, rgba(var(--scrim),.95) 0%, rgba(var(--scrim),.85) 50%, rgba(var(--scrim),.75) 100%);
}
@media (min-width:900px){
  .hero--media::before{ aspect-ratio:16 / 7; }
  .hero--media .hero__media::after{
    background:
      linear-gradient(to right, rgba(var(--scrim),.8) 0%, rgba(var(--scrim),.45) 40%, rgba(var(--scrim),0) 70%),
      linear-gradient(to bottom, rgba(var(--scrim),.75) 0%, rgba(var(--scrim),0) 32%),
      linear-gradient(to top, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.55) 50%, rgba(var(--scrim),.3) 100%);
  }
}


/* ==========================================================================
   5.5 Section-head
   ========================================================================== */
.section-head{
  display:grid;
  justify-items:start;
  gap:var(--sp-3);
  margin-block-end:var(--sp-8);
}
.section-head__title{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  color:var(--accent-display, var(--accent));
  font-size:var(--fs-h2);
  line-height:var(--lh-title);
}
.section-head__title .icon{ width:.75em; height:.75em; stroke-width:2; }
.section-head .lead{ max-width:46ch; }
.section-head--center{ justify-items:center; text-align:center; }
.section-head--center .lead{ margin-inline:auto; }


/* ==========================================================================
   5.6 Card serata
   ========================================================================== */
.card-serata{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  overflow:hidden;
  background:var(--navy-900);
}
/* 4/3 → 16/9 come altezza minima (segnaposto nella stessa cella): il testo non viene mai tagliato */
.card-serata::before{ content:''; grid-area:1 / 1; align-self:start; aspect-ratio:4 / 3; }
.card-serata > .card-serata__body{ grid-area:1 / 1; }
@media (min-width:900px){ .card-serata::before{ aspect-ratio:16 / 9; } }
.card-serata__media{ position:absolute; inset:0; z-index:-1; }
.card-serata__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.card-serata__media::before,
.card-serata__media::after{
  content:'';
  position:absolute;
  inset:0;
  transition:opacity var(--dur-slow) var(--ease);
}
.card-serata__media::after{ /* scrim di sistema, rinforzato: qui il testo occupa metà card */
  background:linear-gradient(to top, rgba(var(--scrim),.95) 0%, rgba(var(--scrim),.7) 50%, rgba(var(--scrim),.2) 100%);
}
.card-serata__media::before{ /* rinforzo dello scrim in hover */
  z-index:1;
  background:rgba(var(--scrim),.25);
  opacity:0;
}
.card-serata__badge{ position:absolute; top:var(--sp-5); left:var(--sp-5); }
.card-serata__body{ /* su foto: aggiungere .theme-dark */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:var(--sp-2);
  padding:6.5rem var(--sp-5) var(--sp-4);
  color:var(--fg);
}
.card-serata__title{ font-size:var(--fs-h3); color:var(--fg); }
.card-serata__title a{ color:inherit; text-decoration:none; }
.card-serata__meta{ font-size:var(--fs-small); font-weight:500; color:var(--fg); }
.card-serata .btn--ghost{ margin-block-start:var(--sp-1); }
.card-serata:is(:hover,.is-hover) .card-serata__media img{ transform:scale(1.04); }
.card-serata:is(:hover,.is-hover) .card-serata__media::before{ opacity:1; }
.card-serata:is(:hover,.is-hover) .btn__arrow{ transform:translateX(4px); }

/* Compact — elenchi di date, senza foto */
.card-serata--compact{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--sp-4) var(--sp-5);
  padding:var(--sp-4);
  overflow:visible;
  background:var(--bg-elev);
  border:var(--bw) solid var(--border);
}
.card-serata--compact::before{ content:none; }
.card-serata--compact .card-serata__badge{ position:static; }
.card-serata--compact > .card-serata__body{ grid-area:auto; padding:0; justify-content:center; gap:var(--sp-2); }
.card-serata--compact .card-serata__title{ font-size:var(--fs-h4); }
.card-serata--compact .card-serata__meta{ color:var(--fg-muted); }
/* cliccabile (Tutte le date, pagina Eventi): bordo arancio in hover, come .card-link */
.card-serata--compact{ transition:border-color var(--dur-fast) var(--ease); }
.card-serata--compact:is(:has(.stretched):hover,.is-hover){ border-color:var(--accent-graphic); }

/* Focus sulle card con stretched-link: l'anello avvolge la card intera */
@supports selector(:has(*)){
  :is(.card-serata,.card-artista,.card-link,.card-vincitore):has(.stretched:focus-visible){
    outline:3px solid var(--focus);
    outline-offset:2px;
  }
  :is(.card-serata,.card-artista,.card-link,.card-vincitore) .stretched:focus-visible{ outline:none; }
}
:is(.card-serata,.card-artista,.card-link,.card-vincitore).is-focus{ outline:3px solid var(--focus); outline-offset:2px; }


/* ==========================================================================
   5.7 Card artista — ritratto 3:4, ogni card ha il chip del ruolo
   ========================================================================== */
.card-artista{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-3);
}
.card-artista__media{
  position:relative;
  width:100%;
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:var(--navy-700);
}
.card-artista__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  transition:transform var(--dur-slow) var(--ease);
}
.card-artista__name{
  font-size:var(--fs-h4);
  line-height:var(--lh-heading);
  color:var(--fg);
  text-wrap:balance;
  transition:color var(--dur-fast) var(--ease);
}
.card-artista__name a{ color:inherit; text-decoration:none; }
/* hover solo sulle card linkate: gli artisti delle rassegne (Fase 5) non hanno una scheda */
.card-artista:is(:has(.stretched):hover,.is-hover) .card-artista__media img{ transform:scale(1.04); }
.card-artista:is(:has(.stretched):hover,.is-hover) .card-artista__name{ color:var(--accent); }

/* Wide — "Presenta" nelle pagine serata */
.card-artista--wide .card-artista__media{ max-width:18rem; }
.card-artista--wide .card-artista__name{ font-size:var(--fs-h2); line-height:var(--lh-title); }
@media (min-width:600px){
  .card-artista--wide{
    display:grid;
    grid-template-columns:minmax(0,16rem) minmax(0,1fr);
    grid-template-rows:1fr repeat(3,auto); /* testo allineato in basso accanto al ritratto */
    align-items:end;
    gap:var(--sp-3) var(--sp-7);
  }
  .card-artista--wide .card-artista__media{ grid-row:1 / -1; }
  .card-artista--wide > :not(.card-artista__media){ grid-column:2; justify-self:start; }
  .card-artista--wide > :nth-child(2){ grid-row:2; }
  .card-artista--wide > :nth-child(3){ grid-row:3; }
  .card-artista--wide > :nth-child(4){ grid-row:4; }
}


/* ==========================================================================
   5.8 Rail — riga a scorrimento con scroll-snap
   ========================================================================== */
.rail{ position:relative; }
.rail__track{
  display:flex;
  gap:var(--sp-5);
  margin-inline:calc(var(--gutter) * -1);
  padding:var(--sp-2) var(--gutter) var(--sp-3);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
  list-style:none;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 4.5rem), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 4.5rem), transparent);
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track > *{ flex:0 0 clamp(9rem,42vw,13rem); scroll-snap-align:start; }
.rail.is-end .rail__track{ -webkit-mask-image:none; mask-image:none; }
.rail__controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  min-height:44px;
  margin-block-start:var(--sp-4);
}
.rail__dots{ display:flex; gap:var(--sp-2); }
.rail__dot{
  width:8px;
  height:8px;
  border-radius:var(--r-full);
  background:var(--border-control);
  transition:background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.rail__dot.is-active{ background:var(--accent-graphic); transform:scale(1.25); }
.rail__nav{ display:none; gap:var(--sp-2); margin-inline-start:auto; }
.rail__btn{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:var(--bw) solid var(--border-control);
  color:var(--fg);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail__btn:is(:hover,.is-hover):not(:disabled){ border-color:var(--accent-graphic); color:var(--accent); }
.rail__btn:disabled{ opacity:.35; cursor:not-allowed; }
@media (min-width:900px){ .rail__nav{ display:flex; } }
@media (min-width:1200px){
  .rail--grid-lg .rail__track{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:var(--sp-8) var(--sp-5);
    margin-inline:0;
    padding-inline:0;
    overflow:visible;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .rail--grid-lg .rail__controls{ display:none; }
}


/* ==========================================================================
   5.9 Stat-row
   ========================================================================== */
.stat-row{
  container-type:inline-size; /* il numero si adatta alla colonna in cui sta, non solo al viewport */
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4);
  list-style:none;
}
.stat{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.stat__value{
  font-family:var(--font-display);
  font-size:min(var(--fs-h2), 13cqi); /* --fs-h2 resta il tetto */
  line-height:1;
  text-transform:uppercase;
  color:var(--accent);
}
.stat__label{ font-size:var(--fs-small); line-height:1.35; color:var(--fg-muted); }
@media (min-width:600px){
  .stat-row{ gap:0; }
  .stat{ padding-inline:min(var(--sp-6), 4cqi); }
  .stat:first-child{ padding-inline-start:0; }
  .stat + .stat{ border-inline-start:var(--bw) solid var(--border); }
}


/* ==========================================================================
   5.10 Step-list
   ========================================================================== */
.step-list{
  display:grid;
  gap:var(--sp-8);
  list-style:none;
}
@media (min-width:600px){
  .step-list{ grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:var(--sp-8) var(--sp-6); }
}
.step{ position:relative; display:grid; align-content:start; gap:var(--sp-2); }
.step__num{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:1;
  color:var(--accent-display, var(--accent)); /* fs-h2 ≥30px: su chiaro orange-600 (3.06:1) */
}
.step__title{ font-size:var(--fs-h4); color:var(--fg); }
.step__text{ color:var(--fg-muted); }
@media (min-width:900px){
  .step-list{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
  .step:not(:last-child)::after{ /* linea di connessione, decorativa */
    content:'';
    position:absolute;
    top:calc(var(--fs-h2) / 2);
    left:3.25rem;
    right:var(--sp-2);
    height:var(--bw);
    background:var(--border-strong);
  }
}


/* ==========================================================================
   5.11 Tabs — tablist accessibile, deep link via hash
   ========================================================================== */
.tabs__list{ display:none; }
.js .tabs__list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
}
.tabs__tab{
  position:relative;
  min-height:3rem;
  padding:var(--sp-2) var(--sp-4);
  border:var(--bw) solid var(--border-control);
  background:transparent;
  color:var(--fg);
  font-family:var(--font-display);
  font-size:1.0625rem;
  line-height:1.1;
  letter-spacing:var(--ls-btn);
  text-transform:uppercase;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tabs__tab + .tabs__tab{ border-inline-start-width:0; }
.tabs__tab:focus-visible,
.tabs__tab.is-focus{ z-index:1; }
.tabs__tab:is(:hover,.is-hover):not([aria-selected="true"]){ background:var(--bg-elev); }
.tabs__tab[aria-selected="true"]{
  background:var(--accent-graphic);
  border-color:var(--accent);
  color:var(--navy-900);
}
.tabs__panel{ padding-block-start:var(--sp-6); }
.tabs__panel + .tabs__panel{ margin-block-start:var(--sp-7); } /* senza JS i pannelli sono impilati */
.js .tabs__panel + .tabs__panel{ margin-block-start:0; }
.tabs__panel-title{ margin-block-end:var(--sp-4); font-size:var(--fs-h4); color:var(--fg); }
.js .tabs__panel-title{
  position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}


/* ==========================================================================
   5.12 Price-card
   ========================================================================== */
.price-card{
  display:grid;
  gap:var(--sp-4);
  padding:var(--sp-5);
  border:var(--bw) solid var(--border-strong);
  border-radius:var(--r-sm);
}
.price-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
}
.price-card__title{ font-size:var(--fs-h4); color:var(--fg); padding-block-start:var(--sp-1); }
.price-card__prices{ display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-9); }
.price-card__prices > div{ display:grid; gap:var(--sp-1); }
.price-card__price{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:1;
  color:var(--fg);
}
.price-card__price--reduced{ color:var(--accent); }


/* ==========================================================================
   5.13 Info-box
   ========================================================================== */
.info-box{
  padding:var(--sp-6);
  border:var(--bw) solid var(--border);
  background:transparent;
}
.info-box__title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  margin-block-end:var(--sp-5);
  text-align:center;
}
.info-box__title .icon{ width:1rem; height:1rem; stroke-width:2.25; }
.info-box__note{ margin-block-start:var(--sp-5); font-size:var(--fs-small); color:var(--fg-muted); }


/* ==========================================================================
   5.14 Info-banner
   ========================================================================== */
.info-banner{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border:var(--bw) solid;
  border-radius:var(--r-md);
  color:var(--fg);
  font-weight:500;
}
.info-banner > .icon{ margin-block-start:.1em; color:var(--accent); }
.info-banner__text{ max-width:56ch; } /* il testo del banner è in peso 500: a 60ch la riga arriva a 79 caratteri */
.info-banner--info{ border-color:var(--accent-graphic); background:var(--accent-tint); }
.info-banner--neutral{ border-color:var(--border); background:var(--bg-elev); }


/* ==========================================================================
   5.15 Code-copy
   ========================================================================== */
.code-copy{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3) var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border-inline-start:3px solid var(--accent-graphic);
  background:var(--bg-elev);
}
.code-copy__label{ display:block; font-size:var(--fs-small); color:var(--fg); }
.code-copy__code{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--accent);
  overflow-wrap:anywhere;
}
.code-copy__btn .icon--check{ display:none; }
.code-copy.is-copied .code-copy__btn .icon--copy{ display:none; }
.code-copy.is-copied .code-copy__btn .icon--check{ display:block; }
.code-copy.is-copied .code-copy__btn{ border-color:var(--accent-graphic); color:var(--accent); }


/* ==========================================================================
   5.16 Card luogo — punti vendita
   ========================================================================== */
.card-luogo{
  display:grid;
  align-content:start;
  gap:var(--sp-5);
  padding:var(--sp-6);
  background:var(--bg-elev);
  border:var(--bw) solid transparent;
}
.card-luogo__head{ display:grid; justify-items:start; gap:var(--sp-2); }
.card-luogo__name{ font-size:var(--fs-h4); color:var(--fg); }
.card-luogo__foot{ margin-block-start:var(--sp-1); }
.card-luogo--temporaneo{
  background:transparent;
  border:var(--bw-thick) dashed var(--border-strong);
}


/* ==========================================================================
   5.17 Card ente — organizzatori e contatti
   ========================================================================== */
.card-ente{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr); /* una colonna che si restringe: il logo non allarga la card */
  align-content:start;
  gap:var(--sp-4);
  padding:var(--sp-6);
  background:var(--bg-elev);
}
.card-ente__logo{ /* piastra bianca: eccezione di marca, i loghi sono disegnati per fondo bianco */
  display:grid;
  place-items:center;
  aspect-ratio:3 / 2;
  padding:var(--sp-5);
  background:var(--white);
  box-shadow:inset 0 0 0 var(--bw) var(--border);
}
.card-ente__logo{ grid-template-columns:minmax(0,1fr); }
.card-ente__logo img{ width:100%; max-width:100%; height:100%; object-fit:contain; }
.card-ente__name{ font-size:var(--fs-h4); color:var(--fg); }
.card-ente__desc{ color:var(--fg-muted); }


/* ==========================================================================
   5.18 Timeline
   ========================================================================== */
.timeline{
  position:relative;
  display:grid;
  gap:var(--sp-8);
  padding-inline-start:var(--sp-7);
  list-style:none;
}
.timeline::before{
  content:'';
  position:absolute;
  top:var(--sp-2); bottom:var(--sp-2);
  left:5px;
  width:var(--bw);
  background:var(--border-strong);
}
.timeline__item{ position:relative; display:grid; justify-items:start; gap:var(--sp-2); }
.timeline__item::before{
  content:'';
  position:absolute;
  top:.45em;
  left:calc(var(--sp-7) * -1);
  width:11px;
  height:11px;
  border-radius:var(--r-full);
  background:var(--accent-graphic);
  box-shadow:0 0 0 4px var(--bg);
}
.timeline__year{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:1;
  color:var(--accent);
}
.timeline__title{ font-size:var(--fs-h4); color:var(--fg); }
.timeline__text{ color:var(--fg-muted); }
@media (min-width:900px){
  .timeline{ padding-inline-start:0; gap:var(--sp-5); }
  .timeline::before{ left:50%; }
  .timeline__item{ width:50%; padding-inline-end:var(--sp-9); justify-items:end; text-align:right; }
  .timeline__item::before{ left:auto; right:-5px; }
  .timeline__item:nth-child(even){ margin-inline-start:50%; padding-inline:var(--sp-9) 0; justify-items:start; text-align:left; }
  .timeline__item:nth-child(even)::before{ right:auto; left:-6px; }
  .timeline__item p{ margin-inline-start:auto; }
  .timeline__item:nth-child(even) p{ margin-inline-start:0; }
}


/* ==========================================================================
   Composizione: campi form (ricerca year-list, form contatti)
   ========================================================================== */
.field{ display:grid; gap:var(--sp-2); }
.field__label{ font-size:var(--fs-small); font-weight:600; color:var(--fg); }
.field__hint{ font-size:var(--fs-xs); color:var(--fg-muted); }
.field__error{ display:flex; gap:var(--sp-2); font-size:var(--fs-xs); font-weight:600; color:var(--danger); }
.input{
  width:100%;
  min-height:3rem;
  padding:var(--sp-3) var(--sp-4);
  border:var(--bw) solid var(--border-control);
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--fg);
  font-size:var(--fs-body);
  transition:border-color var(--dur-fast) var(--ease);
}
.input::placeholder{ color:var(--fg-muted); opacity:1; }
.input:is(:hover,.is-hover):not(:disabled){ border-color:var(--fg-muted); }
.input:is(:focus-visible,.is-focus){ border-color:var(--fg); }
.input[aria-invalid="true"]{ border-width:var(--bw-thick); border-color:var(--fg); }
.input:disabled{ opacity:.5; cursor:not-allowed; }
textarea.input{ min-height:9rem; resize:vertical; line-height:var(--lh-body); }
.input-icon{ position:relative; }
.input-icon > .icon{
  position:absolute;
  top:50%; left:var(--sp-4);
  transform:translateY(-50%);
  color:var(--fg-muted);
  pointer-events:none;
}
.input-icon > .input{ padding-inline-start:3rem; }
.input[type="search"]::-webkit-search-cancel-button{ cursor:pointer; }
.form{ display:grid; gap:var(--sp-5); max-width:40rem; }
.form__status:empty{ display:none; }


/* ==========================================================================
   5.19 Year-list — Albo d'Oro e Arancia d'Oro
   ========================================================================== */
.year-list__search{
  display:grid;
  gap:var(--sp-2);
  max-width:32rem;
  margin-block-end:var(--sp-7);
}
.year-list__count{ font-size:var(--fs-small); color:var(--fg-muted); }
/* __aside — titolo e ricerca in colonna laterale (Albo d'Oro, Arancia d'Oro, Fase 4):
   da md resta in vista mentre scorre la lista; data-year-list va sul contenitore comune */
.year-list__aside .year-list__search{ margin-block-end:0; }
.year-list__aside + *{ margin-block-start:var(--sp-7); }
@media (min-width:900px){
  .year-list__aside{ position:sticky; top:calc(var(--header-offset) + var(--sp-6)); }
  .year-list__aside + *{ margin-block-start:0; }
}
.year-list__group + .year-list__group{ margin-block-start:var(--sp-7); }
.year-list__decade{
  position:sticky;
  top:var(--header-offset);
  z-index:2;
  padding-block:var(--sp-3);
  border-block-end:var(--bw) solid var(--border);
  background:var(--bg);
  font-size:var(--fs-h3);
  color:var(--accent); /* fs-h3 può scendere a 20px: niente --accent-display */
}
.year-list__rows{ list-style:none; }
.year-list__row{
  display:grid;
  grid-template-columns:4rem minmax(0,1fr);
  align-items:baseline;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
}
.year-list__row:nth-child(odd){ background:var(--bg-elev); }
@supports selector(:nth-child(1 of a)){
  .year-list__row:nth-child(odd){ background:transparent; }
  .year-list__row:nth-child(odd of :not([hidden])){ background:var(--bg-elev); }
}
.year-list__year{
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.2;
  color:var(--accent);
}
.year-list__name{ font-weight:500; color:var(--fg); }
.year-list__row--void .year-list__name{ color:var(--fg-muted); font-style:italic; }
.year-list__notes{ display:grid; gap:var(--sp-2); margin-block-start:var(--sp-7); font-size:var(--fs-small); color:var(--fg-muted); }


/* ==========================================================================
   5.20 Year-grid — Presenze e indice Gallery
   ========================================================================== */
.year-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));
  gap:var(--sp-3);
  list-style:none;
}
.year-grid > li{ display:grid; }
.year-grid__item{
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:var(--sp-1);
  min-height:4.5rem;
  padding:var(--sp-3) var(--sp-2);
  border:var(--bw) solid var(--border);
  color:var(--fg);
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:1;
  text-align:center;
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a.year-grid__item:is(:hover,.is-hover){ border-color:var(--accent-graphic); color:var(--accent); }
.year-grid__item--off{ border-style:dashed; cursor:not-allowed; }
.year-grid__item--off .year-grid__year{ opacity:.45; }
.year-grid__note{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
/* Con copertina (indice gallery) */
.year-grid--covers{ grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr)); gap:var(--sp-5); }
.year-grid--covers .year-grid__item{
  place-items:stretch;
  align-content:start;
  gap:var(--sp-3);
  padding:0;
  border:0;
  text-align:left;
}
.year-grid__cover{ position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--navy-700); }
.year-grid__cover img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.year-grid--covers a.year-grid__item:is(:hover,.is-hover) .year-grid__cover img{ transform:scale(1.04); }
.year-grid--covers a.year-grid__item:is(:hover,.is-hover) .year-grid__cover{ box-shadow:inset 0 0 0 var(--bw-thick) var(--accent-graphic); }


/* ==========================================================================
   5.21 Accordion — FAQ e colonne del footer su mobile
   ========================================================================== */
.accordion{ border-block-start:var(--bw) solid var(--border); }
.accordion__item{ border-block-end:var(--bw) solid var(--border); }
.accordion__heading{
  font-family:var(--font-body);
  font-size:var(--fs-body-lg);
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
}
.accordion__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  width:100%;
  min-height:3.5rem;
  padding-block:var(--sp-4);
  font-weight:600;
  text-align:left;
  color:var(--fg);
  transition:color var(--dur-fast) var(--ease);
}
.accordion__trigger:is(:hover,.is-hover){ color:var(--accent); }
.accordion__icon{ color:var(--accent); transition:transform var(--dur) var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon{ transform:rotate(180deg); }
.accordion__panel{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows var(--dur) var(--ease);
}
.accordion__panel.is-collapsed{ grid-template-rows:0fr; }
.accordion__inner{ min-height:0; overflow:hidden; }
.accordion__content{ padding-block-end:var(--sp-5); color:var(--fg-muted); }


/* ==========================================================================
   5.22 Sponsor-grid — equalizzazione ottica dei loghi
   ========================================================================== */
.sponsor-grid{ display:grid; gap:var(--sp-9); }
.sponsor-grid__title{ margin-block-end:var(--sp-5); text-align:center; }
.sponsor-grid__list{ /* 3 colonne già da mobile: i 9 loghi stanno su 3 righe */
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-2) var(--sp-4);
  list-style:none;
}
@media (min-width:600px){ .sponsor-grid__list{ gap:var(--sp-3) var(--sp-6); } }
@media (min-width:900px){ .sponsor-grid__list{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
/* --6 — gruppo di sei loghi (Organizzatori): 3 colonne, poi 6 su una riga, senza orfani */
@media (min-width:900px){ .sponsor-grid__list--6{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.sponsor-grid__item{
  display:grid;
  place-items:center;
  aspect-ratio:3 / 2;
}
.sponsor-grid__item img{
  width:100%;
  height:var(--logo-h, 70%);
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
/* Fattore per famiglia; il valore esatto per file si imposta con --logo-h inline */
.sponsor-grid__item.is-wide{ --logo-h:52%; }
.sponsor-grid__item.is-medium{ --logo-h:70%; }
.sponsor-grid__item.is-compact{ --logo-h:82%; }


/* ==========================================================================
   5.23 Gallery-grid e lightbox
   ========================================================================== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-3);
  list-style:none;
}
/* Rapporto uguale per tutta la riga: 1/1 → 4/3 → 3/4, ciclico */
.gallery-grid > *{ aspect-ratio:var(--ratio, 1 / 1); }
.gallery-grid > :nth-child(6n+1), .gallery-grid > :nth-child(6n+2){ --ratio:1 / 1; }
.gallery-grid > :nth-child(6n+3), .gallery-grid > :nth-child(6n+4){ --ratio:4 / 3; }
.gallery-grid > :nth-child(6n+5), .gallery-grid > :nth-child(6n+6){ --ratio:3 / 4; }
@media (min-width:600px){
  .gallery-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); }
  .gallery-grid > :nth-child(9n+1), .gallery-grid > :nth-child(9n+2), .gallery-grid > :nth-child(9n+3){ --ratio:1 / 1; }
  .gallery-grid > :nth-child(9n+4), .gallery-grid > :nth-child(9n+5), .gallery-grid > :nth-child(9n+6){ --ratio:4 / 3; }
  .gallery-grid > :nth-child(9n+7), .gallery-grid > :nth-child(9n+8), .gallery-grid > :nth-child(9n+9){ --ratio:3 / 4; }
}
@media (min-width:900px){
  .gallery-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .gallery-grid > :nth-child(12n+1), .gallery-grid > :nth-child(12n+2), .gallery-grid > :nth-child(12n+3), .gallery-grid > :nth-child(12n+4){ --ratio:1 / 1; }
  .gallery-grid > :nth-child(12n+5), .gallery-grid > :nth-child(12n+6), .gallery-grid > :nth-child(12n+7), .gallery-grid > :nth-child(12n+8){ --ratio:4 / 3; }
  .gallery-grid > :nth-child(12n+9), .gallery-grid > :nth-child(12n+10), .gallery-grid > :nth-child(12n+11), .gallery-grid > :nth-child(12n+12){ --ratio:3 / 4; }
}
.gallery-grid__btn{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg-elev);
}
.gallery-grid__btn img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.gallery-grid__btn:is(:hover,.is-hover) img{ transform:scale(1.04); }
.gallery-grid > * > .empty-state{ height:100%; }

.lightbox{ /* sempre scuro: aggiungere .theme-dark */
  position:fixed;
  inset:0;
  z-index:var(--z-lightbox);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background:rgba(var(--scrim),.96);
  color:var(--fg);
}
.lightbox__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.lightbox__counter{ padding-inline:var(--sp-2); font-size:var(--fs-small); font-weight:600; color:var(--fg-muted); }
.lightbox__figure{ display:grid; place-items:center; gap:var(--sp-3); min-height:0; }
.lightbox__img{
  max-width:100%;
  max-height:calc(100svh - 11rem);
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:var(--shadow-float);
}
.lightbox__caption{ max-width:60ch; font-size:var(--fs-small); text-align:center; color:var(--fg-muted); }
.lightbox__nav{ display:flex; justify-content:center; gap:var(--sp-3); }
.lightbox__btn{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:var(--bw) solid var(--border-control);
  color:var(--fg);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lightbox__btn:is(:hover,.is-hover){ border-color:var(--accent-graphic); color:var(--accent); }
@media (min-width:900px){
  .lightbox{ padding:var(--sp-5) var(--sp-7); grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr); }
  .lightbox__bar{ grid-column:1 / -1; }
  .lightbox__figure{ grid-column:2; grid-row:2; }
  .lightbox__nav{ display:contents; }
  .lightbox__btn--prev{ grid-column:1; grid-row:2; align-self:center; }
  .lightbox__btn--next{ grid-column:3; grid-row:2; align-self:center; }
}


/* ==========================================================================
   5.24 Countdown
   ========================================================================== */
.countdown{ display:grid; gap:var(--sp-3); width:100%; max-width:26rem; }
.countdown__caption{ font-size:var(--fs-small); font-weight:600; color:var(--fg-muted); }
.countdown__cells{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-2);
  list-style:none;
}
.countdown__cell{
  display:grid;
  justify-items:center;
  gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-1);
  border:var(--bw) solid var(--border-strong);
  background:var(--bg-elev);
}
.countdown__num{
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  line-height:1;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
@media (min-width:600px){
  .countdown__cell{ padding-block:var(--sp-3); }
  .countdown__num{ font-size:var(--fs-h3); }
}
.countdown__cell .eyebrow{ color:var(--fg-muted); letter-spacing:.08em; }


/* ==========================================================================
   5.25 Empty-state e data-todo
   ========================================================================== */
.empty-state{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:var(--sp-3);
  padding:var(--sp-8) var(--sp-6);
  border:var(--bw-thick) dashed var(--border-strong);
  color:var(--fg-muted);
  text-align:center;
}
.empty-state > .icon{ width:2rem; height:2rem; stroke-width:1.5; color:var(--accent); }
.empty-state__title{ font-size:var(--fs-h4); color:var(--fg); }
.empty-state__text{ max-width:42ch; font-size:var(--fs-small); }
.empty-state--media{ gap:var(--sp-2); padding:var(--sp-4); }
.empty-state--media > .icon{ width:1.5rem; height:1.5rem; }
.empty-state--media .empty-state__title{ font-size:1rem; }


/* ==========================================================================
   5.26 Breadcrumb
   ========================================================================== */
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 var(--sp-3);
  list-style:none;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.breadcrumb li{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.breadcrumb li:not(:last-child)::after{
  content:'›';
  content:'›' / '';
  font-size:1.25em;
  font-weight:400;
  color:var(--fg-muted);
}
.breadcrumb a{
  display:inline-block;
  min-width:44px; /* area tattile: «Home» da solo misura 43px */
  padding-block:.75rem;
  color:var(--fg);
  text-decoration:none;
}
.breadcrumb a:is(:hover,.is-hover){ color:var(--accent); text-decoration:underline; text-underline-offset:.25em; }
.breadcrumb [aria-current="page"]{ padding-block:.75rem; color:var(--accent); }
.hero .breadcrumb{ margin-block:calc(var(--sp-4) * -1) calc(var(--sp-2) * -1); }


/* ==========================================================================
   5.27 Header
   ========================================================================== */
.site-header-spacer{ height:var(--header-h); }
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:var(--z-header);
  background:var(--bg);
  color:var(--fg);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header__bar{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  height:var(--header-h);
  transition:height var(--dur) var(--ease);
}
.site-header__logo{ display:block; flex:none; margin-inline-end:auto; }
.site-header__logo img{ width:auto; height:var(--logo-h); transition:height var(--dur) var(--ease); }
.site-header__icon-btn{ /* ricerca e hamburger: 44×44 */
  display:grid;
  flex:none;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--fg);
  transition:color var(--dur-fast) var(--ease);
}
.site-header__icon-btn:hover{ color:var(--accent); }
.site-header__search{ margin-inline:calc(var(--sp-2) * -1); }
.site-header__search .icon{ width:24px; height:24px; stroke-width:2; }
.site-header__menu{ margin-inline-end:calc(var(--sp-2) * -1); }
.site-header__menu .icon{ width:28px; height:28px; stroke-width:2; }
.site-header.is-compact{ box-shadow:var(--shadow-sticky); }
.site-header.is-compact .site-header__bar{ height:var(--header-h-compact); }
.site-header.is-compact .site-header__logo img{ height:var(--logo-h-compact); }

/* Nav orizzontale */
.site-nav{ display:none; }
.site-nav__list{ display:flex; align-items:center; gap:var(--sp-5); list-style:none; }
.site-nav__item{ position:relative; display:flex; align-items:center; }
.site-nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--fg);
  font-family:var(--font-display);
  font-size:1.0625rem;
  letter-spacing:var(--ls-btn);
  text-transform:uppercase;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease);
}
.site-nav__link::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:6px;
  height:2px;
  background:var(--accent-graphic);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.site-nav__link:is(:hover,.is-hover)::after,
.site-nav__link[aria-current]::after{ transform:scaleX(1); }
.site-nav__link[aria-current]{ color:var(--accent); }
.site-nav__toggle{
  position:relative;
  display:grid;
  place-items:center;
  width:32px;
  height:44px;
  color:var(--fg-muted);
}
.site-nav__toggle::before{ content:''; position:absolute; inset:0 -6px; }
.site-nav__toggle:hover{ color:var(--fg); }
.site-nav__toggle .icon{ width:1rem; height:1rem; stroke-width:2.25; transition:transform var(--dur) var(--ease); }
.site-nav__toggle[aria-expanded="true"] .icon{ transform:rotate(180deg); }
.site-nav__sub{
  position:absolute;
  top:100%;
  left:calc(var(--sp-4) * -1);
  min-width:15rem;
  padding:var(--sp-2);
  border:var(--bw) solid var(--border);
  background:var(--navy-800);
  box-shadow:var(--shadow-sticky);
  list-style:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.site-nav__item:hover > .site-nav__sub,
.site-nav__toggle[aria-expanded="true"] + .site-nav__sub,
.site-nav__sub.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.site-nav__sublink{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:var(--sp-2) var(--sp-3);
  border-inline-start:var(--bw-thick) solid transparent;
  color:var(--fg);
  font-size:var(--fs-small);
  font-weight:500;
  text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease);
}
.site-nav__sublink:is(:hover,.is-hover){ background:var(--navy-700); }
.site-nav__sublink[aria-current]{ border-inline-start-color:var(--accent-graphic); color:var(--accent); }

@media (min-width:900px){
  .site-header-spacer{ height:var(--header-h-md); }
  .site-header__bar{ height:var(--header-h-md); gap:var(--sp-6); }
  /* 100px; fra 900 e ~960px scende fino a 72px, altrimenti la nav non ci sta */
  .site-header__logo img{ height:clamp(72px, calc(50vw - 380px), var(--logo-h-md)); }
  .site-header__menu{ display:none; }
  .site-nav{ display:block; }
  .site-header.is-compact .site-header__bar{ height:var(--header-h-compact); }
  .site-header.is-compact .site-header__logo img{ height:var(--logo-h-compact); } /* batte il clamp qui sopra */
}
@media (min-width:1200px){
  .site-nav__list{ gap:var(--sp-7); }
}


/* ==========================================================================
   5.28 Drawer mobile
   ========================================================================== */
.site-drawer{ position:fixed; inset:0; z-index:var(--z-drawer); }
.site-drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(var(--scrim),.7);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.site-drawer__panel{
  position:absolute;
  inset:0 0 0 auto;
  display:flex;
  flex-direction:column;
  width:min(100%, 28rem);
  padding:0 var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--navy-900);
  color:var(--fg);
  transform:translateX(100%);
  transition:transform var(--dur) var(--ease);
}
.site-drawer.is-open .site-drawer__backdrop{ opacity:1; }
.site-drawer.is-open .site-drawer__panel{ transform:none; }
.site-drawer__top{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
}
.site-drawer__top img{ width:auto; height:var(--logo-h); } /* come nell'header: il logo non salta aprendo il menu */
.site-drawer__close{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-inline-end:calc(var(--sp-2) * -1);
  color:var(--fg);
}
.site-drawer__close .icon{ width:28px; height:28px; stroke-width:2; }
.drawer-nav__list{ display:grid; gap:var(--sp-4); padding-block:var(--sp-5) var(--sp-7); list-style:none; }
.drawer-nav__link{
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--fg);
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:1.1;
  text-transform:uppercase;
  text-decoration:none;
}
.drawer-nav__link[aria-current]{ color:var(--accent); }
.drawer-nav__sub{
  display:grid;
  margin-block-start:var(--sp-1);
  padding-inline-start:var(--sp-4);
  border-inline-start:var(--bw) solid var(--border);
  list-style:none;
}
.drawer-nav__sublink{
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--fg-muted);
  font-weight:500;
  text-decoration:none;
}
.drawer-nav__sublink[aria-current]{ color:var(--accent); font-weight:600; }
.site-drawer__cta{ width:100%; }
.site-drawer__utility{
  display:grid;
  margin-block-start:var(--sp-6);
  padding-block-start:var(--sp-4);
  border-block-start:var(--bw) solid var(--border);
  list-style:none;
}
.site-drawer__utility a{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:44px;
  color:var(--fg);
  font-weight:500;
  text-decoration:none;
}
.site-drawer__utility a[aria-current]{ color:var(--accent); }
.site-drawer__utility .icon{ color:var(--accent); }
html.is-drawer-open,
html.is-drawer-open body{ overflow:hidden; }
@media (min-width:900px){ .site-drawer{ display:none !important; } }


/* ==========================================================================
   Ricerca — pannello modale dall'alto (richiesta del cliente in revisione Fase 2)
   ========================================================================== */
.site-search{ position:fixed; inset:0; z-index:var(--z-drawer); }
.site-search__backdrop{
  position:absolute;
  inset:0;
  background:rgba(var(--scrim),.7);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.site-search__panel{
  position:relative;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-block:var(--sp-4) var(--sp-8);
  border-block-end:var(--bw-thick) solid var(--accent-graphic);
  background:var(--navy-900);
  color:var(--fg);
  box-shadow:var(--shadow-float);
  transform:translateY(-1rem);
  opacity:0;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.site-search.is-open .site-search__backdrop,
.site-search.is-open .site-search__panel{ opacity:1; transform:none; }
.site-search__inner{ display:grid; gap:var(--sp-5); max-width:calc(var(--container-narrow) + 2 * var(--gutter)); }
.site-search__bar{ display:flex; align-items:flex-end; gap:var(--sp-3); }
.site-search__form{ display:grid; flex:1; gap:var(--sp-2); }
.site-search__input{ min-height:3.5rem; font-size:var(--fs-body-lg); }
.site-search__close{
  display:grid;
  flex:none;
  place-items:center;
  width:3.5rem;
  height:3.5rem;
  margin-inline-end:calc(var(--sp-3) * -1);
  color:var(--fg);
}
.site-search__close .icon{ width:28px; height:28px; stroke-width:2; }
.site-search__status{ font-size:var(--fs-small); color:var(--fg-muted); }
.site-search__status:empty{ display:none; }
.site-search__results{ display:grid; list-style:none; border-block-start:var(--bw) solid var(--border); }
.site-search__results:empty{ display:none; }
.site-search__result{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:0 var(--sp-4);
  padding:var(--sp-3) 0;
  border-block-end:var(--bw) solid var(--border);
  color:var(--fg);
  text-decoration:none;
}
.site-search__result-title{ font-weight:600; }
.site-search__result-meta{ grid-row:2; font-size:var(--fs-small); color:var(--fg-muted); }
.site-search__result-icon{ grid-row:1 / 3; grid-column:2; color:var(--accent); transition:transform var(--dur) var(--ease); }
.site-search__result:hover .site-search__result-title{ color:var(--accent); }
.site-search__result:hover .site-search__result-icon{ transform:translateX(4px); }
.site-search__shortcuts{ display:grid; gap:var(--sp-3); }
.site-search__shortcuts .chip{ min-height:44px; }
.site-search__shortcuts .chip:hover{ border-color:var(--accent-graphic); color:var(--accent); }


/* ==========================================================================
   5.29 Sticky CTA — solo sotto md, dopo l'hero
   ========================================================================== */
.sticky-cta{
  position:fixed;
  inset:auto 0 0;
  z-index:var(--z-stickycta);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-block-start:var(--bw-thick) solid var(--accent-graphic);
  background:var(--navy-900);
  color:var(--fg);
  transform:translateY(100%);
  visibility:hidden;
  transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.sticky-cta.is-visible{ transform:none; visibility:visible; transition-delay:0s; }
.sticky-cta__date{ font-size:var(--fs-small); font-weight:700; line-height:1.3; }
.sticky-cta .btn{ width:auto; }
body.has-sticky-cta{ padding-bottom:calc(var(--stickycta-h) + env(safe-area-inset-bottom)); }
@media (min-width:900px){
  .sticky-cta{ display:none; }
  body.has-sticky-cta{ padding-bottom:0; }
}


/* ==========================================================================
   5.30 Banner cookie — solo scheletro
   ========================================================================== */
.cookiebar{
  position:fixed;
  inset:auto 0 0;
  z-index:var(--z-cookiebar);
  padding-block:var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-block-start:var(--bw) solid var(--border-strong);
  background:var(--navy-800);
  color:var(--fg);
  box-shadow:0 -.5rem 1.5rem rgba(0,0,0,.28);
}
.cookiebar__inner{ display:grid; gap:var(--sp-4); }
.cookiebar__title{ font-family:var(--font-body); font-size:var(--fs-body); font-weight:700; text-transform:none; letter-spacing:0; }
.cookiebar__text{ font-size:var(--fs-small); color:var(--fg-muted); }
.cookiebar__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); }
.cookiebar__actions .btn{ flex:1 1 auto; }
@media (min-width:900px){
  .cookiebar__inner{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--sp-7); }
  .cookiebar__actions .btn{ flex:none; }
}


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  padding-block:var(--sp-8) var(--sp-6);
  border-block-start:var(--bw) solid var(--border);
  background:var(--bg);
  color:var(--fg);
}
/* Logo · recapiti · social, poi i link legali, in fondo il copyright.
   Tutto in colonna e centrato, a ogni larghezza. */
.site-footer__main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-5);
  text-align:center;
}
.site-footer__logo{ flex:none; }
.site-footer__logo img{ width:auto; height:var(--logo-h-footer); }
.site-footer__contacts{
  display:grid;
  gap:var(--sp-1);
  font-size:var(--fs-small);
  font-style:normal;
  line-height:1.5;
  color:var(--fg-muted);
}
.site-footer__ente{ font-weight:600; color:var(--fg); }
.site-footer__contacts a{
  display:inline-block;
  padding:.75rem .15rem; /* area tattile 44px in altezza: il testo resta allineato */
  margin:-.75rem -.15rem;
  color:var(--fg);
  text-decoration:underline;
  text-decoration-color:var(--accent-graphic);
  text-underline-offset:.2em;
}
.site-footer__contacts a:hover{ color:var(--accent); }
.site-footer__social{ display:flex; flex:none; gap:var(--sp-2); list-style:none; }
.site-footer__social a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--fg);
  transition:color var(--dur-fast) var(--ease);
}
.site-footer__social .icon{ width:28px; height:28px; }
.site-footer__social a:hover{ color:var(--accent); }
.site-footer__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0 var(--sp-5);
  margin-block-start:var(--sp-5);
  list-style:none;
}
.site-footer__links li{ display:inline-flex; align-items:center; }
.site-footer__links :is(a,button){
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--fg);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}
@media (min-width:900px){ /* separatori solo quando i link stanno su una riga: a capo finirebbero a inizio riga */
  .site-footer__links{ gap:0; }
  .site-footer__links li + li::before{
    content:'•';
    content:'•' / '';
    padding-inline:var(--sp-4);
    color:var(--fg-muted);
  }
}
.site-footer__links :is(a,button):hover{ color:var(--accent); }
.site-footer__links a[aria-current]{ color:var(--accent); }
.site-footer__copy{
  max-width:none;
  margin-block-start:var(--sp-4);
  padding-block-start:var(--sp-4);
  border-block-start:var(--bw) solid var(--border);
  font-size:var(--fs-xs);
  color:var(--fg-muted);
  text-align:center;
}
@media (min-width:900px){
  .site-footer__logo img{ height:calc(var(--logo-h-footer) + 8px); }
}


/* ==========================================================================
   Composizione: card-link — rimandi a pagine ("Approfondisci", "Vedi anche", rassegne)
   ========================================================================== */
.card-link{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-6);
  border:var(--bw) solid var(--border);
  background:var(--bg-elev);
  transition:border-color var(--dur-fast) var(--ease);
}
.card-link__title{ font-size:var(--fs-h3); color:var(--fg); }
.card-link__title a{ color:inherit; text-decoration:none; }
.card-link__text{ color:var(--fg-muted); }
.card-link .btn--ghost{ margin-block-start:auto; }
.card-link:is(:hover,.is-hover){ border-color:var(--accent-graphic); }
.card-link:is(:hover,.is-hover) .btn__arrow{ transform:translateX(4px); }
.card-link--lg{ padding:var(--sp-8) var(--sp-7); gap:var(--sp-4); }
.card-link--lg .card-link__title{ font-size:var(--fs-h2); line-height:var(--lh-title); }


/* ==========================================================================
   Composizione: card-vincitore — teaser dell'Albo d'Oro
   ========================================================================== */
/* Come nel concept: card blu notte, cornice arancio attenuata sfalsata di 12px
   in alto a sinistra, targa arancio piena. Centrata e compatta su mobile. */
.card-vincitore{
  --frame:12px;
  position:relative;
  width:calc(100% - var(--frame));
  max-width:17rem;
  margin:var(--frame) auto 0;
}
.card-vincitore::before{ /* cornice decorativa: arancio al 20% (campionato dal PDF) */
  content:'';
  position:absolute;
  inset:0;
  background:rgba(var(--orange-500-rgb),.2);
  transform:translate(calc(var(--frame) * -1), calc(var(--frame) * -1));
}
.card-vincitore__media{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:var(--navy-900);
}
.card-vincitore__media img{
  width:100%;
  height:100%;
  padding:6% 0 0 8%; /* figura leggermente a destra e più in basso, come nel concept */
  object-fit:contain;
  object-position:right bottom;
  transition:transform var(--dur-slow) var(--ease);
}
.card-vincitore__plate{ /* fill arancio + testo navy: eccezione di marca */
  position:relative;
  display:grid;
  gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:var(--accent-graphic);
  color:var(--navy-900);
}
.card-vincitore__plate .eyebrow{ color:var(--navy-900); }
.card-vincitore__name{ font-size:var(--fs-h3); line-height:1; color:var(--navy-900); }
.card-vincitore__name a{ color:inherit; text-decoration:none; }
.card-vincitore__role{ font-size:var(--fs-xs); font-weight:700; line-height:1.3; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; }
.card-vincitore:is(:hover,.is-hover):has(.stretched) .card-vincitore__media img{ transform:scale(1.03); } /* zoom solo se la card è un link */
/* --photo — foto rettangolare invece della figura scontornata (Arancia d'Oro, Fase 4) */
.card-vincitore__media--photo img{ padding:0; object-fit:cover; object-position:var(--photo-pos, center 25%); }
/* --offset — card accanto a un blocco di testo (Home «Il Festival», Albo d'Oro, Arancia d'Oro):
   da md riempie le sue 5 colonne e si centra in verticale sul testo, così bilancia la colonna di sinistra */
@media (min-width:900px){
  .grid-12:has(> .card-vincitore--offset){ align-items:center; }
  .card-vincitore--offset{
    max-width:none;
    margin:var(--frame) 0 0 var(--frame);
  }
  .card-vincitore--offset .card-vincitore__plate{ padding:var(--sp-6) var(--sp-6) var(--sp-5); }
}


/* ==========================================================================
   Composizione: card-acquisto — canale di acquisto online (Biglietti)
   Sempre scura (aggiungere .theme-dark): nel concept è blu notte anche sulla
   sezione chiara. Porta la CTA rossa perché conduce all'acquisto.
   ========================================================================== */
.card-acquisto{
  display:grid;
  align-content:start;
  gap:var(--sp-5);
  padding:var(--sp-6);
  border:var(--bw) solid var(--border);
  background:var(--bg);
  color:var(--fg);
}
.card-acquisto__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-4) var(--sp-5);
}
.card-acquisto__title{ font-size:var(--fs-h3); color:var(--fg); }
.card-acquisto__note{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  font-size:var(--fs-small);
  color:var(--fg-muted);
}
.card-acquisto__note .icon{ width:var(--icon-sm); height:var(--icon-sm); margin-block-start:.2em; }


/* ==========================================================================
   Composizione: cta-band — "Vivi il festival" / "Prenota il tuo posto"
   ========================================================================== */
.cta-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:calc(var(--section-y) * 1.15);
  text-align:center;
}
.cta-band__media{ position:absolute; inset:0; z-index:-1; }
.cta-band__media img{ width:100%; height:100%; object-fit:cover; }
.cta-band__media::after{ /* scrim all'80% */
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.8) 55%, rgba(var(--scrim),.8) 100%);
}
.cta-band__inner{ display:grid; justify-items:center; gap:var(--sp-5); }
.cta-band__title{
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  color:var(--fg);
}
.cta-band__date{
  margin-block-end:var(--sp-3);
  font-size:var(--fs-lead);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}


/* ==========================================================================
   Composizione: toc — indice delle pagine legali
   ========================================================================== */
.doc-layout{ display:grid; gap:var(--sp-8); }
.toc{ font-size:var(--fs-small); }
.toc__title{ margin-block-end:var(--sp-3); }
.toc__list{ display:grid; list-style:none; border-inline-start:var(--bw) solid var(--border); }
.toc__list a{
  display:flex;
  align-items:center;
  min-height:44px;
  margin-inline-start:-1px;
  padding-inline-start:var(--sp-4);
  border-inline-start:var(--bw-thick) solid transparent;
  color:var(--fg-muted);
  text-decoration:none;
}
.toc__list a:is(:hover,.is-hover){ color:var(--fg); border-inline-start-color:var(--accent-graphic); }
@media (min-width:1200px){
  .doc-layout{ grid-template-columns:minmax(0,15rem) minmax(0,var(--container-narrow)); gap:var(--sp-10); justify-content:center; }
  .toc{ position:sticky; top:calc(var(--header-offset) + var(--sp-6)); align-self:start; }
}


/* ==========================================================================
   Composizione: locandina-preview — anteprima della locandina (Edizione 2026)
   Formato verticale 1:√2. Con il file è un link che apre la lightbox
   (<a class="locandina-preview__link" href="…" data-lightbox="locandina">);
   finché il file manca ospita un .empty-state--media.
   ========================================================================== */
.locandina-preview{
  position:relative;
  width:min(100%, 20rem);
  aspect-ratio:1 / 1.414;
}
.locandina-preview > :is(.locandina-preview__link,.empty-state){ position:absolute; inset:0; }
.locandina-preview__link{
  display:block;
  overflow:hidden;
  background:var(--bg-elev);
  box-shadow:var(--shadow-float);
}
.locandina-preview__link img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.locandina-preview__link:is(:hover,.is-hover) img{ transform:scale(1.03); }
@media (min-width:900px){ .locandina-preview{ justify-self:end; } }


/* ==========================================================================
   Composizione: photo — foto editoriale in una colonna (Il Festival, Fase 4)
   Rapporto fisso (default 4/3, --photo-ratio per cambiarlo), didascalia
   facoltativa. --framed aggiunge la cornice arancio attenuata e sfalsata
   della card vincitore, per legarla al linguaggio della Home.
   ========================================================================== */
.photo{ position:relative; }
.photo img{
  position:relative;
  width:100%;
  aspect-ratio:var(--photo-ratio, 4 / 3);
  object-fit:cover;
  object-position:var(--photo-pos, 50% 50%);
  background:var(--bg-elev);
}
.photo__caption{ margin-block-start:var(--sp-3); font-size:var(--fs-xs); color:var(--fg-muted); }
.photo--framed{ --frame:12px; margin:var(--frame) 0 0 var(--frame); }
.photo--framed::before{ /* arancio al 20%, come la card vincitore */
  content:'';
  position:absolute;
  inset:0 0 auto;
  aspect-ratio:var(--photo-ratio, 4 / 3);
  background:rgba(var(--orange-500-rgb),.2);
  transform:translate(calc(var(--frame) * -1), calc(var(--frame) * -1));
}


/* ==========================================================================
   Aggiunte del tema WordPress (non sono nel prototipo)
   Solo token esistenti. Due blocchi: il menu a gruppi e il testo dell'editor.
   ========================================================================== */

/* --- Menu a gruppi ------------------------------------------------------
   Le voci di secondo livello che hanno figli («La storia», «I premi»…) sono intestazioni, non link.
   Desktop: il sottomenu diventa un pannello a colonne, una per gruppo più una per le voci singole.
   Mobile: intestazione in occhiello, voci indentate sotto. */
.nav-group__title{
  display:block;
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  line-height:1.3;
  text-transform:uppercase;
  color:var(--accent);
}
.site-nav__group-list,
.site-nav__group,
.site-nav__singole{ list-style:none; }
.site-nav__group-list{ display:grid; }
/* Il pannello a gruppi è largo: si ancora al contenitore dell'header (a destra), non alla voce, così non
   esce mai dallo schermo. Parte subito sotto la voce, come i sottomenu semplici. */
.site-header__bar{ position:relative; }
.site-nav__item--gruppi{ position:static; }
.site-nav__sub--gruppi{
  top:calc(50% + 22px);
  left:auto;
  right:var(--gutter);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(13rem,1fr);
  align-items:start;
  gap:var(--sp-2) var(--sp-5);
  width:max-content;
  max-width:calc(100vw - var(--gutter) * 2);
  padding:var(--sp-4);
}
.site-nav__singole{ padding-block-start:calc(var(--sp-2) * 2 + 1.3 * var(--fs-eyebrow)); } /* le voci singole partono sotto l'altezza dei titoli */
.drawer-nav__group{ list-style:none; margin-block-start:var(--sp-2); }
.drawer-nav__group > .nav-group__title{ padding-inline:0; }
.drawer-nav__sub--gruppo{ margin-block-start:0; padding-inline-start:var(--sp-3); border-inline-start-color:transparent; }

/* --- Barra di amministrazione di WordPress ------------------------------
   Solo per chi è connesso: l'header fisso e il pannello del menu le stanno sotto. */
body.admin-bar .site-header{ top:var(--wp-admin--admin-bar--height,32px); }
body.admin-bar .site-drawer{ top:var(--wp-admin--admin-bar--height,32px); }

/* --- Testo dell'editor (.prose) -----------------------------------------
   Il contenuto di una pagina scritto con i blocchi: paragrafi, titoli H2/H3, elenchi, citazioni,
   immagini, gallerie, tabelle, file, pulsanti. Stesso aspetto nell'editor (editor.css lo ripete). */
.prose{ max-width:var(--container-narrow); font-size:var(--fs-body-lg); }
.prose > * + *{ margin-block-start:var(--sp-5); }
.prose > :is(h2,h3,.wp-block-heading) + *{ margin-block-start:var(--sp-4); }
.prose > h2{ margin-block-start:var(--sp-9); }
.prose > h3{ margin-block-start:var(--sp-7); font-size:var(--fs-h3); }
.prose > :first-child{ margin-block-start:0; }
.prose :is(p,ul,ol,blockquote,figcaption){ max-width:var(--measure); }
.prose :is(ul,ol){ padding-inline-start:1.25em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-block-start:var(--sp-2); }
.prose li::marker{ color:var(--accent-graphic); font-weight:600; }
.prose :is(ul,ol) :is(ul,ol){ margin-block-start:var(--sp-2); }
.prose strong{ font-weight:600; }

.prose :is(blockquote,.wp-block-quote){
  padding-inline-start:var(--sp-5);
  border-inline-start:var(--bw-thick) solid var(--accent-graphic);
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
}
.prose :is(blockquote,.wp-block-quote) p + p{ margin-block-start:var(--sp-3); }
.prose :is(blockquote,.wp-block-quote) :is(cite,footer){
  display:block;
  margin-block-start:var(--sp-3);
  font-size:var(--fs-small);
  font-style:normal;
  color:var(--fg-muted);
}

.prose :is(figure,.wp-block-image){ max-width:100%; }
.prose figure img{ width:100%; height:auto; }
.prose figure.is-resized img{ width:auto; }
.prose figcaption{
  margin-block-start:var(--sp-2);
  font-size:var(--fs-small);
  color:var(--fg-muted);
}
.prose :is(.aligncenter,.alignleft,.alignright,.alignwide,.alignfull){ float:none; margin-inline:0; }
.prose .aligncenter{ margin-inline:auto; }
.prose .wp-block-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
  gap:var(--sp-3);
  max-width:none;
}
.prose .wp-block-gallery figure{ margin:0; }
.prose .wp-block-gallery img{ aspect-ratio:4 / 3; object-fit:cover; }

.prose :is(hr,.wp-block-separator){
  width:100%;
  border:0;
  border-block-start:var(--bw) solid var(--border);
  margin-block:var(--sp-8);
}

.prose .wp-block-table{ max-width:100%; overflow-x:auto; }
.prose table{ width:100%; font-size:var(--fs-small); }
.prose table :is(th,td){ /* `table` in più: batte lo stile dei bordi del blocco tabella di WordPress */
  padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border:0;
  border-block-end:var(--bw) solid var(--border);
  text-align:start;
  vertical-align:top;
}
.prose table th{
  border-block-end-color:var(--border-strong);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--fg-muted);
}

.prose .wp-block-buttons{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.prose :is(.wp-block-button__link,.wp-block-file__button){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:var(--sp-1) var(--sp-6);
  border:var(--bw-thick) solid currentColor;
  background:transparent;
  font-family:var(--font-display);
  font-size:1.0625rem;
  line-height:1.1;
  letter-spacing:var(--ls-btn);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--fg);
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.prose :is(.wp-block-button__link,.wp-block-file__button):hover{ background:var(--fg); border-color:var(--fg); color:var(--bg); }
.prose .wp-block-file{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); }

/* --- Elementi delle pagine (Fase 4) --------------------------------------
   Piccoli completamenti dei componenti del prototipo per i dati veri. Solo token esistenti. */

/* Sponsor senza logo (finché non è caricato): il nome, in Anton, nello stesso riquadro. */
.sponsor-grid__name{
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  line-height:var(--lh-heading);
  text-align:center;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.sponsor-grid__item > a{ display:grid; place-items:center; width:100%; height:100%; color:inherit; text-decoration:none; }

/* L'anno di una riga dell'elenco porta alla scheda dell'edizione: l'intera riga è l'area tattile. */
.year-list__row{ position:relative; }
.year-list__year a{ color:inherit; text-decoration:none; }
.year-list__year a::after{ content:''; position:absolute; inset:0; }
.year-list__row:has(.year-list__year a:hover) .year-list__name{ color:var(--accent); }
.year-list__row:has(.year-list__year a:focus-visible){ outline:3px solid var(--focus); outline-offset:-3px; }
.year-list__year a:focus-visible{ outline:none; }


/* ==========================================================================
   Pagine nuove (Fase 5) — solo token esistenti
   ========================================================================== */

/* --- timeline lunga (Le tappe): una colonna, testo a sinistra, anche con più paragrafi ---------------------- */
.timeline--lunga{ gap:var(--sp-9); max-width:60rem; }
.timeline--lunga .timeline__text{ max-width:var(--measure); color:var(--fg); }
.timeline--lunga .timeline__text > * + *{ margin-block-start:var(--sp-3); }
@media (min-width:900px){
  .timeline--lunga{ padding-inline-start:var(--sp-9); }
  .timeline--lunga::before{ left:5px; }
  .timeline--lunga .timeline__item,
  .timeline--lunga .timeline__item:nth-child(even){ width:auto; margin-inline-start:0; padding-inline:0; justify-items:start; text-align:left; }
  .timeline--lunga .timeline__item::before,
  .timeline--lunga .timeline__item:nth-child(even)::before{ left:calc(var(--sp-9) * -1); right:auto; }
  .timeline--lunga .timeline__item p,
  .timeline--lunga .timeline__item:nth-child(even) p{ margin-inline-start:0; }
}

/* --- francobollo (01 §6.1): la locandina di un'edizione con la cornice dentellata ---------------------------
   La dentellatura è una maschera di gradienti sull'elemento interno (mai un'immagine): così l'anello di focus,
   disegnato sul link esterno, non viene ritagliato. */
.francobolli{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-7) var(--sp-4);
  list-style:none;
}
@media (min-width:768px){ .francobolli{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-7) var(--sp-5); } }
@media (min-width:1024px){ .francobolli{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (min-width:1200px){ .francobolli{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

.cam-francobollo{
  display:grid;
  gap:var(--sp-3);
  align-content:start;
  color:var(--fg);
  text-decoration:none;
}
.cam-francobollo__cornice{
  --r:5px;
  --passo:calc(var(--r) * 2.6);
  position:relative;
  display:block;
  aspect-ratio:5 / 7;
  padding:calc(var(--r) * 2.4);
  background:var(--navy-700);
  -webkit-mask-image:linear-gradient(#000,#000), radial-gradient(circle var(--r) at 50% 0, #0000 97%, #000), radial-gradient(circle var(--r) at 50% 100%, #0000 97%, #000), radial-gradient(circle var(--r) at 0 50%, #0000 97%, #000), radial-gradient(circle var(--r) at 100% 50%, #0000 97%, #000);
  mask-image:linear-gradient(#000,#000), radial-gradient(circle var(--r) at 50% 0, #0000 97%, #000), radial-gradient(circle var(--r) at 50% 100%, #0000 97%, #000), radial-gradient(circle var(--r) at 0 50%, #0000 97%, #000), radial-gradient(circle var(--r) at 100% 50%, #0000 97%, #000);
  -webkit-mask-size:calc(100% - var(--r) * 2) calc(100% - var(--r) * 2), var(--passo) var(--r), var(--passo) var(--r), var(--r) var(--passo), var(--r) var(--passo);
  mask-size:calc(100% - var(--r) * 2) calc(100% - var(--r) * 2), var(--passo) var(--r), var(--passo) var(--r), var(--r) var(--passo), var(--r) var(--passo);
  -webkit-mask-position:center, 0 0, 0 100%, 0 0, 100% 0;
  mask-position:center, 0 0, 0 100%, 0 0, 100% 0;
  -webkit-mask-repeat:no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  mask-repeat:no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  transition:transform var(--dur) var(--ease);
}
.cam-francobollo__cornice img{ width:100%; height:100%; object-fit:contain; }
/* Senza locandina: la stessa cornice, con l'anno al posto della foto. */
.cam-francobollo__vuoto{
  display:grid;
  place-items:center;
  height:100%;
  border:var(--bw) solid var(--navy-500);
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:1;
  color:var(--slate-500); /* 3.92:1 su navy-700, testo grande */
}
.cam-francobollo__didascalia{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1) var(--sp-2); }
.cam-francobollo__anno{ font-family:var(--font-display); font-size:var(--fs-h4); line-height:1.1; text-transform:uppercase; }
.cam-francobollo__numero{ font-size:var(--fs-small); color:var(--fg-muted); }
a.cam-francobollo:is(:hover,.is-hover) .cam-francobollo__cornice{ transform:translateY(-4px); }
a.cam-francobollo:is(:hover,.is-hover) .cam-francobollo__anno{ color:var(--accent); }
a.cam-francobollo:focus-visible{ outline:3px solid var(--focus); outline-offset:6px; }
/* Edizione sospesa: cornice tratteggiata, locandina attenuata. */
.cam-francobollo--sospeso .cam-francobollo__cornice{ background:var(--navy-800); }
.cam-francobollo--sospeso .cam-francobollo__cornice > *{ border:var(--bw-thick) dashed var(--slate-500); }
.cam-francobollo--sospeso img{ opacity:.55; }
@media (prefers-reduced-motion:reduce){ .cam-francobollo__cornice{ transition:none; } }

.decenni-nav{ margin-block-end:var(--sp-8); }
.francobolli-decennio + .francobolli-decennio{ margin-block-start:var(--sp-10); }
.francobolli-decennio__title{ margin-block-end:var(--sp-6); padding-block-end:var(--sp-3); border-block-end:var(--bw) solid var(--border); font-size:var(--fs-h3); color:var(--accent); }

/* --- scheda di un'edizione conclusa (02 §4.1) ---------------------------------------------------------------- */
.hero--page .hero__aside--locandina{ aspect-ratio:auto; width:min(100%, 20rem); background:transparent; box-shadow:var(--shadow-float); }
.hero--page .hero__aside--locandina img{ height:auto; object-fit:contain; }
.hero--page .hero__aside--locandina .media-placeholder{ position:relative; aspect-ratio:5 / 7; }
.hero--page .hero__split:has(.hero__aside--locandina){ align-items:start; }
@media (min-width:900px){ .hero--page .hero__split:has(.hero__aside--locandina){ grid-template-columns:minmax(0,20rem) minmax(0,1fr); } }
.hero--page .hero__aside--locandina a{ display:block; }
.archivio-voci{ display:grid; gap:var(--sp-6); max-width:var(--measure); }
.archivio-voce{ display:grid; gap:var(--sp-2); padding-block-end:var(--sp-5); border-block-end:var(--bw) solid var(--border); }
.archivio-voce:last-child{ padding-block-end:0; border-block-end:0; }
.archivio-voce dt{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--accent); }
.archivio-voce dd{ margin:0; max-width:var(--measure); text-wrap:pretty; }
.archivio-premi{ display:grid; gap:0; list-style:none; max-width:44rem; }
.archivio-premi li{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); align-items:baseline; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); }
.archivio-premi li:nth-child(odd){ background:var(--bg-elev); }
.archivio-premi__premio{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--accent); }
.archivio-premi__nome{ font-weight:500; }
.archivio-premi__motivazione{ display:block; margin-block-start:var(--sp-2); max-width:var(--measure); font-size:var(--fs-small); font-weight:400; color:var(--fg-muted); }
@media (max-width:599px){ .archivio-premi li{ grid-template-columns:minmax(0,1fr); gap:var(--sp-1); } }
.edizione-nav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4); }

/* --- miniature delle foto delle consegne nelle righe dell'elenco ------------------------------------------- */
.year-list__row:has(.year-list__thumb){ grid-template-columns:4rem minmax(0,1fr) auto; }
.year-list__thumb{ position:relative; z-index:1; display:block; width:3rem; height:3rem; overflow:hidden; background:var(--navy-700); }
.year-list__thumb img{ width:100%; height:100%; object-fit:cover; }
.year-list__thumb:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* --- direzioni artistiche ------------------------------------------------------------------------------------ */
.direzioni{ display:grid; gap:var(--sp-10); list-style:none; }
.direzione{ display:grid; gap:var(--sp-5); padding-block-start:var(--sp-7); border-block-start:var(--bw) solid var(--border); }
.direzione__periodo{ font-family:var(--font-display); font-size:var(--fs-h4); letter-spacing:.02em; text-transform:uppercase; color:var(--accent); }
.direzione__titolo{ font-size:var(--fs-h3); color:var(--fg); }
.direzione__testo{ display:grid; gap:var(--sp-5); }
.impronta{
  max-width:var(--measure);
  margin:0;
  padding-inline-start:var(--sp-5);
  border-inline-start:var(--bw-thick) solid var(--accent-graphic);
  font-size:var(--fs-lead);
  font-weight:600;
  line-height:var(--lh-lead);
  color:var(--fg);
}
@media (min-width:900px){
  .direzione{ grid-template-columns:minmax(0,16rem) minmax(0,1fr); gap:var(--sp-8); }
  .direzione__intestazione{ position:sticky; top:calc(var(--header-offset) + var(--sp-6)); align-self:start; }
}
.direzione__foto{ max-width:28rem; }

/* --- premi e riconoscimenti ---------------------------------------------------------------------------------- */
.premi-indice{ columns:2 18rem; column-gap:var(--sp-8); list-style:none; }
.premi-indice li{ break-inside:avoid; padding-block:var(--sp-1); }
.premi-indice a{ color:var(--fg); text-decoration-color:var(--accent); text-underline-offset:.2em; }
.premi-indice a:hover{ color:var(--accent); }
.premi{ max-width:56rem; }
.premio{ display:grid; gap:var(--sp-5); padding-block:var(--sp-8); border-block-end:var(--bw) solid var(--border); }
.premio:first-child{ padding-block-start:0; }
.premio:last-child{ border-block-end:0; }
.premio__titolo{ font-size:var(--fs-h3); color:var(--fg); }
.premio__righe{ list-style:none; }
.premio__riga{ display:grid; grid-template-columns:4rem minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); align-items:baseline; }
.premio__riga:nth-child(odd){ background:var(--bg-elev); }
.premio__anno{ font-family:var(--font-display); font-size:1.25rem; line-height:1.2; color:var(--accent); }
.premio__anno a{ color:inherit; text-decoration:none; }
.premio__anno a:hover{ text-decoration:underline; }
.premio__premiato{ font-weight:500; }
.premio__motivazione{ margin-block-start:var(--sp-2); max-width:var(--measure); font-size:var(--fs-small); font-weight:400; color:var(--fg-muted); }
.premio__motivazione p + p{ margin-block-start:var(--sp-2); }

/* --- Humor Art ---------------------------------------------------------------------------------------------- */
.mostra{ display:grid; gap:var(--sp-7); }
.mostra__anno{ font-family:var(--font-display); font-size:var(--fs-h4); letter-spacing:.02em; color:var(--accent); }
.mostra__testo{ display:grid; gap:var(--sp-4); max-width:var(--measure); }
.mostra__altre{ display:flex; justify-content:center; }
[data-show-all-item][hidden]{ display:none; }

/* --- logo senza nome (solo lo stemma): il nome si scrive accanto -------------------------------------------- */
.sponsor-grid__item--con-nome{ align-content:center; }
.sponsor-grid__item--con-nome > a,
.sponsor-grid__item--con-nome:not(:has(> a)){ display:grid; grid-template-rows:auto auto; justify-items:center; align-content:center; gap:var(--sp-1); width:100%; height:100%; }
.sponsor-grid__item--con-nome img{ width:auto; height:auto; max-width:60%; max-height:3.25rem; }
.sponsor-grid__item--con-nome .sponsor-grid__nome{ font-family:var(--font-display); font-size:var(--fs-small); line-height:1.1; text-align:center; text-transform:uppercase; color:var(--fg); }
.card-ente__logo--con-nome{ display:flex; align-items:center; gap:var(--sp-3); }
.card-ente__logo--con-nome img{ width:auto; height:4rem; max-width:35%; }
.card-ente__logo--con-nome .card-ente__logo-nome{ font-family:var(--font-display); font-size:var(--fs-h4); line-height:1.05; text-transform:uppercase; }

/* --- numeri abbreviati («238», «242» dopo il numero principale): area tattile da 44px senza cambiare la riga --------- */
a[href^="tel:"][aria-label]{ padding:.8rem .7rem; margin:-.8rem -.7rem; }

/* --- recapiti con etichetta ---------------------------------------------------------------------------------- */
.icon-list__label{ margin-inline-end:var(--sp-2); font-size:var(--fs-small); color:var(--fg-muted); }

/* ==========================================================================
   Senza JavaScript (o se lo script non parte entro 4 secondi: la classe `js` si toglie da <html>)
   ========================================================================== */
/* Sul telefono il menu a tendina non si può aprire: si mostra il menu principale in chiaro sotto la barra, con i
   sottomenu già aperti, e si toglie il pulsante. La testata smette di essere fissa (la barra non ha più un'altezza sola). */
@media (max-width:899px){
  html:not(.js) .site-header-spacer{ height:auto; }
  html:not(.js) .site-header{ position:static; }
  html:not(.js) .site-header__bar{ height:auto; flex-wrap:wrap; padding-block:var(--sp-3); }
  html:not(.js) .site-header__menu,
  html:not(.js) .site-nav__toggle{ display:none; }
  html:not(.js) .site-nav{ display:block; flex:1 0 100%; order:5; }
  html:not(.js) .site-nav__list{ flex-wrap:wrap; align-items:flex-start; gap:var(--sp-1) var(--sp-5); }
  html:not(.js) .site-nav__item{ display:flex; flex-direction:column; align-items:flex-start; }
  html:not(.js) .site-nav__sub{ position:static; display:block; width:auto; max-width:none; min-width:0; padding:0 0 0 var(--sp-3); border:0; background:none; box-shadow:none; opacity:1; visibility:visible; transform:none; }
}


/* --- Pagina dei risultati di ricerca (search.php): il campo e il pulsante sotto il titolo ------------------------- */
.search-page__form{ display:flex; align-items:stretch; gap:var(--sp-3); max-width:var(--measure); margin-block-start:var(--sp-5); }
.search-page__form .input-icon{ flex:1; }
.search-page__form .input{ min-height:3.5rem; }
.search-page__form .btn{ min-height:3.5rem; }
a.chip::before{ /* le scorciatoie sono link alti 32px: area tattile di 44px, senza cambiare l'aspetto */
  content:'';
  position:absolute;
  top:50%; left:0; right:0;
  height:44px;
  transform:translateY(-50%);
}

/* --- Esito del modulo «Scrivici» (si legge con role="status") ------------------------------------------------------ */
.form__status{ font-weight:600; }
.form__status--errore{ color:var(--danger); }


/* --- Mappa statica di OpenStreetMap (Contatti, «Sede e come arrivare»): un'immagine nostra, nessuna richiesta a terzi ---- */
.mappa{ grid-column:1 / -1; display:grid; gap:var(--sp-3); }
.mappa img{ width:100%; height:auto; border:var(--bw) solid var(--border); }
.mappa__didascalia{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-5); font-size:var(--fs-small); color:var(--fg-muted); }