/*
--------------------------------------------------------------------------------
Questo file NON contiene aspetto (niente colori, font, spaziature, bordi,
ombre, dimensioni decorative). Contiene solo il minimo indispensabile perché
i widget funzionino come si deve:
- tabelle con scroll orizzontale e colonna "squadra" fissa (sticky) su mobile;
- il carosello orizzontale delle card partite;
- il riordino responsive di card/righe (flex-direction, order) sotto i 768px.

Tutto il resto — colori, font, padding, bordi, ombre, dimensioni immagini —
è a carico del sito: usa il campo "CSS personalizzato" in Impostazioni →
Aspetto (vedi il cheat-sheet delle classi lì sotto).
--------------------------------------------------------------------------------
*/

:root {
  /* Variabili di comodo, configurabili da Impostazioni → Aspetto. Non sono
     applicate a nessuna regola qui sotto: sono solo token pronti da usare nel
     tuo CSS personalizzato (es. background-color: var(--affb-primary)).
     Nomi generici di proposito: non tutti i club hanno il blu come colore
     sociale. */
  --affb-primary: #077AD2;
  --affb-secondary: #F6F3EE;
  --affb-gray: #C6C6C6;
}

/** Card "prossima partita" (affb_prossima_partita, affb_home_block) **/
.affb-match-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-grow: 1;
}

.team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.affb-match-card .match-center {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 1;
}

@media (min-width: 480px) {
  .affb-match-card .match-center {
    order: 0;
  }
}

/** Elementi ricorrenti (logo lega + nome, righe della meta partita): usati da
    quasi tutti gli shortcode a card/riga. Niente <br> nel markup — è questa
    regola a impilare le righe di default; sovrascrivibile da CSS
    personalizzato (es. display: block, o flex-direction: row). **/
.league {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.match-meta {
  display: flex;
  flex-direction: column;
}

/** Card partite in elenco (affb_partite, affb_risultati, affb_match_cards) **/
.affb-cards {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  overflow: scroll;
}

.match-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.match-card .team-names {
  display: flex;
  justify-content: center;
  align-items: center;
}

/** Classifica (affb_classifica, affb_home_block) **/
.affb-standings td.rank {
  width: 1%; /* forza la colonna a restringersi al contenuto, non è decorazione */
}

.affb-standings td.team {
  display: flex;
  align-items: center;
}

/* === Tabella responsive con colonne sticky === */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.responsive-table {
  min-width: 600px; /* senza questo, non c'è nulla da far scorrere */
}

.responsive-table th,
.responsive-table td {
  white-space: nowrap; /* necessario perché lo scroll/sticky restino coerenti */
  z-index: 1;
}

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
}

.sticky-col.second {
  left: 40px; /* offset funzionale: senza, si sovrappone alla prima colonna sticky */
  z-index: 3;
}

@media (max-width: 768px) {
  .sticky-col {
    min-width: 40px;
  }

  .sticky-col.second {
    min-width: 150px;
    width: 1%;
  }
}

/** Stagione completa (affb_stagione_completa) **/
.match-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-row .match-date {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.match-row .match-date span {
  display: block; /* riga separata per giorno/mese, non un dettaglio tipografico */
}

.match-row .match-teams {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.match-row .match-teams .match-team-name-container {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .match-row {
    flex-direction: column;
    justify-content: center;
  }

  .match-row .match-date {
    order: 0;
    flex-direction: row;
    justify-content: center;
  }

  .match-row .match-meta {
    order: 2;
  }

  .match-row .match-teams {
    order: 1;
  }

  /* riordino home/away: il nome squadra va sopra o sotto il logo a seconda
     del lato, non è un dettaglio estetico ma la struttura della riga */
  .match-row .match-teams .match-team-name-container.team-home {
    flex-direction: column-reverse;
  }
  .match-row .match-teams .match-team-name-container.team-away {
    flex-direction: column;
  }
}

/** Blocco homepage (affb_home_block) **/
.affb-home-grid {
  display: grid;
  grid-template-columns: 1fr 2rem 1fr;
  align-items: stretch;
}

@media (max-width: 900px) {
  .affb-home-grid {
    grid-template-columns: 1fr;
  }
}

.affb-home-grid .home-col {
  display: flex;
  flex-direction: column;
}

.affb-home-grid .table-container {
  flex-grow: 1; /* le due colonne restano allineate in basso */
}

.affb-home-grid .responsive-table {
  min-width: 0; /* qui la tabella è compatta: non deve forzare lo scroll orizzontale */
}

.affb-home-grid .home-col-spacer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.affb-home-grid .home-col-spacer .spacer-inner {
  height: 100%;
  width: 100%;
}

/** Preview classifica compatta (serie-preview: affb_classifica num="…", affb_home_block) **/
.serie-preview td.rank {
  width: 1%; /* stesso trucco di .affb-standings td.rank */
}