/* ============================================================
   CR1 — Grafiche del TG (stile in un solo posto)
   Il giornalista sceglie il layout e scrive i testi; fondo, font, colori,
   griglia e dimensioni li decide questo file: così le grafiche restano
   coerenti anche se il contenuto cambia ogni volta.

   Safe area misurate su una puntata del TG (coordinate 1920×1080):
   - filigrana CR1 in alto a sinistra ~x 130–320, y 70–125 → niente sopra y 160;
   - bug «CR1 TG» da y ~885 e crawler y ~965–1025 → niente sotto y 845 (40px d'aria sopra il bug);
   - title-safe laterale 96px (--safe di classifica.css).
   Il pannello occupa esattamente l'area utile: x 96–1824, y 160–845.

   Tutto è sotto .stage[data-sport="tg"] (lo imposta renderTG in tg.js).
   Niente box-shadow, inline-flex né backdrop-filter: html2canvas li sbaglia nel JPG.
   ============================================================ */

@font-face{font-family:'Roboto';font-weight:400;font-display:block;src:url('../fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-weight:500;font-display:block;src:url('../fonts/roboto-500.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-weight:700;font-display:block;src:url('../fonts/roboto-700.woff2') format('woff2');}

.stage[data-sport="tg"]{
  --tg-accent:#7fd3ff;            /* l'unico colore d'accento: occhiello, righe, numeri, date */
  --tg-panel:rgba(9,24,58,.80);   /* blu notte traslucido: il fondo si vede, il testo si legge */
  --tg-edge:rgba(255,255,255,.14);
  --tg-soft:rgba(255,255,255,.07);
  --tg-muted:rgba(255,255,255,.72);
  font-family:'Roboto',Arial,sans-serif;
  color:#fff;
  background:#1c3561 url('tg-sfondo.jpg') center/cover no-repeat;
}

/* ---------- PANNELLO: l'area utile, con 56px di respiro interno ---------- */
.stage[data-sport="tg"] .tg-panel{
  position:absolute;left:96px;top:160px;width:1728px;height:685px;box-sizing:border-box;
  padding:46px 56px 40px;display:flex;flex-direction:column;overflow:hidden; /* nulla esce mai dalla safe area */
  background:var(--tg-panel);border:1px solid var(--tg-edge);border-radius:20px;
}

/* ---------- TESTATA: occhiello, titolo (max 2 righe), sottotitolo, riga d'accento; icona nell'angolo in alto a destra ---------- */
.stage[data-sport="tg"] .tg-head{flex:0 0 auto;}
.stage[data-sport="tg"] .tg-head.con-icona{padding-right:190px;}
.stage[data-sport="tg"] .tg-kicker{
  font-size:28px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--tg-accent);
  margin-bottom:6px;white-space:nowrap;overflow:hidden;
}
.stage[data-sport="tg"] .tg-title{font-size:76px;font-weight:700;line-height:1.08;letter-spacing:-.5px;overflow-wrap:break-word;}
.stage[data-sport="tg"] .tg-sub{font-size:36px;font-weight:400;line-height:1.2;color:var(--tg-muted);margin-top:10px;white-space:nowrap;overflow:hidden;}
.stage[data-sport="tg"] .tg-rule{flex:0 0 auto;position:relative;height:3px;margin:24px 0 30px;background:rgba(255,255,255,.22);}
.stage[data-sport="tg"] .tg-rule::before{content:'';position:absolute;left:0;top:-2px;width:180px;height:7px;background:var(--tg-accent);}
.stage[data-sport="tg"] .tg-panel > .tg-ico{position:absolute;right:56px;top:40px;width:140px;height:140px;}
.stage[data-sport="tg"] .tg-ico svg{display:block;width:100%;height:100%;}

/* ---------- CORPO: lo spazio che resta; renderTG ne riduce il corpo del testo finché ci sta ---------- */
.stage[data-sport="tg"] .tg-body{
  flex:1 1 auto;min-height:0;overflow:hidden;font-size:52px;
  display:flex;flex-direction:column;justify-content:safe center; /* safe: se sfora, sfora in basso e si misura */
}
.stage[data-sport="tg"] .tg-source{flex:0 0 auto;margin-top:14px;text-align:right;font-size:26px;color:var(--tg-muted);white-space:nowrap;overflow:hidden;}

/* ELENCO: voci puntate (il caso «Tempo libero e volontariato») */
.stage[data-sport="tg"] .tg-list{margin:0;padding:0;list-style:none;}
.stage[data-sport="tg"] .tg-list li{position:relative;padding-left:1.05em;line-height:1.22;font-weight:500;}
.stage[data-sport="tg"] .tg-list li + li{margin-top:.42em;}
.stage[data-sport="tg"] .tg-list li::before{
  content:'';position:absolute;left:.12em;top:.42em;width:.36em;height:.36em;border-radius:50%;background:var(--tg-accent);
}
.stage[data-sport="tg"] .tg-list li b{font-weight:700;color:var(--tg-accent);}

/* NUMERI: riquadri con valore grande + didascalia (1, 2, 3 in riga; 4 = 2×2) */
.stage[data-sport="tg"] .tg-nums{flex:1 1 auto;display:grid;gap:28px;}
.stage[data-sport="tg"] .tg-nums.n1{grid-template-columns:1fr;}
.stage[data-sport="tg"] .tg-nums.n2{grid-template-columns:1fr 1fr;}
.stage[data-sport="tg"] .tg-nums.n3{grid-template-columns:1fr 1fr 1fr;}
.stage[data-sport="tg"] .tg-nums.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.stage[data-sport="tg"] .tg-num{
  min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:.3em .6em;background:var(--tg-soft);border-left:8px solid var(--tg-accent);border-radius:10px;
}
.stage[data-sport="tg"] .tg-num .v{font-size:2.3em;font-weight:700;line-height:1.05;color:var(--tg-accent);white-space:nowrap;}
.stage[data-sport="tg"] .tg-num .l{font-size:.8em;font-weight:500;line-height:1.22;margin-top:.15em;}
.stage[data-sport="tg"] .tg-nums.n1 .tg-num,.stage[data-sport="tg"] .tg-nums.n2 .tg-num{padding:.4em .8em;}
.stage[data-sport="tg"] .tg-nums.n1 .v{font-size:3.4em;}

/* CITAZIONE: virgolette d'accento, testo, autore */
.stage[data-sport="tg"] .tg-quote{display:flex;gap:.5em;}
.stage[data-sport="tg"] .tg-quote .qm{flex:0 0 auto;font-size:4.2em;font-weight:700;line-height:.82;color:var(--tg-accent);}
.stage[data-sport="tg"] .tg-quote .qt{flex:1;min-width:0;padding-top:.1em;}
.stage[data-sport="tg"] .tg-quote .qx{font-size:1em;font-weight:400;line-height:1.3;}
.stage[data-sport="tg"] .tg-quote .qa{margin-top:.7em;font-size:.75em;font-weight:700;color:var(--tg-accent);}
.stage[data-sport="tg"] .tg-quote .qa span{font-weight:400;color:var(--tg-muted);}

/* CONFRONTO: due colonne con intestazione */
.stage[data-sport="tg"] .tg-cmp{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.stage[data-sport="tg"] .tg-col{min-width:0;padding:.45em .7em;background:var(--tg-soft);border-radius:12px;}
.stage[data-sport="tg"] .tg-col h3{
  margin:0 0 .45em;padding-bottom:.3em;border-bottom:4px solid var(--tg-accent);
  font-size:1.05em;font-weight:700;color:var(--tg-accent);line-height:1.15;
}
.stage[data-sport="tg"] .tg-col .tg-list li{font-size:.86em;}

/* CRONOLOGIA: tappe su una linea orizzontale */
.stage[data-sport="tg"] .tg-time{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:36px;padding-top:1.9em;}
.stage[data-sport="tg"] .tg-time::before{content:'';position:absolute;left:0;right:0;top:1.9em;height:4px;margin-top:-2px;background:rgba(255,255,255,.3);}
.stage[data-sport="tg"] .tg-step{position:relative;min-width:0;padding-top:.75em;}
.stage[data-sport="tg"] .tg-step::before{
  content:'';position:absolute;left:0;top:-.28em;width:.56em;height:.56em;border-radius:50%;
  background:var(--tg-accent);
}
.stage[data-sport="tg"] .tg-step .q{position:absolute;left:0;bottom:100%;margin-bottom:.45em;font-size:.86em;font-weight:700;color:var(--tg-accent);white-space:nowrap;}
.stage[data-sport="tg"] .tg-step .c{font-size:.7em;font-weight:500;line-height:1.25;}

/* CARTELLO: solo titolo grande, per aprire un tema (niente testata separata) */
.stage[data-sport="tg"] .tg-card{display:flex;align-items:center;gap:72px;padding:0 24px;}
.stage[data-sport="tg"] .tg-card .tg-ico{flex:0 0 auto;width:300px;height:300px;}
.stage[data-sport="tg"] .tg-card .tg-cardtext{flex:1;min-width:0;}
.stage[data-sport="tg"] .tg-card .tg-title{font-size:1em;line-height:1.05;}
.stage[data-sport="tg"] .tg-card .tg-rule{margin:.3em 0 .32em;}
.stage[data-sport="tg"] .tg-card .tg-sub{font-size:.4em;white-space:normal;}
.stage[data-sport="tg"] .tg-panel.cartello .tg-body{font-size:112px;}