/* ============================================================
   Atlante Editoriale (variante 1a) — colori tema "Agrumeto"
   Sezione full-width: cartina SVG + pannello editoriale.
   ============================================================ */

.lq-atlante-wrap {
  background: #f6f3e8;               /* fondo crema */
  /* Sezione "a schermo": occupa una schermata sotto l'header sticky, contenuto
     centrato → scrollando ci si arriva con la mappa intera inquadrata.
     L'altezza dell'header la dichiara il child theme in `--lq-header-h` (99px
     dal 07/08/2026; prima erano 117 misurati contro i 92 scritti qui, rimasti
     da un header piu' vecchio). Il fallback serve se questo plugin gira sotto
     un tema che non la definisce. */
  min-height: calc(100vh - var(--lq-header-h, 99px));
  /* Colonna, non riga: i figli sono due — la griglia mappa+pannello e l'indice
     testuale. Finche' il wrap e' stato `flex` in riga con un figlio solo la cosa
     non si vedeva; dall'arrivo dell'indice (02/08/2026) i due si spartivano la
     larghezza affiancati, con la cartina schiacciata a sinistra. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
  /* Aggancio dolce: la sezione si incornicia sotto l'header quando ci si avvicina. */
  scroll-snap-align: start;
  scroll-margin-top: var(--lq-header-h, 99px);
}
.lq-atlante-wrap > .lq-atlante {
  width: 100%;
}

.lq-atlante {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* --- Colonna mappa --- */
.lq-atlante__map-col {
  padding: 40px 24px 40px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lq-atlante__map svg {
  /* Il sottraendo e' il resto della sezione, non un numero a caso: padding del
     wrap (64) + padding della colonna mappa (80) + indice delle regioni (~143
     con due righe di link) + un margine di sicurezza per il terzo capoverso.
     Finche' valeva 220 la cartina si prendeva tutto lo spazio da sola e a
     schermo basso spingeva fuori l'indice. */
  height: clamp(300px, calc(100vh - 380px), 640px);
  width: auto;
  max-width: 100%;
  display: block;
  overflow: visible;
}
.lq-atlante__map path {
  cursor: pointer;
  /* Niente doppio tap per lo zoom su questi path: il click arriva subito e non
     dopo i ~300ms in cui il browser aspetta un secondo tocco. */
  touch-action: manipulation;
  fill: #e0cfae;                     /* base */
  stroke: #f6f3e8;
  stroke-width: 1.4;
  stroke-linejoin: round;
  outline: none;
  transition: fill 0.18s ease;
}
/* L'arancio solo dove un mouse esiste davvero. Su iOS un `:hover` dichiarato
   senza guardia induce Safari a spendere il primo tocco per "mostrare l'hover"
   invece di consegnare il click: la regione si accendeva ma non veniva scelta.
   Vedi la nota gemella in assets/js/mappa.js. */
@media (hover: hover) and (pointer: fine) {
  .lq-atlante__map path:hover {
    fill: #e98a15;                   /* hover: arancio */
  }
}
.lq-atlante__map path.is-selected {
  fill: #173f5f;                     /* selezione: blu */
}
/* Da tastiera il focus sceglie la regione, quindi il riempimento e' gia' quello
   della selezione: l'indicatore deve stare sul bordo, o non si vedrebbe. */
.lq-atlante__map path:focus-visible {
  stroke: #173f5f;
  stroke-width: 2.6;
}

/* --- Pannello editoriale --- */
.lq-atlante__panel {
  padding: 40px 56px 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Le spaziature del pannello sono scritte con la classe del contenitore davanti
   (.lq-atlante .lq-atlante__x, due classi) e non basta lo stile personale.
   Motivo: la sezione vive dentro .entry-content, dove il child theme applica
   `.entry-content h2 { margin-top: 1.8em }` — (0,1,1) contro (0,1,0) — e Astra
   i suoi 1.6em a p/ul. Con la sola classe BEM il `margin: 0` del titolo veniva
   scavalcato da 69px di aria, e l'elenco articoli e l'indice si ritrovavano
   margini che qui sono azzerati apposta: ~137px di pannello non voluti. */
.lq-atlante .lq-atlante__kicker {
  margin: 0 0 16px;
  font: 700 0.72rem/1 Karla, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e98a15;
}
.lq-atlante .lq-atlante__title {
  margin: 0 0 14px;
  font: 600 2.4rem/1.1 Fraunces, Georgia, serif;
  color: #173f5f;
}
.lq-atlante .lq-atlante__subtitle {
  margin: 0 0 28px;
  font: 400 1rem/1.6 Karla, sans-serif;
  color: rgba(23, 63, 95, 0.7);
  max-width: 46ch;
}

/* La scheda arriva dal PHP in due pezzi — la fascia di sintesi (nome, conteggio,
   descrizione, piede con comando e link) e l'elenco dei titoli, fratelli e non
   annidati, perche' su mobile la fascia ha altezza fissa e l'elenco deve poter
   crescere fuori di lei. Qui sul desktop i due pezzi tornano a essere una scheda
   sola: `display: contents` toglie il box a fascia e piede, i cinque contenuti
   diventano figli diretti della scheda e `order` li rimette nell'ordine di
   sempre — l'elenco fra la descrizione e il bottone, che nel DOM lo segue. */
.lq-atlante__card {
  background: #fffdf6;
  border: 1px solid rgba(23, 63, 95, 0.12);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
}
.lq-atlante__card-bar,
.lq-atlante__card-foot {
  display: contents;
}
.lq-atlante__card-head {
  order: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
/* Conteggio a zero: sul desktop resta invisibile come e' sempre stato (era un
   attributo `hidden` sul markup). Su mobile invece diventa il badge arancio
   "collezione in arrivo" — vedi il blocco responsive. */
.lq-atlante__card-count.is-vuoto {
  display: none;
}
.lq-atlante__card-nome {
  font: 500 1.6rem/1.1 Fraunces, Georgia, serif;
  color: #173f5f;
}
.lq-atlante__card-count {
  font: 400 0.78rem Karla, sans-serif;
  color: rgba(23, 63, 95, 0.55);
  white-space: nowrap;
}
.lq-atlante .lq-atlante__card-desc {
  order: 2;
  margin: 0 0 20px;
  font: 400 0.95rem/1.6 Karla, sans-serif;
  color: rgba(23, 63, 95, 0.72);
  min-height: 1.6em;
}
.lq-atlante .lq-atlante__card-posts {
  order: 3;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  min-height: 32px;
}
.lq-atlante__card-posts li {
  border-bottom: 1px solid rgba(23, 63, 95, 0.1);
}
.lq-atlante__card-posts li:last-child {
  border-bottom: none;
}
.lq-atlante__card-posts a {
  display: block;
  padding: 9px 0;
  font: 500 0.9rem/1.4 Karla, sans-serif;
  color: #173f5f;
  text-decoration: none;
}
.lq-atlante__card-posts a:hover {
  color: #e98a15;
}
.lq-atlante__posts-empty {
  padding: 9px 0;
  font: 400 0.85rem Karla, sans-serif;
  color: rgba(23, 63, 95, 0.5);
  font-style: italic;
}
.lq-atlante__cta {
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: #173f5f;
  color: #fffdf6 !important;
  font: 600 0.82rem Karla, sans-serif;
  letter-spacing: 0.04em;
  padding: 13px 24px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.lq-atlante__cta:hover {
  background: #e98a15;
}

/* --- Indice testuale delle regioni ---
   Sta sotto la cartina e ne e' l'equivalente accessibile: gli stessi venti link,
   raggiungibili da tastiera e da screen reader (e leggibili da un crawler, che
   dai <path> dell'SVG non ricava alcun link). Volutamente discreto: e' una
   scorciatoia, non il protagonista della sezione. */
.lq-atlante__indice {
  /* Stesso contenitore della griglia sopra: cosi' i link partono allineati
     alla colonna del pannello e non alla finestra. */
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 56px 40px;
  border-top: 1px solid rgba(23, 63, 95, 0.12);
  margin-top: 8px;
  padding-top: 24px;
}
/* Stessa storia della nota sopra: la nav sta fuori da .lq-atlante, quindi qui
   il contenitore di riferimento e' il wrap. */
.lq-atlante-wrap .lq-atlante__indice-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.lq-atlante__indice-lista a {
  font: 500 0.82rem Karla, sans-serif;
  color: #173f5f;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lq-atlante__indice-lista a:hover,
.lq-atlante__indice-lista a:focus-visible {
  color: #e98a15;
  border-bottom-color: currentColor;
}
/* Regione ancora senza articoli: resta un link vero (l'archivio esiste), ma
   non promette al lettore un contenuto che non c'e'. */
.lq-atlante__indice-lista a.is-vuota {
  color: #8a949c;
}

/* --- Schermi bassi: si stringono le spaziature, non si rimpicciolisce la mappa ---
   Su un portatile da 768px di altezza il pannello editoriale da solo supera lo
   spazio sotto l'header: la cartina li' non c'entra nulla. Si recupera dai
   padding, che sono la parte comprimibile senza toccare la gerarchia visiva.
   Sta prima del blocco mobile, che deve poter riscrivere gli stessi valori. */
@media (max-height: 840px) {
  .lq-atlante-wrap {
    padding: 20px 0;
  }
  .lq-atlante__map-col {
    padding: 20px 24px 20px 56px;
  }
  .lq-atlante__panel {
    padding: 20px 56px 20px 32px;
  }
  .lq-atlante .lq-atlante__subtitle {
    margin-bottom: 20px;
  }
  .lq-atlante__card {
    padding: 24px 28px;
  }
  .lq-atlante__indice {
    padding-top: 20px;
    padding-bottom: 24px;
  }
}

/* Sotto i 720px (il 1366x768 con barre del browser) i soli padding non bastano:
   il pannello e' il pavimento della sezione. Si scala anche il titolo, che a
   2.4rem occupa due righe da 42px. */
@media (max-height: 720px) {
  .lq-atlante-wrap {
    padding: 16px 0;
  }
  .lq-atlante .lq-atlante__title {
    font-size: 2rem;
  }
  .lq-atlante__card {
    padding: 20px 24px;
  }
}

/* --- Responsive: sotto 900px colonna singola, in quest'ordine ---
   intro → cartina → fascia di sintesi → elenco articoli → indice delle regioni.

   E' l'opzione "1b" del confronto di layout del 07/08/2026 (brief e mockup in
   docs/BRIEF-DESIGN-MAPPA-MOBILE.md): sotto la cartina una fascia di ALTEZZA
   FISSA — nome, conteggio, descrizione e link all'archivio — che al tocco cambia
   contenuto ma mai misura; i titoli degli articoli non stanno dentro di lei, ma
   in un elenco che le cresce sotto, in flusso.

   Dal 07/08/2026 quell'elenco e' aperto da subito: i primi tre articoli sono
   anteprime, non un contenuto da richiedere. Prima stavano dietro un comando
   "N articoli ▾", e sul mirror l'unico articolo della Sicilia non lo vedeva
   nessuno. Chi ne ha piu' di tre lo scopre dalla CTA, che porta all'archivio.

   Il perche': con la scheda intera sotto la cartina, l'altezza da riservare era
   quella del caso peggiore (tre articoli, 340px) e la cartina restava piccola
   sempre — 143×186 su un iPhone SE. Con la fascia fissa la riserva scende da
   481 a 261px e la cartina passa a 312×406 sullo stesso telefono. Il prezzo,
   dichiarato: un tocco in piu' per arrivare ai titoli.

   Nessuno scroll automatico: la pagina non si muove sotto le dita di chi prova
   piu' regioni di seguito.

   Come: intro e scheda sono figli dello stesso .lq-atlante__panel e la cartina
   deve finire fra loro, mentre l'indice sta fuori dalla griglia. `display:
   contents` toglie il box a .lq-atlante, al pannello e alla scheda, cosi' i
   blocchi diventano flex-item diretti del wrap e si riordinano con `order`.
   Il DOM non cambia: i selettori a due classi qui sotto fanno match come prima
   (vedi la nota sulla specificita' a inizio file), ma la spaziatura orizzontale
   che arrivava dal padding del pannello va ridata a mano. */
@media (max-width: 900px) {
  /* Su mobile il contenuto impilato è più alto dello schermo: niente fit forzato
     sull'intera sezione — quello che deve stare in una schermata e' la coppia
     cartina+scheda, e ci pensa l'altezza dell'SVG piu' sotto.
     `align-items`/`justify-content` sono riscritti perche' la regola base li
     mette a `center`: inerti finche' qui c'era `display: block`, con `flex`
     strizzerebbero ogni blocco alla larghezza del suo contenuto. */
  .lq-atlante-wrap {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 40px 0;
    /* Su telefono la sezione non si aggancia allo scorrimento: e' piu' alta di
       una schermata, e qualunque punto si scelga di inquadrare e' quello
       sbagliato per chi sta leggendo un altro pezzo. */
    scroll-snap-align: none;
  }
  .lq-atlante,
  .lq-atlante__panel {
    display: contents;
  }
  .lq-atlante__kicker {
    order: 1;
  }
  .lq-atlante__title {
    order: 2;
  }
  .lq-atlante__subtitle {
    order: 3;
  }
  .lq-atlante__map-col {
    order: 4;
  }
  /* La scheda si scioglie: la fascia e l'elenco dei titoli diventano due blocchi
     indipendenti del wrap. E' l'opposto di quel che fa la regola base, dove i
     due pezzi si ricompongono in un'unica scheda. */
  .lq-atlante__card {
    display: contents;
  }
  .lq-atlante__card-bar {
    order: 5;
  }
  .lq-atlante .lq-atlante__card-posts {
    order: 6;
  }
  .lq-atlante__indice {
    order: 7;
  }
  /* I 24px laterali del pannello, che non esiste piu' come box. Due classi
     perche' le stesse proprieta' sono gia' scritte cosi' piu' sopra. */
  .lq-atlante .lq-atlante__kicker,
  .lq-atlante .lq-atlante__title,
  .lq-atlante .lq-atlante__subtitle {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Intro piu' stretta di ~30px, e non e' un ritocco estetico: la CTA "Esplora
     per regione" in homepage punta a #regioni, che atterra qui in cima. Da li'
     si deve vedere l'intestazione **e** la cartina intera, e con le spaziature
     del desktop non ci stavano per un pelo — 846 contro gli 844 di un iPhone 14,
     due pixel che tagliavano il fondo della Sicilia.
     I 40px di padding del wrap restano invece dove sono: sono loro a tenere il
     testo fuori dalla banda di colore che l'hero lascia intravedere
     (`--lq-hero-hint`, 36px). Stringendo quelli, spunterebbero le lettere. */
  .lq-atlante .lq-atlante__kicker {
    margin-bottom: 10px;
  }
  .lq-atlante .lq-atlante__title {
    margin-bottom: 8px;
  }
  .lq-atlante .lq-atlante__subtitle {
    margin-bottom: 16px;
  }
  /* Nessun aggancio automatico allo scorrimento, su telefono (08/08/2026).
     C'e' stato fino alla 1.6.1: avvicinandosi, lo scroll-snap parcheggiava la
     cartina sotto l'header — e si portava via l'intestazione della sezione, che
     restava sopra il bordo e non si riusciva a leggere. Il difetto e' dello
     `scroll-snap` in se': agisce mentre l'utente scorre, cioe' mentre sta
     leggendo, e decide lui cosa inquadrare.
     L'inquadratura resta, ma la fa il JS **al tocco di una regione**: e' un
     gesto deliberato, e li' spostare la pagina e' un servizio invece che un
     dispetto (vedi `inquadraCartina()` in assets/js/mappa.js).
     `scroll-margin-top` non e' un residuo: lo usano sia quello scroll sia
     l'ancora #regioni della CTA in homepage, per non finire sotto l'header.
     Niente padding: la cartina va da bordo a bordo, e il conto dell'altezza qui
     sotto vale solo se sopra di lei non si aggiunge nulla. */
  .lq-atlante__map-col {
    padding: 0;
    scroll-margin-top: var(--lq-header-h, 99px);
  }
  .lq-atlante__map {
    width: 100%;
  }
  /* Qui la cartina si dimensiona in larghezza e lascia fare all'altezza, che il
     viewBox 610×793 ricava da sola (rapporto 1,3).
     Si sottraggono l'header sticky (la variabile del child theme) e 205 =
     128 di fascia + 16 di stacco + 61 della prima anteprima (60 di riga piu' il
     filetto che la separa dalla fascia: senza quel pixel, su un iPhone SE la
     riga finiva un pixel sotto il bordo — misurato).
     E' quello che deve stare in schermata insieme alla cartina, e per
     costruzione la somma fa esattamente una schermata. La seconda e la terza
     anteprima cadono appena sotto la piega — con tutte e tre dentro il conto la
     cartina scenderebbe a 164×214 su un iPhone SE, che e' meno di quanto serva
     per colpire una regione.
     La riserva e' FISSA anche se l'elenco non lo e' (0÷3 righe): se la cartina
     seguisse il contenuto cambierebbe misura a ogni regione toccata, spostando
     sotto il dito la regione appena scelta. Per lo stesso motivo la fascia ha
     altezza fissa.
     I 431px sono 560/1,3: il tetto d'altezza per i tablet, espresso in larghezza
     per non lasciare bande vuote ai lati del disegno.
     `svh` e non `vh`: su Safari iOS `vh` misura la finestra con la barra degli
     indirizzi nascosta, cioe' promette altezza che a schermo non c'e'. La riga
     in `vh` sopra e' il ripiego per i browser che non conoscono `svh`. */
  .lq-atlante__map svg {
    width: min(100%, calc((100vh - var(--lq-header-h, 99px) - 205px) / 1.3), 431px);
    width: min(100%, calc((100svh - var(--lq-header-h, 99px) - 205px) / 1.3), 431px);
    height: auto;
    margin: 0 auto;
  }

  /* --- La fascia di sintesi: cambia contenuto, mai misura --- */
  .lq-atlante__card-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* `height` e non `min-height`: e' il punto dell'opzione 1b. */
    height: 128px;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 14px 20px;
    background: #fffdf6;
    border-top: 1px solid #d8d2be;
    border-bottom: 1px solid #d8d2be;
  }
  .lq-atlante__card-head {
    order: 1;
    align-items: center;
    margin-bottom: 0;
  }
  .lq-atlante__card-nome {
    font: 600 22px/1.1 Fraunces, Georgia, serif;
  }
  .lq-atlante__card-count {
    font: 700 11px/1 Karla, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5d6c77;
  }
  /* Il contrario del desktop: qui il "collezione in arrivo" si vede, in arancio.
     Una regione ancora vuota non e' un buco, e' un invito. */
  .lq-atlante__card-count.is-vuoto {
    display: inline;
    color: #e98a15;
  }
  /* Due righe al massimo. Il clamp e' una rete di sicurezza: la vera soluzione e'
     tenere corte le descrizioni in redazione (≈62 caratteri a 375px). */
  .lq-atlante .lq-atlante__card-desc {
    order: 2;
    margin: 0;
    min-height: 0;
    font: 400 14px/1.45 Karla, sans-serif;
    color: #5d6c77;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* `flex-end` e non `space-between`: da quando il comando "N articoli ▾" non
     esiste piu' il piede ha un figlio solo, e con `space-between` la CTA
     scivolerebbe a sinistra invece di restare dov'e' sempre stata. */
  .lq-atlante__card-foot {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
  /* Il bottone pieno diventa un link sottolineato: pieno, alto 48px, non entra
     in 128px insieme a nome, badge e descrizione. L'`!important` risponde a
     quello della regola base, che a sua volta risponde ad Astra. */
  .lq-atlante__cta {
    order: 2;
    background: none;
    color: #173f5f !important;
    align-self: center;
    /* Bersaglio da 44px con padding e margini negativi: l'area toccabile cresce,
       l'ingombro nella fascia no (che e' a 128px fissi e non ha slancio). 13 di
       testo + 24 sopra + 6 sotto = 43; a padding 14 si fermava a 41. La
       sottolineatura si allontana di 6px dal testo: e' il prezzo dei 44px, e a
       occhio legge ancora come sottolineatura. */
    padding: 24px 0 6px;
    margin: -24px 0 -6px;
    font: 700 13px/1 Karla, sans-serif;
    letter-spacing: 0;
    border-bottom: 2px solid #173f5f;
  }
  .lq-atlante__cta:hover {
    background: none;
  }

  /* --- L'elenco dei titoli: fuori dalla fascia, chiuso di default --- */
  .lq-atlante .lq-atlante__card-posts {
    margin: 0;
    padding: 0 20px 12px;
    min-height: 0;
    background: #f6f3e8;
  }
  .lq-atlante__card-posts[data-open='false'] {
    display: none;
  }
  .lq-atlante__card-posts li {
    border-bottom: none;
    border-top: 1px solid #d8d2be;
  }
  /* 60px di riga sono calcolati su titoli da 40÷70 caratteri, che a 14px/1.3
     vanno su due righe. `min-height` e non `height`: un titolo su tre righe deve
     crescere, non tagliarsi. */
  .lq-atlante__card-posts a {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 8px 0;
    font: 500 14px/1.3 Karla, sans-serif;
  }
  .lq-atlante__indice {
    padding: 24px 24px 40px;
  }
  /* Due classi come la regola per gli schermi bassi qui sopra: a parita' di
     specificita' vince questa, che viene dopo. Con la sola classe BEM un
     telefono basso si prendeva i 2rem pensati per il desktop. */
  .lq-atlante .lq-atlante__title {
    font-size: 1.9rem;
  }
}

/* Telefoni bassi (iPhone SE e simili): dopo il salto su #regioni la cartina
   sforava ancora di 11px, perche' li' l'intro pesa uguale ma di schermo ce n'e'
   180px in meno. Si recuperano dal padding in cima alla sezione — che su questi
   schermi non ha piu' il compito di tenere il testo fuori dalla banda di colore
   dell'hero: l'hero e' gia' piu' alto della schermata per conto suo, la banda
   non c'e' (misurato: zero pixel), e quel padding non protegge nulla. */
@media (max-width: 900px) and (max-height: 700px) {
  .lq-atlante-wrap {
    padding-top: 20px;
  }
}