/* ============================================================================
   home.css — la grafica della home page.

   Caricato SOLO da index.php via $extraCSS, come gia' fanno news.php ed
   events.php con feed.css. Arriva dopo style.css e mobile-app.css, quindi puo'
   sovrascriverli senza !important.

   Stile "morbido su bianco", scelto dall'utente il 2026-09-10 fra tre proposte:
   superfici avorio senza bordi, angoli larghi, tipografia grande, e l'oro come
   unico colore pieno della pagina.

   ⛔ DUE ORI, e non sono intercambiabili:
     --home-oro       #D4AF37  SOLO riempimenti (tessera, pastiglie, filetti).
                               Su bianco ha contrasto 2,0:1 — sotto il minimo
                               leggibile: se finisce su del testo, quel testo
                               non si legge al sole.
     --home-oro-testo #8A6A10  SOLO testo e icone su fondo chiaro (4,9:1).
   E' la stessa coppia che style.css chiama --gold e --dark-gold.

   ⚠️ Le barre nere in alto e in basso NON stanno qui: restano quelle di
   mobile-app.css, identiche a tutte le altre pagine. Questo foglio veste solo
   il corpo della pagina.
   ============================================================================ */

:root {
  --home-oro: #d4af37;
  --home-oro-testo: #8a6a10;
  --home-oro-chiaro: #f0d77a;
  --home-inchiostro: #16150f;
  --home-inchiostro-2: #57544b;
  --home-tenue: #8b8779;
  --home-scheda: #f7f5ee;
  --home-riga: #e9e5da;
  --home-live: #c62828;
  --home-live-fondo: #fdf3f1;
}

/* Il fondo della pagina diventa bianco: mobile-app.css mette --app-gray sul
   body, e sul grigio le schede avorio sparirebbero. */
body {
  background-color: #ffffff;
}

.home {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 16px 16px 18px;
  color: var(--home-inchiostro);
  font-size: 14px;
  line-height: 1.5;
}

/* Numeri incolonnati: punteggi e date devono stare sulla stessa verticale da
   una riga all'altra. */
.home .num {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- tessera --
   L'unico elemento a colore pieno della pagina, quindi il primo che l'occhio
   raggiunge. E' anche la porta dell'area personale: deve esserci sempre, anche
   per chi non ha fatto l'accesso (li' dentro ci vanno Accedi e Registrati). */
.home-tessera {
  background: linear-gradient(142deg, #f6e29b 0%, #dcbb4d 46%, #ac8722 100%);
  color: #191305;
  border-radius: 24px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 26px rgba(172, 135, 34, 0.28);
}

.home-tessera__testa {
  display: flex;
  align-items: center;
  gap: 13px;
  /* Il blocco campionato/posizione va a capo su una riga sua (vedi
     .home-tessera__stato): la prima riga e' tutta di foto e nome. */
  flex-wrap: wrap;
}

.home-tessera__foto,
.home-tessera__iniziali {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.home-tessera__foto {
  object-fit: cover;
}

.home-tessera__iniziali {
  background: rgba(25, 19, 5, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
}

.home-tessera__chi {
  flex: 1;
  min-width: 0;
}

.home-tessera__nome {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  /* Un nome lungo va a capo invece di sfondare la card. */
  overflow-wrap: anywhere;
}

.home-tessera__squadra {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #503d0c;
}

.home-tessera__posizione strong {
  display: block;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Il numero di tessera sta sotto nome e squadra, in nero: e' il dato che
   uno mostra al banco, deve leggersi anche al sole. */
.home-tessera__numero {
  display: block;
  margin-top: 5px;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #191305;
}

/* Il campionato e la posizione sono due blocchi gemelli: valore grande sopra,
   etichetta piccola sotto. Il campionato viene prima.

   ⚠️ Su telefono stanno su una SECONDA RIGA sotto foto e nome, ai due lati,
   non a destra del nome. Prima erano a destra con `flex: 0 0 auto`: un
   campionato dal nome lungo ("GARGANO DARTS LEAGUE") prendeva tutta la
   larghezza che chiedeva senza andare a capo, al nome restavano 80 px e
   `overflow-wrap: anywhere` lo spezzava lettera per lettera ("Do / me /
   nico"). Con la riga propria nessun nome e nessun titolo puo' schiacciare
   l'altro, qualunque sia la lunghezza. Su desktop si affiancano al nome. */
.home-tessera__stato {
  flex: 1 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(25, 19, 5, 0.14);
}

.home-tessera__campionato {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.home-tessera__posizione {
  flex: 0 0 auto;
  text-align: right;
}

.home-tessera__campionato strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  padding: 4px 0 3px;
  color: #191305;
  /* Va a capo sulle parole; se una parola sola non ci sta, si spezza
     piuttosto che uscire dalla tessera. */
  overflow-wrap: anywhere;
}

.home-tessera__campionato span,
.home-tessera__posizione span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #503d0c;
}

.home-tessera__porte {
  display: flex;
  gap: 9px;
  margin-top: 12px;
}

/* Due porte, non tre: bersagli larghi meta' schermo, raggiungibili col pollice.
   L'etichetta e' scritta per esteso, non abbreviata. */
.home-tessera__porte a {
  flex: 1;
  text-decoration: none;
  text-align: center;
  background: rgba(25, 19, 5, 0.12);
  color: #191305;
  border-radius: 15px;
  padding: 11px 4px 10px;
  font-size: 12.5px;
  font-weight: 800;
}

.home-tessera__porte a:hover,
.home-tessera__porte a:focus {
  background: rgba(25, 19, 5, 0.2);
  color: #191305;
}

.home-tessera__porte a i {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 2px;
}

.home-tessera__porte a.home-tessera__porta-piena {
  background: #191305;
  color: var(--home-oro-chiaro);
}

/* ------------------------------------------------------------------- store --
   Il rimando allo shop, subito sotto la tessera: stessa pastiglia scura di
   .home-bottone, ma a se' stante, con l'icona a sinistra e la freccia a destra
   come le righe di partita. Solo per chi ha fatto l'accesso. */
.home-store {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #191305;
  color: var(--home-oro-chiaro);
  border-radius: 20px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.home-store:hover,
.home-store:focus {
  background: #2a1f06;
  color: var(--home-oro-chiaro);
}

.home-store span {
  flex: 1 1 auto;
}

.home-store__freccia {
  font-size: 12px;
  opacity: 0.7;
}

/* ---------------------------------------------------------- invito avvisi --
   Il pulsante "Attiva gli avvisi delle partite", sopra lo store, stessa forma
   dello store ma rosso pieno e lampeggiante: e' l'unica cosa in home che
   chiede un'azione, e deve farsi notare una volta sola (attivati gli avvisi
   non si vede piu'). Il rosso e' quello del live (--home-live): scelta
   dell'utente del 2026-09-16.

   ⚠️ E' un <button>, non un link: si azzerano bordo, larghezza e allineamento
   che lo user agent gli darebbe. Nasce `hidden` e lo accende tg_notifiche.js
   (stato per dispositivo): la regola `[hidden]` esplicita serve perche' il
   `display:flex` qui sotto vincerebbe sul `display:none` dello user agent, e
   con `display:none` si ferma anche l'animazione. */
.home-invito {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  text-align: left;
  background: var(--home-live);
  color: #ffffff;
  border-radius: 20px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.5);
  animation: home-invito-lampeggia 1.1s ease-in-out infinite;
}

.home-invito[hidden] {
  display: none;
}

/* Mentre il JS chiede il permesso e registra il dispositivo. */
.home-invito:disabled {
  opacity: 0.7;
  cursor: default;
  animation: none;
}

.home-invito:hover,
.home-invito:focus {
  color: #ffffff;
}

.home-invito span {
  flex: 1 1 auto;
}

/* Alterna i due rossi e manda fuori un alone, come .home-pallino. */
@keyframes home-invito-lampeggia {
  0%   { background: #c62828; box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.5); }
  50%  { background: #e53935; box-shadow: 0 0 0 7px rgba(198, 40, 40, 0); }
  100% { background: #c62828; box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

/* --------------------------------------------------------------- superfici --
   Rettangoli avorio sul bianco, senza bordo: la separazione la fa il tono. Se
   ci si mette un bordo, la pagina torna a essere una tabella. */
.home-scheda {
  background: var(--home-scheda);
  border-radius: 24px;
  padding: 18px;
}

.home-scheda--live {
  background: var(--home-live-fondo);
}

.home-scheda__titolo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--home-tenue);
  margin: 0;
}

.home-scheda__titolo--live {
  color: var(--home-live);
}

.home-scheda__titolo a {
  margin-left: auto;
  color: var(--home-oro-testo);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}

.home-pallino {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5372f;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(229, 55, 47, 0.6);
  animation: home-pulsa 1.7s infinite;
}

@keyframes home-pulsa {
  70% { box-shadow: 0 0 0 8px rgba(229, 55, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 55, 47, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-pallino { animation: none; }
  .home-invito { animation: none; }
}

/* ------------------------------------------------------------ partita live --
   Il punteggio e' in NERO, non in oro: su bianco il nero e' piu' leggibile, e
   l'oro resta il colore dell'identita', non dei numeri. */
.home-live {
  display: block;
  text-decoration: none;
  color: inherit;
}

.home-live:hover,
.home-live:focus {
  color: inherit;
}

.home-live__punteggio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  text-align: center;
}

.home-live__stemma {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  margin: 0 auto 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--home-oro-testo);
  font-weight: 800;
  font-size: 19px;
  box-shadow: 0 2px 6px rgba(22, 21, 15, 0.07);
}

.home-live__stemma--mia {
  background: linear-gradient(140deg, var(--home-oro-chiaro), #c39b25);
  color: #191305;
}

.home-live__squadra {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.home-live__sets {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

/* Il parziale puo' non esistere ancora: su una partita appena aperta la riga di
   `referto` manca del tutto. Il trattino e' piu' piccolo del punteggio, cosi'
   non promette un numero che non c'e'. */
.home-live__sets--assente {
  font-size: 30px;
  color: var(--home-tenue);
}

/* I leg stanno sotto il punteggio, dentro la colonna di mezzo: sono il dettaglio
   di quel numero, non un piede di pagina. Prima erano in fondo alla card a
   sinistra, con il campionato a destra; il campionato e' stato tolto su
   richiesta dell'utente il 2026-09-23 (in home si guarda chi gioca e quanto sta
   facendo, il torneo si vede aprendo la partita).

   14px: i due in piu' chiesti sui 12 che aveva il piede. */
.home-live__legs {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--home-tenue);
  /* Su una riga sola: e' corto, e andando a capo allargherebbe la colonna
     centrale a scapito dei nomi delle squadre. */
  white-space: nowrap;
}

/* ------------------------------------------------- palco delle live -------
   Dal 2026-09-23 le partite in corso sono tutte in pagina: una alla volta nella
   card grande, che si alterna da sola, e le altre in riga qui sotto.

   Le card stanno TUTTE nella stessa cella della griglia (`grid-area: palco`):
   si sovrappongono senza `position: absolute`, e il palco prende da solo
   l'altezza della card piu' alta. Niente altezze scritte a mano, niente
   misurazioni in JS: due nomi di squadra lunghi vanno a capo e il palco cresce.

   ⚠️ Il palco NON ha `overflow: hidden`: taglierebbe l'ombra degli stemmi. Le
   card che entrano ed escono si muovono di 26px, abbastanza per leggere il
   movimento e troppo poco per uscire dal rettangolo della scheda. */
.home-live-palco {
  display: grid;
  grid-template-areas: "palco";
}

/* Il rimando all'elenco completo, in fondo alla riga di "SI GIOCA ADESSO", alla
   stessa altezza. Dorato e piu' grande dell'etichetta del titolo (13.5 contro
   11.5px): il titolo e' una targhetta, questo e' un bersaglio da toccare.

   ⚠️ NIENTE maiuscoletto ne' spaziatura delle lettere: le eredita da
   .home-scheda__titolo, che e' scritto in maiuscolo, e vanno azzerate qui o si
   legge «T U T T E  L E  L I V E». */
.home-live-tutte {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--home-oro-testo);
  text-decoration: none;
  white-space: nowrap;
}

.home-live-tutte:hover,
.home-live-tutte:focus {
  color: var(--home-inchiostro);
}

/* A riposo la card sta SOTTO e invisibile: da li' entra, salendo. Chi esce
   passa da `.is-uscita`, che la manda in alto. Il senso del movimento e'
   sempre dal basso verso l'alto, come le quotazioni che scorrono. */
.home-live-palco .home-live {
  grid-area: palco;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.42s ease;
}

.home-live-palco .home-live.is-attiva {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.home-live-palco .home-live.is-uscita {
  opacity: 0;
  transform: translateY(-26px);
}

/* ⚠️ Con una sola partita live il JS non tocca niente: la card resta quella di
   sempre. La regola qui sopra la lascerebbe invisibile, e la home sembrerebbe
   rotta. La card e' `.is-attiva` gia' dal PHP, ma questa riga e' la rete: senza
   rotazione non c'e' nulla da animare.

   ⛔ IL :not() VA SUL BLOCCO, NON SULLA SCHEDA. `data-live-rotatore` sta su
   `.home-live-blocco` da quando le righe sono uscite dalla scheda: scritto
   `.home-scheda--live:not([data-live-rotatore])` il :not() e' sempre vero, la
   regola riaccende TUTTE le card e si vedono una sopra l'altra. E' successo
   davvero il 2026-09-23, appena spostate le righe. */
.home-live-blocco:not([data-live-rotatore]) .home-live {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* --------------------------------------------------- le altre live in riga --
   Stessa forma e stessa altezza della riga "Accedi allo store" (angoli 20,
   padding 14/18, icona a sinistra e freccia a destra), ma bianca invece che
   nera: lo store deve restare l'unica riga scura della home, e il rosso resta
   il colore del live. */
/* Scheda live e righe sono due cose separate in pagina, tenute insieme solo da
   questo blocco: l'utente ha chiesto il 2026-09-23 che le altre partite NON
   stiano dentro la card. Il blocco non ha superficie propria — nessuno sfondo,
   nessun padding — serve al JS, che cosi' trova card e righe sotto un aggancio
   solo, e a stringere lo spazio fra le due parti rispetto ai 15px che .home
   mette fra le sezioni. */
.home-live-blocco {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Le righe stanno sul bianco della pagina, come .home-store: la scheda rosata
   finisce con il bottone "Segui il live". */
.home-live-righe {
  display: flex;
  flex-direction: column;
}

.home-live-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  /* ⚠️ Fondo rosato, non bianco: adesso che la riga sta sul bianco della pagina
     una riga bianca non si distinguerebbe dallo sfondo. E' lo stesso rosa della
     scheda live (--home-live-fondo), cosi' si legge che appartengono alla
     stessa cosa. */
  background: var(--home-live-fondo);
  color: var(--home-inchiostro);
  border-radius: 20px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  /* L'altezza e' fissa perche' e' quella che si anima in chiusura: da 51px a 0.
     Su `auto` la transizione non parte proprio. Una riga sola di testo, quindi
     il numero non stringe niente. */
  height: 51px;
  overflow: hidden;
  /* ⚠️ Lo stacco fra le righe e' `margin-bottom`, non il `gap` del flex: il gap
     resterebbe a vuoto attorno alla riga chiusa, e il margine si chiude insieme
     a lei. */
  margin-bottom: 8px;
  transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.3s ease,
              margin 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-live-riga:last-child {
  margin-bottom: 0;
}

.home-live-riga:hover,
.home-live-riga:focus {
  color: var(--home-inchiostro);
  background: #fbe9e6;
}

/* La partita che in questo momento e' nella card grande: la sua riga si chiude
   invece di sparire di colpo, cosi' le altre scorrono al loro posto e l'occhio
   segue lo scambio. */
.home-live-riga.is-nascosta {
  height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.home-live-riga__pallino {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-live);
  flex: 0 0 auto;
}

/* Il nome della coppia si accorcia con i puntini: due squadre dal nome lungo
   non devono spingere il punteggio fuori dalla riga. */
.home-live-riga__squadre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-live-riga__sets {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--home-live);
}

.home-live-riga__sets--assente {
  color: var(--home-tenue);
}

.home-live-riga__freccia {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--home-tenue);
  opacity: 0.8;
}

/* ⚠️ Chi ha chiesto al telefono di ridurre le animazioni non deve vedere nulla
   scorrere: il cambio avviene lo stesso, ma secco. Le partite restano tutte
   leggibili nelle righe, quindi non si perde niente per strada. */
@media (prefers-reduced-motion: reduce) {
  .home-live-palco .home-live,
  .home-live-riga {
    transition: none;
  }

  .home-live-palco .home-live {
    transform: none;
  }

  .home-live-palco .home-live.is-uscita {
    transform: none;
  }
}

/* Unico bottone pieno della pagina, quindi unica azione evidente. */
.home-bottone {
  display: block;
  margin-top: 14px;
  text-align: center;
  text-decoration: none;
  background: #191305;
  color: var(--home-oro-chiaro);
  border-radius: 16px;
  padding: 13px;
  font-size: 14px;
  font-weight: 800;
}

.home-bottone:hover,
.home-bottone:focus {
  background: #2a1f06;
  color: var(--home-oro-chiaro);
}

/* ------------------------------------------------------- righe di partita --
   14 px sopra e sotto: e' il respiro che distingue questa home da quella
   vecchia, dove le righe stavano a 9. */
.home-riga {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--home-riga);
  text-decoration: none;
  color: inherit;
}

.home-riga:first-of-type {
  padding-top: 15px;
}

.home-riga:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.home-riga:hover,
.home-riga:focus {
  color: inherit;
}

/* Il filetto oro segna le partite della squadra di chi guarda: scorrendo si
   trovano senza leggere nemmeno un nome. */
.home-riga__mia {
  width: 3px;
  align-self: stretch;
  background: var(--home-oro);
  border-radius: 3px;
  margin-right: -4px;
  flex: 0 0 auto;
}

.home-riga__data {
  width: 44px;
  flex: 0 0 auto;
  text-align: center;
}

.home-riga__data strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.home-riga__data span {
  font-size: 10px;
  color: var(--home-tenue);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.home-riga__testo {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.home-riga__squadre {
  /* `display:block` non e' decorativo: su un elemento inline `text-overflow`
     non ha alcun effetto, e un nome di squadra lungo sfonderebbe la riga
     invece di finire con i puntini. */
  display: block;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-riga__squadre em {
  font-style: normal;
  color: var(--home-oro-testo);
}

.home-riga__meta {
  display: block;
  color: var(--home-tenue);
  font-size: 11.5px;
  font-weight: 600;
}

.home-riga__risultato {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

.home-riga__risultato--persa {
  color: #a5a196;
}

.home-riga__freccia {
  color: #c0bbae;
  font-size: 14px;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------- news --
   L'unico punto dove la home smette di essere tabellare e diventa editoriale:
   spezza il ritmo dopo tre blocchi di partite. */
.home-news__principale {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-top: 15px;
}

.home-news__principale:hover,
.home-news__principale:focus {
  color: inherit;
}

.home-news__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* La foto e' 16:9 a prescindere dalle proporzioni del file: dalla Decisione 4
     la variante base non ha piu' un formato prevedibile, e senza il ritaglio
     una foto verticale occuperebbe mezza pagina. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--home-riga);
}

.home-news__mini {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--home-riga);
}

.home-news__titolo {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.018em;
  margin-top: 12px;
}

.home-news__titolo--piccolo {
  font-size: 13.5px;
  line-height: 1.35;
  margin-top: 5px;
  letter-spacing: -0.01em;
}

.home-news__quando {
  display: block;
  font-size: 11.5px;
  color: var(--home-tenue);
  font-weight: 600;
  margin-top: 6px;
}

.home-news__voce {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--home-riga);
}

.home-news__voce:hover,
.home-news__voce:focus {
  color: inherit;
}

.home-news__corpo {
  flex: 1;
  min-width: 0;
}

.home-etichetta {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.26);
  color: #6d520a;
}

.home-etichetta--evento {
  background: rgba(198, 40, 40, 0.1);
  color: var(--home-live);
}

/* Sopra la foto: l'etichetta deve restare leggibile su qualsiasi immagine, da
   qui il fondo scuro pieno invece del velo colorato. */
.home-news__principale {
  position: relative;
}

.home-news__principale .home-etichetta {
  position: absolute;
  left: 11px;
  top: 11px;
  background: rgba(25, 19, 5, 0.82);
  color: var(--home-oro-chiaro);
}

/* Quando la foto manca l'etichetta non ha piu' niente sopra cui stare: torna
   nel flusso. E' il caso normale, non l'eccezione — sul locale meta' delle
   righe con immagine punta a file che non esistono. */
.home-news__principale--senza-foto .home-etichetta {
  position: static;
  background: rgba(212, 175, 55, 0.26);
  color: #6d520a;
}

.home-news__principale--senza-foto .home-news__titolo {
  margin-top: 8px;
}

.home-news__tutte {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 16px;
  padding: 12px;
  border-radius: 15px;
  background: rgba(212, 175, 55, 0.16);
  color: var(--home-oro-testo);
  font-size: 13px;
  font-weight: 800;
}

.home-news__tutte:hover,
.home-news__tutte:focus {
  background: rgba(212, 175, 55, 0.26);
  color: var(--home-oro-testo);
}

/* ------------------------------------------------------------ riga rapida --
   Per i rimandi secondari: icona in pastiglia, titolo, didascalia. */
.home-rapida {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--home-scheda);
  border-radius: 20px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}

.home-rapida:hover,
.home-rapida:focus {
  color: inherit;
}

.home-rapida__icona {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
  background: rgba(212, 175, 55, 0.22);
  color: var(--home-oro-testo);
}

.home-rapida__testo {
  flex: 1;
  min-width: 0;
}

.home-rapida__testo strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
}

.home-rapida__testo span {
  font-size: 12px;
  color: var(--home-tenue);
  font-weight: 600;
}

/* ------------------------------------------------------------------ vuoti --
   Una sezione senza righe non sparisce in silenzio: dice perche' e' vuota. */
.home-vuoto {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--home-tenue);
}

/* =========================================================================
   SCHERMI LARGHI

   La stessa pagina si dispone in tre modi, e i tre stili grafici non cambiano
   mai: cambia solo la larghezza e, su desktop, la scala.

     < 700 px   telefono: una colonna, tutto in fila.
     700-1099   tablet: una colonna sola ma centrata e piu' larga. NON due
                colonne: a 800 px ognuna sarebbe piu' stretta della versione
                telefono, cioe' un peggioramento.
     >= 1100    desktop: la tessera diventa una fascia orizzontale in cima, e
                sotto UNA colonna sola, nello stesso ordine del telefono
                (live, prossime, risultati, news), con tutto leggermente piu'
                grande. Scelta dell'utente del 2026-09-11: la versione a due
                colonne con le news a destra lasciava i blocchi piccoli e
                sparsi, e su browser si vuole piu' visibilita'.

   ⚠️ La barra di navigazione in basso e l'intestazione nera restano quelle di
   mobile-app.css, identiche a tutte le altre pagine: su desktop la barra resta
   quindi appiccicata in fondo alla finestra. Spostarla in alto su schermo largo
   e' un lavoro che tocca `includes/footer.php` e quindi OGNI pagina del sito,
   non solo la home: va deciso a parte.
   ========================================================================= */

@media (min-width: 700px) {
  .home {
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
    padding: 22px 20px 24px;
    gap: 18px;
  }
}

@media (min-width: 1100px) {
  /* Stessa larghezza della `.container` di Bootstrap 5 che usano profile.php
     e le altre pagine (960 / 1140 / 1320 px, padding laterale 12 px): cosi'
     passando da una pagina all'altra le schede restano incolonnate. */
  .home {
    max-width: 960px;
    padding: 30px 12px 34px;
    gap: 24px;
    font-size: 16px;
  }

  /* --- la tessera: fascia orizzontale a tutta larghezza ------------------
     A 860 px una card verticale diventerebbe una banda d'oro alta e vuota.
     Distesa in orizzontale legge come il tesserino che e': chi sei a sinistra,
     il numero al centro, le due porte a destra. */
  .home-tessera {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 30px;
    border-radius: 28px;
  }

  .home-tessera__testa {
    flex: 1;
    min-width: 0;
    gap: 16px;
    flex-wrap: nowrap;
  }

  /* Campionato e posizione tornano a destra del nome, affiancati e allineati
     in basso: c'e' spazio. Ma non piu' di meta' della fascia: oltre, il
     titolo del campionato va a capo invece di comprimere il nome. */
  .home-tessera__stato {
    flex: 0 1 auto;
    max-width: 50%;
    justify-content: flex-end;
    gap: 22px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .home-tessera__campionato {
    flex: 0 1 auto;
    text-align: right;
  }

  /* In riga il nome ha ~200 px: non deve spezzarsi lettera per lettera come
     farebbe con `overflow-wrap: anywhere` del telefono. Se non ci sta, finisce
     con i puntini; la squadra sotto puo' invece andare su due righe. */
  .home-tessera__nome {
    overflow-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home-tessera__foto,
  .home-tessera__iniziali {
    width: 64px;
    height: 64px;
  }

  .home-tessera__iniziali {
    font-size: 22px;
  }

  .home-tessera__nome {
    font-size: 26px;
  }

  .home-tessera__squadra {
    font-size: 14px;
  }

  .home-tessera__posizione strong {
    font-size: 30px;
  }

  .home-tessera__numero {
    font-size: 13px;
  }

  .home-tessera__campionato strong {
    font-size: 18px;
  }

  .home-tessera__campionato span,
  .home-tessera__posizione span {
    font-size: 10px;
  }

  /* Non oltre i 300 px: ogni pixel dato alle porte viene tolto al nome e
     alla squadra, che stanno nella stessa riga. */
  .home-tessera__porte {
    margin-top: 0;
    flex: 0 0 auto;
    width: 300px;
    gap: 12px;
  }

  .home-tessera__porte a {
    padding: 13px 6px 12px;
    font-size: 14px;
  }

  .home-tessera__porte a i {
    font-size: 18px;
  }

  /* --- le schede: piu' padding e titoli piu' grandi ---------------------- */
  .home-scheda {
    padding: 24px 26px;
    border-radius: 28px;
  }

  .home-scheda__titolo {
    font-size: 13px;
  }

  .home-scheda__titolo a {
    font-size: 14.5px;
  }

  .home-vuoto {
    font-size: 15.5px;
  }

  /* Su schermo largo il punteggio live puo' respirare: e' l'elemento che si
     guarda da lontano. */
  .home-live__sets {
    font-size: 64px;
  }

  .home-live__stemma {
    width: 62px;
    height: 62px;
    font-size: 21px;
  }

  .home-live__squadra {
    font-size: 15.5px;
  }

  .home-live__legs {
    font-size: 15.5px;
  }

  /* Il bottone pieno non deve diventare una barra da 800 px. */
  .home-bottone {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
  }

  /* Le righe di partita guadagnano aria e corpo. */
  .home-riga {
    padding: 17px 0;
    gap: 18px;
  }

  .home-riga__data {
    width: 50px;
  }

  .home-riga__data strong {
    font-size: 23px;
  }

  .home-riga__data span {
    font-size: 11px;
  }

  .home-riga__testo {
    font-size: 16px;
  }

  .home-riga__squadre {
    font-size: 16.5px;
  }

  .home-riga__meta {
    font-size: 13px;
  }

  .home-riga__risultato {
    font-size: 23px;
  }

  /* --- le news, sotto ai risultati: mini piu' grandi e titoli piu' grandi -- */
  .home-news__mini {
    width: 84px;
    height: 84px;
  }

  .home-news__titolo {
    font-size: 19px;
  }

  .home-news__titolo--piccolo {
    font-size: 15.5px;
  }

  .home-news__quando {
    font-size: 13px;
  }

  .home-etichetta {
    font-size: 10px;
  }

  .home-news__tutte {
    font-size: 14.5px;
    padding: 14px;
  }
}

/* I due scalini superiori della `.container` di Bootstrap. */
@media (min-width: 1200px) {
  .home {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .home {
    max-width: 1320px;
  }
}

/* La barra di navigazione in basso e' fissa: senza questo margine l'ultima
   scheda ci finisce sotto. `main` ha gia' 70px di padding, qui si aggiunge solo
   il respiro. */
.home:last-child {
  margin-bottom: 6px;
}