/* Lo stile delle guide (scripts/guide-web.mjs), sopra `palabras.css`: testata,
   banda, chiusura con gli store e piede sono quelli del glossario, e qui ci
   sono solo le classi nuove — l'indice delle guide, la copertina, la scheda
   dell'evento, il testo e le sue foto. Nessuna regola di `palabras.css` si ridefinisce qui: le pagine del
   glossario non caricano questo file, e non devono muoversi. */

/* ── l'indice ─────────────────────────────────────────────────────── */
.elenco-guide { list-style: none; margin: 0; padding: 24px 0 32px }
.elenco-guide li { padding: 32px 0; border-top: 1px solid var(--line) }
.elenco-guide li:first-child { border-top: 0 }
.elenco-guide a { display: block; color: var(--ink); max-width: 62ch }
.elenco-guide a:hover { color: var(--ink) }
.elenco-guide b {
  display: block; font-size: clamp(30px, 3.4vw, 44px); font-stretch: 62%; font-weight: 800;
  line-height: .92; text-transform: uppercase;
}
.elenco-guide a:hover b { color: var(--accent) }
.elenco-guide span { display: block; margin-top: 12px; font-size: 17px; line-height: 1.5; opacity: .85 }
.elenco-guide time { display: block; margin-top: 16px; opacity: .55 }

/* ── la guida: la scheda a sinistra, il testo nella colonna della voce ── */
.guida {
  display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 0 48px;
  padding-top: 48px; padding-bottom: 40px;
}
.guida > * { min-width: 0 }
.guida-testo { grid-column: 2; font-size: 17px; max-width: 66ch }

.scheda { grid-column: 1; align-self: start; border-top: 1px solid rgba(47,46,42,.30); padding-top: 18px }
.scheda dl { margin: 0 }
.scheda dl > div { padding: 12px 0; border-bottom: 1px solid var(--line) }
.scheda dt { opacity: .6 }
.scheda dd { margin: 8px 0 0; font-size: 17px; font-weight: 600; font-stretch: 100%; line-height: 1.35 }
.scheda .nota { margin: 16px 0 0; font-size: 14px; line-height: 1.45; opacity: .75 }

.guida-testo > :first-child { margin-top: 0 }
.guida-testo p { margin: 0 0 1.1em }
.guida-testo h2 {
  margin: 1.6em 0 .55em; font-size: clamp(30px, 3vw, 42px);
  font-stretch: 62%; font-weight: 800; line-height: .92; text-transform: uppercase;
  scroll-margin-top: 16px;
}
.guida-testo h3 { margin: 1.4em 0 .4em; font-size: 20px; font-weight: 700; line-height: 1.25; scroll-margin-top: 16px }
.guida-testo ul { margin: 0 0 1.1em; padding-left: 1.2em }
.guida-testo li { margin: 0 0 .45em }
.guida-testo strong { font-weight: 700 }
.guida-testo a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.guida-testo a:hover { text-decoration-thickness: 2px }

/* ── la copertina: la foto dietro il titolo ───────────────────────── */
/* Al posto della banda colorata. La velatura scura sta fra la foto e il
   testo, piu' densa in alto (testata) e in basso (titolo), perche' il titolo
   resti leggibile su qualunque foto: decisione della titolare del 23/10/2026. */
.copertina {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--ink-inverse);
  min-height: clamp(520px, 78vh, 760px); display: flex; flex-direction: column;
}
.copertina-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.copertina::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,19,17,.62) 0%, rgba(20,19,17,.38) 34%, rgba(20,19,17,.48) 60%, rgba(20,19,17,.78) 100%);
}
.copertina > .w { flex: 1; width: 100%; display: flex; flex-direction: column }
.copertina .hero { margin-top: auto }
.copertina .hero h1 { text-shadow: 0 2px 28px rgba(0,0,0,.3) }
.copertina .cabecera { border-bottom-color: rgba(250,248,243,.35) }
.copertina .marca, .copertina .marca:hover,
.copertina .idiomas a, .copertina .idiomas a:hover,
.copertina .miga a, .copertina .miga span,
.copertina .menu a, .copertina .menu a:hover, .copertina .burger summary { color: var(--ink-inverse) }
.copertina .kicker, .copertina .conta { opacity: .75 }
.credito-foto { position: absolute; right: var(--borde); bottom: 20px; margin: 0; opacity: .7 }
/* Il credito porta al sito di chi ha fatto la foto, quando c'e': sottolineato
   e nel colore del testo intorno, non nell'accento dei link. */
.credito-foto a, .guida-testo figcaption a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.credito-foto a:hover, .guida-testo figcaption a:hover { color: inherit; text-decoration-thickness: 2px }

/* ── le foto nel testo, a colori pieni ───────────────────────────── */
.guida-testo .foto { margin: 1.8em 0 }
.guida-testo .foto img { display: block; width: 100%; height: auto; border-radius: 0 12px 12px 12px }
.guida-testo figcaption { margin-top: 12px; opacity: .55 }

/* Il banner dell'app a meta' del testo (`bannerApp`, stile in palabras.css):
   qui solo dove sta. */
.guida-testo .banner-app { margin: 2.2em 0 }
.guida-testo .banner-app .badge { text-decoration: none }

/* L'anteprima della copertina nell'indice. */
.elenco-guide .anteprima {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0 12px 12px 12px; margin-bottom: 20px;
}

/* ── «Planaquí in numeri» (scripts/numeri-web.mjs) ─────────────────── */
/* Le cifre grandi nel carattere dei titoli, in una griglia; sotto, le barre
   dei comuni e dei luoghi storici. La barra e' decorazione: il numero accanto
   e' scritto. Classi nuove, nessuna regola delle guide si ridefinisce. */
.numeri { padding-top: 48px; padding-bottom: 40px }
.cifre {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 48px;
}
.cifre li { padding: 28px 0; border-top: 1px solid rgba(47,46,42,.30) }
.cifre b { display: block; font-size: clamp(64px, 7vw, 104px) }
.cifre span { display: block; margin-top: 14px; font-size: 17px; line-height: 1.35; font-weight: 600 }
.cifre small { display: block; margin-top: 12px; opacity: .6 }
/* Il mese precedente: sotto la cifra, e accanto al numero di ogni comune. */
.cifre small.prima { margin-top: 8px; opacity: .45 }
.legenda { margin: -8px 0 12px; opacity: .55 }
.barre .prima { margin-left: 4px; font-size: 15px; opacity: .45; font-variant-numeric: tabular-nums }
.numeri-sezione { margin-top: 64px; max-width: 880px }
.numeri-sezione h2 { margin: 0 0 20px; font-size: clamp(30px, 3vw, 42px); line-height: .92 }
.barre { margin: 0 }
.barre > div {
  display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.barre dt { font-size: 17px; line-height: 1.3 }
.barre dd { margin: 0; display: flex; align-items: center; gap: 12px }
.barre .barra {
  display: block; height: 10px; flex: 0 0 auto; width: calc(var(--q) * (100% - 104px));
  min-width: 2px; background: #85A2BC; border-radius: 0 5px 5px 0;
}
.barre b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums }
.numeri-metodo { font-size: 17px; max-width: 66ch }
.numeri-metodo p { margin: 0 0 1.1em }

/* ── telefono: come il glossario sotto i 1100px ───────────────────── */
@media (max-width: 1100px) {
  .numeri { padding-top: 32px }
  .cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px }
  .cifre li { padding: 20px 0 }
  .cifre b { font-size: clamp(48px, 13vw, 72px) }
  .cifre span { font-size: 16px }
  .numeri-sezione { margin-top: 48px }
  .barre > div { grid-template-columns: 1fr; gap: 8px }
  .elenco-guide li { padding: 24px 0 }
  .guida { grid-template-columns: 1fr; gap: 32px; padding-top: 32px }
  .guida-testo, .scheda { grid-column: 1 }
  .copertina { min-height: clamp(480px, 74vh, 640px) }
  .credito-foto { bottom: 16px }
  .copertina .hero { padding-bottom: 60px }
  /* Su telefono la foto nel testo va da bordo a bordo. */
  .guida-testo .foto { margin-inline: calc(-1 * var(--borde)) }
  .guida-testo .foto img { border-radius: 0 }
  .guida-testo figcaption { padding-inline: var(--borde) }
  /* E cosi' il banner dell'app, senza raggio. */
  .guida-testo .banner-app { margin-inline: calc(-1 * var(--borde)); padding-inline: var(--borde); border-radius: 0 }
}

/* Senza la chiusura con gli store (quando il riquadro dell'app sta a meta'
   del testo) il piede viene subito dopo la guida: una linea lo separa, quella
   della testata, dentro i margini della pagina. */
main + footer { position: relative }
main + footer::before {
  content: ''; position: absolute; top: 0; left: var(--borde); right: var(--borde);
  height: 1px; background: rgba(47,46,42,.30);
}