/* Impaginazione delle pagine del sito. I componenti hanno i loro stili in zia.css
   (il bundle.css del design system): qui solo contenitori, griglie e la pagina
   articolo, sempre con i token di tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.sito-contenitore { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-8); }
.sito-sezione { padding-block: var(--space-24); }
.sito-sezione--alt { background: var(--carta-2); }
.sito-sezione--prima { padding-top: var(--space-12); }
.zia-testata { max-width: 1200px; margin-inline: auto; }
.zia-hero .zia-testata { max-width: none; }
.zia-hero__testo { width: 100%; max-width: 1200px; margin-inline: auto; }

.sito-testa-sezione { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.sito-testa-sezione .zia-titolo-sezione { margin: 0; }
.sito-link { font-size: 15px; font-weight: 500; color: var(--blu-zia); text-decoration: none; border-bottom: 1.5px solid var(--zafferano); padding-bottom: 2px; white-space: nowrap; }
.sito-link:hover { border-bottom-color: var(--blu-zia); }
.sito-link--indietro { display: inline-block; margin-bottom: var(--space-6); }

.sito-titolo-pagina { margin: var(--space-3) 0 var(--space-8); font-family: var(--font-titoli); font-size: 88px; line-height: 0.95; font-weight: 400; letter-spacing: -0.02em; color: var(--blu-zia); }
.sito-titolo-pagina em { font-style: italic; }
.sito-intro { max-width: 34em; font-size: 21px; line-height: 1.55; }
.sito-intro p { margin: 0 0 var(--space-4); }
.sito-spazio { height: var(--space-8); }

.sito-griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-6); }
.sito-griglia-3--consigli { align-items: start; }
.sito-griglia-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-8); }

/* Bottone «linea» sopra la foto della hero */
.zia-hero .sito-bottone-su-foto { color: var(--bianco); border-color: var(--bianco); }
.zia-hero .sito-bottone-su-foto:hover { background: rgba(255, 255, 255, 0.12); }

/* Racconto con foto accanto */
.sito-racconto { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: center; }
.sito-racconto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-s); }
.sito-racconto__titolo { margin: var(--space-3) 0 var(--space-6); font-family: var(--font-titoli); font-size: 52px; line-height: 1; font-weight: 400; letter-spacing: -0.015em; color: var(--blu-zia); }
.sito-racconto__titolo em { font-style: italic; }
.sito-racconto__testo { max-width: 36em; margin-bottom: var(--space-8); }
.sito-racconto__testo p { margin: 0 0 var(--space-4); }

/* Invito alla checklist */
.sito-zaino { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); }
.sito-zaino .sito-intro { margin: 0; }
.sito-zaino .zia-bottone { flex: 0 0 auto; }

/* Articolo (giorno) */
.sito-articolo { padding: var(--space-12) 0 var(--space-16); }
.sito-articolo__copertina { max-width: 1000px; margin: var(--space-12) auto 0; padding-inline: var(--space-8); }
.sito-articolo__copertina img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-s); }
.sito-articolo__copertina figcaption { margin-top: var(--space-2); font-size: 14px; font-style: italic; color: var(--inchiostro-tenue); }
.sito-articolo__testo { max-width: calc(68ch + 2 * var(--space-8)); margin: var(--space-12) auto 0; padding-inline: var(--space-8); font-size: 18px; line-height: 1.75; }
.sito-articolo__testo p { margin: 0 0 var(--space-6); }
.sito-nota { padding: var(--space-4) var(--space-6); background: var(--carta-2); border-radius: var(--radius-m); font-size: 15px; font-style: italic; color: var(--inchiostro-tenue); }
.sito-titolo-pagina--articolo { font-size: 72px; max-width: 14em; }
.sito-articolo__h2 { margin: var(--space-12) 0 var(--space-3); font-family: var(--font-titoli); font-size: 34px; line-height: 1.1; font-weight: 400; color: var(--blu-zia); }
.sito-checklist { list-style: none; counter-reset: voce; margin: var(--space-8) 0 var(--space-12); padding: 0; border-top: 1px solid var(--linea); }
.sito-checklist li { counter-increment: voce; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--linea); }
.sito-checklist li::before { content: counter(voce); font-family: var(--font-titoli); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--terra); }
.sito-giorni-vicini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-16); }
.sito-giorni-vicini a { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) 0; border-top: 1.5px solid var(--blu-zia); text-decoration: none; }
.sito-giorni-vicini--dopo { text-align: right; }
.sito-giorni-vicini__titolo { font-family: var(--font-titoli); font-size: 28px; line-height: 1.1; color: var(--blu-zia); }
.sito-giorni-vicini a:hover .sito-giorni-vicini__titolo { text-decoration: underline; text-decoration-color: var(--zafferano); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Chi è Chezia */
.sito-chi { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-12); align-items: start; }
.sito-blocco p { margin: 0 0 var(--space-4); }
.sito-azioni { margin-top: var(--space-8); }
.sito-chi img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-s); }
.sito-chi .sito-intro { margin: 0 0 var(--space-8); }

@media (max-width: 960px) {
  .sito-griglia-3 { grid-template-columns: 1fr 1fr; }
  .sito-chi, .sito-racconto { grid-template-columns: 1fr; }
  .sito-zaino { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .sito-contenitore, .sito-articolo__copertina, .sito-articolo__testo { padding-inline: var(--space-4); }
  .sito-sezione { padding-block: var(--space-16); }
  .sito-griglia-3, .sito-griglia-2 { grid-template-columns: 1fr; }
  .sito-racconto__titolo, .sito-titolo-pagina--articolo { font-size: 44px; }
  .sito-titolo-pagina { font-size: 56px; }
  .sito-testa-sezione { flex-direction: column; gap: var(--space-2); }
  .zia-testata { padding-inline: var(--space-4); flex-wrap: wrap; gap: var(--space-3); }
  .zia-testata__menu { gap: var(--space-4); }
  .zia-testata__logo { height: 44px; }
  .sito-giorni-vicini { grid-template-columns: 1fr; }
  .sito-giorni-vicini--dopo { text-align: left; }
}