/* ============================================================
   NTA Calabria — elenco attività
   Foglio di stile unico del template
   ============================================================ */

:root{
  --bianco:#ffffff;
  --azzurro:#f1f6fc;
  --azzurro-scuro:#e3edf8;
  --blu-900:#0b3c74;
  --blu-600:#1668c4;
  --blu-100:#cfe1f5;
  --bordo:#dbe6f3;
  --inchiostro:#14202d;
  --grigio:#5c6b7a;
  --verde:#0e7a6b;

  --rail-sx:160px;      /* solo banner */
  --rail-dx:200px;      /* menu laterale + banner */
  --gap:28px;
  --testata:64px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Archivo",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;
  color:var(--inchiostro);background:var(--azzurro);
}
img{max-width:100%;display:block}
a{color:var(--blu-600)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:2rem}
h2{font-size:1.45rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--blu-600);outline-offset:2px;border-radius:4px}

.salta{position:absolute;left:-9999px;top:0;background:var(--bianco);padding:12px 18px;z-index:100}
.salta:focus{left:12px;top:12px}

/* ---------- TESTATA + MENU PRINCIPALE ---------- */
/* non sticky: con due righe occuperebbe ~110px di schermo a ogni scorrimento
   e le colonne sticky finirebbero sotto la testata */
.testata{position:relative;z-index:50;background:var(--bianco);border-bottom:1px solid var(--bordo)}
.testata__interno{max-width:1400px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* riga 1: logo e ricerca a sinistra. riga 2: il menu, a tutta larghezza */
.menu{flex-basis:100%;order:3}

/* logo: rapporto nativo 400×180 (20:9) */
.marchio{display:flex;align-items:center;text-decoration:none;flex:none}
.marchio img{height:40px;width:auto}

.menu{margin-left:0}
.menu ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:8px 12px;border-radius:6px;text-decoration:none;color:var(--inchiostro);font-size:.95rem;font-weight:500}
.menu a:hover{background:var(--azzurro);color:var(--blu-900)}
.menu a[aria-current="page"]{color:var(--blu-900);box-shadow:inset 0 -2px 0 var(--blu-600)}
.menu__cta{background:var(--blu-600);color:var(--bianco)!important;padding:9px 16px!important}
.menu__cta:hover{background:var(--blu-900)}
.apri-menu{margin-left:auto;display:none;background:none;border:1px solid var(--bordo);border-radius:6px;padding:8px 12px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--inchiostro)}

/* ---------- RICERCA IN TESTATA ---------- */
.cerca{position:relative;flex:1 1 260px;max-width:420px}
.cerca input{
  width:100%;font:inherit;font-size:.95rem;padding:9px 14px;
  border:1px solid var(--bordo);border-radius:8px;background:var(--azzurro);color:var(--inchiostro);
}
.cerca input:hover{border-color:var(--blu-100)}
.cerca input:focus{background:var(--bianco);border-color:var(--blu-600);outline:none}
.cerca__esiti{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  list-style:none;margin:0;padding:6px;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:10px;
  box-shadow:0 8px 24px rgba(11,60,116,.12);
  max-height:60vh;overflow:auto;
}
.cerca__esiti a{display:block;padding:9px 11px;border-radius:7px;text-decoration:none;color:var(--inchiostro)}
.cerca__esiti a:hover{background:var(--azzurro)}
.cerca__esiti b{display:block;font-size:.93rem;font-weight:500;line-height:1.3}
.cerca__esiti span{display:block;font-size:.78rem;color:var(--grigio);margin-top:2px}

/* ---------- IMPIANTO ---------- */
.impianto{
  max-width:1400px;margin:0 auto;padding:26px 20px 56px;
  display:grid;grid-template-columns:var(--rail-sx) minmax(0,1fr) var(--rail-dx);
  gap:var(--gap);align-items:start;
}
.centro{min-width:0;width:100%}
.rail{position:sticky;top:22px}

/* ---------- MENU LATERALE DESTRO ---------- */
.laterale{margin-bottom:24px;background:var(--bianco);border:1px solid var(--bordo);border-radius:10px;padding:16px 18px}
.laterale h2{font-size:.82rem;font-weight:600;color:var(--grigio);margin-bottom:12px}
.laterale ul{list-style:none;margin:0;padding:0}
.laterale li+li{border-top:1px solid var(--bordo)}
.laterale a{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:9px 0;text-decoration:none;color:var(--inchiostro);font-size:.92rem;line-height:1.35}
.laterale a:hover{color:var(--blu-600)}
.laterale a[aria-current="page"]{color:var(--blu-900);font-weight:600}
.laterale b{color:var(--grigio);font-weight:500;font-size:.8rem;font-variant-numeric:tabular-nums;flex:none}

/* categorie della provincia in cui ci si trova */
.laterale .aperta>a{color:var(--blu-900);font-weight:600}
.laterale__figli{margin:0 0 8px;padding:0 0 0 12px;border-left:2px solid var(--blu-100)}
.laterale__figli li+li{border-top:0}
.laterale__figli a{padding:6px 0;font-size:.87rem;color:var(--grigio)}
.laterale__figli a:hover{color:var(--blu-600)}
.laterale__figli a[aria-current="page"]{color:var(--blu-900);font-weight:600}
.laterale__figli b{font-size:.76rem}

/* ---------- SPAZI PUBBLICITARI ---------- */
.pub{position:relative;background:var(--azzurro-scuro);border:1px dashed var(--blu-100);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pub::before{content:attr(data-etichetta);position:absolute;font-size:.72rem;color:#8ba7c6}
.pub ins{position:relative;z-index:1}
.pub--rail{width:160px;height:600px;margin:0 auto}
.pub--articolo{width:336px;height:300px;margin:32px auto}

/* ---------- RICERCA ---------- */
.ricerca{background:var(--bianco);border:1px solid var(--bordo);border-radius:10px;padding:24px;margin-bottom:26px}
.ricerca h1{margin-bottom:.35em}
.ricerca>p{color:var(--grigio);font-size:.98rem;margin-bottom:18px}
.campi{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo label{font-size:.82rem;color:var(--grigio);font-weight:500}
.campo input,.campo select{font:inherit;font-size:.98rem;padding:11px 13px;border:1px solid var(--bordo);border-radius:8px;background:var(--bianco);color:var(--inchiostro);width:100%}
.campo input:hover{border-color:var(--blu-100)}
.bottone{font:inherit;font-weight:600;font-size:.98rem;background:var(--blu-600);color:var(--bianco);border:0;border-radius:8px;padding:11px 22px;cursor:pointer;align-self:end;height:44px}
.bottone:hover{background:var(--blu-900)}
.contatori{display:flex;gap:26px;margin-top:18px;padding-top:16px;border-top:1px solid var(--bordo);flex-wrap:wrap}
.contatore b{display:block;font-size:1.3rem;color:var(--blu-900);font-variant-numeric:tabular-nums;line-height:1.1}
.contatore span{font-size:.83rem;color:var(--grigio)}

/* ---------- CARTELLE MADRI (home) ---------- */
.cartelle{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cartella{position:relative;background:var(--bianco);border:1px solid var(--bordo);border-radius:10px;padding:18px 20px}
.cartella:hover{border-color:var(--blu-600)}
.cartella h2,.cartella h3{font-size:1.05rem;margin-bottom:4px}
.cartella h2 a,.cartella h3 a{text-decoration:none;color:var(--inchiostro)}
.cartella h2 a:hover,.cartella h3 a:hover{color:var(--blu-600)}
/* tutta la card cliccabile */
.cartella h2 a::after,.cartella h3 a::after{content:"";position:absolute;inset:0}
.cartella p{margin:0;font-size:.88rem;color:var(--grigio)}
.cartella__conteggio{font-variant-numeric:tabular-nums}

/* ---------- BLOCCO BIANCO GENERICO ---------- */
.riquadro{background:var(--bianco);border:1px solid var(--bordo);border-radius:10px;padding:28px 32px;margin-bottom:26px}
.riquadro__meta{font-size:.85rem;color:var(--grigio);margin-bottom:18px}

/* ---------- CORPO DELL'ARTICOLO ----------
   Tag effettivamente prodotti da corpoInHtml(): h2-h4, p, ul/li,
   blockquote>p, figure>img+figcaption, p.azioni con dentro gli <a>,
   più <code> <strong> <em> inline.                                  */
.riquadro h2{margin-top:32px}
.riquadro h3{margin-top:26px;font-size:1.12rem}
.riquadro h4{margin-top:22px;font-size:1rem;color:var(--grigio)}
.riquadro ul{padding-left:22px;margin:0 0 1em}
.riquadro li{margin-bottom:6px}
.riquadro blockquote{margin:0 0 1em;padding:2px 0 2px 18px;border-left:3px solid var(--blu-100);color:var(--grigio)}
.riquadro blockquote p{margin:0}
.riquadro code{background:var(--azzurro);padding:2px 5px;border-radius:4px;font-size:.9em}

figure{margin:0 0 1.2em}
figure img{border-radius:8px;width:100%;height:auto}
figcaption{margin-top:7px;font-size:.85rem;color:var(--grigio)}

/* blocco di link d'azione: resi come pulsanti, non come testo */
.azioni{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.2em}
.azioni a{display:inline-block;background:var(--azzurro);border:1px solid var(--blu-100);border-radius:8px;padding:9px 16px;font-size:.92rem;font-weight:500;color:var(--blu-900);text-decoration:none}
.azioni a:hover{background:var(--blu-600);border-color:var(--blu-600);color:var(--bianco)}

/* ---------- CONTATORI VISITE ---------- */
.contatore-globale{width:160px;margin:16px auto 0;background:var(--bianco);border:1px solid var(--bordo);border-radius:10px;padding:14px;text-align:center}
.contatore-globale b{display:block;font-size:1.3rem;color:var(--blu-900);font-variant-numeric:tabular-nums;line-height:1.15}
.contatore-globale span{display:block;margin-top:5px;font-size:.75rem;color:var(--grigio);line-height:1.35}
[data-viste][hidden]{display:none}

/* ---------- SCHEDE SIMILI ---------- */
.simili{margin-top:26px}
.simili h2{margin:0 0 6px;font-size:1.15rem}

/* ---------- PAGINA NEUTRA (contatti, privacy, ...) ---------- */
.pagina{max-width:68ch}
.pagina h2{margin-top:34px}
.pagina__data{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--bordo);font-size:.85rem;color:var(--grigio)}
.recapiti{margin:0 0 8px;display:grid;grid-template-columns:150px 1fr;gap:0;border-top:1px solid var(--bordo)}
.recapiti dt{padding:11px 0;border-bottom:1px solid var(--bordo);color:var(--grigio);font-size:.95rem}
.recapiti dd{margin:0;padding:11px 0;border-bottom:1px solid var(--bordo);font-size:.95rem}
@media (max-width:640px){
  .recapiti{grid-template-columns:1fr}
  .recapiti dt{padding-bottom:0;border-bottom:0}
}

/* ---------- BRICIOLE ---------- */
.briciole{font-size:.85rem;color:var(--grigio);margin-bottom:14px}
.briciole a{text-decoration:none}
.briciole a:hover{text-decoration:underline}
.briciole span{margin:0 6px;color:var(--blu-100)}

/* ---------- SCHEDA ATTIVITÀ (elenco) ---------- */
.scheda{border-top:1px solid var(--bordo);padding:18px 0;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.scheda:last-of-type{border-bottom:1px solid var(--bordo)}
.scheda__nome{margin:0 0 4px;font-size:1.05rem}
.scheda__nome a{text-decoration:none;color:var(--inchiostro)}
.scheda__nome a:hover{color:var(--blu-600);text-decoration:underline}
.scheda__dati{font-size:.9rem;color:var(--grigio);margin:0}
.scheda__stato{color:var(--verde);font-weight:500}
.scheda__chiusa{color:var(--grigio)}
.scheda__telefono{text-align:right}
.numero{display:block;font-size:1.3rem;font-weight:600;color:var(--blu-900);font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
.numero:hover{color:var(--blu-600)}
.chiama{display:inline-block;margin-top:6px;background:var(--azzurro);border:1px solid var(--blu-100);border-radius:7px;padding:6px 14px;font-size:.88rem;font-weight:500;color:var(--blu-900);text-decoration:none}
.chiama:hover{background:var(--blu-600);border-color:var(--blu-600);color:var(--bianco)}

/* due schede per riga: il bordo passa da top a bottom, altrimenti in griglia
   la riga di chiusura comparirebbe sotto un solo elemento */
.griglia-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.griglia-2 .scheda{border-top:0;border-bottom:1px solid var(--bordo)}
@media (max-width:640px){.griglia-2{grid-template-columns:1fr}}

/* ---------- SCHEDA SINGOLA (articolo) ---------- */
.recapito{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:var(--azzurro);border:1px solid var(--blu-100);border-radius:10px;padding:18px 22px;margin:22px 0}
.recapito__numero{font-size:2rem;font-weight:700;color:var(--blu-900);font-variant-numeric:tabular-nums;text-decoration:none;line-height:1.1}
.recapito__numero:hover{color:var(--blu-600)}
.recapito .chiama{margin-top:0;padding:10px 20px;font-size:.95rem}
.dettagli{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--bordo)}
.dettagli li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--bordo);font-size:.95rem}
.dettagli dt,.dettagli b{color:var(--grigio);font-weight:500}

/* ---------- PAGINAZIONE ---------- */
.paginazione{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:26px}
.paginazione a,.paginazione span{display:block;min-width:40px;text-align:center;padding:9px 11px;border:1px solid var(--bordo);border-radius:8px;background:var(--bianco);text-decoration:none;color:var(--inchiostro);font-size:.92rem;font-variant-numeric:tabular-nums}
.paginazione a:hover{border-color:var(--blu-600);color:var(--blu-900)}
.paginazione [aria-current="page"]{background:var(--blu-600);border-color:var(--blu-600);color:var(--bianco);font-weight:600}
.paginazione .salto{border:0;background:none;color:var(--grigio);min-width:0;padding:9px 2px}

/* ---------- PIEDE ---------- */
.piede{background:var(--blu-900);color:#cfe1f5;padding:44px 20px 28px;font-size:.92rem}
.piede__interno{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.piede h2{color:var(--bianco);font-size:.95rem;margin-bottom:14px}
.piede ul{list-style:none;margin:0;padding:0}
.piede li{margin-bottom:8px}
.piede a{color:#cfe1f5;text-decoration:none}
.piede a:hover{color:var(--bianco);text-decoration:underline}
/* il logo è blu su bianco: sul fondo scuro va appoggiato su una placca chiara */
.piede__logo{height:46px;width:auto;background:var(--bianco);padding:10px 14px;border-radius:8px;margin-bottom:16px}
.piede__nota{max-width:1400px;margin:34px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;color:#9dbbdd}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1240px){
  /* il menu laterale scende sotto il contenuto, le rail spariscono */
  .impianto{grid-template-columns:minmax(0,1fr)}
  .rail-sx{display:none}
  .colonna-dx{position:static;width:100%}
  .colonna-dx .pub--rail{display:none}
  .laterale ul{columns:2;column-gap:24px}
}
@media (max-width:820px){
  .menu{display:none;width:100%;background:var(--bianco);border-top:1px solid var(--bordo);padding:10px 0 0}
  .menu.aperto{display:block}
  .menu ul{flex-direction:column;gap:0}
  .menu a{padding:12px 4px;border-bottom:1px solid var(--bordo)}
  .menu__cta{text-align:center;margin-top:10px;border-radius:8px}
  .apri-menu{display:block}
  .campi{grid-template-columns:1fr}
  .bottone{width:100%}
  .riquadro{padding:22px 18px}
  .scheda{grid-template-columns:1fr;gap:10px}
  .scheda__telefono{text-align:left}
  .dettagli li{grid-template-columns:1fr;gap:2px}
  .laterale ul{columns:1}
  .piede__interno{grid-template-columns:1fr;gap:26px}
  h1{font-size:1.55rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}