/* ============================================================================
   SITE — Antonio Tarantino, Lecce
   ----------------------------------------------------------------------------
   Impianto `manifesto` su fondo di marchio (near-black + oro), apertura
   `compatta-con-dati`, respiro `alternato`, forma `morbida`.

   Regola che governa il colore in tutta la pagina: **l'oro va ai titoli e agli
   occhielli, mai al corpo del testo.** Un accento saturo passa il contrasto e
   resta illeggibile a 16px per interi paragrafi.
   ========================================================================= */

/* ——— Tipografia di questa pagina ————————————————————————————————————————— */

/* Cormorant Garamond ha un asse ottico: `none` (base.css) lo blocca sul taglio
   da testo, che a corpo display esce troppo scuro per un serif così sottile.
   Qui il taglio da display è quello giusto — è la ragione per cui il loro
   sito si riconosce a colpo d'occhio — quindi si rimette `auto`. */
h1, h2, h3, h4 {
  font-optical-sizing: auto;
  font-weight: 400;
}

.titolo-manifesto {
  font-size: var(--t-manifesto);
  font-weight: 300;
  line-height: 1.06;
  margin-bottom: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
}

/* Il manifesto pieno vale sui titoli a tutta larghezza. Dentro una colonna di
   metà pagina la stessa misura spezza il titolo una parola per riga — visto a
   schermo: «Non una / poltrona / in fila,». Qui scende di un gradino e resta
   comunque il carattere più grande della sezione. */
.doppia__testo .titolo-manifesto {
  font-size: clamp(2rem, 1.5rem + 2.1vw, 3.25rem);
  line-height: 1.1;
}

/* L'occhiello è l'unico posto dove l'oro tocca un testo piccolo: due parole in
   maiuscoletto spaziato, non un paragrafo. */
.occhiello {
  font-family: var(--font-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 1.25rem;
}

p { max-width: 62ch; }

/* Le interruzioni di riga nei titoli sono composte per una misura larga: sotto
   i 40em il testo va lasciato scorrere, altrimenti si ottengono righe di due
   parole seguite da righe piene. */
@media (max-width: 39.99em) {
  .titolo-manifesto br,
  .chiusura__claim br { display: none; }
}

a { color: inherit; }

.doppia__testo a:not(.pulsante),
.listino__nota a,
.passi__voce a,
.domanda a {
  color: var(--accento);
  text-decoration-color: color-mix(in srgb, var(--accento) 45%, transparent);
}

.doppia__testo a:not(.pulsante):hover,
.listino__nota a:hover,
.passi__voce a:hover,
.domanda a:hover {
  text-decoration-color: currentColor;
}

/* ——— Sezioni e alternanza ———————————————————————————————————————————————— */

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

/* La sezione chiara che spezza il ritmo scuro: stesso meccanismo di
   `.su-scuro` in base.css, all'incontrario. Ri-lega inchiostro, inchiostro
   tenue, accento e anello di focus in un colpo solo, così nessun discendente
   deve ricordarsene. */
.e-chiara {
  background: var(--chiaro-fondo);
  color: var(--chiaro-testo);
  --testo: var(--chiaro-testo);
  --testo-tenue: var(--chiaro-tenue);
  --accento: var(--chiaro-accento);
}

.e-chiara :focus-visible,
.e-chiara:focus-visible { outline-color: var(--chiaro-testo); }

.intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 5rem); }
.intro__testo { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); color: var(--testo-tenue); }

/* ——— Pulsanti — larghi quanto il loro testo ——————————————————————————————— */

.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 3rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--raggio-interattivo);
  font-family: var(--font-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--durata-breve) var(--curva),
              color var(--durata-breve) var(--curva);
}

.pulsante--pieno { background: var(--accento); color: var(--su-accento); }
.pulsante--pieno:hover { background: color-mix(in srgb, var(--accento) 82%, #ffffff); }

.pulsante--vuoto { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.pulsante--vuoto:hover { background: color-mix(in srgb, currentColor 20%, transparent); }

.pulsante--grande { min-height: 3.75rem; padding: 1.1rem 2.5rem; font-size: var(--t-corpo); }

/* ——— Intestazione ———————————————————————————————————————————————————————— */

.intestazione {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px);
  transition: background-color var(--durata) var(--curva);
}

/* Scorrendo, l'intestazione si fa opaca e si stringe: sopra le foto chiare
   della galleria un header semitrasparente perde il contrasto del menu. */
.intestazione.e-scrollata {
  background: color-mix(in srgb, var(--fondo) 96%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--testo) 10%, transparent);
}

.intestazione__interno {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.75rem;
  transition: padding-block var(--durata) var(--curva);
}

.e-scrollata .intestazione__interno { padding-block: 0.4rem; }

/* Il logo è nero su bianco: gli serve la sua placca chiara, come sul loro
   sito. Senza, sparisce nel fondo. */
.marchio {
  display: block;
  flex-shrink: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  background: #ffffff;
  line-height: 0;
}

.marchio__segno { width: 42px; height: auto; }

.menu { display: none; }

.intestazione__cta { display: none; }

.apri-menu {
  margin-left: auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--raggio-interattivo);
  background: color-mix(in srgb, var(--testo) 12%, transparent);
}

.apri-menu__tratto,
.apri-menu__tratto::before,
.apri-menu__tratto::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: var(--testo);
  content: '';
}

.apri-menu__tratto { position: relative; }
.apri-menu__tratto::before { position: absolute; top: -0.4rem; }
.apri-menu__tratto::after { position: absolute; top: 0.4rem; }

/* ——— Pannello menu mobile ———————————————————————————————————————————————— */

.pannello-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--gronda);
  background: var(--fondo);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata) var(--curva), visibility var(--durata);
}

.menu-aperto .pannello-menu { opacity: 1; visibility: visible; }
.menu-aperto { overflow: hidden; }

.pannello-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  margin-bottom: 2rem;
}

.pannello-menu a {
  display: block;
  padding: 0.5rem;
  font-family: var(--font-titoli);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.25rem);
  font-weight: 300;
  text-decoration: none;
}

.pannello-menu a:hover { color: var(--accento); }
.pannello-menu__cta { margin-inline: auto; }

/* ——— 1. Apertura ————————————————————————————————————————————————————————— */

.apertura {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem);
}

/* Livello di fondo della parallasse: una velatura dorata che scorre più lenta
   del contenuto. Decorativa, quindi aria-hidden e nessun testo sopra. */
.apertura__sfondo {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(60% 55% at 78% 18%, color-mix(in srgb, var(--accento) 20%, transparent), transparent 70%),
    radial-gradient(45% 45% at 12% 72%, color-mix(in srgb, var(--accento) 11%, transparent), transparent 70%);
  pointer-events: none;
  will-change: transform;
}

.apertura__interno { position: relative; }

.apertura__claim {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: 1.04;
  margin-bottom: 1.5rem;
}

.apertura__spiega {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  color: var(--testo-tenue);
  margin-bottom: 2rem;
}

.apertura__azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.doppia__testo .apertura__azioni { margin-top: 2.5rem; }

.apertura__figura {
  margin-top: 3rem;
  border-radius: var(--raggio-grande);
  overflow: hidden;
  box-shadow: var(--ombra);
}

.apertura__figura img { width: 100%; height: clamp(20rem, 55vw, 32rem); object-fit: cover; object-position: center 28%; }

/* I dati pratici: superfici piene, nessun bordo — la separazione la fa il
   colore, come chiede la forma `morbida`. */
.dati {
  display: grid;
  gap: 0.6rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.dati__voce {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--raggio);
  background: var(--fondo-alt);
}

.dati__etichetta {
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accento);
}

.dati__valore { line-height: 1.5; }
.dati__valore a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

/* ——— Blocco a due colonne (testo + figura) ——————————————————————————————— */

.doppia { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

.doppia__figura {
  border-radius: var(--raggio-grande);
  overflow: hidden;
  background: var(--fondo-alt);
  will-change: transform;
}

.doppia__figura img { width: 100%; height: clamp(18rem, 60vw, 34rem); object-fit: cover; }

.doppia__figura figcaption {
  padding: 1rem 1.5rem 1.25rem;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

.doppia__testo > p + p { margin-top: 1.25rem; }
.doppia__testo .u-nota { margin-top: 1.75rem; }

/* ——— 3. Servizi ————————————————————————————————————————————————————————— */

.griglia-servizi { display: grid; gap: 1rem; }

.scheda {
  padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  border-radius: var(--raggio);
  background: var(--fondo-alt);
  transition: background-color var(--durata-breve) var(--curva);
}

.sezione--alt .scheda { background: color-mix(in srgb, var(--testo) 6%, transparent); }

.scheda:hover { background: color-mix(in srgb, var(--accento) 12%, var(--fondo-alt)); }

.scheda h3 { font-size: var(--t-h3); margin-bottom: 0.85rem; }
.scheda p { color: var(--testo-tenue); margin: 0; }

/* ——— 4. Listino ————————————————————————————————————————————————————————— */

.listino { display: grid; gap: 0.6rem; max-width: 44rem; }

.listino__voce {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.35rem 1.75rem;
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--chiaro-testo) 7%, transparent);
}

.listino__cosa { font-size: var(--t-h4); font-family: var(--font-titoli); }

.listino__prezzo {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  color: var(--chiaro-accento);
  white-space: nowrap;
}

.listino__nota { margin-top: 2rem; color: var(--testo-tenue); max-width: 44rem; }

/* ——— 7. Prodotti ————————————————————————————————————————————————————————— */

.prodotti { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.prodotti__voce { padding-left: 1.25rem; border-left: 2px solid color-mix(in srgb, var(--accento) 55%, transparent); }
.prodotti dt { font-family: var(--font-titoli); font-size: var(--t-h4); margin-bottom: 0.4rem; }
.prodotti dd { margin: 0; color: var(--testo-tenue); }

.doppia__figura--adesiva img { height: clamp(20rem, 70vw, 38rem); object-fit: cover; }

/* ——— 8. Galleria ———————————————————————————————————————————————————————— */

.galleria { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.galleria li { border-radius: var(--raggio); overflow: hidden; background: var(--fondo); }
/* Nessun hover in scala sull'immagine: la parallasse di site.js le scrive un
   transform inline, che vincerebbe comunque sulla regola CSS lasciandola
   morta. Il segnale di hover lo dà la cornice, che non è animata da GSAP. */
.galleria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.galleria li { transition: box-shadow var(--durata-breve) var(--curva); }
.galleria li:hover { box-shadow: 0 0 0 2px var(--accento); }
.galleria li:first-child { grid-column: span 2; }
.galleria li:first-child img { aspect-ratio: 4 / 3; }

/* ——— 9. Citazione ———————————————————————————————————————————————————————— */

.citazione {
  margin: 2.5rem 0;
  padding: 1.75rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--accento);
}

.citazione p {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  font-style: italic;
  font-weight: 300;
  line-height: 1.34;
  margin-bottom: 0.85rem;
}

.citazione footer { font-size: var(--t-piccolo); color: var(--testo-tenue); }

/* ——— 10. Il Plesso ——————————————————————————————————————————————————————— */

.mondo { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.mondo__figura { border-radius: var(--raggio); overflow: hidden; background: color-mix(in srgb, var(--testo) 6%, transparent); }
.mondo__figura img { width: 100%; height: clamp(16rem, 52vw, 26rem); object-fit: cover; }
.mondo__figura figcaption { padding: 0.9rem 1.35rem 1.15rem; font-size: var(--t-piccolo); color: var(--testo-tenue); }

.luoghi { display: grid; gap: 1rem; }
.luoghi__voce { padding: 1.75rem; border-radius: var(--raggio); background: color-mix(in srgb, var(--testo) 6%, transparent); }
.luoghi__voce h3 { font-size: var(--t-h4); margin-bottom: 0.6rem; color: var(--accento); }
.luoghi__voce p { margin: 0; }
.luoghi__meta { font-size: var(--t-piccolo); color: var(--testo-tenue); margin-top: 0.4rem !important; }

/* ——— 11. Passi ————————————————————————————————————————————————————————— */

.passi { display: grid; gap: 1rem; padding: 0; list-style: none; counter-reset: passo; }

.passi__voce {
  padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  border-radius: var(--raggio);
  background: var(--fondo-alt);
}

.passi__numero {
  display: block;
  font-family: var(--font-titoli);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--accento);
  margin-bottom: 0.75rem;
}

.passi__voce h3 { font-size: var(--t-h4); margin-bottom: 0.6rem; }
.passi__voce p { color: var(--testo-tenue); margin: 0; }

/* ——— 12. Domande ————————————————————————————————————————————————————————— */

.domande { display: grid; gap: 0.6rem; max-width: 52rem; }

.domanda {
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--testo) 6%, transparent);
  overflow: hidden;
}

.domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.75rem;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  cursor: pointer;
  list-style: none;
  transition: color var(--durata-breve) var(--curva);
}

.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:hover { color: var(--accento); }

.domanda summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accento);
  transition: transform var(--durata-breve) var(--curva);
}

.domanda[open] summary::after { transform: rotate(45deg); }
.domanda p { padding: 0 1.75rem 1.6rem; color: var(--testo-tenue); margin: 0; }

/* ——— 13. Contatti e mappa ———————————————————————————————————————————————— */

.contatti { display: grid; gap: 1.25rem; margin: 2.5rem 0 0; }

.contatti li { display: flex; flex-direction: column; gap: 0.15rem; }

.contatti__etichetta {
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accento);
}

.contatti__valore { font-family: var(--font-titoli); font-size: var(--t-h3); text-decoration: none; }
.contatti__valore--email { font-size: var(--t-h4); word-break: break-word; }
a.contatti__valore:hover { color: var(--accento); }
.contatti__nota { font-size: var(--t-piccolo); color: var(--testo-tenue); }

.mappa { border-radius: var(--raggio-grande); overflow: hidden; background: var(--fondo-alt); }
.mappa iframe { display: block; width: 100%; height: clamp(20rem, 55vw, 30rem); border: 0; filter: grayscale(1) invert(0.92) contrast(0.86); }

/* ——— Chiusura ———————————————————————————————————————————————————————————— */

.chiusura { background: var(--fondo-alt); text-align: center; }
.chiusura__interno { display: flex; flex-direction: column; align-items: center; }

.chiusura__claim {
  font-family: var(--font-titoli);
  font-size: var(--t-manifesto);
  font-weight: 300;
  line-height: 1.06;
  max-width: 20ch;
  margin-bottom: 2.5rem;
}

.chiusura__nota { margin-top: 1.75rem; font-size: var(--t-piccolo); color: var(--testo-tenue); }

/* ——— Piede ——————————————————————————————————————————————————————————————— */

.piede { background: #0a0a0a; padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) 2rem; }
.piede__interno { display: grid; gap: 2.5rem; }
.piede__marchio { width: fit-content; padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: #ffffff; line-height: 0; }
.piede__marchio img { width: 56px; height: auto; }
.piede__titolo { font-size: var(--t-h4); margin-bottom: 1rem; }
.piede__indirizzo { font-style: normal; line-height: 1.9; }
.piede__meta { margin-top: 1rem; font-size: var(--t-piccolo); color: var(--testo-tenue); }
.piede__elenco { display: grid; gap: 0.5rem; }
.piede__elenco a { text-decoration: none; color: var(--testo-tenue); transition: color var(--durata-breve) var(--curva); }
.piede__elenco a:hover { color: var(--su-scuro); }
.piede__coda { margin-top: 3rem; color: var(--testo-tenue); }

/* ——— Da 640px ———————————————————————————————————————————————————————————— */

@media (min-width: 40em) {
  .dati { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .griglia-servizi { grid-template-columns: repeat(2, 1fr); }
  .luoghi { grid-template-columns: repeat(2, 1fr); }
  .passi { grid-template-columns: repeat(2, 1fr); }
  .mondo { grid-template-columns: repeat(2, 1fr); }
  .galleria { grid-template-columns: repeat(3, 1fr); }
  .galleria li:first-child { grid-column: span 3; }
  .piede__interno { grid-template-columns: auto 1fr 1fr 1fr; gap: 3rem; }
}

/* ——— Da 60em: desktop ———————————————————————————————————————————————————— */

@media (min-width: 60em) {
  .menu {
    display: flex;
    gap: 1.6rem;
    margin-left: 2rem;
  }

  .menu a {
    font-size: var(--t-piccolo);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--durata-breve) var(--curva);
  }

  .menu a:hover { color: var(--accento); }

  .intestazione__cta { display: inline-flex; margin-left: auto; }
  .apri-menu { display: none; }

  .apertura { padding-block: clamp(4rem, 2rem + 6vw, 7rem) clamp(4rem, 2rem + 5vw, 7rem); }

  .apertura__interno {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(3rem, 2rem + 4vw, 5.5rem);
  }

  .apertura__figura { margin-top: 0; }
  .apertura__figura img { height: clamp(26rem, 42vw, 36rem); }

  .dati { grid-template-columns: repeat(4, 1fr); }

  .doppia { grid-template-columns: 1fr 1fr; align-items: center; }
  .doppia--rovescia .doppia__figura { order: -1; }
  .doppia__figura img { height: clamp(26rem, 40vw, 38rem); }

  /* Listino: titolo e prezzi affiancati. Impilati, lasciavano vuota tutta la
     metà destra della sezione chiara — l'aria dell'impianto `manifesto` è
     attorno al contenuto, non un mezzo schermo bianco di fianco. */
  .e-chiara .u-contenitore {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: clamp(3rem, 2rem + 4vw, 5.5rem);
  }

  .e-chiara .intro { grid-column: 1; margin-bottom: 2rem; }
  .e-chiara .listino { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
  .e-chiara .listino__nota { grid-column: 1; margin-top: 0; }

  .griglia-servizi { grid-template-columns: repeat(3, 1fr); }
  .griglia-servizi--tre { grid-template-columns: repeat(3, 1fr); }
  .luoghi { grid-template-columns: repeat(4, 1fr); }
  .passi { grid-template-columns: repeat(4, 1fr); }
  .galleria li:first-child { grid-column: span 2; }
  .galleria li:first-child img { aspect-ratio: 3 / 4; }
}

/* ——— Movimento ridotto ——————————————————————————————————————————————————
   Ogni animazione di site.js ha qui il suo ramo: la parallasse non parte, i
   livelli restano dove sono, e la pagina resta interamente leggibile. */

@media (prefers-reduced-motion: reduce) {
  .apertura__sfondo,
  .doppia__figura,
  .galleria img { transform: none !important; }

  .galleria li:hover img { transform: none; }
  .intestazione { backdrop-filter: none; }
}