/* ============================================================
   PADRI D'ACCIAIO — Libreria componenti blog "rivista"
   Estende main.css (usa le sue variabili: --red, --bg, --surface,
   --border, --text, --muted, font Bebas Neue + Inter).
   Ispirata al layout newsletter inVictus, ma in linguaggio PDA:
   stesso rosso #C0311F, niente loud gratuito, dosaggio premium.
   Prefisso .bc- per non collidere con le classi esistenti.
   ============================================================ */

/* ---- Tinte derivate dal rosso brand (solo qui) ---- */
:root {
  --bc-red:        #C0311F;
  --bc-red-tint:   #FBEAE7;  /* rosso chiarissimo per box-key */
  --bc-red-tint-bd:#E9B4AC;  /* bordo tenue per box-key */
  --bc-ink:        #181818;
}

/* ============================================================
   0. HEADER ARROTONDATO  —  <div class="article-header bc-header">
   Trasforma la banda scura full-width del titolo in un riquadro
   con angoli arrotondati e margini laterali (coerente con le box).
   Opt-in: aggiungere la classe bc-header al .article-header.
   ============================================================ */
.bc-header {
  margin: 84px 16px 56px;   /* top: spazio sotto la nav fissa */
  padding: 56px 0;
  border-radius: 20px;
  border-bottom: 0;
}

/* ============================================================
   1. INDICE ARGOMENTI (TOC)  —  <div class="bc-toc">
   ============================================================ */
.bc-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 32px 0;
}
.bc-toc__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--bc-red);
  text-transform: uppercase;
  margin: 0 0 14px;
  text-align: center;
}
.bc-toc__list { list-style: none; margin: 0; padding: 0; }
.bc-toc__list li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.bc-toc__list li:last-child { border-bottom: 0; }
.bc-toc__list li strong { color: var(--bc-red); font-weight: 600; }

/* ============================================================
   2. SECTION HEADER  —  <h2 class="bc-section">💪 Titolo</h2>
   ============================================================ */
.bc-section {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--bc-red);
  text-transform: uppercase;
  margin: 8px 0 18px;
}

/* ============================================================
   3. DIVISORE DI SEZIONE
   Nessuna pennellata ondulata: il separatore è la linea ROSSA e
   più spessa sopra ogni titolo sezione, che sostituisce quella
   grigia sottile di `.article-content h2`. Specificità alzata
   (`h2.bc-section`) per vincere sulla regola del tema.
   ============================================================ */
.article-content h2.bc-section {
  border-top: 3px solid var(--bc-red);
  padding-top: 30px;
  margin-top: 44px;
}

/* ============================================================
   4. BOX EVIDENZA (3 tipi)
   ============================================================ */
.bc-box {
  border-radius: 12px;
  padding: 22px 26px;
  margin: 26px 0;
  font-size: 15px;
  line-height: 1.75;
}
.bc-box p { margin: 0 0 12px; }
.bc-box p:last-child { margin-bottom: 0; }

/* 4a. KEY — spiegazione chiave (rosso chiarissimo, bordo rosso) */
.bc-box--key {
  background: var(--bc-red-tint);
  border: 2px solid var(--bc-red);
  color: var(--bc-ink);
}
.bc-box--key strong { color: var(--bc-red); }

/* 4b. NOTE — nota secondaria (grigio sobrio) */
.bc-box--note {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.bc-box--note strong { color: var(--bc-ink); }

/* 4c. PUNCH — il concetto da ricordare (rosso pieno, testo bianco) */
.bc-box--punch {
  background: var(--bc-red);
  color: #FFFFFF;
  border: 0;
}
.bc-box--punch strong { color: #FFFFFF; font-weight: 700; }

/* ============================================================
   5. CALLOUT CON ICONA  —  <div class="bc-callout"> ...
   ============================================================ */
.bc-callout {
  background: var(--bc-red);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 22px 26px;
  margin: 34px 0 26px;
  font-size: 15px;
  line-height: 1.75;
  border-left: 6px solid rgba(255,255,255,0.45);
}
.bc-callout strong { color: #FFFFFF; font-weight: 700; }

/* ============================================================
   6. FRAME GRAFICO  —  <figure class="bc-chart">
   ============================================================ */
.bc-chart {
  margin: 30px 0;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.bc-chart img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.bc-chart figcaption {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--bc-ink);
  text-transform: uppercase;
  margin-top: 12px;
}
.bc-chart__legend {
  display: flex; gap: 22px; justify-content: center;
  margin-top: 10px; font-size: 13px; color: var(--muted);
}
.bc-chart__legend span { display: inline-flex; align-items: center; gap: 7px; }
.bc-chart__swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* ============================================================
   7. FIGURA CON DIDASCALIA / FUMETTO  —  <figure class="bc-figure">
   ============================================================ */
.bc-figure { margin: 30px 0; }
.bc-figure img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.bc-figure__caption {
  background: var(--bc-red);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: -22px; margin-left: 16px; margin-right: 16px;
  position: relative;
}
.bc-figure__caption strong { color: #FFFFFF; }

/* ============================================================
   8. BANNER PROMO  —  <a class="bc-banner"> ...
   ============================================================ */
.bc-banner {
  display: block;
  background: var(--bc-ink);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 30px 32px;
  margin: 36px 0;
  text-decoration: none;
  border: 1px solid #2a2a2a;
  overflow: hidden;
}
.bc-banner__kicker {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px; font-size: 15px; color: var(--bc-red);
  text-transform: uppercase;
}
.bc-banner__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; line-height: 1.05; margin: 4px 0 10px; color: #FFFFFF;
}
.bc-banner__sub { font-size: 14px; color: #c9c9c9; margin-bottom: 18px; }
.bc-banner__cta {
  display: inline-block;
  background: var(--bc-red);
  color: #FFFFFF; font-weight: 600; font-size: 15px;
  padding: 12px 26px; border-radius: 8px;
}

/* ============================================================
   9. PULL-QUOTE  —  <blockquote class="bc-pullquote">
   ============================================================ */
.bc-pullquote {
  border-left: 4px solid var(--bc-red);
  margin: 30px 0; padding: 6px 0 6px 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; line-height: 1.15; letter-spacing: 0.5px;
  color: var(--bc-ink);
}

/* ============================================================
   FIX leggibilità: testo BIANCO dentro i componenti a fondo rosso.
   Serve a battere `.article-content p { color: var(--muted) }` del
   tema, che altrimenti rende grigi (e illeggibili) i <p>/<li> dentro
   i box rossi. Specificità alzata con `.article-content` davanti.
   ============================================================ */
.article-content .bc-box--punch,
.article-content .bc-box--punch p,
.article-content .bc-box--punch li,
.article-content .bc-box--punch strong,
.article-content .bc-callout,
.article-content .bc-callout p,
.article-content .bc-callout li,
.article-content .bc-callout strong,
.article-content .bc-figure__caption,
.article-content .bc-figure__caption p,
.article-content .bc-figure__caption strong {
  color: #FFFFFF;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .bc-section { font-size: 28px; }
  .bc-banner__title { font-size: 24px; }
  .bc-pullquote { font-size: 23px; }
  .bc-header { margin: 70px 12px 40px; padding: 44px 0; }
}

/* ============================================================
   10. COVER CARD BLOG  —  <img/div class="blog-card__cover">
   Innesto sopra .blog-card (padding 32px): bleed ai bordi
   ============================================================ */
.blog-card__cover {
  display: block;
  margin: -32px -32px 22px;
  width: calc(100% + 64px);
  height: 190px;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--border);
  background: #F4F3F1;
}
.blog-card__cover--chart {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
}
.blog-card__cover--chart svg {
  height: 162px;
  width: auto;
  max-width: 100%;
}