/* ANTEPRIMA — Stile 3 "Magazine"
   Audace: la PRIMA fascia è una grande BANDA SCURA full-bleed che contiene
   l'hero in overlay (apertura drammatica come le sezioni scure di L'Arena),
   tipografia grande, barre di sezione con blocco colore, chip quadrati.
   Angoli vivi, sans. Scoped su body.tu-stile-3. Niente border-radius. */

body.tu-stile-3 {
  --tu-border: #e2e2e6; background: #fff;
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body.tu-stile-3 .tu-card h3,
body.tu-stile-3 .tu-fascia-title,
body.tu-stile-3 .tu-article-title,
body.tu-stile-3 .tu-archive-title { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }

/* Titolo sezione: grande e grassetto con blocco colore d'accento davanti */
body.tu-stile-3 .tu-fascia { border-bottom: 1px solid var(--tu-border); padding: 28px 0; }
body.tu-stile-3 .tu-fascia-title {
  font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.2px;
  color: var(--tu-text); border: 0; padding: 0 0 0 16px; margin-bottom: 20px; position: relative;
}
body.tu-stile-3 .tu-fascia-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 7px; background: var(--tu-primary); }

/* Card nette, ANGOLI VIVI, hover che solleva; chip quadrato pieno */
body.tu-stile-3 .tu-grid { gap: 26px; }
body.tu-stile-3 .tu-card {
  background: #fff; border: 1px solid var(--tu-border); border-radius: 0; overflow: hidden;
  box-shadow: 0 2px 6px rgba(30,20,50,.07); transition: transform .16s ease, box-shadow .16s ease;
}
body.tu-stile-3 .tu-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,20,50,.17); }
body.tu-stile-3 .tu-thumb { aspect-ratio: 16/9; border-radius: 0; }
body.tu-stile-3 .tu-card-cat {
  display: inline-block; background: var(--tu-primary); color: #fff;
  padding: 4px 11px; border-radius: 0; font-size: .66rem; font-weight: 800; letter-spacing: .8px;
}
body.tu-stile-3 .tu-card-cat:hover { background: var(--tu-accent); color: #fff; text-decoration: none; }
/* Il rientro vale SOLO per le card della griglia; negli elenchi archivio il
   chip resta allineato al titolo. */
body.tu-stile-3 .tu-card > .tu-card-cat { margin: 13px 14px 0; }
body.tu-stile-3 .tu-card h3 { margin: 9px 14px 0; font-size: 1.14rem; font-weight: 800; line-height: 1.22; }
body.tu-stile-3 .tu-card .tu-meta { display: block; margin: 8px 14px 16px; font-size: .73rem; }

/* PRIMA FASCIA = grande banda scura full-bleed con hero in overlay */
body.tu-stile-3 .tu-fascia:first-of-type {
  background: #0e1016; color: #fff; border-bottom: 0;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 6px calc(50vw - 50%) 36px;
}
body.tu-stile-3 .tu-fascia:first-of-type .tu-fascia-title { color: #fff; }
body.tu-stile-3 .tu-fascia:first-of-type .tu-card { background: #171a22; border-color: #262b36; }
body.tu-stile-3 .tu-fascia:first-of-type .tu-card h3 a { color: #fff; }
body.tu-stile-3 .tu-fascia:first-of-type .tu-meta { color: #9aa0a6; }
body.tu-stile-3 .tu-hero { align-items: start; }
body.tu-stile-3 .tu-hero .tu-card:first-child { position: relative; min-height: 480px; border: 0; }
body.tu-stile-3 .tu-hero .tu-card:first-child > a:first-child { position: absolute; inset: 0; display: block; }
body.tu-stile-3 .tu-hero .tu-card:first-child .tu-thumb { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
body.tu-stile-3 .tu-hero .tu-card:first-child::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,7,12,.9), rgba(6,7,12,.15) 55%, rgba(6,7,12,0) 80%);
}
body.tu-stile-3 .tu-hero .tu-card:first-child .tu-card-cat { position: absolute; top: 0; left: 0; z-index: 2; margin: 0; }
body.tu-stile-3 .tu-hero .tu-card:first-child h3 { position: absolute; left: 22px; right: 22px; bottom: 40px; z-index: 2; margin: 0; color: #fff; font-size: 2.15rem; line-height: 1.12; font-weight: 800; letter-spacing: -.5px; }
body.tu-stile-3 .tu-hero .tu-card:first-child h3 a { color: #fff; }
body.tu-stile-3 .tu-hero .tu-card:first-child .tu-meta { position: absolute; left: 22px; bottom: 18px; z-index: 2; margin: 0; color: #d8d4e0; }
@media (max-width: 800px) { body.tu-stile-3 .tu-hero .tu-card:first-child { min-height: 340px; } body.tu-stile-3 .tu-hero .tu-card:first-child h3 { font-size: 1.5rem; } }

/* Articolo: titolo XL, kicker quadrato, lead marcato */
body.tu-stile-3 .tu-article-cat { border-radius: 0; background: var(--tu-primary); font-weight: 800; }
body.tu-stile-3 .tu-article-cat:hover { background: var(--tu-accent); }
body.tu-stile-3 .tu-article-title { font-size: 2.7rem; font-weight: 800; letter-spacing: -.6px; line-height: 1.1; }
body.tu-stile-3 .tu-article-standfirst { font-size: 1.3rem; color: #3a3a3a; font-weight: 500; }
body.tu-stile-3 .tu-single-main .tu-featured .tu-thumb { border-radius: 0; }
body.tu-stile-3 .tu-content > p:first-of-type { font-size: 1.24rem; font-weight: 500; }
body.tu-stile-3 .tu-archive-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.4px; }

/* ===== STRUTTURALE — Singolo "longform" (alla La Verità/longform) =====
   Niente sidebar, colonna di lettura centrata, immagine di apertura FULL-BLEED
   a tutta larghezza, testata (kicker/titolo/lead/meta) centrata. Solo layout. */
body.tu-stile-3.single .tu-single-layout { display: block; }
body.tu-stile-3.single .tu-single-aside { display: none; }
body.tu-stile-3.single .tu-single-main { max-width: 820px; margin: 0 auto; }
body.tu-stile-3.single .tu-article { max-width: 820px; }
body.tu-stile-3.single .tu-article-header { text-align: center; }
body.tu-stile-3.single .tu-article-title { font-size: 3rem; }
body.tu-stile-3.single .tu-article-standfirst { font-size: 1.4rem; }
body.tu-stile-3.single .tu-featured { margin-inline: calc(50% - 50vw); margin-top: 14px; }
body.tu-stile-3.single .tu-featured .tu-thumb { width: 100%; max-height: 72vh; object-fit: cover; }
body.tu-stile-3.single .tu-featured figcaption { max-width: 820px; margin: 0 auto; }
@media (max-width: 600px) { body.tu-stile-3.single .tu-article-title { font-size: 2rem; } }

/* ===== STRUTTURALE — Archivio a GRIGLIA (magazine), SENZA sidebar ===== */
body.tu-stile-3 .tu-archive-layout { display: block; }
body.tu-stile-3 .tu-archive-aside { display: none; }
body.tu-stile-3 .tu-archive-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
body.tu-stile-3 .tu-archive-list .tu-item {
  flex-direction: column; gap: 0; padding: 0; background: #fff;
  border: 1px solid var(--tu-border);
}
body.tu-stile-3 .tu-archive-list .tu-item-thumb { flex: initial; width: 100%; }
body.tu-stile-3 .tu-archive-list .tu-item-thumb .tu-thumb { aspect-ratio: 16/9; width: 100%; }
body.tu-stile-3 .tu-archive-list .tu-item-body { padding: 12px 14px 16px; }
body.tu-stile-3 .tu-archive-list .tu-item-excerpt { display: none; }
/* lead in evidenza: immagine grande a tutta larghezza sopra la griglia */
body.tu-stile-3 .tu-lead-thumb .tu-thumb { aspect-ratio: 21/9; width: 100%; object-fit: cover; }
body.tu-stile-3 .tu-lead-title { font-size: 2rem; font-weight: 800; }