/* Scuola Fatoma — struttura del sito: header con menu, footer, banda finale e componenti delle pagine interne (stile A).
   Scala spazi: 8 · 16 · 24 · 32 · 48 · 64 · 96. Titoli Alte Haas, testo Neuton, interfaccia Familjen. */

/* ---------- header ---------- */
.site-head { position: relative; z-index: 30; }
.site-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 16px; }
.site-head .logo { justify-self: start; }
.site-head .logo { display: inline-flex; }
.site-head .logo img { height: 34px; width: auto; }
.menu { display: flex; justify-content: center; gap: 24px; font-family: var(--f-display); font-size: 16px; line-height: 1.2; }
/* una sola linea per hover e pagina attiva: il bordo inferiore (annulla la sottolineatura di base.css) */
.site-head .menu a, .site-head .menu a:hover { text-decoration: none; }
.menu a { padding-block: 8px; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.site-head .menu a:hover { border-bottom-color: currentColor; }
.menu a[aria-current="page"] { border-bottom-color: currentColor; }
.menu .menu-dona { display: none; }
.azioni { display: flex; align-items: center; gap: 8px; justify-self: end; }
.burger { display: none; min-height: 40px; padding: 6px 16px; border-radius: var(--r-pill); border: 1.5px solid currentColor; background: transparent; font-family: var(--f-display); font-size: 16px; line-height: 1; cursor: pointer; color: inherit; }
.site-head.on-dark .logo img { filter: invert(1); }
.site-head.on-dark { color: var(--crema); }

@media (max-width: 1080px) {
  .site-head .wrap { grid-template-columns: auto minmax(0, 1fr); }
  .burger { display: inline-flex; align-items: center; }
  .menu { display: none; }
  .site-head.aperto .menu {
    display: grid; justify-content: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--crema); color: var(--nero); border-bottom: 1.5px solid var(--nero);
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
    font-size: 26px; box-shadow: 0 24px 32px -24px rgba(0,0,0,.25);
  }
  .site-head.aperto .menu a { padding-block: 14px; border-bottom: 1px solid var(--linea); }
  /* nel menu da telefono il bordo è il divisore tra le voci: hover e pagina attiva usano solo la sottolineatura */
  .site-head.aperto .menu a:hover, .site-head.aperto .menu a[aria-current="page"] { border-bottom-color: var(--linea); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
  .site-head.aperto .menu .menu-dona:hover { text-decoration: none; background: var(--giallo-forte); }
  .site-head.aperto .menu .menu-dona { display: block; margin-top: 16px; border: 0; text-align: center; background: var(--giallo); border: 1.5px solid var(--nero) !important; border-radius: var(--r-pill); font-size: 20px; padding: 12px; }
}
@media (max-width: 420px) {
  .azioni .btn { display: none; }
}

/* ---------- testata delle pagine interne (stile A) ---------- */
.intro { background: var(--giallo); border-bottom: 1.5px solid var(--nero); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; padding-block: 48px 64px; }
.intro-testo { display: grid; gap: 24px; align-content: start; }
.kicker { font-family: var(--f-testo); font-size: 22px; line-height: 1.3; }
.intro h1 { font-size: clamp(48px, 6.4vw, 96px); line-height: .95; letter-spacing: -0.045em; max-width: 14ch; }
.intro .lead { font-size: 21px; line-height: 1.45; max-width: 44ch; text-wrap: pretty; }
.intro-foto { margin: 0; display: grid; gap: 8px; }
.intro-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1.5px solid var(--nero); }
.intro-foto figcaption { font-family: var(--f-ui); font-size: 14px; line-height: 1.4; color: var(--grafite); }

/* ---------- sezioni ---------- */
.sez { padding-block: 96px; }
.sez + .sez { padding-top: 0; }
.sez.carta { background: var(--carta); padding-top: 96px; border-block: 1px solid var(--linea); }
.sez.carta + .sez { padding-top: 96px; }
.sez-testa { display: grid; gap: 16px; margin-bottom: 48px; }
.sez h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
.sez .lead { font-size: 21px; line-height: 1.45; max-width: 56ch; text-wrap: pretty; }
.testo-lungo { display: grid; gap: 24px; max-width: 64ch; }
.testo-lungo p { font-size: 20px; line-height: 1.55; text-wrap: pretty; }
.due-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }

/* elenco a righe (come "Cosa compri con il tuo tempo") */
.righe-a { display: grid; border-top: 1.5px solid var(--nero); }
.righe-a > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding-block: 24px; border-bottom: 1px solid var(--linea); align-items: baseline; }
.righe-a .t { font-family: var(--f-display); font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.righe-a .t small { display: block; font-family: var(--f-ui); font-size: 15px; letter-spacing: 0; margin-top: 8px; color: var(--grafite); }
.righe-a p { font-size: 19px; line-height: 1.5; max-width: 60ch; }

/* schede con bordo */
.schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.schede.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scheda { border: 1.5px solid var(--nero); border-radius: 18px; background: var(--carta); padding: 24px; display: grid; gap: 12px; align-content: start; }
.scheda h3 { font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; }
.scheda .quando { font-family: var(--f-display); font-size: 18px; line-height: 1.3; }
.scheda p { font-family: var(--f-ui); font-size: 15px; line-height: 1.5; color: var(--grafite); }
.scheda .btn { justify-self: start; }

/* griglie di foto */
.foto-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.foto-griglia.sei { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.foto-griglia figure { margin: 0; display: grid; gap: 8px; align-content: start; }
.foto-griglia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.foto-griglia figcaption { font-family: var(--f-ui); font-size: 15px; line-height: 1.35; color: var(--grafite); }
.foto-griglia figcaption b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--nero); }

/* banda nera */
.banda-nera { background: var(--nero); color: var(--crema); }
.banda-nera .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 96px; }
.banda-nera h2 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.035em; }
.banda-nera p { font-size: 20px; line-height: 1.5; margin-top: 24px; max-width: 42ch; }
.banda-nera img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }

/* domande */
.faq { display: grid; border-top: 1.5px solid var(--nero); max-width: 840px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { font-family: var(--f-display); font-size: 22px; line-height: 1.3; cursor: pointer; padding-block: 20px; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 28px; line-height: 1; text-align: center; }
.faq details[open] summary::after { content: "–"; }
.faq details p { font-size: 19px; line-height: 1.55; max-width: 62ch; padding-bottom: 24px; }

/* copia */
.copia-riga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.copia-riga code { font-family: var(--f-ui); font-size: 17px; background: #F1F3E3; border-radius: 8px; padding: 8px 12px; word-break: break-all; }

/* banda finale */
.cta-band { background: var(--giallo); border-top: 1.5px solid var(--nero); }
.cta-band .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; padding-block: 64px; }
.cta-band h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.025em; max-width: 22ch; }
.cta-band p { font-size: 20px; line-height: 1.45; margin-top: 16px; max-width: 46ch; }

/* ---------- footer ---------- */
.piede { background: var(--nero); color: var(--crema); font-family: var(--f-ui); font-size: 15px; line-height: 1.5; }
.piede a { color: var(--crema); text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-block: 64px 48px; }
.piede-id { display: grid; gap: 16px; align-content: start; }
.piede-id img { height: 36px; width: auto; filter: invert(1); }
.piede-id p { max-width: 32ch; color: rgba(251,255,241,.8); }
.piede h2 { font-family: var(--f-display); font-size: 17px; line-height: 1.2; letter-spacing: 0; margin-bottom: 16px; color: var(--giallo); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.piede li a { display: inline-block; padding-block: 4px; }
.piede dl { margin: 0; display: grid; gap: 12px; }
.piede dt { color: rgba(251,255,241,.65); font-size: 13px; }
.piede dd { margin: 0; word-break: break-all; }
.piede-fondo { border-top: 1px solid rgba(251,255,241,.2); }
.piede-fondo .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 24px; font-size: 14px; color: rgba(251,255,241,.7); }
.piede-fondo nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (max-width: 980px) {
  .intro-grid, .due-col, .banda-nera .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .intro-grid { padding-block: 32px 48px; }
  .schede, .schede.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foto-griglia, .foto-griglia.sei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .piede-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede-id { grid-column: 1 / -1; }
  .sez { padding-block: 64px; }
  .sez.carta, .sez.carta + .sez { padding-top: 64px; }
  .banda-nera .wrap { padding-block: 64px; }
}
@media (max-width: 600px) {
  .schede, .schede.quattro { grid-template-columns: minmax(0, 1fr); }
  .foto-griglia, .foto-griglia.sei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .righe-a > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .intro .lead, .sez .lead { font-size: 19px; }
  .testo-lungo p, .righe-a p { font-size: 18px; }
  .sez-testa { margin-bottom: 32px; }
  .faq summary { font-size: 20px; }
  .faq details p { font-size: 18px; }
  .piede-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; padding-block: 48px 32px; }
  .piede-grid > :last-child { grid-column: 1 / -1; }
}

/* ---------- dettagli condivisi ---------- */
.vai { justify-self: start; font-family: var(--f-display); font-size: 18px; line-height: 1.3; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.vai:hover { text-decoration-thickness: 3px; }
.due-col > .sez-testa { margin-bottom: 0; }
.dopo-griglia { margin-top: 32px; }
.dati { margin: 0; display: grid; border-top: 1.5px solid var(--nero); }
.dati > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--linea); align-items: baseline; }
.dati dt { font-family: var(--f-ui); font-size: 15px; color: var(--grafite); }
.dati dd { margin: 0; font-family: var(--f-display); font-size: 22px; line-height: 1.3; }
@media (max-width: 600px) {
  .dati > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- grana: una trama leggera, come carta stampata, sopra tutta la pagina ----------
   Rumore generato da un piccolo SVG (niente immagini da scaricare), fermo, non intercetta i clic.
   Puntini sia chiari sia scuri, così si vede sul crema, sul giallo e sulle bande nere. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.4 0 0 0 -.7 2.4 0 0 0 -.7 2.4 0 0 0 -.7 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: var(--grana, .09);
}
@media print { body::after { display: none; } }