/* =========================================================================
   gregoriotenti.it — prototipo statico
   Modello dichiarato da Tenti: antikythera.org.
   Colonne alte quanto lo schermo che scorrono ognuna per conto suo,
   testate appiccicate in alto, bordi squadrati, testo piccolo e addossato.
   ========================================================================= */

:root {
  /* Il blu è campionato da round.svg: la trama e l'immagine di testata
     hanno lo stesso identico valore, quindi non c'è discontinuità. */
  --blu:      #0958ec;
  --arancio:  #e7530a;
  --nero:     #1f2124;
  --bianco:   #ffffff;

  --bordo:    2px;
  --stacco:   3px;    /* riquadri «più vicini tra di loro» */
  --dentro:   7px;    /* testo «più addossato» */

  --testo:    12px;
  --titolo:   12px;
  --testata:  11px;
  --interlinea: 1.25;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nero);
  color: var(--nero);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--testo);
  line-height: var(--interlinea);
  -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(--stacco);
  padding: var(--stacco);
  height: 100dvh;
}

/* Ogni colonna scorre per conto suo. */
.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: strette, appiccicate in alto ---------- */

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

.testata h2 {
  margin: 0;
  font-size: var(--testata);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

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

.riquadro {
  background: var(--bianco);
  border: var(--bordo) solid var(--nero);
  padding: var(--dentro);
  flex: none;
}

.riquadro > *:first-child { margin-top: 0; }
.riquadro > *:last-child  { margin-bottom: 0; }

.riquadro h3 {
  margin: 5px 0 0;
  font-size: var(--titolo);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: .01em;
}
.riquadro h3 a { text-decoration: none; }
.riquadro h3 a:hover { text-decoration: underline; }

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

.editore  { font-weight: 700; }
.nota     { font-weight: 400; text-transform: none; }

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

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

/* ---------- colonne colorate ---------- */

.colonna--arancio .riquadro { background: var(--arancio); color: var(--bianco); }
.colonna--scura   .riquadro { background: var(--nero);    color: var(--bianco); }

/* La colonna del menu porta la trama blu di Tenti: l'immagine di testata
   ha lo stesso fondo, quindi il taglio non si vede. */
.colonna--menu .riquadro--bio {
  background: var(--blu) url("media/sfondo-blu.webp") top center / 100% auto no-repeat;
  color: var(--bianco);
  flex: 1 0 auto;                 /* «da far arrivare fino in fondo allo schermo» */
}

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

.testata--menu { display: block; padding: 0; }

.marchio-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px var(--dentro);
}

.marchio {
  font-weight: 700;
  text-transform: lowercase;       /* «gregorio tenti» minuscolo, a sinistra */
  letter-spacing: .01em;
  font-size: var(--testata);
}

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

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

.tendina a {                       /* niente descrizioni: solo le voci */
  padding: 3px var(--dentro);
  font-size: var(--testata);
  text-decoration: none;
  border-top: 1px solid rgba(0,0,0,.18);
}
.tendina a:first-child { border-top: 0; }
.tendina a:hover { background: var(--nero); color: var(--bianco); }

/* =========================================================================
   PAGINE INTERNE (bio · links & contact)
   Fondo blu, testo bianco. I cliccabili sono neri e diventano bianchi
   al passaggio del cursore.
   ========================================================================= */

.griglia--interna .colonna--testo {
  grid-column: span 2;             /* «larga quanto due colonne + lo spazio in mezzo» */
}

/* La quarta colonna resta libera: la tengo blu invece che nera, così la
   pagina interna legge come un campo blu unico e non come una colonna
   dimenticata. Se Tenti la vuole nera, basta togliere queste due righe. */
.griglia--interna .colonna--vuota {
  background: var(--blu) url("media/sfondo-blu.webp") top center / 100% auto no-repeat;
  border: var(--bordo) solid var(--nero);
}

.riquadro--tappo {
  flex: 1 0 auto;
  background: var(--blu) url("media/sfondo-blu.webp") top center / 100% auto no-repeat;
}

.riquadro--pagina {
  background: var(--blu) url("media/sfondo-blu.webp") top center / 100% auto no-repeat;
  color: var(--bianco);
  padding: 14px 16px;
  flex: 1 0 auto;
}

.riquadro--pagina h1 {
  margin: 0 0 10px;
  font-size: var(--titolo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.riquadro--pagina h2 {
  margin: 20px 0 6px;
  font-size: var(--titolo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.riquadro--pagina h3 {
  margin: 12px 0 3px;
  font-size: var(--titolo);
  font-weight: 700;
}

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

.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { margin: 0 0 3px; }

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

/* «il quadrato è centrato orizzontalmente»: un quadrato vero, non la colonna.
   Occupa le tre colonne a destra del menu e si centra lì dentro. */
.colonna--contatti {
  grid-column: span 3;
  align-items: center;
  justify-content: center;
}
.riquadro--quadrato {
  aspect-ratio: 1 / 1;
  width: min(100%, 62dvh);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.elenco--contatti { text-align: center; }
.elenco--contatti li { margin: 0 0 6px; }

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

@media (max-width: 900px) {
  .griglia {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
  }
  .griglia--interna .colonna--testo { grid-column: auto; }
  .colonna { overflow: visible; }
  .colonna:not(.colonna--menu) .testata { position: static; }
  .colonna--menu .riquadro--bio,
  .riquadro--tappo { flex: none; }
  .riquadro--tappo { display: none; }
}