/* SP-IN · Scheda evento "Prima serata" (EventPoster v2)
   Spunto: grafiche TV del calcio italiano. Markup generato da event-poster.js (SPIN.eventPoster.render).
   Un solo markup per mobile, tablet e PC: il layout cambia con la larghezza del contenitore (container query).
     < 700px     mobile
     700–1279px  tablet (stesso schema del mobile, più grande)
     ≥ 1280px    PC (testata larga, Statistiche e Protagonisti su due colonne, nessun pulsante d'azione)
   Colori squadra: variabili inline sull'<article> (--ep-a, --ep-a-on, --ep-b, --ep-b-on, --ep-*-crest), calcolate da
   event-poster.js. Sono SEMPRE il primo colore di ciascuna squadra: fasce della testata, sigle del tabellone, caselle dei
   valori, ultime partite e schede dei giocatori. Tutto il resto usa i token di tokens.css.
   Una container query non può dare stile al contenitore stesso: le variabili dei breakpoint sono assegnate ai figli
   diretti (.ep>*) e da lì ereditate. Le misure da locandina (--ep-*) sono locali al componente e fuori dalla scala
   tipografica di proposito: non vanno spostate in tokens.css né riusate altrove. */

.ep{
  --ep-skew:var(--skew);
  --ep-unskew:var(--unskew);
  --ep-white:var(--on-stage);           /* tabellone e linea tra le fasce: bianchi in entrambi i temi, come in TV */
  --ep-live:#C62828;
  --ep-hero-h:372px;            /* altezza testata */
  --ep-slab-h:340px;            /* altezza delle due fasce */
  --ep-cut-top:64%;             /* dove la diagonale tocca il bordo alto */
  --ep-cut-bot:36%;             /* dove tocca il bordo basso */
  --ep-gap:8px;                 /* linea bianca tra le fasce */
  --ep-crest:84px;
  --ep-ring:3px;
  --ep-name:40px;
  --ep-bug-h:50px;
  --ep-bug-ab:22px;
  --ep-bug-mid:24px;
  --ep-when:var(--fs-17);
  --ep-val:var(--fs-20);
  --ep-row-h:46px;
  --ep-ghost:76px;
  --ep-cardv:34px;
  container-type:inline-size;
  container-name:ep;
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);
  overflow:hidden;
}

/* ---------- testata: due fasce diagonali nel primo colore delle squadre ---------- */
.ep-hero{position:relative;isolation:isolate;height:var(--ep-hero-h)}
.ep-slab,.ep-tex{position:absolute;left:0;right:0;top:0;height:var(--ep-slab-h);pointer-events:none}
.ep-slab--a{background:var(--ep-a);clip-path:polygon(0 0,var(--ep-cut-top) 0,var(--ep-cut-bot) 100%,0 100%)}
.ep-slab--b{background:var(--ep-b);clip-path:polygon(calc(var(--ep-cut-top) + var(--ep-gap)) 0,100% 0,100% 100%,calc(var(--ep-cut-bot) + var(--ep-gap)) 100%)}
.ep-tex{background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}

/* barra superiore */
.ep-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-12) var(--space-16)}
.ep-icon{width:44px;height:44px;flex:none;border:0;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--scorebox) 78%,transparent);color:var(--on-stage);display:grid;place-items:center;cursor:pointer;text-decoration:none}
.ep-icon svg{width:22px;height:22px}
.ep-icon--void{visibility:hidden}
.ep-act{height:44px;width:44px;flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);padding:0;border:0;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--scorebox) 78%,transparent);color:var(--on-stage);font:inherit;font-size:var(--fs-14);font-weight:700;text-decoration:none;cursor:pointer}
.ep-act svg{width:18px;height:18px}
.ep-act>span{display:none}
.ep-comp{display:inline-flex;align-items:center;gap:var(--space-8);min-width:0;padding:5px var(--space-12);background:var(--scorebox);color:var(--on-stage);transform:skewX(-10deg);text-decoration:none;font-size:var(--fs-11);font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ep-comp>*{transform:skewX(10deg)}
.ep-comp>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ep-comp .ty{width:22px;height:22px;margin-left:calc(-1 * var(--space-8))}
.ep-comp .ty svg{width:14px;height:14px}

/* squadre: casa in alto a sinistra, ospite più in basso a destra */
.ep-side{position:absolute;z-index:2;display:flex;flex-direction:column;gap:var(--space-12);max-width:52%}
.ep-side--a{left:var(--space-20);top:76px;align-items:flex-start;text-align:left;color:var(--ep-a-on)}
.ep-side--b{right:var(--space-20);top:128px;align-items:flex-end;text-align:right;flex-direction:column-reverse;color:var(--ep-b-on)}
.ep-crest{width:var(--ep-crest);height:var(--ep-crest);flex:none;border-radius:var(--radius-round);background:var(--ep-crest-bg,var(--on-stage));overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 var(--ep-ring) var(--ep-ring-c,currentColor),0 8px 24px rgba(0,0,0,.28);text-decoration:none}
.ep-crest img{width:86%;height:86%;object-fit:contain;display:block}
.ep-crest b{font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:calc(var(--ep-crest) * .34);color:var(--ink)}
.ep-crest--a{--ep-crest-bg:var(--ep-a-crest);--ep-ring-c:var(--ep-a-ring)}.ep-crest--b{--ep-crest-bg:var(--ep-b-crest);--ep-ring-c:var(--ep-b-ring)}
.ep-team{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:inherit}
.ep-kicker{font-size:var(--fs-11);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.ep-name{margin:0;color:inherit;font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:calc(var(--ep-name) * var(--ep-k,1));line-height:.86;text-transform:uppercase;max-width:100%;overflow:hidden;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.ep-sub{display:none;font-size:var(--fs-13);font-weight:700}
/* SP-IN 2026-10-20: il corsivo sporge a destra dell'ultima lettera e il riquadro del nome (overflow:hidden per tagliare a
   2 righe) la tagliava: niente ritaglio, le righe le limita il corpo (nameScale e, da tablet, --ep-w). La squadra di casa è
   tutta allineata a sinistra (nome, "In casa", località) */
.ep-name{overflow:visible;display:block;-webkit-line-clamp:none}
.ep-side--a .ep-team{align-items:flex-start;text-align:left}

/* tabellone TV: sigla casa · punteggio o ora · sigla ospite */
.ep-bug{position:absolute;z-index:3;left:50%;top:calc(var(--ep-slab-h) - var(--ep-bug-h) / 2);transform:translateX(-50%) skewX(-10deg);display:inline-flex;align-items:stretch;height:var(--ep-bug-h);background:var(--ep-white);border-radius:6px;box-shadow:0 16px 40px rgba(20,32,43,.45),0 6px 14px rgba(20,32,43,.3);overflow:hidden;white-space:nowrap}   /* ombra più marcata: Diego, 2026-10-20 */
.ep-bug>span>*{transform:skewX(10deg)}
.ep-bug-t{min-width:calc(var(--ep-bug-h) * 1.45);display:grid;place-items:center;padding:0 var(--space-12);font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:var(--ep-bug-ab)}
.ep-bug-t--a{background:var(--ep-a);color:var(--ep-a-on)}
.ep-bug-t--b{background:var(--ep-b);color:var(--ep-b-on)}
.ep-bug-mid{min-width:calc(var(--ep-bug-h) * 2.4);display:flex;align-items:center;justify-content:center;padding:0 18px;background:var(--scorebox);color:var(--on-stage);font-family:var(--font-mono);font-weight:700;font-size:var(--ep-bug-mid);font-variant-numeric:tabular-nums}
.ep-bug-score{display:flex;align-items:center;gap:10px}
.ep-bug-score i{font-style:normal;color:#5A6670}
.ep-bug-score .is-lost{opacity:.5}

/* sotto il tabellone: diretta, data e ora, luogo */
.ep-info{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-8) var(--space-16) 0;text-align:center}
.ep-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--ep-live);color:var(--on-stage);transform:skewX(-10deg);font-size:var(--fs-11);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ep-live::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--on-stage)}
.ep-when{font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:var(--ep-when);text-transform:uppercase;color:var(--ink)}
.ep-place{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-13);font-weight:600;color:var(--muted);text-decoration:none}
.ep-place svg{width:15px;height:15px;flex:none}

/* ---------- corpo: Statistiche e Protagonisti ---------- */
.ep-body{display:flex;flex-direction:column;gap:18px;padding:18px var(--space-16) 0}
.ep-col{display:flex;flex-direction:column;gap:var(--space-12);min-width:0}
.ep-col--players{margin-top:6px}
.ep-side3{display:none}
/* SP-IN 2026-10-26 (Diego): colonne laterali (realizzatore e ultime partite) sempre simmetriche: sotto 1280 px sotto le
   statistiche, casa a sinistra e ospite a destra; schede e scritte dell'ospite riflesse */
.ep-body:has(.ep-side3){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"st st" "pa pb";column-gap:10px;row-gap:22px}
.ep-body .ep-col--stats{grid-area:st}
.ep-body .ep-side3{display:flex;container-type:inline-size}
.ep-side3--a{grid-area:pa}.ep-side3--b{grid-area:pb}
.ep-side3 .ep-form-l{text-align:left}.ep-side3--b .ep-form-l{text-align:right}
.ep-side3--b .ep-card{padding:var(--space-12) 18px var(--space-12) var(--space-12);align-items:flex-end;text-align:right}
.ep-side3--b .ep-card::before{left:auto;right:0}
.ep-side3--b .ep-card-ghost{right:auto;left:-4px}
.ep-side3--b .ep-card-v{flex-direction:row-reverse}
.ep-side3--b .ep-card-n{max-width:100%}
/* ultime partite: tre riquadri sulla stessa riga, il più recente verso il centro e più grande, dentro la colonna */
.ep-streak{display:flex;align-items:center;gap:4cqi;padding:0 2cqi}
.ep-streak--a{justify-content:flex-end}.ep-streak--b{justify-content:flex-start}
.ep-st{flex:none;box-sizing:border-box;display:grid;place-items:center;transform:skewX(var(--ep-skew));background:var(--ep-white);border:2px solid var(--ep-c);color:var(--scorebox);
  /* SP-IN 2026-10-26 (Diego): il più grande come il riquadro dei numeri delle statistiche, gli altri via via più piccoli; dentro la colonna anche sul telefono */
  --ep-stw:min(calc(var(--ep-row-h) * 1.7),36cqi);--k:1;width:calc(var(--ep-stw) * var(--k));height:calc(var(--ep-stw) / 1.7 * var(--k))}
.ep-streak--a .ep-st{--ep-c:var(--ep-a)}.ep-streak--b .ep-st{--ep-c:var(--ep-b)}
.ep-st>b{transform:skewX(var(--ep-unskew));font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;line-height:1;font-size:calc(var(--ep-stw) / 1.7 * var(--k) * .6)}
.ep-st--1{--k:.64}.ep-st--2{--k:.8}.ep-st--3{--k:1}
.ep-streak--a .ep-st.is-w{background:var(--ep-a);color:var(--ep-a-on)}
.ep-streak--b .ep-st.is-w{background:var(--ep-b);color:var(--ep-b-on)}
.ep-st.is-empty{background:none;border-style:dashed;border-color:var(--line-strong)}
.ep-tag{align-self:center;margin:0;padding:5px var(--space-16);background:var(--scorebox);color:var(--on-stage);transform:skewX(var(--ep-skew))}
.ep-tag>span{display:block;transform:skewX(var(--ep-unskew));font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:var(--fs-13);letter-spacing:.08em;text-transform:uppercase}

/* riga numerica: casella casa · etichetta · casella ospite, nel primo colore delle squadre */
.ep-row{display:grid;grid-template-columns:calc(var(--ep-row-h) * 1.7) minmax(0,1fr) calc(var(--ep-row-h) * 1.7);gap:6px;height:var(--ep-row-h)}
.ep-val,.ep-row-l{display:grid;place-items:center;transform:skewX(var(--ep-skew));min-width:0}
.ep-val>b,.ep-row-l>*{transform:skewX(var(--ep-unskew))}
.ep-val>b{font-family:var(--font-mono);font-weight:700;font-size:var(--ep-val)}
.ep-val--a{background:var(--ep-a);color:var(--ep-a-on)}
.ep-val--b{background:var(--ep-b);color:var(--ep-b-on)}
.ep-val.is-low{opacity:.45}
.ep-row-l{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ep-lbl{display:flex;flex-direction:column;align-items:center;text-align:center}
.ep-lbl>b{font-size:var(--fs-12);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ep-lbl>small{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ep-note{text-align:center;color:var(--muted);font-size:var(--fs-12)}
.is-none{font-family:var(--font-mono);font-weight:700;color:var(--muted)}

/* ultime partite: una riga per squadra, caselle inclinate V/P con il risultato */
.ep-form{display:flex;flex-direction:column;gap:var(--space-8)}
.ep-form-l{text-align:center;font-size:var(--fs-11);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ep-form-line{display:flex;align-items:center;gap:6px}
.ep-abbr{width:48px;flex:none;font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:var(--fs-17)}
.ep-fm{flex:1;min-width:0;height:36px;box-sizing:border-box;display:grid;place-items:center;transform:skewX(var(--ep-skew));border:2px solid var(--line-strong);color:var(--muted)}
.ep-fm>span{transform:skewX(var(--ep-unskew));display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.ep-fm b{font-size:var(--fs-14);font-weight:900}
.ep-fm span span{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:700}
.ep-form-line--a .ep-fm.w{background:var(--ep-a);border-color:var(--ep-a);color:var(--ep-a-on)}
.ep-form-line--b .ep-fm.w{background:var(--ep-b);border-color:var(--ep-b);color:var(--ep-b-on)}
.ep-fm.is-empty{border-style:dashed}
/* SP-IN 2026-10-26: riga dei tempi, il numero del tempo piccolo e il valore in evidenza */
.ep-fm.ep-per{color:var(--ink)}
/* SP-IN 2026-10-26 (Diego): contorno di ogni tempo nel colore della propria squadra, come le ultime 3 */
.ep-form-line--a .ep-fm.ep-per{border-color:var(--ep-a)}.ep-form-line--b .ep-fm.ep-per{border-color:var(--ep-b)}
.ep-fm.ep-per b{font-size:var(--fs-11);font-weight:800;color:var(--muted)}
.ep-fm.ep-per span span{font-size:var(--fs-14)}

/* protagonisti: due schede per riga, bordo e numero nel primo colore della squadra */
.ep-players{display:flex;flex-direction:column;gap:var(--space-8)}
.ep-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ep-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--space-12) var(--space-12) var(--space-12) 18px;background:var(--surface);box-shadow:var(--shadow-1)}
.ep-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ep-c)}
.ep-card--a{--ep-c:var(--ep-a)}.ep-card--b{--ep-c:var(--ep-b)}
.ep-card-ghost{position:absolute;right:-4px;bottom:-14px;font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:var(--ep-ghost);color:transparent;-webkit-text-stroke:2px var(--ep-c);opacity:.35;pointer-events:none}
.ep-card-k{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ep-card-n{position:relative;font-size:var(--fs-14);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-card-v{position:relative;display:flex;align-items:baseline;gap:6px;margin-top:4px}
.ep-card-v>b{font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:var(--ep-cardv);line-height:.9}
.ep-card-v>span{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.ep-card small{position:relative;font-size:var(--fs-11);color:var(--muted)}
.ep-card.is-empty{align-items:center;justify-content:center;min-height:84px}
.ep-card--html{font-size:var(--fs-13);line-height:1.3}

/* azione (solo mobile e tablet) */
.ep-actions{display:flex;gap:var(--space-12);align-items:center;padding:var(--space-20) var(--space-16) var(--space-24)}
.ep-cta{flex:1;height:52px;border:0;display:grid;place-items:center;background:var(--ink);color:var(--surface);transform:skewX(-10deg);text-decoration:none;cursor:pointer;font:inherit}
.ep-cta>span{transform:skewX(10deg);font-family:var(--font-display);font-weight:900;font-stretch:62%;font-style:italic;font-size:var(--fs-20);letter-spacing:.04em;text-transform:uppercase}
.ep-cal{width:52px;height:52px;flex:none;box-sizing:border-box;border:1.5px solid var(--line-strong);color:var(--ink);display:grid;place-items:center;transform:skewX(-10deg)}
.ep-cal svg{width:20px;height:20px;transform:skewX(10deg)}
.ep-more{padding:0 var(--space-16) var(--space-24)}

/* ---------- tablet ---------- */
@container ep (min-width:700px){
  .ep>*{--ep-hero-h:430px;--ep-slab-h:396px;--ep-cut-top:60%;--ep-cut-bot:40%;--ep-gap:10px;--ep-crest:110px;--ep-ring:4px;--ep-name:60px;--ep-bug-h:58px;--ep-bug-ab:26px;--ep-bug-mid:28px;--ep-when:var(--fs-20)}
  .ep-side--a{left:var(--space-40);top:84px;flex-direction:row;align-items:center;gap:var(--space-20)}
  .ep-side--b{right:var(--space-40);top:214px;flex-direction:row-reverse;align-items:center;gap:var(--space-20)}
  .ep-side--b .ep-team{align-items:flex-end}
  .ep-sub{display:block}
  /* SP-IN 2026-10-20: i nomi lunghi restano nella propria fascia (la diagonale scende dal 60% al 40%) */
  .ep-side--a{max-width:calc(52% - 40px)}.ep-side--b{max-width:calc(48% - 40px)}
  /* corpo massimo perché la parola più lunga (--ep-w lettere) entri nello spazio accanto allo stemma */
  .ep-name{font-size:min(calc(var(--ep-name) * var(--ep-k,1)),calc((48cqi - 40px - var(--ep-crest) - 24px) / var(--ep-w,8) * 2.05))}
  .ep-body{width:100%;max-width:760px;box-sizing:border-box;margin:0 auto;padding:22px var(--space-20) 0}
  .ep-actions{width:100%;max-width:760px;box-sizing:border-box;margin:0 auto}
  .ep-act{width:auto;padding:0 var(--space-16)}.ep-act>span{display:inline}
}

/* ---------- PC ---------- */
@container ep (min-width:1280px){
  .ep>*{--ep-hero-h:470px;--ep-slab-h:430px;--ep-cut-top:58%;--ep-cut-bot:42%;--ep-gap:12px;--ep-crest:150px;--ep-ring:5px;--ep-name:84px;--ep-bug-h:64px;--ep-bug-ab:30px;--ep-bug-mid:32px;--ep-when:22px;--ep-val:24px;--ep-row-h:52px;--ep-ghost:96px;--ep-cardv:42px}
  .ep-top{padding:var(--space-24) var(--space-40)}
  .ep-comp{font-size:var(--fs-12);padding:6px 14px}
  .ep-side{max-width:46%;gap:28px}
  .ep-side--a,.ep-side--b{max-width:calc(50% - 150px)}
  .ep-name{font-size:min(calc(var(--ep-name) * var(--ep-k,1)),calc((50cqi - 150px - var(--ep-crest) - 32px) / var(--ep-w,8) * 2.05))}
  .ep-side--a{left:120px;top:110px}
  .ep-side--b{right:120px;top:230px}
  .ep-info{padding-top:18px}
  .ep-body{max-width:1200px;display:grid;grid-template-columns:minmax(0,760px);justify-content:center;gap:40px;align-items:start;padding:26px 0 48px}
  .ep-col--players{margin-top:0}
  /* SP-IN 2026-10-20: tre colonne simmetriche, realizzatori di casa a sinistra e dell'ospite a destra; le colonne laterali
     partono all'altezza della prima riga delle statistiche (sotto l'etichetta "Statistiche") */
  .ep-body:has(.ep-side3){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"pa st pb";justify-content:stretch;gap:32px}
  .ep-body .ep-side3{padding-top:calc(var(--fs-15) + 10px + var(--space-12))}
  .ep-tag>span{font-size:var(--fs-15)}
  .ep-fm{height:40px}
  .ep-actions{display:none}
}