/* ═══════════════════════════════════════════════════════
   GP GOMME — BLOG
   Estende il design system del sito (dark + oro).
   Mobile-first: le regole base valgono per il telefono.
   ═══════════════════════════════════════════════════════ */

.blog-body{background:var(--dark-1);color:var(--white)}

/* ─── HERO INDICE ─── */
.bhero{padding:132px 0 42px;background:
  radial-gradient(900px 380px at 50% -10%,var(--gold-10),transparent 70%),var(--dark-1)}
.bhero-h{font-family:var(--fs);font-size:clamp(32px,7vw,54px);line-height:1.1;margin-bottom:16px}
.bhero-h em{color:var(--gold);font-style:italic}
.bhero-p{font-size:16px;line-height:1.8;color:var(--gray-2);max-width:640px}

/* ─── GRIGLIA ARTICOLI ─── */
.bsec{padding:28px 0 70px}
.bsec-home{padding:70px 0;border-top:1px solid rgba(232,185,48,.08)}
.bgrid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:30px}
.bcard{display:flex;flex-direction:column;background:var(--dark-3);border:1px solid rgba(255,255,255,.06);
  border-radius:16px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.bcard:hover{transform:translateY(-4px);border-color:var(--gold-20);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.bcard-img{aspect-ratio:16/9;overflow:hidden;background:var(--dark-4)}
.bcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bcard:hover .bcard-img img{transform:scale(1.05)}
.bcard-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard-date{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bcard-body h3{font-family:var(--fs);font-size:19px;line-height:1.35;font-weight:600}
.bcard-body p{font-size:14.5px;line-height:1.7;color:var(--gray-2)}
.bcard-more{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--gold)}
.bsec-more{margin-top:34px;text-align:center}

/* ─── TESTATA ARTICOLO ─── */
.art-head{padding:118px 0 0;background:
  radial-gradient(760px 320px at 50% 0,var(--gold-10),transparent 72%),var(--dark-1)}
.art-head-in{max-width:820px}
.art-crumbs{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--gray-3);margin-bottom:20px}
.art-crumbs a{color:var(--gray-2)}
.art-crumbs a:hover{color:var(--gold)}
.art-title{font-family:var(--fs);font-size:clamp(28px,6.4vw,46px);line-height:1.16;margin-bottom:16px}
.art-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--gray-2);margin-bottom:30px}
.art-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);display:inline-block}
.art-hero{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.07);max-width:900px;margin:0 auto}
.art-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ─── CORPO ARTICOLO ─── */
.art-wrap{padding:44px 28px 20px}
.art-body{max-width:730px;margin:0 auto;font-size:16.5px;line-height:1.85;color:var(--gray-1)}
.art-body > *:first-child{margin-top:0}
.art-body p{margin:0 0 22px}
.art-body h2{font-family:var(--fs);font-size:clamp(23px,4.6vw,31px);line-height:1.25;color:var(--white);
  margin:46px 0 18px;padding-top:12px;border-top:1px solid rgba(232,185,48,.14)}
.art-body h3{font-family:var(--fs);font-size:clamp(19px,3.6vw,22px);line-height:1.35;color:var(--white);margin:32px 0 14px}
.art-body strong{color:var(--white);font-weight:600}
.art-body em{color:var(--gray-1)}
.art-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .25s var(--ease)}
.art-body a:hover{color:#f0c94a}
.art-body ul,.art-body ol{margin:0 0 24px;padding-left:22px}
.art-body ul{list-style:none;padding-left:4px}
.art-body ul li{position:relative;padding-left:22px;margin-bottom:11px}
.art-body ul li::before{content:'';position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:2px;
  background:var(--gold);opacity:.85}
.art-body ol{list-style:decimal}
.art-body ol li{margin-bottom:11px;padding-left:4px}
.art-body ol li::marker{color:var(--gold);font-weight:700}
.art-body img{border-radius:14px;margin:30px auto;border:1px solid rgba(255,255,255,.07);width:100%;height:auto}
.art-body hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);margin:38px 0}
.art-body blockquote{margin:28px 0;padding:20px 22px;border-left:3px solid var(--gold);background:var(--gold-50);
  border-radius:0 12px 12px 0;color:var(--white);font-size:17px}
.art-body blockquote p:last-child{margin-bottom:0}

/* tabelle: sul telefono scorrono invece di rompere il layout */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 26px;
  border:1px solid rgba(255,255,255,.08);border-radius:14px;background:var(--dark-2)}
.art-body table{width:100%;border-collapse:collapse;min-width:520px;font-size:15px}
.art-body th{background:var(--dark-4);color:var(--white);font-weight:600;text-align:left;
  padding:14px 16px;border-bottom:1px solid rgba(232,185,48,.18);white-space:nowrap}
.art-body td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
.art-body tr:last-child td{border-bottom:none}

/* ─── BOX INDICE E PUNTI CHIAVE ─── */
.art-body .art-toc,.art-body .art-key{margin:0 0 30px;padding:22px 24px;border-radius:16px;
  border:1px solid rgba(255,255,255,.07);background:var(--dark-3)}
.art-body .art-key{background:linear-gradient(160deg,var(--gold-10),transparent 70%),var(--dark-3);border-color:var(--gold-20)}
.art-body .art-toc-t,.art-body .art-key-t{font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.art-body .art-toc ul,.art-body .art-key ul{list-style:none;padding:0;margin:0}
.art-body .art-toc li{margin-bottom:10px;padding-left:22px;position:relative;font-size:15px;line-height:1.55}
.art-body .art-toc li::before{content:'→';position:absolute;left:0;top:0;width:auto;height:auto;
  background:none;border-radius:0;color:var(--gold);opacity:.75;font-size:13px}
.art-body .art-toc a{color:var(--gray-1);text-decoration:none}
.art-body .art-toc a:hover{color:var(--gold)}
.art-body .art-key li{margin-bottom:11px;padding-left:24px;position:relative;font-size:15.5px;line-height:1.65}
.art-body .art-key li::before{content:'';position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--gold)}
.art-body .art-key li:last-child,.art-body .art-toc li:last-child{margin-bottom:0}
.art-body .art-key > p:not(.art-key-t){font-size:16px;line-height:1.75;color:var(--white);margin:0 0 18px}
.art-body .art-key .tbl-wrap{margin:0;background:rgba(0,0,0,.22);border-color:rgba(232,185,48,.14)}
.art-body .art-key th{background:rgba(232,185,48,.10)}
.art-body .art-key table{font-size:14.5px;min-width:420px}
.art-body .art-key td{color:var(--gray-1)}
.art-body .art-toc > *:last-child,.art-body .art-key > *:last-child{margin-bottom:0}

/* ─── CTA ─── */
.art-cta{max-width:730px;margin:12px auto 0}
.art-cta-mid{margin:34px auto 38px}
.art-cta-in{padding:30px 26px;border-radius:18px;border:1px solid var(--gold-20);
  background:linear-gradient(150deg,rgba(232,185,48,.13),transparent 65%),var(--dark-3)}
.art-cta-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.art-cta-h{font-family:var(--fs);font-size:clamp(21px,4.4vw,27px);line-height:1.25;color:var(--white);margin-bottom:12px}
.art-cta-p{font-size:15.5px;line-height:1.75;color:var(--gray-2);margin-bottom:22px}
.art-cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.art-cta-btns .btn{padding:14px 26px;font-size:13.5px}

/* i bottoni dentro l'articolo non devono ereditare la sottolineatura dei link */
.art-body .btn,.art-body .art-cta a{text-decoration:none}

/* tabelle a 2-3 colonne: sul telefono diventano blocchi, niente scroll laterale */
@media(max-width:620px){
  .art-body .tbl-wrap.stack{overflow:visible;border:none;background:none;border-radius:0}
  .art-body .tbl-wrap.stack table{min-width:0;width:100%;display:block}
  .art-body .tbl-wrap.stack thead{display:none}
  .art-body .tbl-wrap.stack tbody{display:block}
  .art-body .tbl-wrap.stack tr{display:block;background:var(--dark-2);border:1px solid rgba(255,255,255,.07);
    border-radius:12px;padding:6px 4px;margin-bottom:12px}
  .art-body .tbl-wrap.stack tr:last-child{margin-bottom:0}
  .art-body .tbl-wrap.stack td{display:block;border:none;padding:10px 14px}
  .art-body .tbl-wrap.stack td::before{content:attr(data-th);display:block;font-size:10.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.85;margin-bottom:5px}
  .art-body .art-key .tbl-wrap.stack tr{background:rgba(0,0,0,.24);border-color:rgba(232,185,48,.14)}
}

/* ─── DESKTOP ─── */
@media(min-width:768px){
  .bgrid{grid-template-columns:repeat(2,1fr);gap:26px}
  .bhero{padding:168px 0 54px}
  .art-head{padding:150px 0 0}
  .art-wrap{padding:56px 28px 24px}
  .art-body{font-size:17.5px}
  .art-cta-in{padding:38px 40px}
}
@media(min-width:1024px){
  .bgrid{grid-template-columns:repeat(3,1fr)}
  .art-body{font-size:18px;line-height:1.9}
}