/* Le funzioni dell'app (`funzioni/index.html`). La testata e «In sala» stanno
   sull'asse centrale come il resto del sito; le sezioni col telefono vanno a
   zig-zag sugli schermi larghi: titolo, frase e tessere da una parte, il
   telefono dall'altra, e il lato si alterna. Solo i token di site.css;
   telefono, chiusura e confronto vengono da site.css e atleti.css. */

/* La testata, come quella di Atleti: a sinistra titolo su due righe, accesso
   anticipato, frase, i tasti degli store (quando ci sono) e i fatti; a destra
   la schermata dell'esercizio con tre schedine accanto, all'altezza di ciò che
   indicano; sotto, l'indice della pagina */
.funzioni-hero { padding-top: clamp(28px, 3.4vw, 56px); }
.funzioni-hero-griglia {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 13fr);
  align-items: center;
  gap: var(--sp-6) clamp(32px, 4vw, 72px);
  max-width: var(--largo); margin-inline: auto;
}
.funzioni-hero-testo { display: grid; gap: var(--sp-5); align-content: center; }
.funzioni-hero-testo .accesso-anticipato { margin: 0; justify-content: flex-start; text-align: left; }
/* Nella colonna il titolo sta su tre righe: la prima frase da sola, la seconda su due */
.funzioni-hero h1 { font-size: clamp(40px, 4.2vw, 60px); }
.funzioni-hero h1 > span { display: block; }
.funzioni-hero h1 > span + span { display: inline; }
.funzioni-hero .lead { max-width: 44ch; }
.store { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Senza tasti accesi (vedi site.js e config.js) la riga non occupa spazio */
.store:not(:has(.store-tasto:not([hidden]))) { display: none; }
.store-tasto { display: block; line-height: 0; border-radius: 8px; }
.store-tasto:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
.store-tasto img { height: 52px; width: auto; }
.fatti { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; color: var(--inchiostro-2); font-size: var(--t-corpo); }
.fatti span::before { content: "✓ "; color: var(--accento-testo); font-weight: var(--p-forte); }

/* La scena: il telefono a sinistra, intero; le schedine a destra, col filo
   verso il punto dello schermo di cui parlano */
.funzioni-scena { position: relative; --lato-tel: clamp(270px, 22.5vw, 320px); height: calc(var(--lato-tel) * 2.174); }
.funzioni-scena .telefono { --lato: var(--lato-tel); position: absolute; left: 0; top: 0; }
.nota {
  position: absolute; right: 0; z-index: 2;
  width: min(340px, calc(100% - var(--lato-tel) - 72px));
  margin: 0; padding: var(--sp-4);
  background: var(--superficie); border: var(--bordo-forte); border-radius: var(--r);
  font: var(--p-medio) var(--t-corpo) / 1.45 var(--font-testo); color: var(--inchiostro); text-wrap: pretty;
  transform: translateY(-50%);
}
.nota b {
  display: block; margin-bottom: var(--sp-1);
  font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase;
  font-size: var(--t-titoletto); letter-spacing: var(--spaziatura-titolo); color: var(--accento-testo);
}
.nota::before { content: ""; position: absolute; top: 50%; right: 100%; width: clamp(24px, 3vw, 48px); height: 1px; background: var(--accento); }
.nota-recupero { top: 27.5%; }
.nota-scorsa { top: 48%; }
.nota-tocco { top: 73.5%; }

/* L'indice delle sezioni, sotto il telefono */
.indice { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: 0; }
.funzioni-hero-griglia > .indice { grid-column: 1 / -1; margin-top: var(--sp-4); }
.indice a {
  padding: 8px 14px; border: var(--bordo); border-radius: var(--r);
  font-size: var(--t-piccolo); font-weight: var(--p-forte); color: var(--inchiostro-2); text-decoration: none;
  transition: border-color var(--m-breve) var(--curva), color var(--m-breve) var(--curva);
}
@media (hover: hover) { .indice a:hover { border-color: var(--inchiostro); color: var(--inchiostro); } }
@media (pointer: coarse) { .indice a { display: inline-flex; align-items: center; min-height: var(--lato-tocco); } }

/* I modi: tessere col filo */
.modi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
  margin: 0; padding: 0; list-style: none;
  max-width: none; /* la regola .modi della home, sotto i 1000px, la fermava a 640px */
}
.modo {
  display: grid; align-content: start; gap: var(--sp-2);
  padding: var(--sp-5); border: var(--bordo); border-radius: var(--r); background: var(--superficie);
}
.modo-occhiello {
  font-size: var(--t-minimo); font-weight: var(--p-forte);
  letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase; color: var(--muto);
}
.modo h3 {
  font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase;
  font-size: clamp(20px, 1.8vw, 26px); line-height: var(--i-stretta); letter-spacing: var(--spaziatura-titolo);
  color: var(--inchiostro);
}
.modo p:last-child { color: var(--inchiostro-2); line-height: var(--i-corpo); text-wrap: pretty; }

/* Le voci che si toccano: il telefono in mezzo mostra quella schermata. Dentro
   c'è solo il tasto, quindi niente subgrid su tre righe (la regola .modo della home) */
.modi-scelta .modo { padding: 0; grid-row: auto; grid-template-rows: none; }
.modo-tasto {
  display: grid; align-content: start; gap: var(--sp-2); width: 100%; height: 100%;
  padding: var(--sp-5); border: 0; border-radius: var(--r); background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.modo-tasto .modo-titolo {
  font-family: var(--font-titolo); font-weight: var(--p-titolo); text-transform: uppercase;
  font-size: clamp(20px, 1.8vw, 26px); line-height: var(--i-stretta); letter-spacing: var(--spaziatura-titolo);
  color: var(--inchiostro);
}
.modo-tasto .modo-testo { color: var(--inchiostro-2); line-height: var(--i-corpo); text-wrap: pretty; }
.modi-scelta .modo { transition: border-color var(--m-breve) var(--curva), background-color var(--m-breve) var(--curva); }
@media (hover: hover) { .modi-scelta .modo:hover { border-color: var(--filo-forte); } }
.modi-scelta .modo:has([aria-pressed="true"]) { border-color: var(--inchiostro); background: var(--superficie-2); }
.modo-tasto:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
.telefono-nota { margin-top: var(--sp-3); font-size: var(--t-piccolo); color: var(--muto); text-align: center; }
html:not(.js) .telefono-nota { display: none; }

/* Il corpo di una sezione: sotto i 1000px prima il telefono, poi le tessere */
.funzione-corpo { display: grid; gap: var(--sp-6); max-width: var(--largo); margin-inline: auto; }

/* Sugli schermi larghi le sezioni col telefono (`.funzione-lati`) vanno a
   zig-zag: da una parte titolo, frase e tessere allineati a sinistra,
   dall'altra il telefono, a metà altezza di titolo e tessere. Il lato si
   alterna: `data-lato="sinistra"` mette il telefono a sinistra. Il corpo
   sparisce dalla griglia (`display: contents`): tessere e telefono stanno
   nelle celle del contenitore; le righe «E poi» partono dal bordo del testo
   e corrono fino al bordo destro. */
@media (min-width: 1001px) {
  .funzione-lati > .contenitore {
    --lato-tel: clamp(260px, 22vw, 320px);
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(var(--lato-tel), 2fr);
    grid-template-areas: "testa telefono" "modi telefono" "coda coda";
    column-gap: clamp(40px, 5vw, 96px);
  }
  .funzione-lati[data-lato="sinistra"] > .contenitore {
    grid-template-columns: minmax(var(--lato-tel), 2fr) minmax(0, 3fr);
    grid-template-areas: "telefono testa" "telefono modi" ". coda";
  }
  .funzione-lati .funzione-corpo { display: contents; }
  .funzione.funzione-lati > .contenitore > .sezione-testa {
    grid-area: testa; align-self: end; justify-items: start;
    margin-bottom: var(--sp-6); text-align: left;
  }
  .funzione.funzione-lati > .contenitore > .sezione-testa .lead { margin-inline: 0; }
  .funzione-lati .modi { grid-area: modi; align-self: start; }
  /* Con un numero dispari di tessere l'ultima prende tutta la riga */
  .funzione-lati .modi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .funzione-lati .funzione-telefono { grid-area: telefono; align-self: center; justify-self: center; }
  .funzione-lati .funzione-telefono .telefono { --lato: var(--lato-tel); }
  .funzione-lati .anche, .funzione-lati .avviso-medico { grid-area: coda; align-self: start; }
  .funzione-lati .anche { justify-content: flex-start; margin-inline: 0; }
  .funzione-lati .avviso-medico { text-align: left; }
  /* In sala non c'è un telefono: quattro tessere in fila */
  .senza-telefono > .modi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Fra i 1001 e i 1200px la colonna del testo è stretta: tessere una sotto l'altra */
@media (min-width: 1001px) and (max-width: 1200px) {
  .funzione-lati .modi { grid-template-columns: minmax(0, 1fr); }
  .funzione-lati .modi > :last-child:nth-child(odd) { grid-column: auto; }
}

/* «E poi»: le cose più piccole, in fila sotto, al centro */
.anche { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); max-width: var(--largo); margin: clamp(32px, 4vw, 56px) auto 0; padding: 0; list-style: none; }
.anche li {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2);
  padding: 10px 14px; border: var(--bordo); border-radius: var(--r);
  font-size: var(--t-corpo); color: var(--muto);
}
.anche b { color: var(--inchiostro); font-weight: var(--p-forte); }

.avviso-medico { margin-top: clamp(32px, 4vw, 56px); font-size: var(--t-piccolo); color: var(--muto); text-align: center; text-wrap: balance; }

/* Sotto i 1000px: prima il telefono, poi le tessere su due colonne */
@media (max-width: 1000px) {
  .funzione-corpo > .funzione-telefono { order: -1; }
  /* La testata su una colonna: testo, poi il telefono al centro, senza schedine */
  .funzioni-hero-griglia { grid-template-columns: minmax(0, 1fr); }
  .funzioni-scena { height: auto; display: grid; justify-items: center; }
  .funzioni-scena .telefono { position: static; }
  .nota { display: none; }
}
@media (max-width: 640px) {
  .modi { grid-template-columns: minmax(0, 1fr); }
  .modo { padding: var(--sp-4); }
}