/* =====================================================================
   MAGAZINE LAYOUT — Michelangelo Gigli
   Layout testata classica (stile hwupgrade/hdblog) sopra style.css.
   Caricato DOPO style.css: definisce il layout magazine, lascia intatti
   i widget funzionali (chatbot, search modal, cookie, AI, ecc.).
   ===================================================================== */
:root{
    --mz-red:#E63946; --mz-red-dark:#c5303c;
    --mz-navy:#1B2A4A; --mz-dark:#0c0e12;
    --mz-ink:#16181d; --mz-ink2:#3a3f4b; --mz-muted:#7a818e;
    --mz-line:#e4e7ec; --mz-bg:#f3f5f7; --mz-white:#fff;
    --mz-shadow:0 2px 10px rgba(16,18,23,.08);
    --mz-shadow-lg:0 12px 32px rgba(16,18,23,.16);
    --mz-radius:8px;
    --mz-disp:'Oswald','Space Grotesk',sans-serif;
    --mz-body:'Roboto',system-ui,Arial,sans-serif;
    --mz-cond:'Roboto Condensed','Oswald',sans-serif;
}

/* Tipografia globale magazine */
body{ font-family:var(--mz-body); color:var(--mz-ink); }
body.mag{ background:var(--mz-bg); }
h1,h2,h3,h4{ font-family:var(--mz-disp); }
.mz-container{ max-width:1200px; margin:0 auto; padding:0 18px; }

/* ---- Topbar ---------------------------------------------------------- */
.mz-topbar{ background:var(--mz-dark); color:#aeb4c0; font-size:12.5px; }
.mz-topbar__in{ max-width:1200px; margin:0 auto; padding:0 18px; height:34px;
    display:flex; justify-content:space-between; align-items:center; }
.mz-topbar__date{ letter-spacing:.3px; text-transform:capitalize; }
.mz-topbar__links a{ color:#aeb4c0; margin-left:18px; transition:color .15s; }
.mz-topbar__links a:hover{ color:#fff; }
@media(max-width:700px){ .mz-topbar__date{display:none} .mz-topbar__links a{margin-left:12px} }

/* ---- Masthead ------------------------------------------------------- */
.mz-masthead{ background:var(--mz-white); border-bottom:1px solid var(--mz-line); }
.mz-masthead__in{ max-width:1200px; margin:0 auto; padding:0 18px; height:84px;
    display:flex; align-items:center; justify-content:space-between; gap:24px; }
.mz-logo{ display:flex; align-items:center; gap:12px; color:var(--mz-navy); }
.mz-logo__block{ width:46px; height:46px; display:inline-flex; align-items:center;
    justify-content:center; background:var(--mz-red); color:#fff;
    font-family:var(--mz-disp); font-weight:700; font-size:20px; }
.mz-logo__text{ font-family:var(--mz-cond); font-weight:700; font-size:15px;
    line-height:1.05; text-transform:uppercase; letter-spacing:.5px; color:var(--mz-navy); }
.mz-logo__text b{ color:var(--mz-red); }
.mz-search{ display:flex; flex:0 0 340px; max-width:44%; }
.mz-search input{ flex:1; border:1.5px solid var(--mz-line); border-right:0;
    border-radius:6px 0 0 6px; padding:0 14px; height:42px; font-size:14px; outline:none;
    font-family:var(--mz-body); }
.mz-search input:focus{ border-color:var(--mz-red); }
.mz-search button{ width:48px; border:0; background:var(--mz-red); color:#fff; font-size:20px;
    border-radius:0 6px 6px 0; cursor:pointer; transition:background .15s; }
.mz-search button:hover{ background:var(--mz-red-dark); }

/* ---- Main nav (sticky, scura, a categorie) -------------------------- */
.mainnav{ background:var(--mz-navy); position:sticky; top:0; z-index:1000; box-shadow:var(--mz-shadow); }
.mainnav.scrolled{ box-shadow:0 2px 18px rgba(0,0,0,.35); }
.mainnav__in{ max-width:1200px; margin:0 auto; padding:0 18px; display:flex; align-items:stretch; }
.mainnav__links{ display:flex; align-items:stretch; gap:0; overflow-x:auto; scrollbar-width:none; flex:1; }
.mainnav__links::-webkit-scrollbar{ display:none; }
.mainnav__links a{ font-family:var(--mz-cond); font-weight:700; text-transform:uppercase;
    font-size:13.5px; letter-spacing:.6px; color:#cfd4de; padding:14px 15px; white-space:nowrap;
    position:relative; transition:color .15s,background .15s; display:flex; align-items:center; }
.mainnav__links a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.mainnav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
    background:var(--cat,var(--mz-red)); transform:scaleX(0); transition:transform .18s; }
.mainnav__links a:hover::after, .mainnav__links a.active::after{ transform:scaleX(1); }
.mainnav__home{ color:#fff !important; background:var(--mz-red) !important; }
.mainnav__home::after{ background:#fff; }
.mainnav__search{ background:none; border:0; color:#cfd4de; cursor:pointer; padding:0 16px; font-size:18px; }
.mainnav__search:hover{ color:#fff; }
.mainnav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:0 12px; }
.mainnav__toggle span{ display:block; width:26px; height:3px; background:#fff; transition:.3s; }
.mainnav__toggle.open span:nth-child(1){ transform:rotate(45deg) translate(5px,6px); }
.mainnav__toggle.open span:nth-child(2){ opacity:0; }
.mainnav__toggle.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-6px); }
@media(max-width:860px){
    .mainnav__toggle{ display:flex; }
    .mainnav__links{ position:absolute; left:0; right:0; top:100%; flex-direction:column;
        background:var(--mz-navy); border-bottom:3px solid var(--mz-red); padding:6px 18px 16px;
        transform:translateY(-130%); transition:transform .3s; max-height:80vh; overflow:auto; }
    .mainnav__links.open{ transform:translateY(0); }
    .mainnav__links a{ width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
}

/* ---- Badge ---------------------------------------------------------- */
.mz-badge{ display:inline-flex; align-items:center; gap:5px; background:var(--cat,var(--mz-red));
    color:#fff; font-family:var(--mz-cond); font-weight:700; text-transform:uppercase;
    font-size:11.5px; letter-spacing:.7px; padding:4px 9px; border-radius:3px; }
.mz-badge--sm{ font-size:10.5px; padding:3px 7px; }

/* ---- Cover (gradiente categoria + icona) ---------------------------- */
.mz-cover{ position:relative; background:var(--mz-grad,linear-gradient(135deg,#2D333B,#0D1117));
    display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mz-cover i{ color:rgba(255,255,255,.92); font-size:54px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.mz-cover::after{ content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.18), transparent 55%); }

/* ---- Hero block ----------------------------------------------------- */
.heroblock{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; margin-top:22px; }
.hero{ position:relative; border-radius:var(--mz-radius); overflow:hidden; min-height:420px;
    display:flex; align-items:flex-end; box-shadow:var(--mz-shadow); color:#fff; }
.hero .mz-cover{ position:absolute; inset:0; }
.hero .mz-cover i{ font-size:120px; color:rgba(255,255,255,.16); }
.hero__shade{ position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top,rgba(7,9,13,.92) 0%,rgba(7,9,13,.45) 45%,rgba(7,9,13,0) 80%); }
.hero__body{ position:relative; z-index:2; padding:26px 28px; }
.hero__title{ font-size:33px; margin:12px 0 8px; line-height:1.1; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.hero__excerpt{ margin:0 0 10px; font-size:15px; color:#e8eaef; max-width:48ch; }
.hero__meta{ font-size:12.5px; color:#c3c8d2; text-transform:uppercase; letter-spacing:.4px; }
.hero:hover .hero__title{ color:#fff; }

.herogrid{ display:grid; grid-template-rows:repeat(4,1fr); gap:14px; }
.minicard{ background:var(--mz-white); border-radius:var(--mz-radius); overflow:hidden;
    display:grid; grid-template-columns:112px 1fr; box-shadow:var(--mz-shadow);
    transition:transform .15s,box-shadow .15s; }
.minicard:hover{ transform:translateY(-2px); box-shadow:var(--mz-shadow-lg); }
.minicard .mz-cover{ min-height:88px; }
.minicard .mz-cover i{ font-size:30px; }
.minicard .mz-badge{ position:absolute; left:6px; top:6px; z-index:2; }
.minicard__title{ font-size:15px; padding:10px 12px 4px; line-height:1.18; font-family:var(--mz-disp); font-weight:600; }
.minicard__meta{ display:block; padding:0 12px 10px; font-size:11.5px; color:var(--mz-muted);
    text-transform:uppercase; letter-spacing:.3px; font-family:var(--mz-cond); }
.minicard:hover .minicard__title{ color:var(--mz-red); }

/* ---- Layout main + sidebar ----------------------------------------- */
.layout{ display:grid; grid-template-columns:1fr 320px; gap:34px; max-width:1200px;
    margin:34px auto 50px; padding:0 18px; }
.layout__main{ min-width:0; }
.layout__side{ align-self:start; position:sticky; top:64px; display:flex; flex-direction:column; gap:24px; }

/* ---- Section head --------------------------------------------------- */
.sectionhead{ display:flex; align-items:center; gap:16px; margin:0 0 18px; }
.sectionhead__title{ font-size:22px; text-transform:uppercase; letter-spacing:.5px;
    padding-left:12px; border-left:5px solid var(--mz-red); }
.sectionhead__line{ flex:1; height:1px; background:var(--mz-line); }

/* ---- Card list ------------------------------------------------------ */
.newslist{ display:flex; flex-direction:column; gap:18px; }
.mzcard{ background:var(--mz-white); border-radius:var(--mz-radius); overflow:hidden;
    display:grid; grid-template-columns:280px 1fr; box-shadow:var(--mz-shadow);
    transition:transform .15s,box-shadow .15s; }
.mzcard:hover{ transform:translateY(-2px); box-shadow:var(--mz-shadow-lg); }
.mzcard .mz-cover{ min-height:175px; }
.mzcard .mz-badge{ position:absolute; left:10px; top:10px; z-index:2; }
.mzcard__body{ padding:16px 20px; display:flex; flex-direction:column; }
.mzcard__title{ font-size:21px; line-height:1.18; margin-bottom:8px; font-family:var(--mz-disp); font-weight:600; }
.mzcard__title a:hover{ color:var(--mz-red); }
.mzcard__excerpt{ color:var(--mz-ink2); font-size:14.5px; margin:0 0 12px; line-height:1.6; }
.mzcard__meta{ margin-top:auto; font-size:12.5px; color:var(--mz-muted); display:flex;
    align-items:center; gap:8px; font-family:var(--mz-cond); text-transform:uppercase; letter-spacing:.3px; }
.mzcard__cat{ color:var(--cat,var(--mz-red)); font-weight:700; }
.mz-dot{ opacity:.5; }

/* ---- Grid (categorie / blog senza sidebar opzionale) ---------------- */
.mzgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.mzgrid .mzcard{ grid-template-columns:1fr; }
.mzgrid .mzcard .mz-cover{ min-height:150px; }

/* ---- Sidebar widgets ----------------------------------------------- */
.widget{ background:var(--mz-white); border-radius:var(--mz-radius); box-shadow:var(--mz-shadow); padding:18px; }
.widget__title{ font-size:17px; text-transform:uppercase; letter-spacing:.5px; color:var(--mz-ink);
    padding-bottom:12px; margin-bottom:6px; border-bottom:3px solid var(--mz-red); }
.poplist{ list-style:none; margin:0; padding:0; }
.poplist li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--mz-line); }
.poplist li:last-child{ border-bottom:0; padding-bottom:0; }
.poplist__n{ font-family:var(--mz-disp); font-weight:700; font-size:22px; color:var(--mz-red); min-width:24px; line-height:1; }
.poplist a{ font-size:14.5px; font-weight:500; line-height:1.25; color:var(--mz-ink); }
.poplist a:hover{ color:var(--mz-red); }
.widget__txt{ font-size:14px; color:var(--mz-ink2); margin:6px 0 12px; }
.nlbox{ display:flex; flex-direction:column; gap:8px; }
.nlbox input{ border:1.5px solid var(--mz-line); border-radius:6px; padding:10px 12px; font-size:14px; outline:none; font-family:var(--mz-body); }
.nlbox input:focus{ border-color:var(--mz-red); }
.nlbox button{ background:var(--mz-red); color:#fff; border:0; border-radius:6px; padding:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.5px; cursor:pointer; font-family:var(--mz-cond); font-size:14px; }
.nlbox button:hover{ background:var(--mz-red-dark); }
.widget--cta{ background:linear-gradient(160deg,#fff,#fbf0f0); border:1px solid #f3d9d7; }
.widget--cta .btn-mz{ display:block; text-align:center; background:var(--mz-navy); color:#fff;
    padding:12px; border-radius:6px; font-family:var(--mz-cond); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.widget--cta .btn-mz:hover{ background:var(--mz-red); }

/* ---- Category / page head ------------------------------------------ */
.cathead{ max-width:1200px; margin:28px auto 0; padding:6px 18px 6px;
    border-left:6px solid var(--cat,var(--mz-red)); }
.cathead__title{ font-size:32px; text-transform:uppercase; line-height:1.05; }
.cathead__sub{ color:var(--mz-muted); font-size:14px; }

/* ---- Pager ---------------------------------------------------------- */
.pager{ display:flex; align-items:center; justify-content:center; gap:18px; margin:34px 0 0; }
.pager a{ background:var(--mz-navy); color:#fff; padding:10px 18px; border-radius:6px; font-family:var(--mz-cond);
    font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.5px; transition:background .15s; }
.pager a:hover{ background:var(--mz-red); }
.pager__info{ color:var(--mz-muted); font-size:13px; }

/* ---- Article (post) ------------------------------------------------ */
.crumbs{ max-width:1200px; margin:22px auto 0; padding:0 18px; font-size:12.5px; color:var(--mz-muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--mz-red); }
.crumbs i{ font-size:10px; }
.post{ background:var(--mz-white); border-radius:var(--mz-radius); box-shadow:var(--mz-shadow); padding:30px 34px; }
.post__title{ font-size:38px; margin:12px 0 14px; line-height:1.08; }
.post__lead{ font-size:19px; color:var(--mz-ink2); font-weight:500; line-height:1.45; margin:0 0 16px; }
.post__meta{ font-size:13px; color:var(--mz-muted); display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    padding-bottom:18px; border-bottom:1px solid var(--mz-line); font-family:var(--mz-cond); text-transform:uppercase; letter-spacing:.3px; }
.post__meta b{ color:var(--mz-ink); }
.post__cover{ height:340px; border-radius:var(--mz-radius); margin:22px 0 8px; }
.post__cover i{ font-size:96px; }

/* TOC nel sidebar */
.toc{ }
.toc__title{ font-size:16px; text-transform:uppercase; letter-spacing:.5px; padding-bottom:10px; margin-bottom:8px; border-bottom:3px solid var(--mz-navy); }
.toc__list{ list-style:none; margin:0; padding:0; }
.toc__item{ padding:6px 0; }
.toc__link{ font-size:14px; color:var(--mz-ink2); }
.toc__link:hover{ color:var(--mz-red); }

/* ---- Footer -------------------------------------------------------- */
.mz-footer{ background:var(--mz-dark); color:#aab0bc; margin-top:46px; border-top:4px solid var(--mz-red); }
.mz-footer__grid{ max-width:1200px; margin:0 auto; padding:44px 18px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
.mz-footer__brand p{ font-size:14px; line-height:1.6; max-width:34ch; margin-top:12px; color:#8b919c; }
.mz-footer__col h4{ color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; font-family:var(--mz-cond); }
.mz-footer__col a{ display:block; color:#aab0bc; font-size:14px; padding:5px 0; transition:color .15s; }
.mz-footer__col a:hover{ color:var(--mz-red); }
.mz-footer__bar{ border-top:1px solid #1d2027; }
.mz-footer__bar .mz-container{ padding-top:16px; padding-bottom:16px; font-size:12.5px; color:#6b7280; }
.mz-footer .mz-logo__text{ color:#fff; }

/* ---- Responsive ---------------------------------------------------- */
@media(max-width:960px){
    .layout{ grid-template-columns:1fr; }
    .layout__side{ position:static; }
    .heroblock{ grid-template-columns:1fr; }
    .herogrid{ grid-template-rows:none; grid-template-columns:repeat(2,1fr); }
    .mz-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:680px){
    .mz-masthead__in{ height:auto; padding:14px 18px; flex-wrap:wrap; gap:12px; }
    .mz-search{ flex-basis:100%; max-width:100%; order:3; }
    .hero{ min-height:300px; } .hero__title{ font-size:25px; }
    .mzcard{ grid-template-columns:1fr; } .mzcard .mz-cover{ min-height:190px; }
    .herogrid{ grid-template-columns:1fr; }
    .mzgrid{ grid-template-columns:1fr; }
    .post{ padding:22px; } .post__title{ font-size:28px; } .post__cover{ height:200px; }
}

/* ---- Filtri blog ---------------------------------------------------- */
.mz-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.mz-filter{ display:inline-flex; align-items:center; border:1.5px solid var(--mz-line);
    color:var(--mz-ink2); padding:7px 15px; border-radius:30px; font-family:var(--mz-cond);
    font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:12.5px; transition:all .15s; }
.mz-filter:hover{ border-color:var(--cat,var(--mz-red)); color:var(--cat,var(--mz-red)); }
.mz-filter.is-on{ background:var(--cat,var(--mz-red)); border-color:var(--cat,var(--mz-red)); color:#fff; }
.mz-empty{ color:var(--mz-muted); padding:30px; text-align:center; background:#fff; border-radius:var(--mz-radius); }

/* ---- Reading progress (override magazine) -------------------------- */
.reading-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1003; background:transparent; }
.reading-progress__bar{ height:100%; width:0; background:var(--mz-red); }
.reading-progress__pct{ display:none; }