/* Blog Altox — generato da altox-seo-engine. Estende assets/css/altox.css */

/* --- Fascia del titolo che si compatta allo scroll ---
   --hdr è l'altezza reale del menu, misurata via JS a fine pagina.
   Il menu resta della sua altezza naturale: qui non lo tocchiamo. */
:root{--hdr:66px}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Fascia blu del titolo: resta agganciata sotto il menu e si rimpicciolisce.
   Essendo dentro <article>, si sblocca da sola alla fine dell'articolo. */
.post-hero{
  position:sticky;top:var(--hdr);z-index:40;
  background:var(--navy);color:#fff;padding:26px 0 46px;
  transition:padding .24s ease,box-shadow .24s ease;
}
.post-hero .breadcrumb{color:#9fb6cc;padding-top:0;margin-bottom:22px}
.post-hero .breadcrumb a{color:var(--accent)}
.post-hero h1{color:#fff;font-size:clamp(1.7rem,3.8vw,2.7rem);max-width:900px;margin-top:.4rem;transition:font-size .24s ease,margin .24s ease}
.post-lead{color:#cdd9e6;font-size:1.1rem;max-width:760px;margin:0}
.post-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:#9fb6cc;font-size:.86rem;font-weight:600}
.post-cat{background:var(--accent);color:#fff;border-radius:999px;padding:5px 13px;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}

/* Elementi che collassano: si animano con max-height perché display non è animabile. */
.post-hero .breadcrumb,.post-hero .post-meta,.post-lead{
  overflow:hidden;max-height:60px;opacity:1;
  transition:max-height .24s ease,opacity .18s ease,margin .24s ease;
}
body.is-scrolled .post-hero{padding:11px 0 13px;min-height:52px;box-shadow:0 6px 18px rgba(8,22,39,.28)}
body.is-scrolled .post-hero .breadcrumb,
body.is-scrolled .post-hero .post-meta,
body.is-scrolled .post-lead{max-height:0;opacity:0;margin:0}
body.is-scrolled .post-hero h1{
  font-size:clamp(1rem,2vw,1.25rem);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.post-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding-top:52px;padding-bottom:52px;align-items:start}
@media(max-width:980px){.post-wrap{grid-template-columns:1fr;gap:32px}}
.post-body{max-width:760px;font-size:1.06rem}
/* lo stacco tiene conto di menu + fascia blu compatta */
.post-body h2{margin-top:2.2em;font-size:clamp(1.35rem,2.6vw,1.8rem);scroll-margin-top:calc(var(--hdr) + 68px)}
.post-body h3{margin-top:1.6em;font-size:1.16rem;color:var(--navy-2)}
.post-body p{margin:0 0 1.15rem;color:#243546}
.post-body a{color:var(--accent-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--navy)}
.post-list{margin:0 0 1.3rem;padding-left:0;list-style:none}
.post-list li{position:relative;padding-left:26px;margin-bottom:.6rem;color:#243546}
.post-list li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.post-key{background:#eaf1f8;border-left:4px solid var(--navy);border-radius:0 12px 12px 0;padding:20px 24px;margin:0 0 30px}
.post-key strong{display:block;color:var(--navy);text-transform:uppercase;letter-spacing:.07em;font-size:.78rem;margin-bottom:10px}
.post-key ul{margin:0;padding-left:20px}
.post-key li{margin-bottom:.45rem;font-weight:600;color:var(--ink)}
.post-toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 34px}
.post-toc strong{display:block;color:var(--navy);font-size:.9rem;margin-bottom:10px}
.post-toc ol{margin:0;padding-left:20px;color:var(--slate)}
.post-toc li{margin-bottom:.4rem;font-size:.95rem}
.post-toc a{color:var(--slate);text-decoration:none;font-weight:600}
.post-toc a:hover{color:var(--accent-d)}
.post-cta{margin-top:44px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.post-cta strong{display:block;color:var(--navy);font-size:1.12rem;margin-bottom:.25rem}
.post-cta p{margin:0;color:var(--slate);font-size:.95rem}
.post-side{position:sticky;top:calc(var(--hdr) + 74px);display:grid;gap:18px}
@media(max-width:980px){.post-side{position:static}}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:0 2px 10px rgba(13,44,77,.04)}
.side-card strong{display:block;color:var(--navy);margin-bottom:12px}
.side-card ul{list-style:none;padding:0;margin:0 0 18px}
.side-card li{position:relative;padding-left:24px;margin-bottom:.6rem;font-size:.93rem;color:var(--slate)}
.side-card li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.side-card .btn{width:100%;justify-content:center}
.side-cities{display:flex;flex-wrap:wrap;gap:8px}
.side-cities a{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.88rem;font-weight:700;color:var(--navy)}
.side-cities a:hover{border-color:var(--accent);color:var(--accent-d)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.post-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.18s;box-shadow:0 2px 10px rgba(13,44,77,.04)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfdbe8}
.post-card h2{font-size:1.2rem;margin:0}
.post-card p{color:var(--slate);font-size:.95rem;margin:0;flex:1}
.post-card-cat{align-self:flex-start;background:#eaf1f8;color:var(--navy);border-radius:999px;padding:4px 12px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.post-card-meta{color:var(--slate);font-size:.82rem;font-weight:600}