/* PadelCity — la disposizione delle pagine Academy, Tesseramento, Sponsor,
   Aziende, Contatti, Link, Privacy e Cookie (agente pagine).
   Solo disposizione: colori, caratteri, raggi e ombre arrivano dai token
   di stile.css (GUIDA-STILE.md). Nessun componente ridisegnato: qui ci
   sono solo classi pg-* nuove. Lo stile del telefono vive sotto i 768px e
   dietro body.m-on, come nel resto del sito. */

/* ---------- testo accanto a una foto o a un riquadro ---------- */
.pg-due { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.pg-due--alto { align-items: start; }
.pg-foto { margin: 0; overflow: hidden; border-radius: var(--raggio); aspect-ratio: 4 / 5; }
.pg-foto img { width: 100%; height: 115%; object-fit: cover; }

/* ---------- sezioni: aria fra i blocchi ---------- */
.pg-blocco + .pg-blocco { margin-top: var(--sp-7); }
.pg-fra { margin-top: var(--sp-6); }
.pg-ancora { scroll-margin-top: calc(var(--testata) + var(--sp-4)); }

/* ---------- elenchi con la spunta (vantaggi, programmi) ---------- */
.pg-elenco { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pg-elenco li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--chiaro); }
.pg-elenco li svg { margin-top: .22em; color: var(--arancio-testo); }
.pg-elenco b { color: var(--testo); }
/* nelle schede con un elenco lo spazio in più va sopra il pulsante, non fra la frase e l'elenco */
.scheda__testo:has(~ .pg-elenco) { flex: 0 0 auto; }

/* ---------- le tessere del club: il prezzo in grande ---------- */
.pg-prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin: 0; font: 400 clamp(2.6rem, 5vw, 3.6rem)/1 var(--display); color: var(--arancio-titolo); }
.pg-prezzo small { font: 500 var(--t-piccolo)/1.2 var(--corpo); color: var(--spento); }
.pg-nota { margin: var(--sp-3) 0 0; font-size: var(--t-piccolo); color: var(--spento); }
.pg-nota a { color: var(--testo); }

/* ---------- il modulo di tesseramento ---------- */
.pg-modulo { max-width: 720px; }
.pg-bozza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-s); color: var(--chiaro); font-size: var(--t-piccolo); }
.pg-bozza p { margin: 0; flex: 1 1 260px; }
.pg-svuota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); flex: 1 1 100%; color: var(--chiaro); font-size: var(--t-piccolo); }
.pg-svuota p { margin: 0; flex: 1 1 100%; }
.pg-conferma { display: grid; gap: var(--sp-5); max-width: 720px; }
.pg-conferma:focus { outline: none; }
.pg-senza-js { margin: 0 0 var(--sp-5); color: var(--chiaro); }

/* ---------- loghi degli sponsor ---------- */
.pg-loghi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.pg-logo { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: var(--sp-3); min-height: 180px; padding: var(--sp-5); border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda); text-align: center; }
.pg-logo img { width: auto; max-width: 72%; max-height: 64px; }
.pg-logo__nome { font: 400 clamp(2.2rem, 4vw, 3rem)/1 var(--display); text-transform: uppercase; color: var(--testo); }
.pg-logo__cosa { font: 500 var(--t-minimo)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spento); }

/* ---------- foto in griglia, con la didascalia sotto ---------- */
.pg-foto-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); }
.pg-foto-griglia figure { margin: 0; }
.pg-foto-griglia .pg-cornice { overflow: hidden; border-radius: var(--raggio-m); aspect-ratio: 4 / 5; }
.pg-foto-griglia img { width: 100%; height: 100%; object-fit: cover; }
.pg-foto-griglia figcaption { margin-top: var(--sp-2); font-size: var(--t-piccolo); color: var(--spento); }

/* ---------- contatti: orari e dove siamo ---------- */
.pg-orari { display: grid; grid-template-columns: auto auto; justify-content: start; gap: var(--sp-2) var(--sp-5); margin: 0; font-size: var(--t-grande); }
.pg-orari dt { color: var(--spento); }
.pg-orari dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--testo); }
.pg-riquadro { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--fondo-scheda); }
.pg-riquadro address { font-style: normal; font-size: var(--t-grande); color: var(--chiaro); }
.pg-riquadro address b { display: block; margin-bottom: var(--sp-1); color: var(--testo); }
.pg-mappa-nota { max-width: 60ch; margin: var(--sp-3) 0 0; font-size: var(--t-piccolo); color: var(--spento); }
.pg-portali-sx { margin: 0; }

/* ---------- la pagina dei collegamenti (QR) ---------- */
.pg-link { max-width: 560px; margin: 0 auto; padding: calc(var(--testata) + var(--sp-7)) var(--margine) var(--sp-8); }
.pg-link__testa { margin-bottom: var(--sp-5); text-align: center; }
.pg-link__testa h1 { margin: 0; font: 400 clamp(2.6rem, 9vw, 4rem)/.95 var(--display); text-transform: uppercase; }
.pg-link__testa h1 em { font-style: normal; color: var(--arancio-titolo); }
.pg-link__testa p { margin: var(--sp-3) 0 0; color: var(--chiaro); }
.pg-link .portali { margin-top: var(--sp-5); }
.pg-link__gruppo { margin: var(--sp-6) 0 0; font: 500 .8rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--arancio-testo); text-align: center; }

/* ---------- testi legali ---------- */
.pg-legale { max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine) clamp(64px, 10vh, 120px); }
.pg-legale .testo-lungo > :first-child { margin-top: 0; }
.pg-legale table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--t-piccolo); }
.pg-legale th, .pg-legale td { padding: var(--sp-3); border-bottom: 1px solid var(--riga); text-align: left; vertical-align: top; }
.pg-legale th { font: 500 var(--t-minimo)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spento); }
.pg-legale td:first-child { color: var(--testo); font-weight: 600; }
.pg-evidenza { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--bordo-forte); border-left-width: 4px; border-left-color: var(--arancio); border-radius: var(--raggio-s); background: var(--vetro); color: var(--testo); }
.pg-aggiornata { font: 500 var(--t-minimo)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spento); }

/* ---------- telefono ---------- */
@media (max-width: 767.98px) {
  body.m-on .pg-due { grid-template-columns: minmax(0, 1fr); }
  body.m-on .pg-foto { aspect-ratio: 4 / 3; }
  /* i quattro sponsor in vista tutti insieme: 2×2 */
  body.m-on .pg-loghi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.m-on .pg-logo { min-height: 112px; padding: var(--sp-4) var(--sp-3); gap: var(--sp-2); }
  body.m-on .pg-logo img { max-height: 44px; max-width: 70%; }
  body.m-on .pg-logo__nome { font-size: 1.9rem; }
  /* due foto per riga: tre schermate di foto una sotto l'altra non le guarda nessuno */
  body.m-on .pg-foto-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  body.m-on .pg-orari { grid-template-columns: 1fr auto; font-size: var(--t-testo); }
  body.m-on .pg-link { padding-top: calc(var(--testata) + var(--sp-5)); padding-bottom: var(--sp-7); }
  /* le tabelle dei testi legali diventano righe una sotto l'altra: niente scorrimento di lato */
  body.m-on .pg-legale table, body.m-on .pg-legale tbody, body.m-on .pg-legale tr, body.m-on .pg-legale td { display: block; }
  body.m-on .pg-legale thead { display: none; }
  body.m-on .pg-legale tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--riga); }
  body.m-on .pg-legale td { padding: var(--sp-1) 0; border: 0; }
}

/* ---------- la revisione della disposizione (30/09) ---------- */
/* la mappa: da 768px in su larga quanto il contenitore (con 16:10 e il tetto di 560px
   si stringeva a 896px e restava a sinistra) */
@media (min-width: 768px) { .mappa { aspect-ratio: 21 / 9; } }

/* la pagina dei collegamenti: le tessere-icona (WhatsApp, Instagram, Facebook; Maps e il sito) */
.portali--tessere { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portali--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portali--tessere .portale { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: var(--sp-2); min-height: 96px; padding: var(--sp-3) var(--sp-2); text-align: center; }
.portali--tessere .portale__freccia { display: none; }
.pg-link__testa + h2 + .portali--tessere { margin-top: 0; }

/* i testi legali: l'indice (chiuso sul telefono, fermo a destra sul computer largo) */
.pg-indice { margin: 0 0 var(--sp-6); }
.pg-indice summary { font-size: 1rem; }
.pg-indice__voci { display: grid; gap: 2px; margin: 0; padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 1.4em); color: var(--spento); font-size: var(--t-piccolo); }
.pg-indice__voci a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-2); margin-left: calc(-1 * var(--sp-2)); border-radius: 8px; color: var(--chiaro); text-decoration: none; }
.pg-indice__voci a:hover { color: var(--testo); background: var(--vetro); }
.pg-indice__voci a[aria-current] { color: var(--arancio-testo); font-weight: 600; }
.pg-legale h2[id] { scroll-margin-top: calc(var(--testata) + var(--sp-4)); }
/* la tabella dei cookie: il nome non va a capo, il tipo sotto in piccolo */
.pg-tipo { display: block; margin-top: 2px; font-weight: 400; color: var(--spento); }
@media (min-width: 1024px) {
  .pg-legale { display: grid; grid-template-columns: minmax(0, 34em) minmax(220px, 300px); justify-content: space-between; column-gap: var(--sp-8); align-items: start; }
  .pg-legale > .testo-lungo { grid-column: 1; grid-row: 1; }
  .pg-indice { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--testata) + var(--sp-5)); margin: 0; }
  .pg-indice[open] summary, .pg-indice details[open] summary { display: none; }
  .pg-indice details[open] { padding-top: var(--sp-4); }

  /* il tesseramento: il modulo a sinistra, il riepilogo fermo a destra */
  .pg-richiesta { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); column-gap: var(--sp-8); align-items: start; }
  .pg-riepilogo { display: block; position: sticky; top: calc(var(--testata) + var(--sp-5)); }
}
@media (max-width: 767.98px) {
  /* la tabella dei cookie a righe: ogni valore con la sua etichetta davanti */
  body.m-on .pg-legale td[data-eti]::before { content: attr(data-eti); display: block; margin-bottom: 2px; font: 500 var(--t-minimo)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spento); }
  body.m-on .pg-legale td + td { padding-top: var(--sp-2); }
}