/* PadelCity — disposizione delle pagine degli eventi (agente eventi).
   Solo griglie, ordine e spazi, sempre con i token di stile.css (GUIDA-STILE.md):
   nessun colore, carattere, ombra o raggio scritto a mano, nessuna regola sui
   componenti. Si carica solo in /eventi/**, con ?v= alzato a ogni rilascio. */

/* ---------- /eventi/: le schede dei quattro format ---------- */
.ev-formati {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
}
/* la scheda-collegamento riempie la sua cella (le righe restano alte uguali) */
.ev-formati > li { display: grid; }
/* dentro la scheda: il simbolo a sinistra, il testo a destra */
.ev-formato {
  flex: 1 1 auto;
  display: grid; grid-template-columns: clamp(104px, 11vw, 148px) minmax(0, 1fr);
  align-items: center; column-gap: var(--sp-2);
  padding-left: var(--sp-5);
}
.ev-formato__simbolo { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(var(--ombra-simbolo)); }
.ev-formato__quando { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }

/* ---------- testo e simbolo affiancati (la Division League in /eventi/) ---------- */
.ev-lato {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6) var(--sp-7); align-items: center;
}
.ev-lato__simbolo { width: clamp(160px, 18vw, 240px); height: auto; aspect-ratio: 1; filter: drop-shadow(var(--ombra-simbolo)); }

/* ---------- pagina di un evento ---------- */
.ev-quando { margin-top: var(--sp-7); }
.ev-quando .pillole { margin-bottom: var(--sp-5); }
/* le date a sinistra, come si prenota a destra */
.ev-date {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--sp-5); align-items: start;
}

@media (max-width: 767.98px) {
  body.m-on .ev-formato { grid-template-columns: 64px minmax(0, 1fr); align-items: start; column-gap: 0; padding-left: var(--sp-4); padding-top: var(--sp-5); }
  /* il simbolo non apre la sezione da solo: sta in alto a destra, accanto all'occhiello */
  body.m-on .ev-lato { position: relative; grid-template-columns: minmax(0, 1fr); }
  body.m-on .ev-lato > :first-child { padding-right: 100px; }
  body.m-on .ev-lato > :first-child > :is(.paragrafo, .bottone) { margin-right: -100px; }
  body.m-on .ev-lato__simbolo { position: absolute; top: 0; right: 0; width: 88px; }
  body.m-on .ev-quando { margin-top: var(--sp-6); }
  body.m-on .ev-date { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- la revisione della disposizione (30/09) ---------- */
/* «Come si prenota»: i due pulsanti larghi quanto la scheda, uno sotto l'altro */
#prenota .scheda__piede > .bottone { flex: 1 1 100%; }

@media (min-width: 768px) {
  /* senza date, il riquadro è alto quanto la scheda accanto e centra la frase */
  .ev-date:has([data-vuoto]:not([hidden])) { align-items: stretch; }
  .ev-date > [data-date] { display: grid; }
  .ev-date .date__vuoto { align-content: center; }
  /* la Division League e il suo simbolo, vicini: il simbolo al centro della sua colonna */
  .ev-lato { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .ev-lato__simbolo { justify-self: center; width: clamp(200px, 22vw, 300px); }
  /* /eventi/: i quattro simboli nella testa, sfalsati come un mazzo */
  .ev-simboli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); width: clamp(260px, 26vw, 360px); align-self: center; margin: 0; padding: 0; list-style: none; }
  .ev-simboli li:nth-child(2) { translate: 0 20px; }
  .ev-simboli li:nth-child(3) { translate: 0 -20px; }
  .ev-simboli a { display: block; border-radius: 50%; transition: transform .5s var(--molla); }
  .ev-simboli a:hover { transform: rotate(-6deg) scale(1.05); }
  .ev-simboli img { width: 100%; height: auto; filter: drop-shadow(var(--ombra-simbolo)); }
}
@media (min-width: 1024px) {
  /* R7: «Come funziona»: il testo a sinistra, quando si gioca a destra */
  .sezione:has(> .ev-quando) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--sp-8); align-items: start; }
  .sezione:has(> .ev-quando) > * { grid-column: 1; }
  .sezione:has(> .ev-quando) > .ev-quando { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .ev-quando .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-quando .tessere > :nth-child(3):last-child { grid-column: 1 / -1; }
  /* senza tessere (SpritzPadel) il «com'è» sta in una scheda */
  .ev-quando:not(:has(.tessere)) { padding: var(--sp-6); border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda); }
  .ev-quando:not(:has(.tessere)) .paragrafo { margin-bottom: 0; }
}
@media (max-width: 767.98px) {
  /* /eventi/: i format nel carosello: simbolo e titolo in alto, il resto sotto */
  body.m-on .ev-formati.carosello .ev-formato { grid-template-columns: 72px minmax(0, 1fr); align-items: center; align-content: start; gap: var(--sp-3); padding: var(--sp-4); }
  body.m-on .ev-formati.carosello .ev-formato > .scheda__corpo { display: contents; }
  body.m-on .ev-formati.carosello .ev-formato .scheda__titolo { grid-column: 2; grid-row: 1; }
  body.m-on .ev-formati.carosello .ev-formato .scheda__corpo > :not(.scheda__titolo) { grid-column: 1 / -1; }
}