/* ==========================================================================
   METAL S.r.l. — blog dentro il guscio dell'app
   Usa solo le variabili del sito: nessun colore inventato.
   ========================================================================== */

.blogwrap{padding:48px 0 72px}
@media(min-width:900px){.blogwrap{padding:72px 0 96px}}

.bcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--grigio);margin-bottom:26px;
}
.bcrumb a{color:var(--acc);font-weight:600}
.bcrumb span{color:var(--grigio2)}

.bh2{font-size:clamp(1.4rem,3vw,2rem);margin:52px 0 22px}

/* ---------- articolo ------------------------------------------------------ */
.blogart{max-width:760px}
.blogart h1{font-size:clamp(1.9rem,5vw,3rem);margin-bottom:20px}
.blogart h2{font-size:clamp(1.3rem,3.2vw,1.85rem);margin:2.1em 0 .55em}
.blogart h3{margin:1.7em 0 .5em}
.blogart p{font-size:17px;line-height:1.75;margin:0 0 1.15em}
.blogart>p:first-of-type em{color:var(--grigio);font-size:14.5px}
.blogart ul,.blogart ol{padding-left:1.25em;line-height:1.75;margin:0 0 1.15em}
.blogart li{margin-bottom:.4em}
.blogart a{color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.blogart img{border-radius:var(--r);margin:22px 0}
.blogart blockquote{
  margin:24px 0;padding:16px 22px;border-left:3px solid var(--acc);
  background:var(--nebbia);color:var(--grigio);border-radius:0 var(--r) var(--r) 0;
}

/* le tabelle sul telefono scorrono invece di sfondare lo schermo */
.tabx{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;
  border:1px solid var(--linea);border-radius:var(--r);
}
.blogart table{border-collapse:collapse;width:100%;min-width:440px;margin:0;font-size:15.5px}
.blogart th,.blogart td{border-bottom:1px solid var(--linea);padding:12px 14px;text-align:left}
.blogart tr:first-child th,.blogart thead th{background:var(--nebbia);font-weight:700;color:var(--nero)}
.blogart tr:last-child td{border-bottom:0}

/* il richiamo dentro il testo prende la forma dei pulsanti del sito */
.blogart a.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--acc);color:#fff;border:1.5px solid var(--acc);border-radius:var(--r);
  padding:15px 26px;margin:26px 0;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;text-decoration:none;
  transition:background var(--t),transform var(--t);
}
.blogart a.cta:hover{background:var(--acc-d);border-color:var(--acc-d);transform:translateY(-2px)}

.bnav{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:44px;padding-top:28px;border-top:1px solid var(--linea);
}

/* ---------- indice -------------------------------------------------------- */
.bloglist{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:8px}
@media(min-width:720px){.bloglist{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.bcard{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:24px;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--ombra-f);border-color:#C8CDD5}
.bcard h3{font-size:1.12rem;line-height:1.3;margin-bottom:9px}
.bcard h3 a{color:var(--nero);text-decoration:none}
.bcard h3 a:hover{color:var(--acc)}
.bcard p{color:var(--grigio);font-size:15px;line-height:1.6;margin:0}

/* la barra azioni del telefono non deve coprire la fine della pagina */
@media(max-width:860px){.blogwrap{padding-bottom:104px}}

/* ==========================================================================
   Copertine, sezioni tematiche e articolo in evidenza (agg. 2026-08-17)
   ========================================================================== */

/* foto di testa dentro l'articolo */
.bhero{margin:10px 0 30px}
.bhero img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);margin:0;display:block}

/* immagine delle schede */
.bimg{display:block;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.bimg img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform var(--t)}

/* scheda con copertina: il padding passa al corpo */
.bcard.himg{padding:0;display:flex;flex-direction:column}
.bcard.himg:hover .bimg img{transform:scale(1.04)}
.bcard-body{padding:18px 22px 24px;display:flex;flex-direction:column;gap:9px}
.bcard-body h3{margin:0}
.bcard-body p{margin:0}

/* etichetta di categoria */
.bchip{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc);background:var(--nebbia);
  padding:4px 10px;border-radius:999px}

/* articolo in evidenza */
.bfeat{display:grid;grid-template-columns:1fr;border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:16px;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.bfeat:hover{transform:translateY(-3px);box-shadow:var(--ombra-f);border-color:#C8CDD5}
@media(min-width:860px){.bfeat{grid-template-columns:1.2fr 1fr}}
.bfeat .bimg{border-radius:0}
.bfeat .bimg img{aspect-ratio:16/10;height:100%}
.bfeat-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.bfeat-body h3{font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.25;margin:0}
.bfeat-body h3 a{color:var(--nero);text-decoration:none}
.bfeat-body h3 a:hover{color:var(--acc)}
.bfeat-body p{color:var(--grigio);margin:0;line-height:1.65}
.bmore{color:var(--acc);font-weight:700;font-size:14px}

/* sezioni tematiche */
.bsez{margin-top:44px}
.bsez .bh2{margin:0 0 22px}