/* Ai Foggiali, stile del sito: la proposta A "Pietra e luce".
   Archetipi: Editorial Luxury (grana di carta, serif dei titoli, crema e tufo) + Z-Axis Cascade
   (foto incorniciate impilate come stampe sul tavolo, leggermente ruotate).
   Forme: tutto ad angoli vivi, come le cornici dei post; i soli cerchi sono il sole e i pallini.
   Colori e misure in tokens.css. Solo tema chiaro.
   Scala z-index: 60 salta-al-contenuto, 50 grana, 40 barra, 30 WhatsApp fisso, 1 stampe sollevate
   e testi sopra le decorazioni, -1 decorazioni. */

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

/* Movimento ridotto: niente scorrimento morbido, niente transizioni, niente animazioni */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

html {
  color-scheme: only light;
  -webkit-text-size-adjust: 100%;
  /* le ancore arrivano sotto la barra fissa, con un po' d'aria */
  scroll-padding-top: calc(var(--barra-h) + 1.5rem);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Grana di carta: solo su uno strato fisso che non riceve il puntatore.
   Senza mix-blend-mode: sul fondo chiaro il risultato è lo stesso del multiply (meno di un livello
   RGB di differenza) e il compositore non deve fondere tutto lo schermo a ogni fotogramma
   (misurato in a-task-6-report: circa un terzo in meno di tempo di disegno durante lo scorrimento) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.2 0 0 0 0 0.16 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
/* Con il testo ingrandito una parola lunga va a capo invece di allargare la pagina */
h1, h2, h3, p, dd { overflow-wrap: anywhere; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

a, button, input, select, textarea, label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(252 204 102 / 0.35);
}

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

.contenitore {
  width: min(100% - 2 * var(--gutter), var(--larghezza));
  margin-inline: auto;
}

.salta {
  position: absolute;
  left: var(--gutter);
  top: -5rem;
  z-index: 60;
  padding: 0.75rem 1rem;
  background: var(--sole);
  color: var(--su-sole);
  font-weight: 600;
}

.salta:focus { top: 0.75rem; }

/* Numeri di telefono e simili: non vanno a capo a metà */
.intero { white-space: nowrap; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dato ancora da verificare: riquadro tratteggiato ben visibile */
.da-confermare {
  display: inline-block;
  margin-left: 0.35em;
  max-width: calc(100% - 0.35em); /* a capo dentro il riquadro, mai oltre il bordo */
  padding: 0 0.45em;
  border: 1px dashed var(--accento-testo);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.6;
  color: var(--testo);
  white-space: nowrap;
}

/* Titoli: Playfair di misura normale, con al più una parola in corsivo ocra (stessa misura del
   resto del titolo). Sopra, dove serve, un sopratitolo piccolo in maiuscolo. Scala in tokens.css:
   h1 della Home fino a 4.25rem, h1 delle pagine fino a 3.5rem, h2 fino a 2.75rem, h3 fino a 1.6rem.
   L'interlinea di 1.12 lascia spazio alle discendenti del corsivo. */
.titolo,
.titolo-piano,
.luogo__titolo {
  font-family: var(--font-titoli);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.titolo em {
  font-style: italic;
  font-weight: 450;
  color: var(--accento-testo);
}

.titolo--h1 { font-size: var(--t-h1); line-height: 1.12; letter-spacing: -0.02em; }
.titolo--pagina { font-size: var(--t-pagina); line-height: 1.12; letter-spacing: -0.015em; }

/* Sopratitolo: etichetta breve sopra l'h2, con un tratto ocra davanti (testo in ocra scuro, AA) */
.sopratitolo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accento-piccolo);
}

.sopratitolo::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.5px;
  background: var(--accento-testo);
}

/* Sezioni: una sola scala di spazio verticale; chiara e sabbia si alternano (classe sezione--sabbia) */
.sezione { padding-block: var(--sezione); }
.sezione--sabbia { background: var(--fascia); }

.sezione__intro {
  max-width: 44ch;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--testo-tenue);
}

/* Pulsanti: rettangoli netti con l'icona chiusa nel suo riquadro */
.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tasto {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.35rem;
  border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--font-testo);
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 400ms var(--molla), color 400ms var(--molla), transform 300ms var(--molla), translate 500ms var(--molla);
}

.tasto:active { transform: scale(0.98); }

/* Testo ingrandito al 200% sul telefono: una parola lunga ("Booking.com") va a capo invece di
   spingere il pulsante oltre il bordo */
.tasto > span:first-child { min-width: 0; overflow-wrap: anywhere; }

.tasto__icona {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgb(61 58 54 / 0.1);
  transition: background-color 400ms var(--molla), color 400ms var(--molla);
}

.tasto__icona svg,
.freccia__icona svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  transition: transform 500ms var(--molla);
}

@media (hover: hover) {
  .tasto:hover .tasto__icona svg { transform: translate(2px, -2px) scale(1.06); }
}

.tasto--sole {
  background: var(--sole);
  border-color: var(--sole);
  color: var(--su-sole);
}

/* Effetti al passaggio solo con un puntatore vero: sul telefono il tocco non lascia il pulsante scuro */
@media (hover: hover) {
  .tasto--sole:hover { background: var(--sole-scuro); border-color: var(--sole-scuro); }
  .tasto--sole:hover .tasto__icona { background: var(--testo); color: var(--sole); }
}

.tasto--filo {
  background: transparent;
  border-color: var(--bordo-forte);
  color: var(--testo);
}

.tasto--filo .tasto__icona { background: rgb(61 58 54 / 0.08); }
@media (hover: hover) {
  .tasto--filo:hover { background: var(--testo); color: var(--fondo); }
  .tasto--filo:hover .tasto__icona { background: var(--sole); color: var(--su-sole); }
}

/* Pulsante chiaro sopra una foto velata (apertura della Home): filo e testo chiari su un velo in più */
.tasto--chiaro {
  background: rgb(61 58 54 / 0.45);
  border-color: var(--fondo);
  color: var(--fondo);
}

.tasto--chiaro .tasto__icona { background: rgb(251 251 249 / 0.14); }
@media (hover: hover) {
  .tasto--chiaro:hover { background: var(--fondo); color: var(--testo); }
  .tasto--chiaro:hover .tasto__icona { background: var(--sole); color: var(--su-sole); }
}

/* Collegamenti interni: testo, filo giallo che si allunga, freccia nel suo riquadro */
.vai { margin-top: 3rem; }

.freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}

.freccia > span:first-child {
  /* Sottolineatura gialla fissa; la linea ocra la ricopre da sinistra al passaggio */
  background:
    linear-gradient(var(--accento-testo), var(--accento-testo)) left bottom / 0 2px no-repeat,
    linear-gradient(var(--sole), var(--sole)) left bottom / 100% 2px no-repeat;
  padding-bottom: 0.2rem;
  transition: background-size 500ms var(--molla);
}

.freccia:focus-visible > span:first-child { background-size: 100% 2px, 100% 2px; }

@media (hover: hover) {
  .freccia:hover > span:first-child { background-size: 100% 2px, 100% 2px; }
}

.freccia__icona {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--bordo-forte);
  transition: background-color 400ms var(--molla), color 400ms var(--molla);
}

@media (hover: hover) {
  .freccia:hover .freccia__icona { background: var(--testo); color: var(--sole); }
  .freccia:hover .freccia__icona svg { transform: translateX(3px); }
}

/* Link nel testo (recapiti, consenso, piè di pagina, informativa) */
.collegamento,
.piede a:not(.tasto, .freccia),
.recapiti a,
.campo--consenso a,
.prosa a {
  text-decoration: underline;
  text-decoration-color: var(--sole);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.collegamento { font-weight: 600; }

.collegamento:hover,
.piede a:not(.tasto, .freccia):hover,
.recapiti a:hover,
.campo--consenso a:hover,
.prosa a:hover { text-decoration-color: var(--accento-testo); }

/* Doppia cornice: guscio bianco con filo sottile, nucleo con la foto e il filo bianco dei post.
   Le schede di testo hanno il nucleo chiaro sulle sezioni sabbia e sabbia sulle sezioni chiare
   (regola in fondo a questo blocco), così si staccano sempre dal fondo */
.lastra {
  position: relative;
  padding: clamp(0.4rem, 0.25rem + 0.5vw, 0.7rem);
  background: var(--bianco);
  box-shadow: var(--ombra-calda);
}

.lastra__nucleo {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--fascia);
}

.lastra__nucleo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sezione:not(.sezione--sabbia) :is(.scheda, .musei__scheda, .corredo__pannello, .racconto__scheda):not(.scheda--sole, .musei__scheda--grotta) > .lastra__nucleo {
  background: var(--fascia);
}

figure.lastra .lastra__nucleo::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid rgb(255 255 255 / 0.85);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Barra: a tutta larghezza, da bordo a bordo, fondo pieno senza sfocatura.
   Il contenuto segue la griglia del sito (stessa larghezza di .contenitore).
   Resta in alto (sticky) e occupa il suo spazio: le aperture partono sotto.
   Da 1024px in su una riga sola: logo a sinistra, voci al centro, Booking a destra.
   ------------------------------------------------------------------ */
.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: var(--fondo);
}

/* Filo sottile sotto la barra: compare appena la pagina scorre (vedi le animazioni legate
   allo scorrimento in fondo al file). Dove il browser non le supporta, o con il movimento
   ridotto, resta sempre visibile. */
.barra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgb(61 58 54 / 0.12);
  pointer-events: none;
}

.menu-aperto .barra::after { visibility: hidden; }

.barra__guscio {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  width: min(100% - 2 * var(--gutter), var(--larghezza));
  min-height: var(--barra-h);
  margin-inline: auto;
  padding-block: 0.5rem;
}

.barra__logo { display: block; flex-shrink: 0; }
.barra__logo img { width: auto; height: 3rem; }

.barra__pannello {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.barra__nav ul { display: flex; gap: 0.25rem; }

.barra__nav a {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.7rem;
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.barra__nav a::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--sole);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--molla);
}

@media (hover: hover) {
  .barra__nav a:hover::after { transform: scaleX(1); }
}

/* Pagina aperta: filo ocra sempre presente e testo più pieno */
.barra__nav a[aria-current="page"] { font-weight: 650; }
.barra__nav a[aria-current="page"]::after { background: var(--accento-testo); transform: scaleX(1); }

.barra__prenota { min-height: 3rem; padding-block: 0.25rem; }
.barra__prenota .tasto__icona { width: 2.25rem; height: 2.25rem; }

/* Booking e il cambio lingua, sempre insieme: a destra nella barra, in fondo al pannello del menu */
.barra__azioni {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Cambio lingua "IT | EN": due voci brevi con un filo sottile in mezzo (decorativo, senza testo).
   La lingua della pagina ha il filo ocra sotto, come la voce del menu della pagina aperta;
   ogni voce è un bersaglio di almeno 44 px. */
.lingue__elenco { display: flex; align-items: center; }
.lingue__elenco li { display: flex; align-items: center; }
.lingue__elenco li + li::before {
  content: "";
  width: 1px;
  height: 1rem;
  background: var(--bordo-forte);
  opacity: 0.35;
}

.lingue__voce {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  color: var(--testo-tenue);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
}

.lingue__voce::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.6rem;
  height: 2px;
  background: var(--sole);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--molla);
}

@media (hover: hover) {
  .lingue__voce:hover { color: var(--testo); }
  .lingue__voce:hover::after { transform: scaleX(1); }
}

.lingue__voce[aria-current="true"] { color: var(--testo); }
.lingue__voce[aria-current="true"]::after { background: var(--accento-testo); transform: scaleX(1); }

/* Il pulsante Menu c'è solo sotto i 1024px e solo se il browser esegue gli script (vedi sotto) */
.barra__menu {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  margin-left: auto;
  padding: 0 0.6rem 0 1rem;
  border: 1.5px solid var(--bordo-forte);
  background: transparent;
  color: var(--testo);
  font: 600 1rem/1 var(--font-testo);
  cursor: pointer;
}

.barra__menu-linee {
  position: relative;
  width: 1.4rem;
  height: 0.75rem;
}

.barra__menu-linee span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 500ms var(--molla);
}

.barra__menu-linee span:first-child { top: 0; }
.barra__menu-linee span:last-child { top: calc(100% - 1.5px); }

.barra__menu[aria-expanded="true"] .barra__menu-linee span:first-child { transform: translateY(5.25px) rotate(45deg); }
.barra__menu[aria-expanded="true"] .barra__menu-linee span:last-child { transform: translateY(-5.25px) rotate(-45deg); }

/* Sotto i 1024px senza JS: voci e pulsante scorrono in orizzontale su una seconda riga */
@media (max-width: 1023.98px) {
  .barra__logo img { height: 2.75rem; }

  .barra__pannello {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }

  .barra__nav ul { flex-shrink: 0; }
}

/* Con il JS: pulsante Menu e pannello a schermo intero, chiuso. Lo decide il CSS con
   (scripting: enabled), già al primo disegno della pagina: prima di sito.js (caricato con
   defer) il menu orizzontale non compare e non c'è nessuna dissolvenza al caricamento.
   Senza JS (scripting: none) resta il menu orizzontale qui sopra; i browser che non conoscono
   (scripting) ignorano questo blocco e tengono anche loro il menu orizzontale, che funziona. */
@media (max-width: 1023.98px) and (scripting: enabled) {
  .barra__menu { display: inline-flex; }

  .barra__pannello {
    position: fixed;
    inset: 0;
    z-index: -1;
    order: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    width: auto;
    padding: 6rem var(--gutter) 3rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--fondo);
    visibility: hidden;
    opacity: 0;
    transition: opacity 500ms var(--molla), visibility 0s linear 500ms;
  }

  .barra__pannello::before {
    content: "";
    position: absolute;
    right: -18vw;
    bottom: -12vw;
    z-index: -1;
    width: 70vw;
    max-width: 30rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sole);
    opacity: 0.85;
  }

  .barra__nav ul { flex-direction: column; gap: 0.25rem; }

  .barra__nav a {
    padding: 0.35rem 0;
    font-family: var(--font-titoli);
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
    font-weight: 500;
    line-height: 1.2;
  }

  .barra__nav a[aria-current="page"] { font-weight: 500; font-style: italic; color: var(--accento-testo); }
  .barra__nav a::after { left: 0; right: 0; bottom: 0.15rem; }

  .barra__azioni { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .lingue { margin-left: -0.5rem; }
  .lingue__voce { font-size: 1rem; }

  .barra__nav li,
  .barra__azioni {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 600ms var(--molla), transform 700ms var(--molla);
  }

  .menu-aperto { overflow: hidden; }

  .menu-aperto .barra__pannello {
    visibility: visible;
    opacity: 1;
    transition: opacity 400ms var(--molla), visibility 0s;
  }

  .menu-aperto .barra__nav li,
  .menu-aperto .barra__azioni { opacity: 1; transform: none; }

  .menu-aperto .barra__nav li:nth-child(1) { transition-delay: 80ms; }
  .menu-aperto .barra__nav li:nth-child(2) { transition-delay: 120ms; }
  .menu-aperto .barra__nav li:nth-child(3) { transition-delay: 160ms; }
  .menu-aperto .barra__nav li:nth-child(4) { transition-delay: 200ms; }
  .menu-aperto .barra__nav li:nth-child(5) { transition-delay: 240ms; }
  .menu-aperto .barra__azioni { transition-delay: 300ms; }
}

@media (min-width: 1024px) {
  /* Fino a 1280px le voci stanno al centro dello spazio fra logo e pulsanti (Booking e lingua non ci
     starebbero in un terzo della barra); da 1280px al centro della pagina */
  .barra__guscio {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2rem;
  }
  .barra__prenota > span:first-child { white-space: nowrap; }
  /* Il pannello serve solo al menu mobile: qui voci e pulsante entrano nella griglia della barra */
  .barra__pannello { display: contents; }
  .barra__logo { justify-self: start; }
  .barra__nav { justify-self: center; }
  .barra__nav ul { gap: 0.75rem; }
  .barra__azioni { justify-self: end; }
  .barra__menu { display: none !important; }
}

@media (min-width: 1280px) {
  .barra__guscio { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* Finestre basse (zoom al 200% su 1280x800, telefono in orizzontale): la barra non resta
   in alto, altrimenti copre un terzo dello schermo e i punti col fuoco */
@media (max-height: 30rem) {
  html { scroll-padding-top: 1rem; }
  .barra { position: static; }
}

/* ------------------------------------------------------------------
   Apertura della Home: le foto della casa a tutta larghezza, che si alternano in dissolvenza
   (sito.js), sotto un velo del colore del testo; titolo, sottotitolo e pulsanti in chiaro a sinistra,
   il pulsante pausa in basso a destra. Da 1024px la barra di disponibilità sale sul bordo basso
   della foto. Il velo è tarato sul punto più chiaro di ogni foto sotto il testo
   (tests/test_slideshow.py misura il contrasto sulla pagina disegnata).
   ------------------------------------------------------------------ */
.apertura {
  --pausa: 2.75rem;
  --sotto: 0rem;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(34rem, 70svh, 54rem);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) calc(var(--sotto) + var(--pausa) + 2.25rem);
  overflow: clip;
  background: var(--testo);
  color: var(--fondo);
}

.apertura__foto { position: absolute; inset: 0; z-index: -2; }

.apertura__scatto {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* Il taglio di ogni foto: in orizzontale conta l'altezza (desktop), in verticale il lato (telefono) */
.apertura__scatto[src*="camera-volta-"] { object-position: 34% 62%; }
.apertura__scatto[src*="pranzo-tufo-"] { object-position: 58% 60%; }
.apertura__scatto[src*="soppalco-"] { object-position: 52% 45%; }
.apertura__scatto[src*="volta-camera-"] { object-position: 40% 55%; }

/* Le foto dopo la prima restano fuori dalla pagina (e non si scaricano) finché sito.js non le chiama */
.apertura__scatto[hidden] { display: none; }

/* La foto in vista sta sopra; quella appena lasciata resta piena sotto finché la nuova non la copre */
.apertura__scatto.is-attiva { z-index: 1; opacity: 1; }
.apertura__scatto.is-precedente { opacity: 1; transition: none; }

/* Velo: sul telefono il testo occupa tutta la larghezza. Dal 2026-10-14 più leggero dove non c'è testo
   (sopra il titolo e sotto i pulsanti, dove la volta e il letto si riconoscono), pieno solo dietro il
   testo: il contrasto resta AA nel punto più chiaro (tests/test_slideshow.py) */
.apertura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(61 58 54 / 0.3) 0%,
    rgb(61 58 54 / 0.62) 16%,
    rgb(61 58 54 / 0.72) 30%,
    rgb(61 58 54 / 0.72) 72%,
    rgb(61 58 54 / 0.42) 92%,
    rgb(61 58 54 / 0.32) 100%);
}

.apertura__guscio {
  width: min(100% - 2 * var(--gutter), var(--larghezza));
  margin-inline: auto;
}

.apertura__testo { position: relative; max-width: 40rem; padding: 1.25rem 0 0 1.25rem; }

.apertura .titolo { color: var(--fondo); }
.apertura .titolo em { color: var(--sole); }

.apertura__sottotitolo {
  max-width: 30ch;
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.5;
}

.apertura .azioni { margin-top: 2.25rem; }

/* Linea gialla con pallino nell'angolo, come nei post (anche nelle testate delle pagine) */
.filo { position: relative; }

.filo::before,
.filo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.filo::before {
  left: 0;
  top: 0;
  width: min(42%, 12rem);
  height: clamp(6rem, 14vw, 10rem);
  border-top: 1.5px solid var(--sole);
  border-left: 1.5px solid var(--sole);
}

.filo::after {
  left: -6px;
  top: -6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sole);
}

/* Sul velo scuro il contorno del fuoco è chiaro */
.apertura :focus-visible { outline-color: var(--fondo); }

/* Pausa e riprendi: un riquadro netto come i pulsanti, sempre in vista mentre le foto girano */
.apertura__pausa {
  position: absolute;
  right: max(var(--gutter), (100% - var(--larghezza)) / 2);
  bottom: calc(var(--sotto) + 1.25rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--pausa);
  height: var(--pausa);
  padding: 0;
  border: 1.5px solid var(--fondo);
  background: rgb(61 58 54 / 0.8);
  color: var(--fondo);
  cursor: pointer;
  transition: background-color 400ms var(--molla), color 400ms var(--molla), transform 300ms var(--molla);
}

.apertura__pausa[hidden] { display: none; }
.apertura__pausa:active { transform: scale(0.96); }
.apertura__pausa svg { width: 1rem; height: 1rem; }
.apertura__pausa-ferma { fill: none; stroke: currentColor; stroke-width: 2; }
.apertura__pausa-vai { display: none; fill: currentColor; }
.apertura__pausa.is-in-pausa .apertura__pausa-ferma { display: none; }
.apertura__pausa.is-in-pausa .apertura__pausa-vai { display: block; }

@media (hover: hover) {
  .apertura__pausa:hover { background: var(--fondo); color: var(--testo); }
}

/* Dal tablet il testo sta a sinistra: velo pieno sotto il testo, quasi trasparente verso destra */
@media (min-width: 768px) {
  .apertura::before {
    background: linear-gradient(90deg,
      rgb(61 58 54 / 0.78) 0%,
      rgb(61 58 54 / 0.72) calc(max(var(--gutter), (100% - var(--larghezza)) / 2) + 40rem),
      rgb(61 58 54 / 0.28) calc(max(var(--gutter), (100% - var(--larghezza)) / 2) + 62rem),
      rgb(61 58 54 / 0.12) 100%);
  }
}

/* Dal desktop la barra di disponibilità sale sul bordo basso della foto, come una lastra posata sopra */
@media (min-width: 1024px) {
  .apertura { --sotto: var(--sovrapposta); }
  .disponibilita.sezione { padding-top: 0; }
  .disponibilita__lastra { z-index: 1; margin-top: calc(-1 * var(--sovrapposta)); }
}

/* ------------------------------------------------------------------
   Barra di disponibilità: tre campi e il pulsante, dentro una lastra
   ------------------------------------------------------------------ */
.disponibilita__lastra .lastra__nucleo {
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  background: var(--fondo);
}

.disponibilita__campi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
}

.disponibilita__campi .tasto { justify-content: space-between; width: 100%; }

.disponibilita__nota {
  max-width: 60ch;
  margin-top: 1.25rem;
  font-size: 0.975rem;
  color: var(--testo-tenue);
}

@media (min-width: 640px) {
  .disponibilita__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .disponibilita__campi { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.7fr) auto; gap: 1.25rem; }
}

/* Campi dei moduli: etichetta sopra, bordo netto, fondo bianco */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; align-content: start; }

.campo label {
  font-size: 0.95rem;
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--bordo-forte);
  border-radius: 0;
  background: var(--bianco);
  color: var(--testo);
  font: 500 1.0625rem/1.3 var(--font-testo);
  transition: box-shadow 300ms var(--molla);
}

.campo select {
  appearance: none;
  padding-right: 2.75rem;
  background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%233d3a36' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") right 0.9rem center / 1rem no-repeat;
}

.campo textarea { min-height: 8rem; resize: vertical; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible,
/* Nel campo data il pulsante del calendario prende il fuoco dentro il campo, che però non risulta
   né :focus né :focus-visible: l'anello si accende con :focus-within */
.campo input[type="date"]:focus-within {
  outline: 2px solid var(--testo);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgb(252 204 102 / 0.55);
}

.campo__aiuto { font-size: 0.9rem; color: var(--testo-tenue); }

/* Campo non valido: bordo tratteggiato nel colore del testo (contrasto 9:1), distinto dall'ocra del fuoco e dei filetti */
.campo input:user-invalid,
.campo select:user-invalid,
.campo textarea:user-invalid { border-color: var(--bordo-forte); border-style: dashed; border-width: 2px; }

/* ------------------------------------------------------------------
   Arrivo e partenza: due orari grandi sotto un filo, come un orizzonte
   ------------------------------------------------------------------ */
.orari__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.orari__elenco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

.orari__elenco > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  align-content: start;
  padding-top: 1.25rem;
  border-top: 1.5px solid var(--bordo-forte);
}

.orari__elenco dt { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; }

.orari__ora {
  display: block;
  font-family: var(--font-titoli);
  font-size: min(clamp(1.875rem, 1.4rem + 1.2vw, 2.5rem), 10vw);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.orari__nota { display: block; margin-top: 0.75rem; max-width: 30ch; color: var(--testo-tenue); }

@media (min-width: 640px) {
  .orari__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}

/* Da 1024px i titoli partono in alto come le colonne: il sopratitolo alla stessa altezza di
   Arrivo e Partenza, sotto il filo (stesso spazio: il filo di 1.5px e il padding-top di 1.25rem) */
@media (min-width: 1024px) {
  .orari__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .orari__titoli { padding-top: calc(1.25rem + 1.5px); }
}

/* ------------------------------------------------------------------
   La casa nella Home: titolo e intro a sinistra, i numeri in una fascia compatta a destra;
   sotto, una foto grande e due medie, tutte 4:3 come i file e mai più larghe di 1024 px
   (la grande arriva a circa 860 px a 1440 px e oltre)
   ------------------------------------------------------------------ */
.casa__testa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Tre colonne; con il testo ingrandito (150-200%) vanno a capo invece di allargare la pagina */
.numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25rem), 1fr));
  gap: 1rem clamp(1rem, 0.5rem + 2vw, 2.25rem);
}

.numeri div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1.5px solid var(--bordo-forte);
}

.numeri dd {
  font-family: var(--font-titoli);
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.375rem);
  font-variant-numeric: lining-nums;
  line-height: 1.05;
  white-space: nowrap;
}

.numeri dt {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--testo-tenue);
  text-wrap: pretty;
}

.mosaico {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.mosaico img { aspect-ratio: 3 / 2; }

@media (min-width: 640px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico__grande { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .casa__testa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: clamp(2rem, 5vw, 5rem); }

  /* La grande occupa le due righe delle medie: con le colonne 2:1 l'altezza delle due medie
     impilate supera di circa il 4% quella naturale della grande, che si adatta senza ritagli visibili */
  .mosaico { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .mosaico__grande { grid-column: 1; grid-row: 1 / span 2; }
  .mosaico__grande img { aspect-ratio: auto; }
}

/* ------------------------------------------------------------------
   La storia: la volta incorniciata a destra, il sole dietro, la scheda
   posata sopra in basso a sinistra. Una sezione normale, alta circa uno
   schermo e completa anche senza scorrere.
   ------------------------------------------------------------------ */
.storia {
  position: relative;
  overflow-x: clip;
}

.storia__palco {
  position: relative;
  isolation: isolate;
  width: min(100% - 2 * var(--gutter), 64rem);
  margin-inline: auto;
}

.storia__sole {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: -10%;
  width: clamp(10rem, 30vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
}

.storia__foto {
  position: relative;
  overflow: hidden;
}

.storia__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.storia__foto::after {
  content: "";
  position: absolute;
  inset: 4%;
  border: 1px solid rgb(255 255 255 / 0.85);
  pointer-events: none;
}

.storia__scheda {
  position: relative;
  width: min(100% - 1.5rem, 28rem);
  margin: -4rem 0 0 auto;
}

.storia__scheda .lastra__nucleo {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--fondo);
}

.storia__scheda p:not(.vai) {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.storia__scheda .vai { margin-top: 1.75rem; }

/* Da 768px: foto e scheda nella stessa griglia, la scheda scende un poco sotto il bordo della foto */
@media (min-width: 768px) {
  .storia__palco {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: min(100% - 2 * var(--gutter), var(--larghezza));
  }

  .storia__foto { grid-column: 3 / 13; grid-row: 1; }

  .storia__scheda {
    z-index: 1;
    grid-column: 1 / 8;
    grid-row: 1;
    align-self: end;
    width: auto;
    margin: 0 0 -3.5rem;
  }

  .storia__sole { right: -3%; top: -12%; }
  /* la scheda scende di 3.5rem sotto la foto: lo stesso spazio si aggiunge sotto */
  .storia { padding-bottom: calc(var(--sezione) + 3.5rem); }
}

@media (min-width: 1024px) {
  .storia__foto { grid-column: 4 / 13; }
  .storia__scheda { grid-column: 1 / 6; }
}

/* ------------------------------------------------------------------
   La storia nella Home: la facciata del palazzo incorniciata a destra,
   il sole dietro, la scheda che si sovrappone in basso a sinistra.
   Una sezione normale, completa anche senza scorrere.
   ------------------------------------------------------------------ */
.racconto { overflow-x: clip; }

.racconto__griglia { display: grid; grid-template-columns: minmax(0, 1fr); }

.racconto__scena { position: relative; isolation: isolate; padding: 8% 4% 0 0; }

.racconto__sole {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
}

.racconto__stampa img { aspect-ratio: 3 / 2; }

.racconto__scheda {
  z-index: 1;
  width: min(100% - 1.25rem, 30rem);
  margin: -3rem 0 0 auto;
}

.racconto__scheda .lastra__nucleo {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--fondo);
}

.racconto__scheda p:not(.vai) {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.racconto__scheda .vai { margin-top: 1.75rem; }

@media (min-width: 768px) {
  .racconto__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .racconto__scena { grid-column: 4 / 13; grid-row: 1; padding: 5% 3% 0 0; }
  .racconto__stampa { rotate: 1.5deg; }
  .racconto__scheda { grid-column: 1 / 7; grid-row: 1; align-self: end; width: auto; margin: 0 0 -1.5rem; }
  .racconto { padding-bottom: calc(var(--sezione) + 1.5rem); }
}

@media (min-width: 1024px) {
  .racconto__scena { grid-column: 5 / 13; }
  .racconto__scheda { grid-column: 1 / 6; }
}

/* ------------------------------------------------------------------
   Matera nella Home: sezione sabbia, a sinistra la foto del Duomo al crepuscolo
   in cornice, a destra il testo sotto il filo: due colonne dello stesso peso
   ------------------------------------------------------------------ */
.matera__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  align-items: center;
}

.matera__foto { margin: 0; }
.matera__foto img { aspect-ratio: 16 / 9; }

.matera__testo { max-width: 40rem; padding: 1.25rem 0 0 1.25rem; }
.matera__testo .sezione__intro { max-width: 46ch; }

@media (min-width: 1024px) {
  .matera__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------
   Chiusura con il sole dietro il titolo, sopra l'orizzonte (apertura di Contatti)
   ------------------------------------------------------------------ */
.chiusura { text-align: center; }

.chiusura__cielo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: end center;
  min-height: clamp(10rem, 7rem + 7vw, 15rem);
  padding: 0 var(--gutter) clamp(1.25rem, 1rem + 1vw, 2rem);
}

.chiusura__cielo::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1.5px;
  background: var(--testo);
}

.congedo__orizzonte {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1.5px;
  background: var(--testo);
  transform-origin: 0 50%;
}

.chiusura__sole {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(22rem, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
  translate: -50% 42%;
}

.chiusura .titolo em { color: var(--testo); }

.chiusura__terra { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.chiusura__terra .sezione__intro,
.chiusura__terra .testata__intro { margin-top: 1.75rem; max-width: 46ch; }
.chiusura .azioni { justify-content: center; margin-top: 2.25rem; }
.chiusura .vai { margin-top: 2rem; }

/* ------------------------------------------------------------------
   Chiusura della Home: il Sasso Barisano al tramonto, con il Duomo e il cipresso.
   Sul telefono e sul tablet la foto sta in alto, intera in larghezza, e sfuma nel fondo
   scuro dove stanno titolo, frase e pulsanti; dal desktop la foto riempie la fascia e il
   testo sta a destra, sul cielo, sopra un velo del colore del testo. Il velo è tarato sul
   punto più chiaro della foto sotto il testo (tests/test_chiusura.py misura il contrasto
   sulla pagina disegnata).
   ------------------------------------------------------------------ */
.saluto {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--testo);
  color: var(--fondo);
}

.saluto__foto { position: relative; z-index: -2; height: clamp(15rem, 64vw, 32rem); }

.saluto__foto img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 22% 40%;
}

/* La foto sfuma nel fondo scuro sotto, dove comincia il testo */
.saluto__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(61 58 54 / 0.12) 0%, rgb(61 58 54 / 0.2) 55%, var(--testo) 100%);
}

.saluto__guscio {
  width: min(100% - 2 * var(--gutter), var(--larghezza));
  margin-inline: auto;
  padding-block: 0 var(--sezione);
}

.saluto__testo { position: relative; max-width: 32rem; margin-top: -2.5rem; }

.saluto .titolo { color: var(--fondo); }
.saluto .titolo em { color: var(--sole); }

.saluto__frase {
  max-width: 40ch;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.saluto .azioni { margin-top: 2rem; }

.saluto :focus-visible { outline-color: var(--fondo); }

@media (min-width: 1024px) {
  .saluto {
    display: grid;
    align-items: center;
    min-height: clamp(30rem, 66svh, 46rem);
  }

  .saluto__foto { position: absolute; inset: 0; height: auto; }
  .saluto__foto img { object-position: 30% 32%; }

  /* Il velo lascia chiari il cipresso e il Duomo a sinistra e si fa pieno sotto il testo a destra */
  .saluto__foto::after {
    background: linear-gradient(90deg,
      rgb(61 58 54 / 0.16) 0%,
      rgb(61 58 54 / 0.2) calc(100% - max(var(--gutter), (100% - var(--larghezza)) / 2) - 54rem),
      rgb(61 58 54 / 0.76) calc(100% - max(var(--gutter), (100% - var(--larghezza)) / 2) - 33rem),
      rgb(61 58 54 / 0.8) 100%);
  }

  .saluto__guscio { display: grid; justify-items: end; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
  .saluto__testo { width: 100%; margin-top: 0; }
}

/* ------------------------------------------------------------------
   Pagine interne: apertura (testata) con lo stesso linguaggio della Home.
   Titolo con la riga maiuscola e la parola in corsivo sotto il filo giallo,
   a destra le stampe incorniciate. Le foto non aspettano animazioni.
   ------------------------------------------------------------------ */
.testata {
  position: relative;
  overflow-x: clip;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 var(--sezione);
}

.testata__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  width: min(100% - 2 * var(--gutter), var(--larghezza));
  margin-inline: auto;
}

.testata__testo { position: relative; z-index: 1; padding: 1.25rem 0 0 1.25rem; }

.testata__intro {
  max-width: 34ch;
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.5;
  color: var(--testo-tenue);
  text-wrap: pretty;
}

.testata__intro--lunga { max-width: 48ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; }

@media (min-width: 1024px) {
  .testata__griglia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 5rem);
  }
}

/* Testi lunghi: niente parole sole in fondo al paragrafo */
.testata p,
.scheda p,
.luogo__testo,
.prosa p,
.storia__scheda p { text-wrap: pretty; }

/* Una stampa davanti con il filo giallo dietro: lo stesso gesto dell'apertura della Home */
.coppia__davanti::before,
.singola__stampa::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.9rem 0.9rem 0.9rem -0.9rem;
  border: 1.5px solid var(--sole);
}

/* La casa: due stampe sovrapposte e il sole in basso a sinistra */
.coppia {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 44rem;
  aspect-ratio: 1 / 0.8;
  margin-inline: auto;
}

.coppia .lastra { position: absolute; }
.coppia .lastra img { aspect-ratio: 3 / 2; }

.coppia__sole {
  position: absolute;
  z-index: -1;
  left: 2%;
  top: 2%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
}

.coppia__dietro { right: 0; top: 0; width: 56%; }
.coppia__davanti { left: 7%; bottom: 0; width: 76%; }

@media (min-width: 768px) {
  .coppia__dietro { rotate: 3.5deg; }
  .coppia__davanti { rotate: -2deg; }
}

@media (min-width: 1024px) { .coppia { max-width: none; } }

/* La foto dietro si clicca per portarla davanti (sito.js): cursore, fuoco visibile e una breve dissolvenza */
.coppia__dietro--scambia { cursor: pointer; }
.coppia__dietro--scambia:focus-visible { outline: 3px solid var(--testo); outline-offset: 4px; }
.coppia .lastra img { transition: opacity 220ms ease; }
.coppia--cambia .lastra img { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .coppia .lastra img { transition: none; } }

/* Matera: una sola stampa grande, il sole alto a destra */
.singola {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: 9% 5% 4% 0.9rem;
}

.singola__sole {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
}

.singola__stampa img { aspect-ratio: 3 / 2; }

@media (min-width: 768px) { .singola__stampa { rotate: -2deg; } }
@media (min-width: 1024px) { .singola { max-width: none; } }

/* La casa in numeri: lastra larga subito sotto l'apertura, come la barra della Home */
.fatti { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.fatti__elenco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1rem, 0.5rem + 1.5vw, 2rem) clamp(1.25rem, 0.75rem + 2vw, 3rem);
  background: var(--fondo);
}

.fatti__elenco div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-block: 1rem;
}

.fatti__elenco div + div { border-top: 1px solid var(--filo-tenue); }

.fatti__elenco dd {
  font-family: var(--font-titoli);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-variant-numeric: lining-nums;
  line-height: 1.05;
  white-space: nowrap;
}

.fatti__elenco dt { max-width: 24ch; font-size: 0.95rem; color: var(--testo-tenue); text-wrap: pretty; }

@media (max-width: 639.98px) {
  .fatti__elenco div { flex-direction: row-reverse; align-items: center; gap: 1.25rem; }
  .fatti__elenco dd { flex: 0 0 6.5rem; }
}

@media (min-width: 640px) {
  .fatti__elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fatti__elenco div + div { border-top: 0; border-left: 1px solid var(--filo-tenue); padding-left: clamp(1.25rem, 2.5vw, 2.75rem); }
}

/* ------------------------------------------------------------------
   La casa: tutte le foto in una galleria (stampe sul tavolo, ognuna si ingrandisce),
   cosa trovate in casa, le informazioni utili e il congedo con il sole.
   ------------------------------------------------------------------ */
.corredo__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.corredo .titolo-piano { max-width: 12ch; padding: 1.25rem 0 0 1.25rem; }
.corredo .filo::before { height: min(100%, 7rem); }

.dotazioni {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem clamp(2rem, 4vw, 4rem);
  padding: clamp(1.5rem, 1rem + 2.25vw, 3.25rem);
  background: var(--fondo);
}

.dotazioni > div + div { padding-top: 2rem; border-top: 1px solid var(--filo-tenue); }

.dotazioni h3 {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.2;
}

/* Un tratto di filo giallo prima di ogni gruppo */
.dotazioni h3::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  background: var(--accento-testo);
}

.dotazioni ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; margin-top: 1rem; }

@media (min-width: 640px) {
  .dotazioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dotazioni > div:nth-child(2) { padding-top: 0; border-top: 0; }
}

@media (min-width: 1024px) {
  .corredo__griglia { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
}

/* La galleria: 14 foto dritte (2026-10-14: tolti i doppioni del soggiorno e del letto e le rotazioni).
   Dai 1024px righe centrate alte uguali e larghe quasi uguali: due file di tre orizzontali, poi due
   file con due verticali del bagno fra due orizzontali (l'altezza massima tiene le stesse righe anche
   a 1920). Sotto, una griglia a due colonne: le verticali a coppie, la zona pranzo e l'ingresso larghi.
   Ogni foto è un link alla foto grande: con JavaScript si apre nell'ingrandimento (.lente) */
.galleria { overflow-x: clip; }

.tavolo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ingrandisci { display: block; cursor: zoom-in; }
.ingrandisci:focus-visible { outline-offset: 5px; }

.stampa img { aspect-ratio: 3 / 2; }
/* Proporzioni scritte anche per le verticali: con loading="lazy" lo spazio resta prenotato prima del caricamento */
.tavolo__alta .stampa img { aspect-ratio: 2 / 3; }

@media (max-width: 1023.98px) {
  .tavolo__larga { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .tavolo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 3.5vw, 3.5rem) clamp(1.25rem, 2.25vw, 2.5rem);
  }

  .tavolo li { flex: none; }
  .stampa { height: clamp(12rem, 18.5vw, 16.5rem); transition: scale 700ms var(--molla); }
  .tavolo .stampa img { width: auto; }

  .tavolo li:is(:hover, :focus-within) { position: relative; z-index: 1; }
  .tavolo li:is(:hover, :focus-within) .stampa { scale: 1.03; }
}

/* Ingrandimento: <dialog> a tutto schermo sul fondo scuro (--testo al 92%), creato da sito.js.
   La foto non supera mai la larghezza del suo file (--file, scritta dallo script) né lo schermo */
html.lente-aperta { overflow: hidden; }

.lente {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  border: 0;
  color: var(--fondo);
  background: color-mix(in srgb, var(--testo) 92%, transparent);
  overscroll-behavior: contain;
}
.lente[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "conta . chiudi" "prec foto succ" ". didascalia .";
  gap: 0.75rem;
}
.lente::backdrop { background: transparent; }
.lente :focus-visible { outline-color: var(--fondo); }

.lente__conta { grid-area: conta; align-self: center; font-variant-numeric: tabular-nums; }
.lente__chiudi { grid-area: chiudi; justify-self: end; }
.lente__prec { grid-area: prec; align-self: center; justify-self: start; }
.lente__succ { grid-area: succ; align-self: center; justify-self: end; }
.lente__figura { grid-area: foto; display: flex; align-items: center; justify-content: center; min-height: 0; margin: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.lente__foto {
  width: auto;
  height: auto;
  max-width: min(100%, var(--file, 100%));
  max-height: 100%;
  object-fit: contain;
}
.lente__didascalia { grid-area: didascalia; max-width: 48rem; justify-self: center; text-align: center; text-wrap: pretty; }

.lente__tasto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 1px solid rgb(251 251 249 / 0.45);
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.lente__tasto:hover { background: rgb(251 251 249 / 0.12); }
.lente__chiudi { padding-inline: 1rem; }
.lente__tasto svg { width: 1.25rem; height: 1.25rem; }

@media (max-width: 767.98px) {
  .lente[open] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "conta chiudi" "foto foto" "didascalia didascalia" "prec succ";
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lente[open] { animation: lente-entra 180ms ease-out; }
  .lente__foto { animation: lente-entra 220ms ease-out; }
}

@keyframes lente-entra { from { opacity: 0; } }

/* Informazioni utili: cinque schede di misure diverse, la prima sul giallo */
.info__testa { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }

.schede { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 0.5rem + 1vw, 1.5rem); }

.scheda .lastra__nucleo { padding: clamp(1.5rem, 1rem + 1.75vw, 2.75rem); background: var(--fondo); }
.scheda h3 { font-family: var(--font-titoli); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
.scheda p { max-width: 52ch; margin-top: 0.85rem; }

.scheda--sole .lastra__nucleo { background: var(--sole); color: var(--su-sole); }
.scheda--sole p { font-size: 1.125rem; }

@media (min-width: 768px) {
  .schede { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .scheda:nth-child(1) { grid-column: 1 / 8; }
  .scheda:nth-child(2) { grid-column: 8 / 13; }
  .scheda:nth-child(3) { grid-column: 1 / 6; }
  .scheda:nth-child(4) { grid-column: 6 / 13; }
  .scheda--larga { grid-column: 1 / -1; }
}

/* Congedo: il sole sorge sull'orizzonte, sotto i due pulsanti */
.congedo__cielo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(5rem, 3.5rem + 3.5vw, 6.5rem);
}

.congedo__sole {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: clamp(6rem, 4.5rem + 4vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
  translate: -50% 40%;
}

.congedo__frase {
  max-width: 34ch;
  margin: 2.5rem auto 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 450;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.congedo__terra .azioni { justify-content: center; margin-top: 1.75rem; }

/* ------------------------------------------------------------------
   La storia: il secolo disegnato a filo, la volta incorniciata con la
   scheda del nome (le regole di .storia qui sopra), la ristrutturazione
   con la facciata accanto (le regole di .luogo__coppia di Matera) e il
   rimando alla casa
   ------------------------------------------------------------------ */
.secolo { display: none; }

@media (min-width: 1024px) {
  .secolo {
    display: block;
    justify-self: end;
    font-family: var(--font-titoli);
    font-size: clamp(8rem, 3rem + 7vw, 12rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    padding-right: 0.12em;
    color: rgb(252 204 102 / 0.28);
    -webkit-text-stroke: 1.5px var(--accento-testo);
    user-select: none;
  }

  /* Il numero è un disegno: il testo alternativo vuoto lo toglie ai lettori di schermo */
  .secolo::before { content: "XVII" / ""; }
}

.storia__titolo { font-size: var(--t-h3); }

.storia--pagina .storia__scheda p:not(.vai) {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.65;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .storia--pagina .storia__scheda { grid-column: 1 / 7; }
}

.ristrutturazione .luogo__testo { text-wrap: pretty; }

/* Un filo ocra corto sotto il testo della ristrutturazione: si traccia da sinistra quando arriva in vista */
.frase__segno {
  display: block;
  width: min(9rem, 30%);
  height: 1.5px;
  margin-top: 2rem;
  background: var(--accento-testo);
  transform-origin: 0 50%;
}

.soglia__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.soglia__foto img { aspect-ratio: 3 / 2; }
.soglia__azioni { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; justify-items: start; }

/* La chiusura di La storia: la frase, i pulsanti della richiesta, il link alla casa */
.soglia__frase {
  font-family: var(--font-titoli);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 450;
  line-height: 1.3;
  text-wrap: balance;
}

.freccia--grande > span:first-child {
  font-family: var(--font-titoli);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  padding-bottom: 0.35rem;
}

.freccia--grande .freccia__icona { width: 3rem; height: 3rem; }

@media (min-width: 768px) {
  .soglia__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 6rem); }
  .soglia__foto { rotate: -1.5deg; }
}

/* ------------------------------------------------------------------
   Matera: una foto per luogo, incorniciata come le altre del sito, con
   composizioni diverse: la foto larga sotto il testo (Barisano), foto e
   testo affiancati a lati alterni (Caveoso, Civita, chiese rupestri,
   Castello), la scheda posata sulla foto (Palombaro), la foto accanto
   alle schede (musei), la foto da bordo a bordo (belvedere) e la stampa
   accanto alla lastra pratica (come muoversi). Sotto i 1024px tutto va
   in colonna. Le foto sono in tests/test_foto_matera.py.
   ------------------------------------------------------------------ */
.luogo { overflow-x: clip; isolation: isolate; }

.luogo__testo {
  max-width: 60ch;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.7;
}

/* La foto tiene le proporzioni del file (width e height dell'<img>): non si allunga con la griglia */
.luogo__foto { align-self: center; }
.luogo__foto .lastra__nucleo img { height: auto; }

/* Foto e testo affiancati; la variante --destra mette la foto a destra */
.luogo__coppia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .luogo__coppia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .luogo__coppia--destra { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Il Sasso Barisano: titolo e testo in alto, sotto la foto larga con il filo giallo spostato */
.barisano__testa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(2.5rem, 2rem + 3vw, 5rem);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.barisano__foto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.9rem 0.9rem 0.9rem -0.9rem;
  border: 1.5px solid var(--sole);
}

@media (min-width: 1024px) {
  .barisano__testa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .barisano__testa .luogo__testo { margin-top: 0; font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); }
}

/* La Civita e il Duomo: la foto verticale della Cattedrale, il sole alto a destra */
.civita__stampa {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 100%;
  max-width: 32rem;
  padding: 8% 6% 0 0;
}

.civita__sole {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
}

@media (min-width: 768px) {
  .civita__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

@media (min-width: 1024px) {
  .civita__griglia { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Il Palombaro Lungo: la scheda con titolo e testo posata sull'angolo della foto */
.acqua__palco { display: grid; grid-template-columns: minmax(0, 1fr); }

.acqua__scheda {
  position: relative;
  z-index: 1;
  width: min(100% - 1.5rem, 34rem);
  margin: -3rem 0 0 auto;
}

.acqua__scheda .lastra__nucleo {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--fascia);
}

.acqua__scheda .luogo__testo { margin-top: 1.25rem; }

@media (min-width: 768px) {
  .acqua__palco { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .acqua__foto { grid-column: 1 / 10; grid-row: 1; }
  .acqua__scheda {
    grid-column: 7 / 13;
    grid-row: 1;
    align-self: end;
    width: auto;
    margin: 0 0 -3.5rem;
  }
  /* la scheda scende di 3.5rem sotto la foto: lo stesso spazio si aggiunge sotto */
  .acqua { padding-bottom: calc(var(--sezione) + 3.5rem); }
}

@media (min-width: 1024px) {
  .acqua__foto { grid-column: 1 / 9; }
  .acqua__scheda { grid-column: 7 / 13; }
}

/* I musei: la foto della casa grotta accanto alla sua scheda sul giallo, le altre due sotto */
.musei__titolo { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

.musei__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 0.5rem + 1vw, 1.5rem); }

.musei__scheda .lastra__nucleo {
  display: block;
  height: 100%;
  padding: clamp(1.5rem, 1rem + 1.75vw, 2.75rem);
  background: var(--fondo);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.musei__scheda strong { font-family: var(--font-titoli); font-size: 1.15em; font-weight: 600; }

.musei__scheda--grotta .lastra__nucleo {
  display: flex;
  align-items: flex-end;
  background: var(--sole);
  color: var(--su-sole);
  font-family: var(--font-titoli);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.45;
}

.musei__scheda--grotta strong { font-size: 1em; font-style: italic; }

@media (min-width: 768px) {
  .musei__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .musei__foto,
  .musei__scheda--grotta { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .musei__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .musei__foto { grid-column: 1 / 8; }
  .musei__scheda--grotta { grid-column: 8 / 13; }
  .musei__scheda:not(.musei__scheda--grotta) { grid-column: span 6; }
}

/* Il Castello Tramontano: colonna da racconto, la foto a destra appena ruotata */
.castello__colonna { padding: 1.25rem 0 0 1.25rem; }
.castello .luogo__testo { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem); }
.castello .filo::before { height: min(100%, 8rem); }

@media (min-width: 768px) { .castello__foto { rotate: 2deg; } }
@media (min-width: 1024px) { .castello__griglia { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* Il belvedere sulla Murgia: la foto da bordo a bordo (al massimo larga quanto il file), il testo sotto */
.belvedere__titolo { max-width: 14ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

.belvedere__foto { width: min(100%, 100rem); margin-inline: auto; }

.belvedere__terra .luogo__testo { margin-top: 2.25rem; }

/* Da 1024px il titolo sta su una riga sola: occupa meno spazio sopra la foto */
@media (min-width: 1024px) {
  .belvedere__titolo { max-width: none; }
  .belvedere__terra .luogo__testo { margin-left: 33%; }
}

/* Come muoversi: la stampa del vicolo accanto alla lastra pratica con l'indirizzo */
.muoversi__palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: center;
}

.muoversi__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  background: var(--fondo);
}

.muoversi__indirizzo {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-left: 3px solid var(--sole);
  background: var(--fascia);
}

.muoversi__via { font-family: var(--font-titoli); font-size: 1.4rem; line-height: 1.3; }
.muoversi__indirizzo p + p { margin-top: 0.9rem; }

@media (min-width: 768px) { .muoversi__foto { rotate: -1.5deg; } }
@media (min-width: 1024px) { .muoversi__palco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Invito finale di Matera: la frase grande sotto il filo, i due pulsanti */
.invito__corpo { max-width: 48rem; padding: 1.25rem 0 0 1.25rem; }
.invito .filo::before { height: min(100%, 8rem); }

.invito__frase {
  font-family: var(--font-titoli);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 450;
  line-height: 1.3;
  text-wrap: balance;
}

.invito .azioni { margin-top: 2.25rem; }

@media (min-width: 1024px) { .invito__corpo { margin-left: 8%; } }

/* ------------------------------------------------------------------
   Contatti: il sole sorge dietro il titolo "Contatti", poi il modulo
   "Scriveteci" con la scheda che porta alla pagina Disponibilità, poi i recapiti.
   Disponibilità: il titolo della pagina, poi il modulo di richiesta con
   WhatsApp e la foto del portone accanto
   ------------------------------------------------------------------ */
.chiusura--apertura {
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0 var(--sezione);
}

.chiusura--apertura .chiusura__cielo { min-height: clamp(10rem, 7rem + 7vw, 15rem); }
.chiusura--apertura .testata__intro { max-width: 40ch; margin-inline: auto; }

.richiesta { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: start; }

@media (min-width: 1024px) {
  .richiesta { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 3vw, 3.5rem); }
  .richiesta__lato { position: sticky; top: calc(var(--barra-h) + 2.5rem); }
  .richiesta__foto { rotate: 2deg; }
}

/* Chi arriva su disponibilita.html#richiesta dalla barra della Home vede il modulo sotto la barra */
#richiesta { scroll-margin-top: 1rem; }

/* Disponibilità: il titolo è quello della pagina, il modulo comincia subito con i campi */
.testata--richiesta { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.testata--richiesta .testata__intro { max-width: 40ch; }

/* Il riepilogo della casa accanto al titolo (a destra dal desktop): misure, orari, posizione */
.riepilogo { padding-left: 1.25rem; }
.riepilogo__elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.5rem; }
.riepilogo__elenco > div { padding-top: 0.85rem; border-top: 1.5px solid var(--bordo-forte); }
.riepilogo__elenco dt { font-size: 0.875rem; font-weight: 600; color: var(--testo-tenue); }
.riepilogo__elenco dd {
  margin-top: 0.35rem;
  font-family: var(--font-titoli);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  font-variant-numeric: lining-nums;
  line-height: 1.35;
}
.riepilogo__nota { max-width: 52ch; margin-top: 1.5rem; font-size: 0.975rem; color: var(--testo-tenue); }

@media (min-width: 1024px) {
  .testata--richiesta .testata__griglia { align-items: end; }
  .riepilogo { padding-left: 0; }
}

.richiesta__modulo .lastra__nucleo { padding: clamp(1.25rem, 0.75rem + 2.5vw, 3rem); background: var(--fondo); }

.richiesta__noscript {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accento-testo);
  background: var(--fascia);
  font-weight: 500;
}

.richiesta__campi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

@media (min-width: 640px) {
  .richiesta__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo--largo { grid-column: 1 / -1; }
}

.campo--esca { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

.campo--consenso { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.975rem; }
.campo--consenso input { flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; accent-color: var(--testo); }
.campo--consenso label { font-weight: 500; }

.richiesta__invio { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--filo-tenue); }
.richiesta__nota { max-width: 56ch; margin-top: 1rem; font-size: 0.95rem; color: var(--testo-tenue); }

.richiesta__avviso:not(:empty) {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accento-testo);
  background: var(--fascia);
  font-weight: 500;
}

/* Il modulo su WordPress, con Contact Form 7: stesso aspetto del prototipo. Il CSS del plugin non
   si carica (tema, inc/cf7.php): qui c'è solo quello che serve. Nel prototipo nessuna di queste
   regole trova elementi. */
.richiesta > .wpcf7 { display: contents; }

.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wpcf7 .hidden-fields-container { display: none; }

.wpcf7-form .campo .wpcf7-form-control-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }

/* Consenso: casella ed etichetta affiancate come nel prototipo, l'eventuale errore sotto */
.wpcf7-form .campo--consenso .wpcf7-form-control-wrap,
.wpcf7-form .campo--consenso .wpcf7-acceptance,
.wpcf7-form .campo--consenso .wpcf7-list-item { display: contents; }
.wpcf7-form .campo--consenso:has(.wpcf7-not-valid-tip) { flex-wrap: wrap; }
.wpcf7-form .campo--consenso:has(.wpcf7-not-valid-tip) label { flex: 1 1 0; min-width: 0; }
.wpcf7-form .campo--consenso .wpcf7-not-valid-tip { flex-basis: 100%; order: 1; }

/* Errore di un campo: come il campo non valido del prototipo (bordo tratteggiato) e una riga sotto */
.wpcf7-form .campo .wpcf7-not-valid { border-color: var(--bordo-forte); border-style: dashed; border-width: 2px; }

.wpcf7-not-valid-tip {
  display: block;
  padding-left: 0.6rem;
  border-left: 3px solid var(--accento-testo);
  color: var(--testo);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Esito dell'invio: come l'avviso del prototipo */
.wpcf7 form .wpcf7-response-output:empty { display: none; }

.wpcf7 form .wpcf7-response-output:not(:empty) {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 3px solid var(--accento-testo);
  background: var(--fascia);
  font-weight: 500;
}

/* Durante l'invio il pulsante resta visibile ma non si preme due volte */
.wpcf7-form.submitting .richiesta__invio .tasto { opacity: 0.6; cursor: progress; pointer-events: none; }
.wpcf7-spinner { display: none; }

.richiesta__lato { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.richiesta__foto img { aspect-ratio: 3 / 2; }

.richiesta__whatsapp .lastra__nucleo {
  isolation: isolate;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--fondo);
}

/* Un quarto di sole nell'angolo del riquadro */
.richiesta__whatsapp-sole {
  position: absolute;
  z-index: -1;
  right: -3.5rem;
  top: -3.5rem;
  width: 8.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sole);
}

.richiesta__whatsapp h2 { max-width: 11ch; font-family: var(--font-titoli); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
/* I titoli a misura di h3 scendono sotto i 24 px: la parola in corsivo passa all'ocra scuro (AA del testo normale) */
.richiesta__whatsapp .titolo em { color: var(--accento-piccolo); }
.richiesta__whatsapp p { margin-top: 1rem; }
.richiesta__whatsapp .azioni { margin-top: 1.75rem; }

/* Contatti: il modulo "Scriveteci" (form#contatto, gli stessi campi e lo stesso aspetto del modulo di
   richiesta) e accanto, dal desktop, la scheda che porta a Disponibilità con la foto della facciata */
.contatto-sezione__testa { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.contatto-sezione__testa .sezione__intro { max-width: 52ch; }

/* Chi arriva su contatti.html#contatto vede il modulo sotto la barra */
#contatto { scroll-margin-top: 1rem; }

.invito-richiesta__scheda h2 { max-width: none; }

.recapiti { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem 3rem; }

.recapiti__voce { padding-top: 1.1rem; border-top: 1.5px solid var(--bordo-forte); }
.recapiti dt { font-size: 0.95rem; font-weight: 600; color: var(--testo-tenue); }
.recapiti dd { margin-top: 0.5rem; font-family: var(--font-titoli); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); font-variant-numeric: lining-nums; line-height: 1.4; }
.recapiti__voce--telefono dd { font-size: min(clamp(1.35rem, 1.15rem + 0.6vw, 1.75rem), 9.5vw); font-variant-numeric: lining-nums; line-height: 1.2; }
.recapiti__voce--telefono a { white-space: nowrap; }
.recapiti .collegamento { display: inline-block; margin-top: 0.6rem; font-family: var(--font-testo); font-size: 1rem; }
.recapiti .da-confermare { margin-left: 0; font-family: var(--font-testo); font-size: 0.95rem; }

@media (min-width: 640px) {
  .recapiti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recapiti__voce--telefono { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  /* telefono, Instagram, lingue, email, indirizzo: l'email ha lo spazio per stare su una riga */
  .recapiti { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.2fr); align-items: start; gap: 2.25rem clamp(1.5rem, 2.5vw, 2.5rem); }
  .recapiti__voce--telefono { grid-column: auto; }
  .recapiti__voce--telefono dd { font-size: clamp(1.35rem, 1rem + 0.5vw, 1.6rem); }
  .recapiti a[href^="mailto:"] { white-space: nowrap; }
}

/* ------------------------------------------------------------------
   Privacy: testo lungo e sobrio, titolo a sinistra e testo a destra
   ------------------------------------------------------------------ */
.bozza {
  max-width: 52ch;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accento-testo);
  background: var(--fascia);
  font-weight: 500;
}

.informativa__voce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  border-top: 1px solid var(--filo-tenue);
}

.informativa__titolo {
  font-family: var(--font-titoli);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.prosa { max-width: var(--misura); }
.prosa > * + * { margin-top: 1.1rem; }
.prosa p { font-size: 1.125rem; line-height: 1.75; }

/* Crediti fotografici: una foto per riga, con un tratto ocra davanti come i gruppi della casa */
.crediti { display: grid; gap: 0.9rem; }

.crediti li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.crediti li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 0.7rem;
  height: 1.5px;
  background: var(--accento-testo);
}

@media (min-width: 1024px) {
  .informativa__voce { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .informativa__titolo { position: sticky; top: calc(var(--barra-h) + 2.5rem); align-self: start; }
}

/* ------------------------------------------------------------------
   Piè di pagina e WhatsApp fisso
   ------------------------------------------------------------------ */
/* Il piede: il nome della casa con la richiesta di disponibilità, i recapiti (telefono e WhatsApp,
   email, indirizzo con Google Maps, Instagram), sotto CIN e Privacy. Sul telefono una colonna con i
   recapiti a coppie; dal desktop il nome a sinistra e i recapiti a destra */
.piede {
  padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem) 2rem;
  border-top: 1px solid var(--filo-tenue);
  font-size: 0.95rem;
}

.piede__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}

.piede__marchio { display: grid; justify-items: start; gap: 1rem; }

/* Logo decorativo: disegnato dal CSS, fuori dall'albero di accessibilità */
.piede__logo {
  width: 5.8rem;
  height: 2.75rem;
  background: image-set(url("../img/logo-240.webp") 1x, url("../img/logo-480.webp") 2x) left center / contain no-repeat;
}

.piede__nome { font-family: var(--font-titoli); font-size: 1.125rem; line-height: 1.4; }
.piede__richiesta { margin-top: 0.5rem; }

.piede__recapiti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  align-content: start;
}

.piede__recapiti > div { padding-top: 0.85rem; border-top: 1.5px solid var(--bordo-forte); }
.piede__recapiti dt { font-size: 0.875rem; font-weight: 600; color: var(--testo-tenue); }
.piede__recapiti dd { margin-top: 0.35rem; overflow-wrap: anywhere; }
/* Bersagli comodi anche se i link stanno su una riga sola */
.piede__recapiti a { display: inline-block; padding-block: 0.2rem; }
.piede__recapiti a[href^="tel:"] { white-space: nowrap; font-variant-numeric: lining-nums; }

.piede__fondo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filo-tenue);
  color: var(--testo-tenue);
}

.piede__fondo a { display: inline-block; padding-block: 0.2rem; color: var(--testo); }

@media (min-width: 1024px) {
  .piede__griglia { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 5vw, 6rem); }
  .piede__fondo { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  .piede__recapiti { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.whatsapp-fisso { display: none; }

@media (max-width: 767.98px) {
  /* Spazio in fondo: il pulsante non copre mai l'ultimo contenuto né il piè di pagina */
  body { padding-bottom: calc(var(--whatsapp-h) + 1.75rem + env(safe-area-inset-bottom)); }
  /* Il campo o il link raggiunto con Tab si ferma sopra il pulsante, non sotto */
  html { scroll-padding-bottom: calc(var(--whatsapp-h) + 1.75rem + env(safe-area-inset-bottom)); }

  .whatsapp-fisso {
    position: fixed;
    right: var(--gutter);
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    min-height: var(--whatsapp-h);
    padding: 0 1.35rem;
    background: var(--sole);
    color: var(--su-sole);
    font: 600 1rem/1.2 var(--font-testo);
    text-decoration: none;
    box-shadow: 0 0 0 1px rgb(61 58 54 / 0.1), 0 18px 36px -18px rgb(92 68 30 / 0.6);
    transition: opacity 400ms var(--uscita), transform 500ms var(--molla), visibility 0s linear 0s;
  }

  .whatsapp-fisso:active { transform: scale(0.98); }

  /* Mentre un altro "Scrivi su WhatsApp" è in vista (il JS mette .is-nascosto), questo esce di scena */

  .whatsapp-fisso.is-nascosto {
    opacity: 0;
    transform: translateY(1.25rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 300ms var(--uscita), transform 400ms var(--molla), visibility 0s linear 400ms;
  }
}

/* ------------------------------------------------------------------
   Movimento: solo se l'utente non lo ha ridotto. Senza queste regole
   la pagina è completa e ferma.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Ingresso dell'apertura, solo CSS: non dipende dal JS */
  .titolo--h1 { animation: sale 1100ms var(--molla) 120ms both; }
  .apertura__sottotitolo { animation: sale 1000ms var(--molla) 340ms both; }
  .apertura .azioni { animation: sale 1000ms var(--molla) 440ms both; }
  .apertura .filo::before { animation: traccia 1200ms var(--uscita) 150ms both; }
  .apertura .filo::after { animation: punto 700ms var(--molla) 100ms both; }

  /* Apertura delle pagine interne: lo stesso ingresso della Home. Le foto si posano
     senza dissolvenza, il sole sale; nessuna di queste animazioni usa la trasparenza sulle foto */
  .testata .titolo,
  .chiusura--apertura .titolo { animation: sale 1100ms var(--molla) 120ms both; }
  .testata__intro,
  .testata .bozza { animation: sale 1000ms var(--molla) 340ms both; }
  .chiusura--apertura .azioni { animation: sale 1000ms var(--molla) 440ms both; }
  .testata .filo::before { animation: traccia 1200ms var(--uscita) 150ms both; }
  .testata .filo::after { animation: punto 700ms var(--molla) 100ms both; }
  .coppia__sole,
  .singola__sole { animation: alba 1600ms var(--uscita) 120ms both; }
  .coppia__dietro { animation: posa 1100ms var(--molla) 260ms both; }
  .coppia__davanti,
  .singola__stampa { animation: posa 1200ms var(--molla) 420ms both; }
  .fatti { animation: posa 1100ms var(--molla) 560ms both; }
  .secolo { animation: posa 1400ms var(--molla) 260ms both; }
  .chiusura--apertura .chiusura__sole { animation: alba-orizzonte 1800ms var(--uscita) 100ms both; }

  .coppia .lastra,
  .singola__stampa,
  .castello__foto,
  .muoversi__foto { transition: rotate 700ms var(--molla); }
  .coppia .lastra:hover,
  .singola__stampa:hover,
  .castello__foto:hover,
  .muoversi__foto:hover { rotate: 0deg; }

  /* Comparse allo scorrimento (il JS mette .js-rivela e poi .is-visibile;
     quello che è già in vista al caricamento riceve .is-visibile subito). La transizione solo per
     comparire: su WordPress lo script (defer) arriva dopo il primo disegno e .js-rivela non deve far
     sparire in dissolvenza quello che sta più in basso (axe lo leggeva a metà, con poco contrasto). */
  .js-rivela .rivela {
    opacity: 0;
    transform: translateY(3rem);
  }

  .js-rivela .rivela.is-visibile {
    opacity: 1;
    transform: none;
    transition: opacity 900ms var(--uscita), transform 1100ms var(--molla);
  }

  /* L'orizzonte del congedo si traccia invece di salire */
  .js-rivela .congedo__orizzonte.rivela,
  .js-rivela .frase__segno.rivela { transform: scaleX(0); }
  .js-rivela .congedo__orizzonte.rivela.is-visibile,
  .js-rivela .frase__segno.rivela.is-visibile { transform: none; }
}

/* Il testo sale scoprendosi da una maschera, senza trasparenza: resta sempre a pieno contrasto */
@keyframes sale {
  from { clip-path: inset(-20% -10% 100% -10%); transform: translateY(1.75rem); }
  to { clip-path: inset(-20% -10% -20% -10%); transform: none; }
}

@keyframes posa {
  from { transform: translateY(4rem) scale(0.92); }
}

@keyframes alba {
  from { opacity: 0; transform: translateY(35%) scale(0.72); }
}

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

@keyframes punto {
  from { transform: scale(0); }
}

@keyframes alba-orizzonte {
  from { transform: translateY(55%); }
}

/* Animazioni legate allo scorrimento, dove il browser le supporta */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Le foto sotto il primo schermo sono sempre visibili:
       entrando si assestano nella cornice, senza dissolvenza né maschera */
    .assesta img {
      animation: assesta linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }


    /* Il sole sale dietro l'orizzonte */
    .chiusura__sole,
    .congedo__sole {
      animation: sorge linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /* In Contatti il sole è nel primo schermo: sale al caricamento, non con lo scorrimento */
    .chiusura--apertura .chiusura__sole {
      animation: alba-orizzonte 1800ms var(--uscita) 100ms both;
      animation-timeline: auto;
    }

    /* La storia: una scena composta e completa anche ferma. Entrando, la volta si assesta
       nella cornice e la scheda si posa sopra la foto: piccoli spostamenti, niente vuoti */
    .storia__foto img {
      animation: assesta linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }

    @media (min-width: 768px) {
      .storia__scheda {
        animation: scheda-sale linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }
    }

    /* Il filo sotto la barra compare nei primi pixel di scorrimento */
    .barra::after {
      animation: filo-barra linear both;
      animation-timeline: scroll(root);
      animation-range: 0 2rem;
    }
  }
}

@keyframes sorge {
  from { transform: translateY(45%); }
  to { transform: translateY(-18%); }
}

@keyframes assesta {
  from { scale: 1.14; }
  to { scale: 1; }
}

@keyframes scheda-sale {
  from { transform: translateY(3rem); }
  to { transform: translateY(0); }
}

@keyframes filo-barra {
  from { opacity: 0; }
}

/* In stampa si vede tutto, anche i blocchi non ancora comparsi */
@media print {
  body::after,
  .whatsapp-fisso,
  .barra__menu { display: none !important; }
  body { padding-bottom: 0; }
  .barra { position: static; }
  .js-rivela .rivela { opacity: 1; transform: none; transition: none; }
}