/* ==========================================================================
   CalcioCatania — incontri.css
   Match page modern styles (hero dinamico + match card)
   v2025-10-09
   Scope: body.football.football-results
   ========================================================================== */

/* ---------- Utilities comuni ---------- */
body.football.football-results :root{
  --ink:#0b0b0c;           /* testo primario */
  --muted:#6b7280;         /* testo attenuato */
  --paper:#ffffff;         /* sfondo card */
  --line:#e5e7eb;          /* bordo card/righe */
  --radius:14px;           /* raggio card */
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.06);
  --gap:1rem;
}
@media (prefers-color-scheme: dark){
  body.football.football-results :root{
    --ink:#f5f5f5; --muted:#a1a1aa; --paper:#121214; --line:#27272a;
  }
}

/* Accessibilità: elemento solo per screen reader */
body.football.football-results .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Testo attenuato + <time> non spezzato */
body.football.football-results .muted{ color:var(--muted) }
body.football.football-results time{ white-space:nowrap }

/* ---------- Fix opzionale layout Fox (se il markup legacy resta) ---------- */
/* Se non hai toccato item-count-/irpos- e vuoi forzare full width del primo item */
body.football.football-results #content-2
.text-g-fs-cricket-group-match-content .group-content .item:first-child{
  float:none !important; width:100% !important; margin-right:10 !important;
}
body.football.football-results #content-2
.text-g-fs-cricket-group-match-content .group-content::after{
  content:""; display:block; clear:both;
}

/* ---------- MATCH CARD moderna ---------- */
body.football.football-results .match-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin:0 0 1rem;
}

/* Hero dinamico con variabili CSS impostate inline:
   --home1 (primaria squadra “home”)
   --home2 (secondaria/alternata “home”)
   --opponent (colore avversario per banda diagonale)
*/
body.football.football-results .match-card__hero{
  --home1:#e31c23;         /* fallback rosso Catania */
  --home2:#1286C5;         /* fallback azzurro Catania */
  --opponent:#0b0b0c;      /* fallback neutro */
  --stripe:56px;           /* spessore strisce */
  --band:16px;             /* spessore banda diagonale avversario */

  position:relative; width:100%;
  aspect-ratio:32/9;       /* “slim” come richiesto */
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.28), rgba(0,0,0,.12) 35%, rgba(0,0,0,.06) 65%, rgba(0,0,0,0)
    ),
    linear-gradient(20deg,
      transparent 0 calc(50% - var(--band)/2),
      var(--opponent) calc(50% - var(--band)/2) calc(50% + var(--band)/2),
      transparent calc(50% + var(--band)/2) 100%
    ),
    repeating-linear-gradient(90deg,
      var(--home1) 0 var(--stripe),
      var(--home2) var(--stripe) calc(2*var(--stripe))
    );
}
@media (max-width: 640px){
  body.football.football-results .match-card__hero{ aspect-ratio:24/9; }
}

/* Didascalia/meta su hero (stadio, data) */
body.football.football-results .match-card__meta{
  position:absolute; inset:auto 0 0 0;
  padding:.65rem 1rem;
  color:#fff; font-size:.95rem; font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
}

/* Corpo della card: griglia 1-3-1 su desktop, impilata su mobile */
body.football.football-results .match-card__body{
  padding:1rem; display:grid; gap:var(--gap);
}
@media (min-width:760px){
  body.football.football-results .match-card__body{
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
  }
}

/* Blocco squadra */
body.football.football-results .team{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.6rem;
}
body.football.football-results .team__badge{
  inline-size:42px; block-size:42px; border-radius:50%;
  background:#fff; display:grid; place-items:center; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
body.football.football-results .team__badge img{
  width:100%; height:100%; object-fit:contain; display:block;
}
body.football.football-results .team__name{
  margin:0; font-weight:800; font-size:1.1rem; color:var(--ink);
}

/* Punteggio / stato */
body.football.football-results .scoreline{
  font-variant-numeric: tabular-nums;
  font-weight:900; font-size:2.4rem; line-height:1;
  display:grid; place-items:center; padding:0 .75rem; text-align:center;
}
@media (max-width:480px){
  body.football.football-results .scoreline{ font-size:2rem; }
}
body.football.football-results .kickoff{
  color:var(--muted); font-weight:700; font-size:1.1rem;
}

/* Dettagli gara (dl) */
body.football.football-results .details{
  display:grid; gap:.5rem; align-content:start;
}
@media (min-width:760px){
  body.football.football-results .details{ grid-column:1 / -1; grid-template-columns:1fr 1fr; }
}
body.football.football-results .details dl{
  margin:0; display:grid; grid-template-columns:120px 1fr; gap:.4rem .6rem; align-items:start;
}
body.football.football-results .details dt{
  font-weight:700; color:var(--ink);
}
body.football.football-results .details dd{
  margin:0; color:var(--ink);
}
body.football.football-results .details small{ color:var(--muted) }

/* Chip di stato */
body.football.football-results .chip{
  display:inline-block; padding:.2rem .55rem;
  border-radius:999px; background:rgba(0,0,0,.08);
  font-size:.8rem; font-weight:700;
}
body.football.football-results .chip--live{ background:#e31c23; color:#fff }
body.football.football-results .chip--upcoming{ background:#1286C5; color:#fff }

/* ---------- Compat: alias per hero “vecchio” (se presente nel template) ---------- */
/* Se nel template esiste ancora <figure class="result-hero …"><div class="hero-canvas">…:
   mappiamo quelle classi alla nuova resa, così non rompiamo nulla. */
body.football.football-results .result-hero{ 
  margin:0 0 1rem; border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
body.football.football-results .result-hero .hero-canvas{
  /* Reuse della logica hero con variabili inline --home1/--home2/--opponent */
  --home1:#e31c23; --home2:#1286C5; --opponent:#0b0b0c;
  --stripe:56px; --band:16px;
  width:100%; display:block; aspect-ratio:32/9;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.12) 35%, rgba(0,0,0,.06) 65%, rgba(0,0,0,0)),
    linear-gradient(20deg, transparent 0 calc(50% - var(--band)/2),
      var(--opponent) calc(50% - var(--band)/2) calc(50% + var(--band)/2),
      transparent calc(50% + var(--band)/2) 100%),
    repeating-linear-gradient(90deg, var(--home1) 0 var(--stripe), var(--home2) var(--stripe) calc(2*var(--stripe)));
}
@media (max-width:640px){
  body.football.football-results .result-hero .hero-canvas{ aspect-ratio:24/9; }
}
body.football.football-results .result-hero--slim .hero-canvas{ aspect-ratio:32/9; }

/* ---------- SHIM FACOLTATIVO per moduli "cricket" Fox (se CSS originale è stato rimosso) ---------- */
/* Se hai cancellato le regole cricket-*, questo ripristina una resa pulita senza toccare HTML.
   Se non ti serve più, puoi eliminare l’intero blocco. */
body.football.football-results .cricket-match-summary .module-header{
  padding:.75rem 1rem; border-bottom:1px solid var(--line);
}
body.football.football-results .cricket-match-summary .module-header .heading{
  margin:0; font-weight:700; font-size:1.25rem; line-height:1.25;
}
body.football.football-results .cricket-match-summary .module-border{
  padding:1rem; background:var(--paper); border:1px solid var(--line); border-radius:12px;
}
body.football.football-results .match-info .details,
body.football.football-results .match-info .date-time,
body.football.football-results .match-info .innings{ margin:0 0 .5rem; }
body.football.football-results .teams-scores{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
body.football.football-results .teams-scores .team1,
body.football.football-results .teams-scores .team2{
  flex:1; display:grid; justify-items:center; gap:.25rem;
}
body.football.football-results .teams-scores .team-name{ margin:0; font-weight:700 }
body.football.football-results .teams-scores .scores a{
  text-decoration:none; font-weight:800; font-size:2rem; line-height:1;
}
@media (max-width:480px){
  body.football.football-results .teams-scores .scores a{ font-size:1.6rem }
}
body.football.football-results .cricket-match-details-module .module-content{ padding:.5rem 0; }
body.football.football-results .cricket-match-details-module .detail-row{
  display:grid; grid-template-columns:120px 1fr; gap:.5rem; align-items:start;
  padding:.35rem 0; border-bottom:1px dashed #eee;
}
body.football.football-results .cricket-match-details-module .detail-row:last-child{ border-bottom:0 }
body.football.football-results .cricket-match-details-module .detail-label p{ margin:0; font-weight:600 }
body.football.football-results .cricket-match-details-module .detail-item p{ margin:0 }
body.football.football-results .batsmen-scorecard{
  width:100%; border-collapse:collapse; background:var(--paper); font-size:.95rem;
}
body.football.football-results .batsmen-scorecard th,
body.football.football-results .batsmen-scorecard td{
  padding:.6rem .8rem; border-bottom:1px solid #f0f0f0;
}
body.football.football-results .batsmen-scorecard tr.heading th{
  font-weight:700; text-align:left; background:#fafafa;
}

/* === Loghi moderni da upload (niente sprite) === */

/* Contenitore logo: formato di default quadrato */
body.football.football-results .team__badge{
  inline-size: 48px; block-size: 48px;
  border-radius: 10px; background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Immagine logo: due modalità di ritaglio */
body.football.football-results .logo-img{
  display:block; width:100%; height:100%;
  background: transparent;
}

/* 1) Riquadro pieno (croppa per riempire) */
body.football.football-results .logo-img--square{ object-fit: cover; padding: 6px; }

/* 2) Rettangolo orizzontale (mantiene tutto, utile per stemmi larghi) */
body.football.football-results .logo-img--rect{
  object-fit: contain; padding: 4px;
}

/* Fallback monogramma se il logo manca */
body.football.football-results .team__badge.no-logo{
  background: #f2f3f5; color: #555;
  font-weight: 800; font-size: 1rem;
}
body.football.football-results .team__badge.no-logo::after{
  content: attr(data-initial);
}

/* ===== Tipografia & Card (Match Summary) ===== */
:root{
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Anton", Impact, "Arial Black", system-ui, sans-serif; /* fallback robusti */
  --card-bg: #ffffff;
  --card-brd: rgba(0,0,0,.08);
  --card-shadow: 0 8px 28px rgba(17,24,39,.08), 0 2px 6px rgba(17,24,39,.05);
}

/* Contenitore principale della scheda */
body.football.football-results .module.match-summary-module.r-modern,
body.football.football-results .cricket-match-details-module {
  background: var(--card-bg);
  border: 1px solid var(--card-brd);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Bordino superiore colorato (accento) */
body.football.football-results .module.match-summary-module.r-modern::before{
  content:"";
  display:block;
  inline-size:100%;
  block-size:6px;
  background: linear-gradient(90deg, #d72638 0%, #29a0ff 100%); /* rosso-azzurro */
}

/* Spaziatura interna coerente */
body.football.football-results .module.match-summary-module.r-modern .module-content,
body.football.football-results .cricket-match-details-module .module-content{
  padding: clamp(14px, 1.8vw, 22px);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.1vw, 17px); /* base più grande */
  line-height: 1.45;
}

/* Nomi squadre – display, uppercase, più impatto */
body.football.football-results .team__name{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 6px 0 0;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.1;
}

/* Badge logo: leggermente più grande per equilibrio visivo */
body.football.football-results .team__badge{
  inline-size: 56px;
  block-size: 56px;
  border-radius: 12px;
}

/* Punteggio – più grande e leggibile */
body.football.football-results .teams-scores .scores a,
body.football.football-results .teams-scores .scores{
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  display: inline-block;
  font-size: clamp(28px, 4.5vw, 44px);
}

/* Metadati (stadio, data/ora) un filo più grandi */
body.football.football-results .match-info .details,
body.football.football-results .match-info .date-time{
  font-size: clamp(15px, 1.2vw, 18px);
  opacity: .95;
}

/* Etichette e valori nelle righe dettaglio */
body.football.football-results .detail-row .detail-label p{
  font-weight: 600;
  font-size: clamp(14px, 1.05vw, 16px);
}
body.football.football-results .detail-row .detail-item p{
  font-size: clamp(15px, 1.1vw, 17px);
}

/* Migliora separazione delle righe */
body.football.football-results .detail-row{
  padding: .5rem 0;
  border-top: 1px dashed rgba(0,0,0,.06);
}
body.football.football-results .detail-row:first-child{
  border-top: 0;
}

/* Hero più “slim” ancora (se serve) */
body.football.football-results .result-hero.result-hero--slim{
  block-size: clamp(90px, 16vw, 140px);
}

/* Media: compattare su schermi piccoli */
@media (max-width: 640px){
  body.football.football-results .module.match-summary-module.r-modern .module-content{
    padding: 14px;
  }
  body.football.football-results .team__badge{
    inline-size: 48px; block-size: 48px;
  }
}
/* ====== Boost dimensioni metadati (dettagli incontro) ====== */

/* aumenta leggermente la base solo nel box dettagli */
body.football.football-results .cricket-match-details-module .module-content{
  font-size: clamp(16px, 1.3vw, 19px);
}

/* etichette a sinistra */
body.football.football-results .cricket-match-details-module .detail-row .detail-label p{
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial);
  font-weight: 700;
  letter-spacing: .15px;
  color: #111;
  font-size: clamp(16px, 1.25vw, 20px);
  margin: 0;
}

/* valori a destra (testo e link) più grandi e con maggior peso */
body.football.football-results .cricket-match-details-module .detail-row .detail-item p,
body.football.football-results .cricket-match-details-module .detail-row .detail-item a{
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial);
  font-weight: 600;
  line-height: 1.35;
  font-size: clamp(18px, 1.6vw, 24px);
  margin: 0;
}

/* link (es. Arbitro) più leggibile e con focus chiaro */
body.football.football-results .cricket-match-details-module .detail-row .detail-item a{
  text-underline-offset: 2px;
}

/* più aria tra le righe */
body.football.football-results .cricket-match-details-module .detail-row{
  padding: .6rem 0;
  border-top: 1px dashed rgba(0,0,0,.06);
}
body.football.football-results .cricket-match-details-module .detail-row:first-child{
  border-top: 0;
}

/* ====== Card moderna + tipografia d’impatto ====== */
:root{
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "Anton", Impact, "Arial Black", system-ui, sans-serif;
  --card-bg: #fff;
  --card-brd: rgba(0,0,0,.08);
  --card-shadow: 0 12px 30px rgba(17,24,39,.08), 0 2px 6px rgba(17,24,39,.06);
}

/* Contenitore card: bordo + ombra */
body.football.football-results .match-card{
  background: var(--card-bg);
  border: 1px solid var(--card-brd);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-block: 14px 24px;
}

/* Hero resta com’è; qui solo sicurezza per la meta-bar */
body.football.football-results .match-card__meta{
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.1vw, 16px);
  padding: 10px 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Corpo card in griglia: Home | (score/center) | Away */
body.football.football-results .match-card__body{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(16px, 2vw, 24px);
}

/* Blocco team */
body.football.football-results .match-card__body .team{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Badge logo */
body.football.football-results .team__badge{
  inline-size: 56px;
  block-size: 56px;
  border-radius: 12px;
  background: #f3f4f6;
  display: grid;
  place-items: center;
  overflow: hidden;
}
body.football.football-results .team__badge.no-logo::after{
  content: attr(data-initial);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

/* Nome squadra: uppercase, display, grande */
body.football.football-results .team__name{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
  line-height: 1.1;
  font-size: clamp(24px, 2.8vw, 36px);
}

/* ====== Metadati (Stagione, Giornata, Arbitro…) ====== */
body.football.football-results .match-card .details{
  padding: 0 clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
}

body.football.football-results .match-card .details dl{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: clamp(14px, 2vw, 24px);
  row-gap: clamp(10px, 1vw, 14px);
  align-items: baseline;
  margin: 0;
}

body.football.football-results .match-card .details dt{
  font-family: var(--font-ui);
  font-weight: 700;
  color: #111;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
}

body.football.football-results .match-card .details dd{
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.35;
  font-size: clamp(18px, 1.8vw, 24px);
}

body.football.football-results .match-card .details dd a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  text-underline-offset: 2px;
}

/* Divider leggero tra righe (opzionale) */
body.football.football-results .match-card .details dt:not(:first-of-type){
  border-top: 1px dashed rgba(0,0,0,.06);
  padding-top: .55rem;
}
body.football.football-results .match-card .details dd:not(:first-of-type){
  border-top: 1px dashed rgba(0,0,0,.06);
  padding-top: .55rem;
}
/* ===== Scoreboard (centrale) ===== */
body.football.football-results .scoreboard{
  display:flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
}

body.football.football-results .score{
  font-family: var(--font-display, Impact, "Arial Black", system-ui, sans-serif);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(36px, 5.5vw, 64px);
}

body.football.football-results .score-sep{
  font-family: var(--font-display, Impact, "Arial Black", system-ui, sans-serif);
  opacity: .8;
  line-height: 1;
  font-size: clamp(28px, 4vw, 48px);
  transform: translateY(2px);
}

body.football.football-results .score--placeholder{
  font-size: clamp(28px, 4vw, 40px);
  opacity: .75;
  letter-spacing: .06em;
}

body.football.football-results .score-status{
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(12px, 1vw, 14px);
  background: #111;
  color: #fff;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}

body.football.football-results .score-status--live{
  background: #d72638;
}

/* assicura la griglia: 1fr | auto | 1fr */
body.football.football-results .match-card__body{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
/* Dettagli: occupa tutta la riga della griglia principale */
body.football.football-results .match-card__body .details{
  grid-column: 1 / -1;
  margin-top: clamp(8px, 1vw, 12px);
  padding-top: clamp(8px, 1vw, 12px);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Griglia a due colonne (label | valore) anche se skin.css impone altro */
body.football.football-results .match-card__body .details dl{
  display: grid !important;
  grid-template-columns: minmax(140px, 220px) 1fr;
  column-gap: clamp(12px, 2vw, 28px);
  row-gap: clamp(10px, 1vw, 14px);
  margin: 0;
}

/* Etichette */
body.football.football-results .match-card__body .details dt{
  font-family: var(--font-ui);
  font-weight: 700;
  color: #111;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
}

/* Valori (anche link) */
body.football.football-results .match-card__body .details dd{
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.35;
  font-size: clamp(18px, 1.8vw, 24px);
}
body.football.football-results .match-card__body .details dd a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  text-underline-offset: 2px;
}
/* ===== Forza layout con aree di griglia ===== */
body.football.football-results .match-card__body{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "home score away"
    "details details details";
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(16px, 2vw, 24px);
}

/* Mappa aree */
body.football.football-results .match-card__body .team--home{ grid-area: home; }
body.football.football-results .match-card__body .scoreboard{ grid-area: score; }
body.football.football-results .match-card__body .team--away{ grid-area: away; }
body.football.football-results .match-card__body .details{  grid-area: details; width: 100%; }

/* ===== Neutralizza stile legacy su dt/dd/dl (float, larghezze, colonne) ===== */
body.football.football-results .match-card__body .details dl,
body.football.football-results .match-card__body .details dt,
body.football.football-results .match-card__body .details dd{
  float: none !important;
  width: auto !important;
  column-count: initial !important;
  -webkit-column-count: initial !important;
}

/* ===== Griglia interna dei dettagli (label | valore) ===== */
body.football.football-results .match-card__body .details dl{
  display: grid !important;
  grid-template-columns: minmax(160px, 240px) 1fr;
  column-gap: clamp(14px, 2vw, 28px);
  row-gap: clamp(10px, 1vw, 14px);
  margin: 0;
}

/* Etichette */
body.football.football-results .match-card__body .details dt{
  font-family: var(--font-ui);
  font-weight: 700;
  color: #111;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
}

/* Valori */
body.football.football-results .match-card__body .details dd{
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.35;
  font-size: clamp(18px, 1.8vw, 24px);
}

body.football.football-results .match-card__body .details dd a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  text-underline-offset: 2px;
}

/* Separatore sopra i dettagli per stacco visivo */
body.football.football-results .match-card__body .details{
  margin-top: clamp(8px, 1vw, 12px);
  padding-top: clamp(8px, 1vw, 12px);
  border-top: 1px solid rgba(0,0,0,.06);
}
/* === Dettagli: separatore continuo su tutta la riga === */
body.football.football-results .match-card .details dl{
  /* usiamo una variabile così il gap visivo e il “ponte” coincidono */
  --col-gap: clamp(14px, 2vw, 28px);
  --sep-color: rgba(0,0,0,.08);
  column-gap: var(--col-gap);
}

body.football.football-results .match-card .details dt,
body.football.football-results .match-card .details dd{
  padding-block: .55rem;
  border-top: 1px solid var(--sep-color);
}

/* Togli il bordo alla prima riga */
body.football.football-results .match-card .details dt:nth-of-type(1),
body.football.football-results .match-card .details dd:nth-of-type(1){
  border-top: 0;
}

/* Ponte sullo “spazio di colonna”: disegniamo un tratto sopra il gap */
body.football.football-results .match-card .details dt{
  position: relative;
}
body.football.football-results .match-card .details dt::after{
  content: "";
  position: absolute;
  top: -1px; /* allineato al bordo-top dei dt/dd */
  right: calc(-1 * var(--col-gap));
  width: var(--col-gap);
  height: 1px;
  background: var(--sep-color);
}

/* Modalità scura: separatore un filo più chiaro */
@media (prefers-color-scheme: dark){
  body.football.football-results .match-card .details dl{ --sep-color: rgba(255,255,255,.12); }
}
.match-tabellino {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 30px auto;
  padding: 20px 24px;
  max-width: 880px;
  line-height: 1.6;
  font-size: 1.05rem;
}

.match-tabellino h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: #003366;
  border-bottom: 2px solid #e31c23;
  display: inline-block;
  padding-bottom: 4px;
}

.match-tabellino .richtext {
  color: #333;
}

.match-tabellino .richtext p {
  margin-bottom: 1rem;
}

.match-tabellino .richtext table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.match-tabellino .richtext table th,
.match-tabellino .richtext table td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  text-align: left;
}

.match-tabellino .richtext table th {
  background: #f8f8f8;
  color: #003366;
  font-weight: 600;
}
.match-gallery{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(17,24,39,.08), 0 2px 6px rgba(17,24,39,.05);
  margin:30px auto;
  padding:18px;
  max-width:1100px;
}
.match-gallery .gallery-title{
  font-weight:800;
  font-size:1.6rem;
  margin-bottom:12px;
  color:#111827;
}
.match-gallery .gallery-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  font-weight:600;
  color:#6b7280;
  margin-bottom:12px;
}
.match-gallery .chip{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background:#eef2ff;
  color:#1e40af;
  font-size:.8rem;
}

/* Grid */
.gallery-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .gallery-grid{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1000px){ .gallery-grid{ grid-template-columns:repeat(4,1fr);} }

.g-item{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.g-item:hover{
  transform:scale(1.02);
  box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.g-thumb{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#f1f5f9;
}

/* Lightbox */
.lb{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; z-index:9999; }
.lb.open{ display:grid; place-items:center; }
.lb__inner{ inline-size:min(96vw,1200px); block-size:min(92vh,900px);
  display:grid; grid-template-rows:auto 1fr auto; gap:8px;
}
.lb__top{ display:flex; justify-content:space-between; align-items:center; color:#fff; }
.lb__count{ font-weight:700; opacity:.9 }
.lb__btn{ background:transparent; border:0; color:#fff; font-size:18px; padding:8px 12px; cursor:pointer; border-radius:8px; }
.lb__btn:hover{ background:rgba(255,255,255,.08) }
.lb__stage{ display:grid; place-items:center; overflow:hidden; background:#000; border-radius:10px; }
.lb__img{ max-width:100%; max-height:100%; object-fit:contain; }
.lb__nav{ position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.lb__nav button{ pointer-events:auto; background:rgba(0,0,0,.35); border:0; color:#fff; font-size:22px; padding:10px 12px; border-radius:10px; margin:0 8px; }
.lb__bottom{ color:#fff; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lb__caption{ display:none; } /* 👈 caption nascosto */
.lb__credit{ display:none; }  /* 👈 credit nascosto */
/* === MIGLIORAMENTO DETTAGLI INCONTRO (full width + proporzioni migliori) === */
body.football.football-results .match-card__body .details {
  grid-column: 1 / -1;            /* estende il blocco su tutta la larghezza */
  margin-top: clamp(10px, 1vw, 16px);
  padding-top: clamp(12px, 1vw, 18px);
  border-top: 1px solid rgba(0,0,0,.06);
}

body.football.football-results .match-card__body .details dl {
  display: grid !important;
  /* più spazio dinamico: 30% etichetta, 70% valore */
  grid-template-columns: 30% 70%;
  column-gap: clamp(16px, 2.5vw, 32px);
  row-gap: clamp(10px, 1vw, 16px);
  align-items: start;
  margin: 0;
  width: 100%;
}

@media (max-width: 720px) {
  body.football.football-results .match-card__body .details dl {
    grid-template-columns: 1fr;   /* una colonna su mobile */
  }
}

/* etichette più visibili ma non pesanti */
body.football.football-results .match-card__body .details dt {
  font-family: var(--font-ui);
  font-weight: 700;
  color: #0b0b0c;
  font-size: clamp(16px, 1.4vw, 18px);
  opacity: 0.85;
  margin: 0;
}

/* valori che “respirano” e usano tutto lo spazio */
body.football.football-results .match-card__body .details dd {
  font-family: var(--font-ui);
  font-weight: 600;
  color: #111;
  font-size: clamp(18px, 1.8vw, 22px);
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

body.football.football-results .match-card__body .details dd a {
  color: #0d63c9;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  text-underline-offset: 2px;
}

body.football.football-results .match-card__body .details dd a:hover {
  opacity: 0.85;
}

/* elimina il micro-bordo “ponte” tra dt e dd */
body.football.football-results .match-card__body .details dt::after {
  display: none;
}
