/* ============================================================================
 *  blog-article.css — Pagina articolo singolo del blog (redesign 2026)
 *  Tutti gli stili sono "scoped" sotto .artx per non interferire con il resto
 *  del sito (header/footer condivisi restano invariati).
 *  Design system: charcoal #1F2A37 + arancio #D96A2B, titoli Montserrat,
 *  corpo Mulish. Vedi handoff "Articolo Blog".
 * ========================================================================== */

.artx{
  --ax-ink:#1F2A37; --ax-acc:#D96A2B; --ax-acc-2:#B85722;
  --ax-blue:#0A3A6B; --ax-blue-2:#00244D;
  --ax-body:#374151; --ax-body-2:#4B5563; --ax-muted:#6B7480;
  --ax-peach:#FFF1E8; --ax-peach-bd:#F5D3BA; --ax-peach-in:#E7B892; --ax-peach-tx:#5C4433;
  --ax-line:#D9DEE3; --ax-line-2:#EEF1F4; --ax-wash:#FFF7F1; --ax-soft:#F1F3F5; --ax-soft-2:#FAFAF8;
  color:var(--ax-body);
  font-family:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.artx a{ color:var(--ax-blue); text-decoration:none; }
.artx a:hover{ color:var(--ax-blue-2); }
.artx *{ box-sizing:border-box; }

/* ---- HERO ---- */
.artx-hero{ background:linear-gradient(180deg,var(--ax-wash) 0%,#fff 100%); border-bottom:1px solid var(--ax-line-2); }
.artx-hero-in{ max-width:1200px; margin:0 auto; padding:56px 32px 44px; }
.artx-hero-head{ max-width:820px; }
.artx-eyebrow{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:20px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ax-acc);
}
.artx-eyebrow:hover{ color:var(--ax-acc-2); }
.artx-hero h1{
  font-family:'Montserrat',system-ui,sans-serif; font-weight:900; font-size:40px;
  line-height:1.14; letter-spacing:-.015em; color:var(--ax-ink); margin:0; text-wrap:pretty;
}
.artx-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:24px; font-size:13.5px; font-weight:600; color:var(--ax-muted); }
.artx-meta span{ display:inline-flex; align-items:center; gap:7px; }

/* ---- GRIGLIA ---- */
.artx-grid{ max-width:1200px; margin:0 auto; padding:48px 32px 8px; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start; }
.artx-main{ min-width:0; }
.artx-aside{ position:sticky; top:90px; display:flex; flex-direction:column; gap:28px; }

/* ---- FIGURA + PLAYER AUDIO ---- */
.artx-fig{ margin:0 0 40px; }
.artx-fig .art-cover, .artx-fig .cover, .artx-fig .blog-cover{ width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(31,42,55,.10); display:block; }
.artx-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.artx-cap{ margin-top:12px; font-size:13px; color:var(--ax-muted); }

.artx .art-audio{ display:flex; align-items:center; gap:14px; margin-top:16px; padding:12px 16px; background:var(--ax-soft); border-radius:12px; }
.artx .art-audio audio{ display:none; }
.artx .art-audio .ap-play{
  flex:none; width:42px; height:42px; border:none; border-radius:50%; background:var(--ax-acc); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(217,106,43,.32);
}
.artx .art-audio .ap-play:hover{ background:var(--ax-acc-2); }
.artx .ap-mid{ flex:1; min-width:0; }
.artx .ap-label{ font-size:13px; font-weight:700; color:var(--ax-ink); }
.artx .art-audio .ap-bar{ height:5px; background:var(--ax-line); border-radius:3px; margin-top:8px; overflow:hidden; cursor:pointer; }
.artx .art-audio .ap-bar > i{ display:block; width:0; height:100%; background:var(--ax-acc); }
.artx .art-audio .ap-time{ flex:none; font-size:12px; font-weight:600; color:var(--ax-muted); font-variant-numeric:tabular-nums; }

/* ---- CORPO ARTICOLO ---- */
.artx-lead{ max-width:720px; font-size:20px; line-height:1.7; font-weight:600; color:var(--ax-ink); margin:0 0 32px; text-wrap:pretty; }
.artx-body{ max-width:720px; }
.artx-body > *{ max-width:720px; }
.artx-body h2{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:27px; line-height:1.25; letter-spacing:-.01em; color:var(--ax-ink); margin:36px 0 18px; text-wrap:balance; }
.artx-body h3{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; line-height:1.3; color:var(--ax-ink); margin:32px 0 16px; }
.artx-body p{ font-size:18px; line-height:1.85; color:var(--ax-body); margin:0 0 22px; }
.artx-body strong{ color:var(--ax-ink); font-weight:700; }
.artx-body a{ color:var(--ax-blue); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.artx-body img{ max-width:100%; height:auto; border-radius:12px; margin:8px 0 24px; }
.artx-body blockquote{
  margin:32px 0; padding:20px 26px; border-left:4px solid var(--ax-acc);
  background:var(--ax-wash); border-radius:0 12px 12px 0;
  font-size:19px; line-height:1.6; font-weight:600; color:var(--ax-ink); font-style:italic;
}
.artx-body blockquote p{ font-size:inherit; color:inherit; margin:0; }
.artx-body ul{ list-style:none; margin:0 0 24px; padding-left:0; display:flex; flex-direction:column; gap:14px; }
.artx-body ul li{
  position:relative; padding-left:30px; font-size:18px; line-height:1.75; color:var(--ax-body);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D96A2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:0 3px; background-size:20px 20px;
}
.artx-body ol{ margin:0 0 24px; padding-left:22px; display:flex; flex-direction:column; gap:14px; }
.artx-body ol li{ font-size:18px; line-height:1.75; color:var(--ax-body); padding-left:6px; }
.artx-body h2 + p, .artx-body h3 + p{ margin-top:0; }

/* ---- SLOT BANNER PUBBLICITARIO ---- */
.artx-ad{ max-width:720px; margin:8px 0 40px; }
.artx-ad-label{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#aab3bd; margin-bottom:8px; text-align:center; }
.artx-ad-box{ position:relative; width:100%; border-radius:14px; overflow:hidden; }
.artx-ad-box img{ display:block; width:100%; height:auto; }
.artx-ad-box a{ display:block; }

/* ---- CARD CTA SCURA (fine articolo) ---- */
.artx-cta{
  max-width:720px; margin:44px 0 8px; display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  padding:26px 28px; background:var(--ax-ink); border-radius:18px;
}
.artx-cta-tx{ flex:1; min-width:220px; }
.artx-cta-tx b{ display:block; font-family:'Montserrat',sans-serif; font-weight:900; font-size:20px; color:#fff; line-height:1.25; }
.artx-cta-tx span{ display:block; font-size:14px; color:var(--ax-peach); color:#AEB7C2; margin-top:6px; line-height:1.5; }
.artx-cta a.artx-btn{ flex:none; }

.artx-btn{
  display:inline-flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif;
  font-weight:800; font-size:15px; color:#fff; background:var(--ax-acc); padding:14px 26px;
  border-radius:999px; box-shadow:0 8px 20px rgba(217,106,43,.28); border:none; cursor:pointer;
}
.artx-btn:hover{ background:var(--ax-acc-2); color:#fff; }

/* ---- ASIDE: condivisione ---- */
.artx-share{ display:flex; align-items:center; gap:12px; }
.artx-share .lbl{ font-size:13px; font-weight:700; color:var(--ax-ink); }
.artx-share a{ width:36px; height:36px; border-radius:50%; background:var(--ax-soft); color:var(--ax-ink); display:flex; align-items:center; justify-content:center; }
.artx-share a:hover{ background:#e6e9ec; color:var(--ax-ink); }
.artx-share svg{ width:17px; height:17px; }

/* ---- ASIDE: newsletter ---- */
.artx-news{ background:var(--ax-peach); border:1px solid var(--ax-peach-bd); border-radius:18px; padding:28px 26px; }
.artx-news-ic{ width:48px; height:48px; border-radius:12px; background:var(--ax-acc); display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 6px 14px rgba(217,106,43,.28); }
.artx-news h3{ font-family:'Montserrat',sans-serif; font-weight:900; font-size:21px; line-height:1.3; color:var(--ax-ink); margin:0 0 10px; text-wrap:balance; }
.artx-news p{ font-size:15px; line-height:1.65; color:var(--ax-peach-tx); margin:0 0 20px; }
.artx-news input[type=email]{
  width:100%; font-family:'Montserrat',sans-serif; font-weight:500; font-size:15px; color:var(--ax-ink);
  padding:13px 15px; border:1.5px solid var(--ax-peach-in); border-radius:10px; background:#fff; outline:none; margin-bottom:11px;
}
.artx-news input[type=email]:focus{ border-color:var(--ax-acc); box-shadow:0 0 0 3px rgba(217,106,43,.15); }
.artx-news button{ width:100%; font-family:'Montserrat',sans-serif; font-weight:800; font-size:15.5px; color:#fff; background:var(--ax-acc); border:none; padding:14px; border-radius:10px; cursor:pointer; box-shadow:0 8px 18px rgba(217,106,43,.28); }
.artx-news button:hover{ background:var(--ax-acc-2); }
.artx-news button:disabled{ opacity:.6; cursor:default; }
.artx-news .artx-news-priv{ font-size:12px; line-height:1.5; color:var(--ax-peach-tx); margin:12px 0 0; opacity:.85; }
.artx-news .artx-news-priv a{ color:var(--ax-peach-tx); text-decoration:underline; }
.artx-news-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.artx-news-cats{ display:flex; flex-direction:column; gap:9px; margin:0 0 16px; }
.artx-news-cats label{ display:flex; align-items:center; gap:9px; font-family:'Mulish',sans-serif; font-size:14.5px; font-weight:600; color:var(--ax-ink); cursor:pointer; }
.artx-news-cats input[type=checkbox]{ width:17px; height:17px; accent-color:var(--ax-acc); flex:none; cursor:pointer; }
.artx-news-back{ width:100%; background:none !important; color:var(--ax-peach-tx) !important; box-shadow:none !important; font-weight:700 !important; font-size:13.5px !important; padding:10px 0 0 !important; }
.artx-news-back:hover{ color:var(--ax-acc) !important; }

/* ---- ASIDE: altri articoli ---- */
.artx-related h4{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; color:var(--ax-ink); margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--ax-line-2); }
.artx-rel-list{ display:flex; flex-direction:column; gap:16px; }
.artx-rel{ display:flex; gap:13px; align-items:flex-start; }
.artx-rel .thumb, .artx-rel .art-cover, .artx-rel .cover, .artx-rel .blog-cover{ flex:none; width:76px; height:56px; border-radius:10px; overflow:hidden; background:var(--ax-soft); display:block; }
.artx-rel .blog-cover .cv-icon, .artx-rel .blog-cover .cv-wm{ display:none; }
.artx-rel img{ width:100%; height:100%; object-fit:cover; display:block; }
.artx-rel h5{ flex:1; min-width:0; font-family:'Mulish',sans-serif; font-size:13px; font-weight:600; line-height:1.4; color:var(--ax-ink); margin:0; }
.artx-rel:hover h5{ color:var(--ax-acc); }

/* ---- NAV PREV/NEXT ---- */
.artx-nav{ border-top:1px solid var(--ax-line-2); margin-top:48px; }
.artx-nav-in{ max-width:1200px; margin:0 auto; padding:28px 32px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.artx-nav a{ display:flex; flex-direction:column; gap:6px; }
.artx-nav a.next{ text-align:right; align-items:flex-end; }
.artx-nav .lab{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ax-acc); text-transform:uppercase; letter-spacing:.08em; }
.artx-nav .ttl{ font-size:14.5px; font-weight:700; color:var(--ax-ink); line-height:1.4; }
.artx-nav a:hover .ttl{ color:var(--ax-acc); }

/* ---- ANTEPRIMA banner ---- */
.artx-preview{ position:sticky; top:0; z-index:1000; background:#F05800; color:#fff; text-align:center; padding:10px 16px; font:600 14px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif; }

/* ---- RESPONSIVE ---- */
@media (max-width:900px){
  .artx-grid{ grid-template-columns:1fr; gap:36px; padding:32px 20px 8px; }
  .artx-aside{ position:static; top:auto; }
  .artx-hero-in{ padding:40px 20px 32px; }
  .artx-hero h1{ font-size:30px; }
  .artx-nav-in{ padding:24px 20px; grid-template-columns:1fr; }
  .artx-body h2{ font-size:23px; }
  .artx-body h3{ font-size:20px; }
}