/* ============================================================================
   SITE — il CSS di Salentauto
   ----------------------------------------------------------------------------
   Impianto: diagonale — ogni sezione porta un taglio in ::before (mai sul
   contenuto vero: il testo non rischia mai di finire tagliato), le sezioni
   alternano il verso del taglio e sfalsano allineamento/immagine da una
   all'altra. Apertura: oggetto-in-evidenza — un solo soggetto, fondo tenuto
   pulito. Movimento: riservato — solo reveal (app.js) e hover, qui sotto.
   Respiro: alternato — .s-densa / .s-vuota, definite in tokens.css. Forma:
   spigolo — --raggio è 0 ovunque, bordi netti da un pixel, nessuna pillola.
   ========================================================================= */

/* ——— Respiro alternato ———————————————————————————————————————————————————
   Dense e quasi vuote si alternano: il vuoto dà peso a quello che viene
   dopo. Il taglio diagonale vive in un ::before dietro il contenuto
   (z-index negativo): la sezione mantiene il suo padding normale, quindi il
   testo non è mai a rischio di finire dentro l'area tagliata. */

.s-densa { padding-block: calc(var(--spazio-sezione) * 0.85); }
.s-vuota { padding-block: var(--spazio-sezione-vuota); }

#chi-siamo, #noleggio, #officina, #domande, #contatti { position: relative; isolation: isolate; }
#chi-siamo::before, #noleggio::before, #officina::before, #domande::before, #contatti::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fondo-alt);
  clip-path: polygon(0 0, 100% var(--taglio), 100% 100%, 0 calc(100% - var(--taglio)));
  z-index: -1;
}
#noleggio::before, #domande::before {
  clip-path: polygon(0 var(--taglio), 100% 0, 100% calc(100% - var(--taglio)), 0 100%);
}

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

header[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fondo);
  border-bottom: var(--bordo-spessore) solid var(--bordo);
}

.intestazione {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  padding-block: 0.85rem;
}

.marchio {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  margin-right: auto;
  text-decoration: none;
}

.marchio__nome {
  font-family: var(--font-titoli);
  font-weight: 600;
  font-style: italic;
  font-size: var(--t-h4);
  letter-spacing: var(--spaziatura-titoli);
}

.marchio__nota {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-desktop { display: none; }

.nav-desktop ul {
  display: flex;
  gap: 1.5rem;
  font-size: var(--t-piccolo);
  letter-spacing: 0.02em;
}

.nav-desktop a {
  display: inline-block;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: var(--bordo-spessore) solid transparent;
  transition: border-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}

.nav-desktop a:hover {
  border-color: var(--accento);
  color: var(--accento);
}

.intestazione__chiama { display: none; }

[data-menu-toggle] {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--testo);
}

@media (min-width: 56rem) {
  .nav-desktop,
  .intestazione__chiama {
    display: flex;
  }

  [data-menu-toggle] {
    display: none;
  }
}

/* ——— Chiamata fissa (mobile) ——————————————————————————————————————————— */

.chiamata-fissa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  background: var(--accento);
  color: var(--su-accento);
  border-top: 3px solid var(--su-accento);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-piccolo);
  letter-spacing: 0.02em;
}

@media (min-width: 56rem) {
  .chiamata-fissa { display: none; }
}

@media (max-width: 55.99rem) {
  footer { padding-bottom: 4.5rem; }
}

/* ——— Menu mobile ———————————————————————————————————————————————————————— */

#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--fondo-alt);
  color: var(--testo);
  border-top: 3px solid var(--accento);
  padding: calc(1rem + 44px) var(--gronda) 2rem;
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
  transition: opacity var(--durata) var(--curva), transform var(--durata) var(--curva);
  overflow-y: auto;
}

html.menu-aperto #menu-mobile {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#menu-mobile ul {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

#menu-mobile a {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  text-decoration: none;
}

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

@media (min-width: 56rem) {
  #menu-mobile { display: none; }
}

/* ——— Pulsanti — spigolo: rettangolari, mai a pillola ——————————————————— */

.pulsante {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  font-weight: 700;
  text-decoration: none;
  border: var(--bordo-spessore) solid currentColor;
  border-radius: var(--raggio);
  min-height: 44px;
  cursor: pointer;
  transition: transform var(--durata-breve) var(--curva), background var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}

.pulsante--accento {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
}

.pulsante--accento:hover { transform: translate(2px, -2px); }

.pulsante--linea {
  background: transparent;
  border-color: var(--bordo);
  color: var(--testo);
}

.pulsante--linea:hover {
  border-color: var(--accento);
  color: var(--accento);
}

/* Chip pieno chiaro, per stare su un fondo scuro/accento senza sparire. */
.pulsante--chiaro {
  background: var(--testo);
  border-color: var(--testo);
  color: var(--fondo);
}

.pulsante--chiaro:hover { transform: translate(2px, -2px); }

/* ——— Apertura — oggetto-in-evidenza ————————————————————————————————————
   Un solo soggetto (l'auto) su fondo pulito, in un riquadro con lo spigolo
   tagliato in diagonale. Colonna testo e colonna oggetto non sono mai a
   metà: la colonna testo comanda. */

.s-apertura {
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: var(--spazio-sezione);
  overflow: hidden;
}

.s-apertura__scena {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.s-apertura__testo {
  padding-inline: var(--gronda);
}

.s-apertura__testo h1 {
  max-width: 16ch;
  margin-bottom: var(--spazio-blocco);
  font-style: italic;
}

.s-apertura__testo > p.u-lettura {
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-blocco);
}

.s-apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.s-apertura__oggetto {
  position: relative;
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%);
  border: var(--bordo-spessore) solid var(--bordo);
}

.s-apertura__oggetto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.s-apertura__dati {
  margin-top: clamp(-2.5rem, -1rem - 2vw, -1rem);
  margin-inline: var(--gronda);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bordo-spessore);
  background: var(--bordo);
  border: var(--bordo-spessore) solid var(--bordo);
}

.s-apertura__dato {
  background: var(--fondo-alt);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}

.s-apertura__dato--accento {
  border-left: 3px solid var(--accento);
}

.s-apertura__dato-etichetta {
  font-size: var(--t-piccolo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--testo-tenue);
}

.s-apertura__dato-valore {
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
}

.s-apertura__dato--accento .pulsante {
  align-self: flex-start;
  padding: 0.45rem 1rem;
  min-height: auto;
  font-size: var(--t-h4);
  margin-top: 0.1rem;
}

@media (min-width: 64rem) {
  .s-apertura__scena {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }

  .s-apertura__oggetto {
    margin-right: calc(var(--gronda) * -1);
  }

  /* Sopra i 64rem testo e immagine stanno affiancati: un margine negativo
     qui rischierebbe di coprire i pulsanti sotto il testo (colonna più alta
     dell'immagine centrata). La sovrapposizione resta solo sotto i 64rem,
     dove i dati seguono davvero il bordo dell'immagine (vedi sopra). */
  .s-apertura__dati {
    grid-template-columns: repeat(4, 1fr);
    margin-inline: var(--gronda);
    margin-top: var(--spazio-blocco);
  }
}

/* ——— Chi siamo — testo dominante, numero sfalsato in basso ——————————————— */

.s-chi-siamo__griglia {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.s-chi-siamo__fatti {
  display: grid;
  gap: 0.65rem;
  margin-top: var(--spazio-blocco);
  padding-top: var(--spazio-blocco);
  border-top: var(--bordo-spessore) solid var(--bordo);
}

.s-chi-siamo__fatti li {
  padding-left: 1.3rem;
  position: relative;
  color: var(--testo-tenue);
}

.s-chi-siamo__fatti li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accento);
}

.s-chi-siamo__numero {
  border: var(--bordo-spessore) solid var(--bordo);
  background: var(--fondo);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-self: start;
}

.s-chi-siamo__numero-cifra {
  font-family: var(--font-titoli);
  font-style: italic;
  font-weight: 600;
  color: var(--accento);
  font-size: clamp(3.5rem, 3rem + 3vw, 5.5rem);
  line-height: 0.9;
}

.s-chi-siamo__numero-nota {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (min-width: 56rem) {
  .s-chi-siamo__griglia {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .s-chi-siamo__numero {
    margin-bottom: -3.5rem;
    margin-right: -1.5rem;
  }
}

/* ——— Vendita — oggetto a sinistra (si sfalsa rispetto a chi-siamo) ——————— */

.s-vendita__griglia {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.s-vendita__oggetto {
  clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%);
  border: var(--bordo-spessore) solid var(--bordo);
}

.s-vendita__oggetto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 56rem) {
  .s-vendita__griglia {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* ——— Noleggio — tag + processo, sfalsati ————————————————————————————————— */

.s-noleggio__griglia {
  display: grid;
  gap: clamp(2rem, 3vw, 2.5rem);
}

.tag-pillole {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tag-pillole li {
  background: var(--fondo);
  border: var(--bordo-spessore) solid var(--bordo);
  padding: 0.5rem 1rem;
  font-size: var(--t-piccolo);
  font-weight: 500;
}

.s-noleggio__processo {
  display: grid;
  gap: 1.1rem;
  border-left: 3px solid var(--accento);
  padding-left: clamp(1.25rem, 2vw, 2rem);
}

.s-noleggio__processo li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-weight: 600;
}

.s-noleggio__num {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: var(--t-h3);
  color: var(--accento);
  line-height: 1;
}

@media (min-width: 56rem) {
  .s-noleggio__griglia {
    grid-template-columns: 1fr 0.85fr;
  }

  .s-noleggio__processo {
    margin-top: 2.5rem;
  }
}

/* ——— Impegno — la sola superficie ad accento pieno ——————————————————————
   Nessuna texture animata: il movimento assegnato è riservato, non c'è
   nient'altro da muovere qui. Il taglio diagonale basta a farla notare. */

.s-impegno {
  position: relative;
  isolation: isolate;
  background: var(--accento);
  color: var(--su-accento);
  text-align: center;
  padding-block: var(--spazio-sezione);
  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
  margin-block: clamp(1rem, 2vw, 2rem);
}

.s-impegno__testo {
  font-family: var(--font-titoli);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--spaziatura-titoli);
  max-width: 24ch;
  margin-inline: auto;
}

/* ——— Officina — elenco sfalsato, senza scorrimento ——————————————————————
   Il movimento assegnato è riservato: niente più pin orizzontale. Ogni
   scheda si alterna a sinistra/destra, con un rientro che cambia da una
   all'altra — è il "diagonale" che si legge in una lista verticale. */

.s-officina__intro {
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.s-officina__elenco {
  display: grid;
  gap: var(--bordo-spessore);
  background: var(--bordo);
  border: var(--bordo-spessore) solid var(--bordo);
}

.scheda-reparto {
  background: var(--fondo);
  padding: clamp(1.5rem, 2.5vw, 2.5rem) var(--gronda);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.scheda-reparto--immagine {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.scheda-reparto--immagine img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--bordo-spessore) solid var(--bordo);
}

/* .u-nota è inline-flex, ma come figlio diretto di un contenitore grid/flex
   si allarga per riempire la colonna (stretch di default) — qui e nel dato
   "Adesso" dell'apertura, sotto: risultato una barra piena invece di una
   pillola, scoperto a schermo. */
.scheda-reparto .u-nota,
.s-apertura__dato .u-nota {
  justify-self: start;
  align-self: start;
}

.lista-fatti {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.lista-fatti li {
  padding-left: 1.1rem;
  position: relative;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

.lista-fatti li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--accento);
}

@media (min-width: 56rem) {
  .scheda-reparto--immagine {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }

  .scheda-reparto:nth-child(even) {
    padding-left: calc(var(--gronda) + 4rem);
  }

  .scheda-reparto:nth-child(odd) {
    padding-right: calc(var(--gronda) + 4rem);
  }
}

/* ——— Partner — testo che sconfina sopra la griglia ——————————————————————— */

.s-partner__griglia { position: relative; }

.griglia-partner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bordo-spessore);
  margin-top: clamp(2rem, 3vw, 3rem);
  background: var(--bordo);
  border: var(--bordo-spessore) solid var(--bordo);
}

.griglia-partner li {
  padding: 1.75rem 1.5rem;
  font-family: var(--font-titoli);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-h4);
  background: var(--fondo-alt);
  display: flex;
  align-items: center;
}

@media (min-width: 48rem) {
  .griglia-partner { grid-template-columns: repeat(4, 1fr); }
}

/* ——— Domande frequenti ———————————————————————————————————————————————— */

details {
  border-bottom: var(--bordo-spessore) solid var(--bordo);
  padding-block: 1.1rem;
}

summary {
  cursor: pointer;
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: var(--t-h4);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: '+';
  font-size: 1.5em;
  color: var(--accento);
  flex-shrink: 0;
  transition: transform var(--durata-breve) var(--curva);
}

details[open] summary::after {
  content: '−';
}

summary:hover { color: var(--accento); }

details p {
  padding-top: 0.65rem;
  color: var(--testo-tenue);
}

/* ——— Dove siamo — indirizzo e tabella sfalsati ——————————————————————————— */

.s-dove__griglia {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.s-dove__testo address {
  font-style: normal;
  font-size: var(--t-h3);
  font-family: var(--font-titoli);
  margin-bottom: var(--spazio-blocco);
}

.tabella-orari {
  width: 100%;
  border-collapse: collapse;
  border: var(--bordo-spessore) solid var(--bordo);
  background: var(--fondo-alt);
}

.tabella-orari th,
.tabella-orari td {
  text-align: left;
  padding: 0.85rem 1.25rem;
  border-bottom: var(--bordo-spessore) solid var(--bordo);
  font-weight: 400;
}

.tabella-orari th {
  color: var(--testo-tenue);
  font-weight: 600;
}

.tabella-orari tr:last-child th,
.tabella-orari tr:last-child td { border-bottom: none; }

@media (min-width: 56rem) {
  .s-dove__griglia {
    grid-template-columns: 1fr 1fr;
  }

  .tabella-orari {
    margin-top: 3rem;
  }
}

/* ——— Contatti (chiusura) — blocco e riquadro sfalsati ———————————————————— */

.s-contatti__griglia {
  display: grid;
  gap: var(--bordo-spessore);
  background: var(--bordo);
  border: var(--bordo-spessore) solid var(--bordo);
}

.s-contatti__blocco,
.s-contatti__scrivete {
  background: var(--fondo-alt);
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--gronda);
}

.s-contatti__blocco p {
  color: var(--testo-tenue);
  max-width: 32ch;
  margin-bottom: var(--spazio-blocco);
}

.s-contatti__telefono {
  font-size: var(--t-h4);
  padding: 1rem 2rem;
}

.s-contatti__scrivete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.s-contatti__etichetta {
  font-size: var(--t-piccolo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-tenue);
}

.s-contatti__email {
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  text-decoration: none;
  border-bottom: var(--bordo-spessore) solid transparent;
  align-self: flex-start;
}

.s-contatti__email:hover { border-color: var(--accento); }

@media (min-width: 56rem) {
  .s-contatti__griglia {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* ——— Footer ———————————————————————————————————————————————————————————— */

footer {
  border-top: var(--bordo-spessore) solid var(--bordo);
  background: var(--fondo);
}

.piede {
  display: grid;
  gap: 1.5rem;
  padding-block: var(--spazio-blocco);
}

.piede address {
  font-style: normal;
  color: var(--testo-tenue);
}

.piede a { text-decoration: none; }

.piede__social { display: flex; gap: 0.75rem; }

.piede__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--bordo-spessore) solid var(--bordo);
  transition: border-color var(--durata-breve) var(--curva), background var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}

.piede__social a:hover {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
}

@media (min-width: 48rem) {
  .piede {
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }
}