/* ==========================================================================
   Componenti — tutti i valori arrivano da tokens.css.
   I blocchi colorati (hero, sezione in evidenza, footer) ridefiniscono
   localmente i token semantici, così i componenti al loro interno si adattano.
   Breakpoint: 40em (tablet), 64em (desktop).
   ========================================================================== */

/* --- Pulsante ------------------------------------------------------------- */
.pulsante {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2xs);
  padding: var(--spazio-2xs) var(--spazio-m);
  border: var(--filetto-sottile) solid var(--pulsante-fondo);
  border-radius: var(--raggio);
  background: var(--pulsante-fondo);
  color: var(--pulsante-testo);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-weight: var(--pulsante-peso);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--pulsante-spaziatura);
  text-transform: var(--pulsante-maiuscolo);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--durata-breve) var(--curva);
}

.pulsante:hover {
  border-color: var(--pulsante-fondo-hover);
  background: var(--pulsante-fondo-hover);
  color: var(--pulsante-testo-hover);
}

/* --- Header --------------------------------------------------------------- */
/* position e z-index: su desktop il logotipo sporge sulla sezione sotto (la hero in home) */
.sito-header {
  --colore-testo-secondario: var(--header-testo-secondario);
  --colore-focus: var(--header-focus);
  position: relative;
  z-index: var(--z-header);
  border-block-end: var(--header-filetto) solid var(--header-filetto-colore);
  background: var(--header-fondo);
}

.sito-header__contenitore {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "logo"
    "menu";
  align-items: center;
  gap: var(--spazio-xs) var(--spazio-m);
  padding-block: var(--header-spazio);
}

@media (min-width: 64em) {
  .sito-header__contenitore {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo menu";
    column-gap: var(--spazio-l);
  }
}

/* Logotipo appeso al bordo alto dell'header (il margine negativo annulla lo spazio del contenitore) */
.logotipo {
  grid-area: logo;
  justify-self: start;
  margin-block-start: calc(-1 * var(--header-spazio));
  display: flex;
  flex-direction: column;
  padding: var(--logotipo-spazio-interno);
  background: var(--logotipo-fondo);
  color: var(--logotipo-testo);
  font-family: var(--logotipo-font);
  font-size: var(--logotipo-dimensione);
  font-weight: var(--logotipo-peso);
  line-height: var(--logotipo-interlinea);
  text-transform: var(--logotipo-maiuscolo);
  text-decoration: none;
}

.logotipo:hover {
  color: var(--logotipo-testo);
}

/* Focus dentro il riquadro: fuori sarebbe tagliato dal bordo della pagina e invisibile sulla hero */
.logotipo:focus-visible {
  outline-color: var(--logotipo-testo);
  outline-offset: calc(-2 * var(--focus-spessore));
}

/* Su desktop il logotipo esce dal flusso: l'altezza della fascia gialla la dà il menu
   e il logo sporge sotto l'header. Il blocco contenitore è l'area "logo" della griglia. */
@media (min-width: 64em) {
  .logotipo {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
  }
}

.logotipo__parola + .logotipo__parola {
  font-size: var(--logotipo-dimensione-seconda);
}

.menu-principale {
  grid-area: menu;
}

.menu-principale__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2xs) var(--spazio-m);
}

.menu-principale__link {
  display: block;
  padding-block: var(--spazio-3xs);
  border-block-end: var(--menu-filetto) solid transparent;
  color: var(--colore-testo);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-weight: var(--menu-peso);
  letter-spacing: var(--menu-spaziatura);
  text-transform: var(--menu-maiuscolo);
  text-decoration: none;
}

.menu-principale__link:hover {
  border-block-end-color: var(--colore-accento);
  color: var(--colore-testo);
}

.menu-principale__link[aria-current] {
  border-block-end-color: var(--colore-testo);
}

/* --- Footer --------------------------------------------------------------- */
.sito-footer {
  --colore-testo: var(--footer-testo);
  --colore-testo-secondario: var(--footer-testo-secondario);
  --colore-filetto: var(--footer-filetto);
  --colore-accento: var(--footer-link);
  --colore-accento-hover: var(--footer-titolo);
  --colore-focus: var(--footer-focus);
  padding-block: var(--spazio-xl) var(--spazio-l);
  border-block-start: var(--filetto-sottile) solid var(--colore-filetto);
  background: var(--footer-fondo);
  color: var(--colore-testo);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

.sito-footer__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--colonna-min)), 1fr));
  gap: var(--spazio-l);
}

.sito-footer__titolo {
  margin-block-end: var(--spazio-xs);
  color: var(--footer-titolo);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  font-weight: var(--ui-peso-forte);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.sito-footer__testo + .sito-footer__testo {
  margin-block-start: var(--spazio-xs);
}

.sito-footer__crediti {
  display: grid;
  gap: var(--spazio-xs);
}

.sito-footer__crediti + .sito-footer__testo {
  margin-block-start: var(--spazio-s);
}

.sito-footer__lista {
  display: grid;
  gap: var(--spazio-3xs);
  /* E-mail e telefono vanno a capo anche con testo ingrandito (opzioni di leggibilità), senza scorrimento orizzontale */
  overflow-wrap: anywhere;
}


.sito-footer__legale {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spazio-s);
  margin-block-start: var(--spazio-xl);
  padding-block-start: var(--spazio-s);
  border-block-start: var(--filetto-sottile) solid var(--colore-filetto);
  font-size: var(--testo-xs);
}

.sito-footer__legale-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-m);
}

/* --- Sezioni e intestazioni ----------------------------------------------- */
.sezione {
  padding-block: var(--spazio-xl);
}

.sezione--alterna {
  background: var(--sezione-fondo-alterno);
}

/* Sezione in evidenza: blocco di colore pieno */
.sezione--evidenza {
  --colore-testo: var(--evidenza-testo);
  --colore-testo-secondario: var(--evidenza-testo-secondario);
  --colore-filetto: var(--evidenza-filetto);
  --colore-focus: var(--evidenza-focus);
  background: var(--evidenza-fondo);
  color: var(--colore-testo);
}

.sezione__intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio-2xs) var(--spazio-m);
  margin-block-end: var(--spazio-l);
  padding-block-end: var(--spazio-2xs);
  border-block-end: var(--sezione-filetto) solid var(--colore-filetto-forte);
}

.sezione__titolo {
  font-size: var(--sezione-titolo-dimensione);
}

.sezione__link,
.sezione__nota {
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

.sezione__nota {
  color: var(--colore-testo-secondario);
}

.intestazione-pagina {
  padding-block: var(--spazio-xl) var(--spazio-l);
}

.intestazione-pagina__titolo {
  font-size: var(--intestazione-titolo-dimensione);
}

.intestazione-pagina__sommario {
  max-inline-size: var(--misura-lettura);
  margin-block-start: var(--spazio-s);
  font-size: var(--testo-l);
}

/* --- Hero (home) ---------------------------------------------------------- */
.hero {
  --colore-testo: var(--hero-testo);
  --colore-testo-secondario: var(--hero-testo-secondario);
  --colore-accento: var(--hero-accento);
  --colore-accento-hover: var(--hero-testo);
  --colore-focus: var(--hero-focus);
  --pulsante-fondo: var(--hero-pulsante-fondo);
  --pulsante-testo: var(--hero-pulsante-testo);
  --pulsante-fondo-hover: var(--hero-pulsante-fondo-hover);
  --pulsante-testo-hover: var(--hero-pulsante-testo-hover);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--spazio-l);
  background: var(--hero-fondo);
  color: var(--colore-testo);
}

/* Sfondi: la locandina di ogni opera a tutta sezione, molto sfocata, sotto un velo (::after).
   --opera-immagine è sul livello. scale() nasconde i bordi sfumati dalla sfocatura. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-velo);
  pointer-events: none;
}

.hero__sfondi {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Lo sfondo nuovo compare in dissolvenza sopra il vecchio, che sparisce solo dopo:
   così a metà cambio non si vede il fondo inchiostro */
.hero__sfondo {
  position: absolute;
  inset: 0;
  background: var(--opera-immagine, none) center / cover no-repeat;
  filter: blur(var(--hero-sfondo-sfocatura));
  transform: scale(1.2);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0s var(--hero-cambio-durata),
    visibility 0s var(--hero-cambio-durata);
}

.hero__sfondo--attivo {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--hero-cambio-durata) var(--curva);
}

.hero__contenitore {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--spazio-l);
}

@media (min-width: 64em) {
  .hero__contenitore {
    grid-template-columns: var(--hero-colonne);
  }
}

/* Il titolo si dimensiona sulla larghezza della colonna (unità cqi nei token) */
.hero__testo {
  container-type: inline-size;
}

.hero__titolo {
  font-size: var(--hero-titolo-dimensione);
  line-height: var(--display-interlinea);
}

.hero__claim {
  max-inline-size: var(--misura-lettura);
  margin-block-start: var(--spazio-m);
  font-size: var(--testo-l);
}

.hero__azioni {
  margin-block-start: var(--spazio-l);
}

/* La colonna delle opere ha larghezza fissa (fr in --hero-colonne) ed è un container:
   ogni immagine è larga quanto serve per stare nell'altezza massima col suo rapporto reale
   (mai ritagliata), didascalia e comandi prendono la stessa larghezza. Centrate su mobile,
   allineate al bordo destro del contenitore su desktop. --rapporto è sulla figure
   (e su .hero__opere per l'opera attiva, impostato da hero.js). */
.hero__opere {
  container-type: inline-size;
}

.hero__opera,
.hero__rotazione {
  --larghezza-opera: min(100cqi, var(--hero-altezza-opera) * var(--rapporto, 0.667));
}

/* Diapositive impilate nella stessa cella: l'altezza è quella dell'opera più alta,
   quindi il cambio non sposta il resto della pagina */
.hero__diapositive {
  display: grid;
}

/* In uscita l'opera sfuma; in entrata compare subito, sopra, con l'effetto qui sotto */
.hero__opera {
  grid-area: 1 / 1;
  align-self: end;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--hero-cambio-durata) var(--curva),
    visibility 0s var(--hero-cambio-durata);
}

.hero__opera--attiva {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* Allineamento: su mobile le opere hanno altezze diverse, in basso la didascalia resta
   vicina alla barra; su desktop hanno la stessa altezza, in alto l'immagine non si sposta */
@media (min-width: 64em) {
  .hero__opera {
    align-self: start;
  }
}

.hero__opera:not(.hero__opera--attiva) .hero__didascalia {
  visibility: hidden;
}

/* Effetto "affissione": la nuova locandina si srotola dall'alto sopra la vecchia.
   Solo dopo il primo cambio (modificatore aggiunto da hero.js), non al caricamento. */
.hero__opere--in-rotazione .hero__opera--attiva .hero__opera-link {
  animation: hero-affissione var(--hero-cambio-durata) var(--curva) both;
}

.hero__opere--in-rotazione .hero__opera--attiva .hero__didascalia {
  animation: hero-didascalia var(--hero-cambio-durata) var(--curva) both;
}

@keyframes hero-affissione {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes hero-didascalia {
  from {
    opacity: 0;
  }
}

.hero__opera-link,
.hero__didascalia,
.hero__rotazione {
  inline-size: var(--larghezza-opera);
  margin-inline: auto;
}

@media (min-width: 64em) {
  .hero__opera-link,
  .hero__didascalia,
  .hero__rotazione {
    margin-inline-end: 0;
  }
}

/* aspect-ratio: lo spazio dell'immagine è riservato anche prima che arrivi */
.hero__opera-link {
  display: block;
  aspect-ratio: var(--rapporto, 0.667);
}

.hero__immagine {
  inline-size: 100%;
  box-shadow: var(--ombra-opera);
}

.hero__didascalia {
  margin-block-start: var(--spazio-xs);
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
}

.hero__didascalia-titolo {
  color: var(--colore-testo);
  font-weight: var(--ui-peso-forte);
}

.hero__credito {
  display: block;
  margin-block-start: var(--spazio-3xs);
}

/* Comandi della rotazione: barra del tempo (animata da hero.js) e pulsante di pausa */
.hero__rotazione {
  display: flex;
  align-items: center;
  gap: var(--spazio-s);
  margin-block-start: var(--spazio-m);
  transition: inline-size var(--hero-cambio-durata) var(--curva);
}

.hero__avanzamento {
  flex: 1;
  block-size: var(--hero-avanzamento-spessore);
  background: var(--hero-avanzamento-traccia);
}

.hero__avanzamento-barra {
  block-size: 100%;
  background: var(--hero-avanzamento-colore);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero__pausa {
  min-inline-size: var(--hero-pausa-larghezza);
  padding: var(--hero-pausa-spazio);
  border: var(--hero-pausa-filetto) solid var(--colore-testo);
  border-radius: var(--raggio);
  background: transparent;
  color: var(--colore-testo);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  font-weight: var(--ui-peso-forte);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
  cursor: pointer;
}

.hero__pausa:hover {
  background: var(--colore-testo);
  color: var(--hero-fondo);
}

/* --- Introduzione (home) -------------------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-s);
}

@media (min-width: 64em) {
  .intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: baseline;
  }
}

.intro__titolo {
  font-size: var(--sezione-titolo-dimensione);
}

.intro__testo {
  max-inline-size: var(--misura-lettura);
  font-size: var(--testo-l);
}

/* --- Griglia opere (righe con base allineata, nessun ritaglio) ------------ */
.griglia-opere {
  display: grid;
  grid-template-columns: repeat(var(--griglia-colonne), minmax(0, 1fr));
  column-gap: var(--griglia-gap);
  row-gap: var(--griglia-gap-righe);
}

/* Ogni card occupa due righe della griglia (immagine, testi) tramite subgrid:
   le immagini di una riga poggiano sulla stessa linea di base.
   La colonna è minmax(0, 1fr): con testo ingrandito una parola lunga non allarga la card oltre la griglia. */
.griglia-opere__elemento,
.opera-card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--spazio-xs);
}

/* --- Card opera ----------------------------------------------------------- */
.opera-card {
  position: relative;
}

.opera-card__figura {
  align-self: end;
}

.opera-card__immagine {
  inline-size: 100%;
  border: var(--card-immagine-bordo);
  box-shadow: var(--ombra-opera);
}

.opera-card__testo {
  display: flex;
  flex-direction: column;
  gap: var(--card-meta-gap);
  text-align: center;
  overflow-wrap: anywhere; /* titoli lunghi a capo con testo ingrandito */
}

.opera-card__titolo {
  font-family: var(--card-titolo-font);
  font-size: var(--card-titolo-dimensione);
  font-weight: var(--card-titolo-peso);
  line-height: var(--card-titolo-interlinea);
  letter-spacing: var(--card-titolo-spaziatura);
  text-transform: var(--card-titolo-maiuscolo);
}

.opera-card__link {
  color: var(--colore-testo);
  text-decoration: none;
}

/* Tutta la card è cliccabile; il nome del link resta il solo titolo */
.opera-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.opera-card__link:hover {
  color: var(--colore-testo);
  text-decoration: underline;
  text-decoration-thickness: var(--filetto-sottile);
}

.opera-card__link:focus-visible {
  outline: none;
}

.opera-card:has(.opera-card__link:focus-visible) {
  outline: var(--focus-spessore) solid var(--colore-focus);
  outline-offset: var(--focus-offset);
}

.opera-card__meta,
.opera-card__dettagli {
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-variant-numeric: var(--numeri-meta);
}

.opera-card__meta {
  font-size: var(--testo-s);
}

/* ID e tipologia */
.opera-card__dettagli {
  color: var(--id-colore);
  font-family: var(--id-font);
  font-size: var(--id-dimensione);
  font-weight: var(--id-peso);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

/* --- Esplora per (home) --------------------------------------------------- */
.esplora {
  display: grid;
  gap: var(--spazio-xl);
}

@media (min-width: 64em) {
  .esplora {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.esplora__titolo {
  margin-block-end: var(--spazio-s);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  font-weight: var(--ui-peso-forte);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.indice {
  border-block-start: var(--indice-filetto) solid var(--indice-filetto-colore);
}

.indice__voce {
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto);
}

.indice__link {
  display: flex;
  flex-wrap: wrap; /* con testo ingrandito il conteggio va sotto il nome invece di uscire dalla riga */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio-s);
  padding-block: var(--spazio-xs);
  color: var(--colore-testo);
  text-decoration: none;
}

.indice__link:hover {
  color: var(--colore-testo);
}

.indice__link:hover .indice__nome {
  text-decoration: underline;
}

.indice__nome {
  font-family: var(--indice-nome-font);
  font-size: var(--indice-nome-dimensione);
  font-weight: var(--display-peso);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--display-spaziatura);
  text-transform: var(--display-maiuscolo);
}

.indice__conteggio {
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-variant-numeric: var(--numeri-meta);
  white-space: nowrap;
}

.indice--linea-tempo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.indice--linea-tempo .indice__voce {
  border-block-end: 0;
  container-type: inline-size;
}

.indice--linea-tempo .indice__link {
  flex-direction: column;
  gap: var(--spazio-3xs);
  padding-inline-end: var(--spazio-s);
}

.indice--linea-tempo .indice__nome {
  font-size: var(--linea-tempo-nome-dimensione);
  white-space: nowrap;
}

/* Colonne dei decenni molto strette (testo ingrandito): anche il conteggio può andare a capo */
.indice--linea-tempo .indice__conteggio {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- Filtri della galleria ------------------------------------------------ */
/* Menu dei filtri (.campo): due menu affiancati, a piena larghezza su mobile */
.filtri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spazio-s) var(--spazio-m);
  margin-block-end: var(--spazio-l);
}

@media (min-width: 40em) {
  .filtri {
    grid-template-columns: repeat(2, minmax(0, var(--colonna-min)));
  }
}

.filtri .campo__etichetta {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-xs);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.filtri .campo__controllo {
  font-size: var(--testo-s);
}

/* --- Galleria ------------------------------------------------------------- */
.galleria {
  padding-block-end: var(--spazio-xl);
}

.galleria__stato {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio-2xs) var(--spazio-m);
  margin-block-end: var(--spazio-l);
  padding-block: var(--spazio-xs);
  border-block-start: var(--conteggio-filetto) solid var(--conteggio-filetto-colore);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto);
}

.galleria__azzera {
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

.galleria__vuoto {
  padding-block: var(--spazio-xl);
}

.galleria__vuoto-testo {
  margin-block-end: var(--spazio-m);
  font-size: var(--testo-l);
}

.galleria__conteggio {
  font-family: var(--conteggio-font);
  font-size: var(--conteggio-dimensione);
  font-weight: var(--conteggio-peso);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

/* --- Briciole ------------------------------------------------------------- */
.briciole {
  padding-block: var(--spazio-m);
}

/* Su desktop il logotipo sporge sotto l'header: le briciole partono sotto il logo */
@media (min-width: 64em) {
  .briciole {
    padding-block-start: var(--spazio-xl);
  }
}

.briciole__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2xs);
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

.briciole__voce + .briciole__voce::before {
  content: "›";
  content: "›" / "";
  margin-inline-end: var(--spazio-2xs);
}

/* --- Scheda opera --------------------------------------------------------- */
.scheda-opera {
  padding-block-end: var(--spazio-xl);
}

.scheda-opera__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intestazione"
    "opera"
    "contenuti";
  gap: var(--spazio-l);
}

/* Su desktop la colonna dell'opera è larga quanto l'immagine alta --scheda-altezza-opera
   (col suo rapporto reale, impostato su .scheda-opera), al massimo --scheda-quota-opera:
   nessuno spazio vuoto accanto all'opera, il testo prende il resto. */
@media (min-width: 64em) {
  .scheda-opera__layout {
    grid-template-columns:
      min(var(--scheda-quota-opera), var(--scheda-altezza-opera) * var(--rapporto, 0.667))
      minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "opera intestazione"
      "opera contenuti";
    column-gap: var(--spazio-xl);
    align-items: start;
  }

  .scheda-opera__figura {
    position: sticky;
    inset-block-start: var(--spazio-m);
  }
}

.scheda-opera__intestazione {
  grid-area: intestazione;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2xs);
}

.scheda-opera__id {
  color: var(--colore-testo-secondario);
  font-family: var(--id-font);
  font-size: var(--id-dimensione);
  font-variant-numeric: var(--numeri-meta);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.scheda-opera__titolo {
  font-size: var(--scheda-titolo-dimensione);
}

.scheda-opera__autore-data {
  font-family: var(--font-ui);
  font-size: var(--testo-l);
}

.scheda-opera__id {
  margin-block-end: var(--spazio-3xs);
}

.scheda-opera__figura {
  grid-area: opera;
}

/* L'immagine sta dentro un pulsante senza aspetto proprio che apre lo zoom
   (clic, tocco, Invio o Spazio); il cursore zoom-in lo segnala col mouse.
   Mai ritagliare: l'opera sta intera nell'altezza dello schermo. */
.scheda-opera__ingrandisci {
  display: block;
  inline-size: min(100%, var(--scheda-altezza-opera) * var(--rapporto, 0.667));
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  background: none;
  cursor: zoom-in;
}

.scheda-opera__immagine {
  inline-size: 100%;
  box-shadow: var(--ombra-opera);
}

.scheda-opera__credito {
  max-inline-size: var(--misura-lettura);
  margin-block-start: var(--spazio-xs);
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
}

.scheda-opera__contenuti {
  grid-area: contenuti;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-xl);
}

.scheda-opera__sezione-titolo {
  margin-block-end: var(--spazio-s);
  padding-block-end: var(--spazio-2xs);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto-forte);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  font-weight: var(--ui-peso-forte);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.scheda-opera__testo {
  max-inline-size: var(--misura-lettura);
}

.scheda-opera__testo p + p {
  margin-block-start: var(--spazio-s);
}

/* Impaginazione da saggio: primo paragrafo in evidenza e capolettera */
.scheda-opera__testo > p:first-child {
  font-size: var(--testo-lead-dimensione);
  line-height: var(--interlinea-lead);
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .scheda-opera__testo > p:first-child::first-letter {
    -webkit-initial-letter: var(--capolettera-righe);
    initial-letter: var(--capolettera-righe);
    margin-inline-end: var(--capolettera-spazio);
    color: var(--capolettera-colore);
    font-family: var(--capolettera-font);
    font-weight: var(--display-peso);
  }
}

/* --- Come citare ---------------------------------------------------------- */
.come-citare {
  padding: var(--spazio-m);
  border-block-start: var(--filetto-spesso) solid var(--colore-filetto-forte);
  background: var(--colore-fondo-alt);
}

.come-citare__testo {
  max-inline-size: var(--misura-lettura);
  font-size: var(--testo-s);
  overflow-wrap: anywhere;
}

.come-citare__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-xs) var(--spazio-m);
  margin-block-start: var(--spazio-s);
}

.come-citare__esito {
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

/* --- Scheda tecnica ------------------------------------------------------- */
.scheda-tecnica {
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-variant-numeric: var(--numeri-meta);
}

/* Compatta anche su mobile: termine e valore sulla stessa riga */
.scheda-tecnica__riga {
  display: grid;
  grid-template-columns: var(--scheda-tecnica-termine) minmax(0, 1fr);
  gap: var(--spazio-3xs) var(--spazio-s);
  padding-block: var(--spazio-2xs);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto);
}

.scheda-tecnica__termine {
  color: var(--colore-testo-secondario);
  overflow-wrap: anywhere;
}

.scheda-tecnica__valore {
  margin: 0;
  overflow-wrap: anywhere; /* parole lunghe ("Cromolitografia") a capo con testo ingrandito */
}

/* --- Bibliografia --------------------------------------------------------- */
.bibliografia {
  display: grid;
  gap: var(--spazio-2xs);
  max-inline-size: var(--misura-lettura);
  font-size: var(--testo-s);
}

.bibliografia__voce {
  padding-inline-start: var(--spazio-m);
  text-indent: calc(-1 * var(--spazio-m));
}

/* --- Navigazione precedente / successiva ---------------------------------- */
.navigazione-opere {
  margin-block-start: var(--spazio-xl);
  border-block-start: var(--filetto-sottile) solid var(--colore-filetto-forte);
}

.navigazione-opere__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spazio-m);
}

.navigazione-opere__voce {
  min-inline-size: 0;
  overflow-wrap: anywhere; /* titoli lunghi a capo con testo ingrandito invece di uscire dalla colonna */
}

.navigazione-opere__voce--successiva {
  grid-column: 2;
  text-align: end;
}

.navigazione-opere__link {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3xs);
  padding-block: var(--spazio-s);
  color: var(--colore-testo);
  text-decoration: none;
}

.navigazione-opere__link:hover {
  color: var(--colore-testo);
}

.navigazione-opere__link:hover .navigazione-opere__titolo {
  text-decoration: underline;
}

.navigazione-opere__direzione {
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.navigazione-opere__titolo {
  font-family: var(--font-display);
  font-size: var(--titolo-s);
}

/* --- Stato vuoto ---------------------------------------------------------- */
.stato-vuoto {
  padding-block: var(--spazio-2xl);
}

.stato-vuoto__titolo {
  font-size: var(--titolo-xl);
}

.stato-vuoto__testo {
  max-inline-size: var(--misura-lettura);
  margin-block: var(--spazio-s) var(--spazio-l);
}

.stato-vuoto__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-s);
}

/* --- Contatti ------------------------------------------------------------- */
.contatti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--colonna-min-larga)), 1fr));
  gap: var(--spazio-xl) var(--spazio-l);
  padding-block-end: var(--spazio-xl);
}

.contatti__sezione--larga {
  grid-column: 1 / -1;
}

.contatti__titolo {
  margin-block-end: var(--spazio-s);
  padding-block-end: var(--spazio-2xs);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto-forte);
  font-size: var(--titolo-m);
}

.contatti__testo {
  max-inline-size: var(--misura-lettura);
}

.contatti__testo + .contatti__testo {
  margin-block-start: var(--spazio-s);
}

/* E-mail in evidenza (unico canale scritto: nessun modulo) */
.contatti__email {
  margin-block: var(--spazio-s) var(--spazio-m);
  font-family: var(--font-ui);
  font-size: var(--testo-l);
  font-weight: var(--ui-peso-forte);
  overflow-wrap: anywhere;
}

.tabella {
  inline-size: 100%;
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-variant-numeric: var(--numeri-meta);
}

.tabella__intestazione,
.tabella__riga-titolo,
.tabella__cella {
  padding: var(--spazio-2xs) var(--spazio-s) var(--spazio-2xs) 0;
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto);
  text-align: start;
  vertical-align: top;
}

.tabella__intestazione {
  color: var(--colore-testo-secondario);
  font-weight: var(--ui-peso);
}

.tabella__riga-titolo {
  font-weight: var(--ui-peso-forte);
}

.recapiti {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spazio-2xs) var(--spazio-m);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

.recapiti__termine {
  color: var(--colore-testo-secondario);
}

.recapiti__valore {
  margin: 0;
  overflow-wrap: anywhere; /* l'indirizzo e-mail lungo non esce dalla colonna a 390 px */
}

/* --- Avvertenza sul riuso delle immagini ----------------------------------- */
/* Scheda opera (sotto il credito), intestazione della galleria, footer */
.avviso-riuso {
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
}

.scheda-opera__riuso {
  display: block;
  margin-block-start: var(--spazio-3xs);
}

.intestazione-pagina__nota {
  max-inline-size: var(--misura-lettura);
  margin-block-start: var(--spazio-s);
}

/* --- Fascia dei loghi (contatti e footer) -------------------------------- */
/* Fondo bianco: i loghi dei finanziatori (FSC, Repubblica, Regione, Coesione) sono pensati
   per il bianco e alcuni (Regione Marche) hanno il fondo bianco nel file */
/* ul.loghi: il reset di base.css (ul[class] { padding: 0 }) ha specificità maggiore di .loghi */
ul.loghi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-s) var(--spazio-l);
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-start: var(--spazio-l);
  padding: var(--loghi-spazio);
  background: var(--loghi-fondo);
}

.loghi__immagine {
  block-size: var(--loghi-altezza);
  inline-size: auto;
}

.sito-footer__loghi {
  margin-block-start: var(--spazio-xl);
}

/* --- Concorso (home): rimando al sito del festival ------------------------- */
.concorso {
  display: grid;
  gap: var(--spazio-s);
  padding-block-start: var(--spazio-m);
  border-block-start: var(--concorso-filetto) solid var(--concorso-filetto-colore);
}

@media (min-width: 64em) {
  .concorso {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "intestazione testo"
      "intestazione azioni";
    grid-template-rows: auto 1fr;
    column-gap: var(--spazio-l);
  }

  .concorso__intestazione { grid-area: intestazione; }
  .concorso__testo { grid-area: testo; }
  .concorso__azioni { grid-area: azioni; }
}

.concorso__intestazione {
  display: grid;
  gap: var(--spazio-s);
  align-content: start;
  container-type: inline-size;
}

.concorso__occhiello {
  color: var(--colore-accento);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  font-weight: var(--ui-peso-forte);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.concorso__titolo {
  font-size: var(--concorso-titolo-dimensione);
}

.concorso__testo {
  max-inline-size: var(--misura-lettura);
  font-size: var(--testo-l);
}

.concorso__azioni {
  margin-block-start: var(--spazio-2xs);
}

/* --- Testo di pagina (privacy, cookie, accessibilità) --------------------- */
/* Pagine di testo (privacy, cookie, accessibilità): titoli, paragrafi, elenchi */
.testo-pagina {
  max-inline-size: var(--misura-lettura);
  padding-block-end: var(--spazio-xl);
}

.testo-pagina > * + * {
  margin-block-start: var(--spazio-s);
}

.testo-pagina h2 {
  margin-block-start: var(--spazio-l);
  padding-block-end: var(--spazio-2xs);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto-forte);
  font-size: var(--titolo-m);
}

.testo-pagina h3 {
  margin-block-start: var(--spazio-m);
  font-family: var(--font-ui);
  font-size: var(--testo-m);
  font-weight: var(--ui-peso-forte);
}

.testo-pagina ul {
  padding-inline-start: 1.25em;
  list-style: disc;
}

.testo-pagina li + li {
  margin-block-start: var(--spazio-3xs);
}

.testo-pagina a {
  overflow-wrap: anywhere;
}

.testo-pagina__aggiornamento {
  color: var(--colore-testo-secondario);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

.testo-pagina__elenco > * + * {
  margin-block-start: var(--spazio-s);
}

.testo-pagina__elenco h3 {
  margin-block-start: var(--spazio-m);
  font-family: var(--font-ui);
  font-size: var(--testo-m);
  font-weight: var(--ui-peso-forte);
}

/* Tabelle larghe (elenco dei cookie): scorrono in orizzontale su mobile invece di allargare la pagina */
.tabella-scorrevole {
  overflow-x: auto;
}

/* --- Consenso ai cookie (js/consenso.js) ----------------------------------- */
/* Banner fisso in basso, blocco inchiostro come il footer; non blocca il sito (niente cookie wall) */
.consenso {
  --colore-testo: var(--consenso-testo);
  --colore-testo-secondario: var(--consenso-testo);
  --colore-accento: var(--consenso-link);
  --colore-accento-hover: var(--consenso-link-hover);
  --colore-focus: var(--consenso-focus);
  --pulsante-fondo: var(--consenso-pulsante-fondo);
  --pulsante-testo: var(--consenso-pulsante-testo);
  --pulsante-fondo-hover: var(--consenso-pulsante-fondo-hover);
  --pulsante-testo-hover: var(--consenso-pulsante-testo-hover);
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-consenso);
  /* Niente spazio sotto: lo dà il contenitore, così i pulsanti incollati in basso arrivano al bordo del banner */
  padding-block: var(--spazio-m) 0;
  border-block-start: var(--consenso-filetto) solid var(--consenso-filetto-colore);
  background: var(--consenso-fondo);
  color: var(--colore-testo);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  /* Con il testo ingrandito il banner non esce dallo schermo né copre quasi tutta la pagina:
     il testo scorre dentro il banner e i pulsanti restano sempre visibili (vedi __azioni) */
  max-block-size: var(--consenso-altezza-massima);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body:has(> .consenso:not([hidden])) {
  padding-block-end: var(--consenso-altezza, 0);
}

.consenso__contenitore {
  display: grid;
  gap: var(--spazio-s) var(--spazio-l);
  padding-block-end: var(--spazio-m);
}

@media (min-width: 64em) {
  .consenso__contenitore {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.consenso__titolo {
  margin-block-end: var(--spazio-3xs);
  color: var(--consenso-titolo);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  font-weight: var(--ui-peso-forte);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.consenso__descrizione {
  max-inline-size: var(--misura-lettura);
}

/* "Rifiuta" e "Accetta tutti" identici: stesso peso visivo (Linee guida del Garante), stessa larghezza minima.
   Se il banner scorre (testo ingrandito) i pulsanti restano incollati in basso; il padding è compensato
   dal margine negativo, così senza scorrimento l'altezza del banner non cambia. */
.consenso__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-xs) var(--spazio-s);
  position: sticky;
  inset-block-end: 0;
  margin-block-end: calc(-1 * var(--spazio-xs));
  padding-block-end: var(--spazio-xs);
  background: var(--consenso-fondo);
}

.consenso__azioni .pulsante,
.consenso-preferenze__azioni .pulsante {
  min-inline-size: min(var(--consenso-pulsante-larghezza), 100%);
}

.consenso__personalizza,
.consenso-preferenze__chiudi,
.sito-footer__preferenze {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colore-accento);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.consenso__personalizza:hover,
.consenso-preferenze__chiudi:hover,
.sito-footer__preferenze:hover {
  color: var(--colore-accento-hover);
}

/* Preferenze: <dialog> modale (focus intrappolato, Esc chiude senza salvare) */
.consenso-preferenze {
  inline-size: min(100% - 2 * var(--margine-pagina), var(--consenso-preferenze-larghezza));
  max-block-size: calc(100% - 2 * var(--margine-pagina));
  margin: auto; /* il reset di base.css azzera i margini: senza, il dialog non è centrato */
  padding: var(--spazio-m);
  border: 0;
  border-block-start: var(--filetto-spesso) solid var(--consenso-filetto-colore);
  background: var(--colore-fondo);
  color: var(--colore-testo);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  overflow-wrap: anywhere; /* con testo molto ingrandito le parole lunghe vanno a capo invece di uscire dal dialogo */
}

.consenso-preferenze::backdrop {
  background: var(--consenso-velo);
}

.consenso-preferenze__intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio-xs);
  margin-block-end: var(--spazio-s);
}

.consenso-preferenze__titolo {
  font-size: var(--titolo-m);
}

.consenso-preferenze__categorie {
  display: grid;
  margin-block: var(--spazio-m);
  border-block-start: var(--filetto-sottile) solid var(--colore-filetto);
}

.consenso-categoria {
  display: grid;
  gap: var(--spazio-3xs);
  padding-block: var(--spazio-s);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto);
}

.consenso-categoria__intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-xs);
}

.consenso-categoria__scelta {
  inline-size: var(--consenso-casella);
  block-size: var(--consenso-casella);
  accent-color: var(--colore-accento);
}

.consenso-categoria__nome {
  font-weight: var(--ui-peso-forte);
}

.consenso-categoria__stato,
.consenso-categoria__servizi {
  color: var(--colore-testo-secondario);
  font-size: var(--testo-xs);
}

.consenso-categoria__descrizione,
.consenso-categoria__servizi {
  padding-inline-start: calc(var(--consenso-casella) + var(--spazio-xs));
}

.consenso-preferenze__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-xs) var(--spazio-s);
}

/* --- Opzioni di leggibilità (js/leggibilita.js) ---------------------------- */
/* Pulsante fisso in basso a destra; sale sopra il banner dei cookie quando è visibile */
.leggibilita {
  position: fixed;
  inset-inline-end: var(--leggibilita-distanza);
  inset-block-end: calc(var(--leggibilita-distanza) + var(--consenso-altezza, 0px));
  z-index: var(--z-leggibilita);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
}

.leggibilita__apri {
  display: grid;
  place-items: center;
  inline-size: var(--leggibilita-pulsante);
  block-size: var(--leggibilita-pulsante);
  padding: 0;
  border: var(--filetto-sottile) solid var(--leggibilita-pulsante-testo);
  border-radius: 50%;
  background: var(--leggibilita-pulsante-fondo);
  color: var(--leggibilita-pulsante-testo);
  box-shadow: var(--leggibilita-ombra);
  cursor: pointer;
}

.leggibilita__apri:hover,
.leggibilita__apri[aria-expanded="true"] {
  background: var(--leggibilita-pulsante-fondo-hover);
}

.leggibilita__icona {
  inline-size: 60%;
  block-size: 60%;
}

.leggibilita__pannello {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc(100% + var(--spazio-xs));
  inline-size: min(var(--leggibilita-pannello-larghezza), 100vw - 2 * var(--leggibilita-distanza));
  max-block-size: calc(100svh - var(--leggibilita-pulsante) - 3 * var(--leggibilita-distanza) - var(--consenso-altezza, 0px));
  overflow-y: auto;
  padding: var(--spazio-s);
  border-block-start: var(--filetto-spesso) solid var(--leggibilita-filetto-colore);
  background: var(--colore-fondo);
  color: var(--colore-testo);
  box-shadow: var(--leggibilita-ombra);
}

.leggibilita__intestazione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spazio-xs);
  margin-block-end: var(--spazio-s);
}

.leggibilita__titolo {
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-weight: var(--ui-peso-forte);
  letter-spacing: var(--ui-spaziatura);
  text-transform: var(--ui-maiuscolo);
}

.leggibilita__chiudi {
  padding: 0;
  border: 0;
  background: none;
  color: var(--colore-accento);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.leggibilita__gruppo {
  margin: 0;
  padding: 0;
  border: 0;
}

.leggibilita__etichetta {
  margin-block-end: var(--spazio-2xs);
  padding: 0;
  font-weight: var(--ui-peso-forte);
}

/* Scala: quattro radio come pulsanti affiancati; la selezione è in inchiostro pieno */
.leggibilita__scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: var(--filetto-sottile) solid var(--colore-testo);
}

.leggibilita__scala {
  position: relative;
  cursor: pointer;
}

.leggibilita__scala + .leggibilita__scala {
  border-inline-start: var(--filetto-sottile) solid var(--colore-testo);
}

.leggibilita__scala input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.leggibilita__scala span {
  display: block;
  padding-block: var(--spazio-2xs);
  text-align: center;
  font-variant-numeric: var(--numeri-meta);
}

.leggibilita__scala input:checked + span {
  background: var(--colore-testo);
  color: var(--colore-fondo);
  font-weight: var(--ui-peso-forte);
}

.leggibilita__scala input:focus-visible + span {
  outline: var(--focus-spessore) solid var(--colore-focus);
  outline-offset: calc(-1 * var(--focus-spessore));
}

.leggibilita__opzioni {
  display: grid;
  margin-block: var(--spazio-s);
  border-block-start: var(--filetto-sottile) solid var(--colore-filetto);
}

.leggibilita__opzione {
  display: flex;
  align-items: center;
  gap: var(--spazio-xs);
  padding-block: var(--spazio-2xs);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto);
  cursor: pointer;
}

.leggibilita__opzione input {
  flex: none;
  inline-size: var(--consenso-casella);
  block-size: var(--consenso-casella);
  margin: 0;
  accent-color: var(--colore-accento);
}

.leggibilita__nota {
  margin-block-start: var(--spazio-xs);
  color: var(--colore-testo-secondario);
  font-size: var(--testo-xs);
}

/* Spaziatura del testo (WCAG 1.4.12) su testi correnti; titoli e logotipo esclusi */
:root[data-leggibilita-spaziatura] :is(p, li, dd, dt, td, th, figcaption, label, blockquote) {
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}

:root[data-leggibilita-spaziatura] p + p {
  margin-block-start: 2em;
}

/* Sottolinea i link: anche menu, card e link di interfaccia (non il logotipo, che è il marchio) */
:root[data-leggibilita-link] a[href]:not(.logotipo) {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

/* --- Campo (filtri della galleria) ------------------------------------------ */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2xs);
}

.campo__etichetta {
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-weight: var(--ui-peso-forte);
}

.campo__controllo {
  inline-size: 100%;
  padding: var(--spazio-2xs) var(--spazio-xs);
  border: var(--filetto-sottile) solid var(--colore-testo-secondario);
  border-radius: var(--raggio);
  background: var(--colore-superficie);
  font-family: var(--font-ui);
  font-size: var(--testo-m);
}

/* --- Zoom a schermo intero ------------------------------------------------ */
/* <dialog> modale a tutto schermo: barra dei comandi, area dell'immagine, aiuto */
html:has(.zoom[open]) {
  overflow: hidden;
}

.zoom {
  --colore-testo: var(--zoom-testo);
  --colore-testo-secondario: var(--zoom-testo);
  --colore-focus: var(--zoom-focus);
  --colore-filetto: var(--zoom-filetto);
  --pulsante-fondo: var(--zoom-pulsante-fondo);
  --pulsante-testo: var(--zoom-pulsante-testo);
  --pulsante-fondo-hover: var(--zoom-pulsante-fondo-hover);
  --pulsante-testo-hover: var(--zoom-pulsante-testo-hover);
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--zoom-fondo);
  color: var(--colore-testo);
}

.zoom[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: zoom-comparsa var(--durata-media) var(--curva);
}

.zoom::backdrop {
  background: var(--zoom-fondo);
}

@keyframes zoom-comparsa {
  from {
    opacity: 0;
  }
}

.zoom__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-xs) var(--spazio-m);
  padding: var(--spazio-xs) var(--margine-pagina);
  border-block-end: var(--filetto-sottile) solid var(--colore-filetto);
}

.zoom__titolo {
  font-size: var(--titolo-s);
}

.zoom__comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2xs);
}

.zoom__livello {
  min-inline-size: 5ch;
  margin-inline-end: var(--spazio-2xs);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  font-variant-numeric: var(--numeri-meta);
  text-align: end;
}

.zoom__area {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--spazio-m);
  cursor: zoom-in;
  touch-action: none;
}

.zoom__area--ingrandita {
  cursor: grab;
}

.zoom__area--ingrandita:active {
  cursor: grabbing;
}

.zoom__area:focus-visible {
  outline-offset: calc(-1 * var(--focus-spessore));
}

.zoom__immagine {
  max-inline-size: 100%;
  max-block-size: 100%;
  transform-origin: center;
  user-select: none;
  -webkit-user-select: none;
}

.zoom__immagine--animata {
  transition: transform var(--durata-media) var(--curva);
}

.zoom__aiuto {
  padding: var(--spazio-2xs) var(--margine-pagina);
  font-family: var(--font-ui);
  font-size: var(--testo-xs);
  text-align: center;
}