/* =========================================================================
   gregoriotenti.it — sito statico
   Le misure sono a PARITÀ col sito online (rilevate dal DOM di
   gregoriotenti.it il 30 ago 2026, la versione più recente): stessi corpi,
   stesso fondo bianco, stessi telai, stessi stacchi.
   Quello che si aggiunge è ciò che là manca: la testata che resta in alto
   scorrendo, la tendina del menu, e l'impilamento su schermo stretto.
   ========================================================================= */

:root {
  --bianco:   #ffffff;
  /* Arancione: è il FONDO della pagina, non solo il colore dei titoli.
     Si vede nei corridoi fra i riquadri, e da lì viene l'impressione che i
     telai siano aranciati. Verificato col puntamento sul sito online:
     l'elemento visibile a (363,400) ha background rgb(231,83,10). */
  --arancio:  #e7530a;
  --bordo-col:#333333;   /* i telai: 4px solid #333 */
  --nero:     #000000;
  /* Campionato da round.svg: la trama e l'immagine di testata hanno lo stesso
     valore, quindi fra le due non si vede il taglio. */
  --blu:      #0958ec;

  --bordo:    4px;
  --pagina:   10px;   /* margine della griglia */
  --colonne:  5px;    /* fra le colonne */
  --stacco:   5px;    /* fra i riquadri */
  --dentro:   10px;   /* dentro il riquadro */

  --testata:  20px;
  --menu:     16px;   /* la tendina: «sempre scritte più piccole», 26 giu. */
  --titolo:   24px;
  --testo:    16px;
  --bio:      18px;

  /* I corpi delle schede sono quelli dell'allegato del 18 set 2026: titolo e
     casa editrice Arial grassetto 10,5 pt, descrizione Cambria 10 pt. I 10,5
     pt del mockup sono i 24 px del titolo (stessa proporzione fra corpo e
     larghezza di colonna), quindi i 10 pt della descrizione valgono 23 px.
     Per rimpicciolire tutte le descrizioni insieme si tocca solo --scheda. */
  --scheda:   23px;
  /* Cambria non c'è su tutti i computer: Caladea ne ha le stesse misure,
     Georgia è il ripiego che c'è ovunque. */
  --serif:    Cambria, Caladea, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--arancio);
  color: var(--nero);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: var(--testo);
  line-height: 1;        /* l'originale ha interlinea 16px su corpo 16px */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- la griglia: colonne alte quanto lo schermo ---------- */

.griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* la colonna menu è larga come le altre */
  gap: var(--colonne);
  /* Niente margine in basso: le colonne arrivano a filo dello schermo e si
     tagliano lì, così si vede che il contenuto prosegue oltre. */
  padding: var(--pagina) var(--pagina) 0;
  height: 100dvh;
}

/* Ogni colonna scorre per conto suo: è la riga che in Elementor non si ottiene,
   perché il builder impagina tutto nel flusso di pagina. */
.colonna {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--stacco);
}
.colonna::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- testate: come l'originale, ma appiccicate in alto ----------
   Il telaio resta SOLO qui e sul riquadro del marchio: i riquadri dei contenuti
   sono senza bordo. */

.testata {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bianco);
  border: var(--bordo) solid var(--bordo-col);
  padding: 5px;
  display: flex;
  align-items: center;
  flex: none;
}

.testata h2 {
  margin: 0;
  font-size: var(--testata);
  font-weight: 600;
  text-transform: uppercase;
}

/* ---------- riquadri ---------- */

/* Niente telai sui riquadri dei contenuti: i bianchi si staccano da soli sul
   fondo arancione. Le testate di colonna e il riquadro del marchio il bordo
   invece ce l'hanno. */
.riquadro {
  background: var(--bianco);
  padding: var(--dentro);
  flex: none;
}

/* Il reset del primo figlio NON deve toccare .figura: lì il margine negativo
   serve ad agganciare l'immagine al bordo del riquadro, e senza l'esclusione
   questa regola lo annullava lasciando una fascia bianca sotto le testate. */
.riquadro > *:first-child:not(.figura) { margin-top: 0; }
.riquadro > *:last-child  { margin-bottom: 0; }

/* titolo arancio maiuscolo, come l'originale */
.riquadro h3 {
  margin: 8px 0 0;
  font-size: var(--titolo);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--arancio);
}
.riquadro h3 a { color: inherit; text-decoration: none; }
.riquadro h3 a:hover { text-decoration: underline; }

.riquadro p { margin: 4px 0 0; }

/* l'editore ha lo stesso corpo del titolo, ma nero e senza maiuscole */
.editore {
  font-size: var(--titolo);
  font-weight: 700;
  line-height: 1;
  color: var(--nero);
}

/* la descrizione della scheda: Cambria, nera, poco sotto al titolo */
.descrizione {
  font-family: var(--serif);
  font-size: var(--scheda);
  line-height: 1.15;
  color: var(--nero);
}

/* «(ed. with A. Bardin, M. Ferrari, A. Nony)»: sta nel titolo ma è tondo,
   nero e in Cambria, come nel mockup */
.nota {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: none;
  font-size: var(--titolo);
  color: var(--nero);
}

/* l'immagine tocca i bordi del riquadro */
.figura {
  margin: calc(var(--dentro) * -1) calc(var(--dentro) * -1) 0;
}
.figura img { display: block; width: 100%; height: auto; }

.riquadro--immagine { padding: 0; overflow: hidden; }
.riquadro--immagine img { display: block; width: 100%; height: auto; }

/* ---------- colonne a fondo pieno ----------
   L'originale ha tutte le schede bianche: le due classi qui sotto restano
   pronte ma non sono usate. Per accendere una colonna basta scrivere
   "tono": "arancio" (o "scuro") in contenuti.json. */

.colonna--arancio .riquadro { background: var(--arancio); color: var(--bianco); }
.colonna--arancio .riquadro h3,
.colonna--arancio .editore  { color: var(--bianco); }

.colonna--scura .riquadro { background: #1f2124; color: var(--bianco); }
.colonna--scura .riquadro h3 { color: var(--arancio); }
.colonna--scura .editore     { color: var(--bianco); }

/* Nella colonna del menu la bio e l'immagine sono un blocco blu solo: fra le
   due non ci va stacco. Lo stacco resta sotto il riquadro del marchio. */
.colonna--menu { gap: 0; }
.colonna--menu .testata--menu { margin-bottom: var(--stacco); }

/* La colonna del menu porta la trama blu di Tenti.
   La bio sta SOTTO il marchio, in cima alla colonna; l'immagine viene dopo ed
   è lei a tirare fino in fondo allo schermo. */
.colonna--menu .riquadro--bio {
  background: var(--blu) url("media/sfondo-blu.webp") top center / 100% auto no-repeat;
  color: var(--bianco);
  font-size: var(--bio);
  font-weight: 700;               /* «mi piaceva un po' più spesso», 18 set 2026 */
  line-height: 22px;              /* come l'originale: 18px su 22px */
  flex: none;
}

.colonna--menu .riquadro--immagine {
  background: var(--blu);         /* stesso blu dell'immagine: nessun taglio */
  flex: 1 0 auto;                 /* «da far arrivare fino in fondo allo schermo» */
}

/* ---------- marchio + tendina ---------- */

.testata--menu {
  display: block;
  padding: 0;
  border: var(--bordo) solid var(--nero);   /* l'unico telaio che resta */
}

.marchio-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px;
}

.marchio {
  font-weight: 600;
  text-transform: lowercase;       /* «gregorio tenti» minuscolo, a sinistra */
  font-size: var(--testata);
  color: inherit;
  text-decoration: none;
}
a.marchio:hover { text-decoration: underline; }

.strumenti {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lingua {
  font-size: var(--testata);
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  opacity: .55;              /* è la lingua in cui NON stai: sta un passo indietro */
}
.lingua:hover { opacity: 1; text-decoration: underline; }

.apri-menu {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--testata);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  color: inherit;
}
.apri-menu:hover { text-decoration: underline; }

.tendina {
  border-top: var(--bordo) solid var(--bordo-col);
  display: flex;
  flex-direction: column;
}
.tendina[hidden] { display: none; }

.tendina a {                       /* niente descrizioni: solo le voci */
  padding: 5px;
  font-size: var(--menu);          /* un gradino sotto al marchio e a MENU */
  font-weight: 600;                /* come tutto il resto della testata */
  text-transform: uppercase;
  letter-spacing: .01em;
  text-decoration: none;
  border-top: 1px solid rgba(0,0,0,.2);
}
.tendina a:first-child { border-top: 0; }
.tendina a:hover { background: var(--bordo-col); color: var(--bianco); }

/* =========================================================================
   PAGINE INTERNE (bio · links & contact)
   Dai mockup «pagina bio.docx» e «pagina links & contact.docx»: il pannello è
   ARANCIONE, non blu, e il testo è bianco.
   · bio    — i cliccabili (le pubblicazioni) sono neri, bianchi al passaggio;
   · links  — è tutto cliccabile, quindi tutto bianco e nero al passaggio.
   ========================================================================= */

/* Le pagine interne sono tutte arancioni: il testo ci sta sopra direttamente,
   senza pannello. Il riquadro del marchio resta l'unico elemento bianco. */
.griglia--interna { background: var(--arancio); }

/* Il blocco di testo è centrato sulla PAGINA, non nello spazio a destra del
   menu: occupa tutta la griglia e si centra lì dentro. Il riquadro del menu gli
   sta sopra nella stessa cella (z-index) e non si scontrano, perché il blocco
   è più stretto di metà pagina e quindi il menu resta fuori dal suo ingombro. */
.griglia--interna .colonna--testo {
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
}

.griglia--interna .riquadro--pagina {
  /* Poco meno di metà pagina: centrato, l'ingombro si ferma prima del riquadro
     del menu, che occupa il primo quarto. */
  width: 45%;
  max-width: 100%;
  /* Parte un filo sotto il riquadro del menu (alto 38px) invece che alla sua
     stessa quota: così le due cose non si allineano in cima. */
  padding-top: 46px;
}

.griglia--interna .colonna--vuota { background: none; }   /* non serve più: la pagina è già arancione */

.riquadro--tappo { display: none; }

/* Le pagine interne non esistono nell'originale: qui l'interlinea a 1 sarebbe
   illeggibile su paragrafi lunghi, quindi respirano. */
/* Niente pannello: il fondo è la pagina. Restano solo il colore del testo e
   il respiro dell'interlinea, che a 1 sarebbe illeggibile su paragrafi lunghi. */
.riquadro--pagina {
  background: none;
  color: var(--bianco);
  padding: 8px 0 24px;
  line-height: 1.35;
  flex: 1 0 auto;
}

.riquadro--pagina h2 {
  margin: 28px 0 10px;
  font-size: var(--testo);
  font-weight: 700;
  color: var(--bianco);
  text-transform: none;
}

.riquadro--pagina h3 {
  margin: 18px 0 6px;
  font-size: var(--bio);
  font-weight: 400;
  color: var(--bianco);
  text-transform: none;
}

.nome { font-weight: 700; }

/* il primo paragrafo: nero il 18 set 2026, di nuovo bianco il 1 ott 2026
   («sorry»). La classe resta, così il ripensamento successivo è una riga. */
.riquadro--pagina p.primo { color: var(--bianco); }

.riquadro--pagina p { margin: 0 0 8px; }

.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li {
  margin: 0 0 8px;
  padding-left: 34px;
  /* la marca che Tenti ha mandato il 18 set 2026, al posto della lineetta */
  background: url("media/marca-elenco.webp") 0 0.15em / 22px auto no-repeat;
}

/* nero di norma, bianco al passaggio */
.cliccabile { color: var(--nero); text-decoration: none; }
a.cliccabile:hover { color: var(--bianco); }

/* ---------- pagina contatti ----------
   Pagina tutta arancione, il quadrato è un CONTORNO vuoto, le tre scritte sono
   testo bianco appoggiato fuori dai lati:
     la mail                orizzontale, sopra il lato alto
     institutional page     verticale a sinistra, legge dal basso in su  (rot 270°)
     instagram              verticale a destra,   legge dall'alto in giù (rot  90°)
   Ognuna parte appena fuori da uno spigolo e sborda oltre quello opposto: la
   mail verso destra, instagram verso il basso, la pagina istituzionale verso
   l'alto. Prima la mail era centrata, e quindi era l'unica a non sporgere.
   Niente fondo dietro le scritte: il fondo è già la pagina. */

.colonna--contatti {
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.griglia--interna .colonna--menu { grid-column: 1; grid-row: 1; z-index: 2; }

.quadrato {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(42%, 34dvh);
  flex: none;
  background: none;
  border: 1px solid var(--bianco);
}

.contatto {
  position: absolute;
  color: var(--bianco);
  font-size: var(--titolo);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.contatto:hover { text-decoration: underline; }

.contatto--alto {
  bottom: 100%;
  left: -6%;
  margin-bottom: 6px;
}

.contatto--sinistra,
.contatto--destra { writing-mode: vertical-rl; }

.contatto--sinistra {
  right: 100%;
  bottom: -6%;
  margin-right: 6px;
  transform: rotate(180deg);   /* 270°: legge dal basso in su */
}

.contatto--destra {
  left: 100%;
  top: -6%;
  margin-left: 6px;
}

/* ---------- pagina courses ----------
   Uguale alla bio: stesso blocco di testo, stessa larghezza, stesso colore.
   L'immagine di ogni corso è agganciata al fianco destro del blocco e va a
   occupare la colonna che lì resta vuota. */

.riquadro--corsi .corso {
  position: relative;
  margin: 0 0 40px;
}
.riquadro--corsi .corso:last-child { margin-bottom: 0; }

.riquadro--corsi h3 {
  margin: 0 0 8px;
  font-size: var(--bio);
  font-weight: 700;
  text-transform: uppercase;
}
.riquadro--corsi h3 a { color: inherit; text-decoration: none; }
.riquadro--corsi h3 a:hover { text-decoration: underline; }

.figura-corso {
  position: absolute;
  left: 100%;
  top: 0;
  width: 55%;
  margin: 0 0 0 24px;
}
.figura-corso img { display: block; width: 100%; height: auto; }
.figura-corso figcaption {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--bianco);
}

/* ---------- schermi stretti: le colonne si impilano ---------- */

@media (max-width: 900px) {
  .griglia {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
  }
  .griglia--interna .colonna--testo,
  .colonna--contatti { grid-column: auto; }
  /* Su schermo stretto le scritte non hanno dove stare fuori: tornano righe
     dentro il contorno. */
  .quadrato { width: 100%; aspect-ratio: auto; padding: 24px 16px; }
  .contatto { position: static; display: block; padding: 6px 0; margin: 0;
              writing-mode: horizontal-tb; transform: none; }
  .colonna { overflow: visible; }
  /* niente colonna a fianco: l'immagine del corso torna sopra il suo testo */
  .figura-corso { position: static; width: 100%; margin: 0 0 12px; }
  .colonna:not(.colonna--menu) .testata { position: static; }
  .colonna--menu .riquadro--bio,
  .riquadro--tappo { flex: none; }
  .riquadro--tappo { display: none; }
}