:root {
  --blue-950: #062746;
  --blue-900: #073f7c;
  --blue-700: #0669b4;
  --crest-blue: #075f91;
  --crest-blue-dark: #03466f;
  --sky-500: #11a7e8;
  --sky-200: #d8f3ff;
  --white: #ffffff;
  --ink: #0c1726;
  --muted: #5f6f82;
  --line: #d7e8f3;
  --field: #f4fbff;
  --grass: var(--crest-blue-dark);
  --sun: var(--blue-700);
  --shadow-soft: 0 22px 55px rgba(6, 39, 70, .1);
  --shadow-strong: 0 26px 70px rgba(3, 70, 111, .18);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

/* Rete di sicurezza contro lo scroll orizzontale su mobile: qualunque
   immagine senza una regola di larghezza piu' specifica non puo' mai
   superare il proprio contenitore. Le regole per-componente (con
   width/height fissi) restano piu' specifiche e continuano a vincere. */
img, svg {
  max-width: 100%;
  height: auto;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  /* Rete di sicurezza contro uno scorrimento orizzontale involontario del
     sito su mobile (visibile come una striscia scura sul bordo sinistro
     dello schermo mentre si scorre in verticale): se un singolo elemento
     risultasse anche di un solo pixel piu' largo del viewport, il telefono
     potrebbe permettere di scorrere leggermente lo schermo anche in
     orizzontale, "scoprendo" cosi' lo sfondo scuro dietro al contenuto.
     Bloccarlo qui, a livello di intero documento, lo impedisce a prescindere
     da quale elemento lo causi. Non tocca lo scroll verticale ne' gli
     elementi "position: sticky"/"position: fixed" del sito. */
  overflow-x: hidden;
}

a, button, input, textarea, select, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,251,255,.96)),
    repeating-linear-gradient(135deg, rgba(7,95,145,.045) 0 1px, transparent 1px 18px);
  color: var(--ink);
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

.club-topbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px clamp(16px, 4vw, 56px);
  background: var(--blue-950);
  color: var(--white);
  font-size: .86rem;
  font-weight: 850;
}

.club-topbar nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.club-topbar a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}

.club-topbar a:hover {
  color: var(--white);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 12px clamp(16px, 4vw, 56px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(6, 105, 180, .16);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 32px rgba(6, 39, 70, .08);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--crest-blue-dark), var(--sky-500), var(--white), var(--crest-blue));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 210px;
}

.brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 10px 18px rgba(3, 70, 111, .18));
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 1.05rem;
  line-height: 1.1;
}

.brand small {
  color: var(--blue-700);
  margin-top: 3px;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  flex-wrap: wrap;
  color: var(--blue-950);
}

.main-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 800;
  font-size: .92rem;
  padding: 8px 0;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  border-radius: 999px;
  background: var(--sky-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

.ghost-button,
.primary-button,
.secondary-button,
.upload-button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
}

.primary-button {
  background: linear-gradient(135deg, var(--crest-blue-dark), var(--blue-700));
  color: var(--white);
  box-shadow: 0 12px 28px rgba(7, 63, 124, .22);
}

.secondary-button,
.upload-button {
  background: var(--sky-200);
  color: var(--blue-950);
}

.ghost-button {
  color: var(--blue-900);
  background: transparent;
  border: 1px solid var(--line);
}

.primary-button,
.secondary-button,
.ghost-button,
.upload-button,
.filter-button {
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.upload-button:hover,
.filter-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(3, 70, 111, .16);
}

.motion-enabled .hero-media {
  animation: stadium-pan 18s ease-in-out infinite alternate;
}

/* Ingresso "a cascata" del testo hero: ogni figlio diretto di .hero-copy
   (stemma, titolo, sottotitolo, motto, bottoni...) vola in posizione con
   un lieve ritardo in piu' rispetto al precedente, invece di apparire
   tutto insieme in blocco unico com'era prima con "hero-rise" sull'intero
   contenitore. hero-rise-3d aggiunge anche una leggera rotazione 3D
   (rotateX) che rende l'arrivo piu' "scenografico". */
.motion-enabled .hero-copy > * {
  animation: hero-rise-3d .9s var(--fx-ease-out, ease) both;
}

.motion-enabled .hero-copy > *:nth-child(1) { animation-delay: 0ms; }
.motion-enabled .hero-copy > *:nth-child(2) { animation-delay: 90ms; }
.motion-enabled .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
.motion-enabled .hero-copy > *:nth-child(4) { animation-delay: 220ms; }
.motion-enabled .hero-copy > *:nth-child(5) { animation-delay: 280ms; }
.motion-enabled .hero-copy > *:nth-child(6) { animation-delay: 340ms; }
.motion-enabled .hero-copy > *:nth-child(7) { animation-delay: 400ms; }
.motion-enabled .hero-copy > *:nth-child(8) { animation-delay: 460ms; }

.motion-enabled .match-strip {
  animation: match-glow 2.8s ease-in-out infinite;
}

.motion-enabled .hero-logo,
.motion-enabled .brand img {
  animation: crest-float 5.8s ease-in-out infinite;
}

/* Bagliori dell'hero: ognuno deriva lentamente con tempi/direzioni
   diversi, per un effetto "vivo" invece di uno sfondo statico. Valori
   diversi per durata/direzione = i tre non si muovono mai in sincrono. */
.motion-enabled .hero-blob-a {
  animation: hero-blob-drift-a 17s ease-in-out infinite alternate;
}

.motion-enabled .hero-blob-b {
  animation: hero-blob-drift-b 21s ease-in-out infinite alternate;
}

.motion-enabled .hero-blob-c {
  animation: hero-blob-drift-c 13s ease-in-out infinite alternate;
}

/* Comparsa in scroll di (quasi) ogni card del sito (news, rosa, shop,
   sponsor, documenti, accrediti...): da un semplice scorrimento verso
   l'alto a un ingresso con lieve rotazione 3D, per portare lo stesso
   linguaggio visivo dell'hero su tutto il resto del sito. */
.reveal-item {
  opacity: 0;
  transform: perspective(900px) translateY(26px) rotateX(8deg);
  transition:
    opacity .6s var(--fx-ease-out, ease) var(--reveal-delay, 0ms),
    transform .6s var(--fx-ease-out, ease) var(--reveal-delay, 0ms),
    box-shadow .18s ease,
    border-color .18s ease;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: perspective(900px) translateY(0) rotateX(0deg);
}

.article-card:hover,
.person-card:hover,
.product-card:hover,
.sponsor-card:hover,
.photo-tile:hover,
.history-copy:hover,
.identity-card:hover {
  transform: perspective(900px) translateY(-6px) rotateX(3deg);
  border-color: rgba(17, 167, 232, .5);
  box-shadow: var(--shadow-strong);
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Versione "scenografica" di hero-rise: oltre a salire e comparire, il
   contenuto entra leggermente ruotato in 3D (rotateX) e da piu' lontano,
   come se "volasse" in posizione. Usata per l'hero, vedi sopra. */
@keyframes hero-rise-3d {
  from {
    opacity: 0;
    transform: perspective(800px) translateY(46px) rotateX(14deg);
  }
  to {
    opacity: 1;
    transform: perspective(800px) translateY(0) rotateX(0deg);
  }
}

@keyframes hero-blob-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(4%, 7%, 0) scale(1.12);
  }
}

@keyframes hero-blob-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-5%, -5%, 0) scale(1.15);
  }
}

@keyframes hero-blob-drift-c {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(-7%, 6%, 0) rotate(24deg);
  }
}

/* --fx-tilt-x/--fx-tilt-y: aggiornate via JS solo su ".hero-logo" (vedi
   animations.js/animations.css) in base alla posizione del cursore, con
   fallback a 0 se il JS non parte o su schermi touch: in quel caso lo
   stemma continua a fluttuare come prima, senza inclinazione 3D. */
@keyframes crest-float {
  0%,
  100% {
    transform:
      perspective(600px)
      rotateX(calc(var(--fx-tilt-y, 0) * 14deg))
      rotateY(calc(var(--fx-tilt-x, 0) * -14deg))
      translateY(0) scale(1);
  }
  50% {
    transform:
      perspective(600px)
      rotateX(calc(var(--fx-tilt-y, 0) * 14deg))
      rotateY(calc(var(--fx-tilt-x, 0) * -14deg))
      translateY(-6px) scale(1.02);
  }
}

@keyframes stadium-pan {
  from {
    transform: scale(1);
    background-position: center;
  }
  to {
    transform: scale(1.035);
    background-position: center top;
  }
}

@keyframes match-glow {
  0%,
  100% {
    box-shadow: 0 18px 46px rgba(6, 39, 70, .16);
  }
  50% {
    box-shadow: 0 22px 58px rgba(17, 167, 232, .32);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
  }
}

.hero {
  position: relative;
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: clamp(22px, 4vw, 54px);
  align-items: end;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
  color: var(--white);
}

.hero::after {
  content: "";
  position: absolute;
  right: clamp(-16px, 2vw, 38px);
  top: clamp(58px, 10vw, 120px);
  width: clamp(220px, 30vw, 450px);
  aspect-ratio: 1;
  background: url("assets/foligno-calcio-1928-trasparente.webp") center / contain no-repeat;
  opacity: .34;
  pointer-events: none;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .82))
    drop-shadow(0 22px 38px rgba(0, 0, 0, .42));
}

.hero-media {
  position: absolute;
  inset: 0;
  /* Vignettatura in basso in piu' rispetto a prima: il testo dell'hero e'
     ancorato al fondo ("align-items: end" su .hero), quindi scurire
     gradualmente quella zona lo fa risaltare molto di piu', per un effetto
     piu' "cinematografico" (stile locandina) invece del semplice overlay
     diagonale piatto di prima.
     La foto qui sotto NON fa piu' parte di questo elemento: era un unico
     sfondo statico, ora al suo posto c'e' ".hero-photo-carousel" (foto dei
     tifosi che scorrono automaticamente ogni 15s, vedi renderHeroPhotoCarousel
     in app.js), posizionato subito PRIMA di questo elemento nell'HTML cosi'
     da restare sotto (".hero-media" resta solo la vignettatura semi-
     trasparente sopra le foto, non piu' anche lo sfondo). */
  background:
    linear-gradient(180deg, transparent 38%, rgba(2, 12, 24, .58) 76%, rgba(2, 12, 24, .92) 100%),
    linear-gradient(90deg, rgba(3, 32, 56, .94), rgba(6, 95, 145, .32) 56%, rgba(3, 32, 56, .9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 86px);
  background-color: var(--blue-900);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Bagliori sfumati sullo sfondo dell'hero (niente librerie 3D: solo
   cerchi molto sfocati con "mix-blend-mode: screen", che li fa comparire
   come luce colorata sopra la foto invece di macchie piatte). Restano
   fermi finche' "prepareMotion()" (app.js) non aggiunge ".motion-enabled"
   al body (mai se l'utente preferisce ridurre le animazioni): vedi le
   regole ".motion-enabled .hero-blob-*" piu' in basso per il movimento. */
.hero-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-blob-a {
  width: clamp(220px, 32vw, 420px);
  top: -10%;
  left: 6%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 159, 227, .95), transparent 72%);
}

.hero-blob-b {
  width: clamp(260px, 38vw, 480px);
  bottom: -14%;
  right: 2%;
  background: radial-gradient(circle at 60% 40%, rgba(17, 167, 232, .8), transparent 72%);
}

.hero-blob-c {
  width: clamp(160px, 22vw, 300px);
  top: 38%;
  left: 52%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .55), transparent 72%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding-bottom: clamp(80px, 11vh, 130px);
}

/* Quando il blocco "in diretta" e' visibile (vedi renderLiveMatchStrip() in
   app.js), ".match-strip" diventa piu' alto di una riga in piu' (marcatore +
   riga meta). Da tablet in su la riserva sotto il testo dell'hero e' quella
   di ".hero-copy" qui sopra (fissa, non legata alla partita in corso): su
   schermi bassi (laptop con altezza ridotta) potrebbe non bastare piu' e il
   testo rischierebbe di avvicinarsi troppo al blocco punteggio. Qui la
   aumentiamo solo quando serve davvero. Vale solo da 721px in su: sotto
   quella soglia ".hero-copy" ha "padding-bottom: 0" (vedi
   "@media (max-width: 720px)" piu' sotto) ed e' ".hero" stesso a riservare
   lo spazio, gestito li' da ".hero.has-live-match" in style.css. */
@media (min-width: 721px) {
  .hero.has-live-match .hero-copy {
    padding-bottom: clamp(150px, 18vh, 210px);
  }
}

/* NOTA: qui c'era una SECONDA regola ".hero-logo" (residuo del vecchio
   restyling "stile Perugia", superata dal restyling successivo "stile
   Parma" che vive ora in style.css) con un proprio "filter: drop-shadow(...)".
   Anche dopo aver tolto l'ombra dalla regola "vera" in style.css, quella
   vecchia ombra qui continuava ad applicarsi lo stesso: essendo due regole
   diverse con la stessa specificita', il browser unisce le proprieta' una
   per una, e per "filter" vinceva ancora questa (l'unica delle due a
   dichiararlo) anche se style.css viene caricato dopo - da qui il
   "riquadro" ancora visibile intorno allo stemma segnalato dall'utente.
   Rimossa del tutto: l'unico "<img class="hero-logo">" nella pagina usa
   solo piu' la regola in style.css. */

.eyebrow {
  margin: 0 0 12px;
  color: var(--sky-500);
  font-weight: 950;
  text-transform: uppercase;
  /* Prima era fissa (.78rem) mentre il titolo sotto (h2) cresce parecchio
     con la larghezza schermo (vedi sotto): su desktop largo il divario tra
     occhiello piccolissimo e titolo enorme risultava sbilanciato. Un
     leggero clamp la fa crescere anche lei, di poco, restando comunque
     chiaramente piu' piccola del titolo. */
  font-size: clamp(.78rem, .6vw + .6rem, .95rem);
  letter-spacing: 0;
}

.hero .eyebrow {
  color: var(--sky-200);
}

h1,
h2 {
  margin: 0;
  line-height: .98;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  font-size: clamp(3.4rem, 9.5vw, 8.4rem);
  text-shadow: 0 18px 46px rgba(0, 0, 0, .32);
}

h2 {
  color: var(--blue-950);
  /* Il massimo era 4.8rem (76.8px): su schermi molto larghi il titolo di
     sezione diventava quasi grande quanto h1 (il titolo dell'hero) e molto
     piu' grande dell'occhiello/sottotitolo sopra e sotto di lui, un salto
     di scala eccessivo. Massimo ridotto e crescita (5vw -> 4.1vw) piu'
     dolce: resta comunque un titolo importante, ma piu' in proporzione col
     resto del testo della sezione. */
  font-size: clamp(2rem, 4.1vw, 3.6rem);
}

.hero-copy p:not(.eyebrow),
.shop-panel p,
.sources p {
  /* Massimo leggermente piu' alto (1.25rem -> 1.35rem) per accompagnare la
     riduzione del titolo qui sopra: meno salto tra titolo e sottotitolo. */
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.55;
}

.hero-copy p:not(.eyebrow) {
  max-width: 660px;
  color: rgba(255, 255, 255, .9);
}

.hero-motto {
  cursor: default;
  user-select: none;
  touch-action: manipulation;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero .secondary-button {
  background: var(--white);
}

.match-strip {
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  right: clamp(16px, 4vw, 56px);
  bottom: 22px;
  z-index: 2;
  /* Due blocchi impilati: ".match-strip-live" (marcatore/minuto, visibile
     solo a partita in corso) sopra, ".match-strip-next" (prossima gara reale
     da calendario + countdown, sempre presente) sotto. Prima era tutto un
     unico grid a 3 colonne che mostrava O il live O la prossima gara,
     mescolandone anche i testi: vedi renderLiveMatchStrip() in app.js. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(3, 70, 111, .4);
  backdrop-filter: blur(20px) saturate(140%);
  border-radius: 8px;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}

.match-strip-next {
  display: grid;
  /* "minmax(0, auto)" al posto di un semplice "auto": senza il minimo a 0
     una colonna puo' rifiutarsi di restringersi sotto la larghezza del suo
     contenuto piu' lungo (es. il countdown "Tra 3 giorni e 22 ore al calcio
     d'inizio" quando si allunga), facendo traboccare l'intera griglia oltre
     i bordi di ".match-strip" e, a cascata, della pagina in orizzontale su
     mobile. */
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  gap: 18px;
  align-items: center;
}

.match-strip span,
.match-strip small,
.match-strip strong {
  min-width: 0;
}

.match-strip span,
.match-strip small {
  color: rgba(255, 255, 255, .82);
}

.match-strip strong {
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
}

/* Blocco "in diretta": badge + nomi squadre + marcatore su una riga (a capo
   se serve), riga meta (competizione | stato/minuto | stadio) sotto. Ogni
   selettore e' qualificato con l'antenato ".match-strip-live" solo per
   avere piu' specificita' delle regole generiche ".match-strip span/strong"
   qui sopra (e delle loro varianti colore/dimensione in style.css), che
   altrimenti vincerebbero sempre essendo scritte per ultime nel foglio. */
.match-strip-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.match-strip-live .match-strip-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Partita "Finale": stesso badge ma tono piu' spento (grigio/blu scuro
   invece del blu acceso "in diretta"), cosi' il risultato resta ben
   visibile senza sembrare una partita ancora in corso. */
.match-strip-live.is-final .match-strip-live-badge {
  background: rgba(255, 255, 255, .18);
}

.match-strip-live .match-strip-live-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  /* Nessuna animazione qui apposta (niente pulse/blink continuo): sotto i
     900px le animazioni "eterne" sono gia' state tutte disattivate per un
     crash ripetuto di Safari su iPhone (vedi animations.css); un pallino
     fisso comunica comunque "diretta" senza riaprire quel rischio. */
}

.match-strip-live .match-strip-live-teams {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
}

.match-strip-live .match-strip-live-score {
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.match-strip-live .match-strip-live-meta {
  flex-basis: 100%;
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.facts article {
  position: relative;
  min-height: 138px;
  padding: 26px clamp(18px, 3vw, 36px);
  background: var(--white);
  overflow: hidden;
}

.facts article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--crest-blue), var(--sky-500));
}

.facts span,
.facts strong {
  display: block;
}

.facts span {
  color: var(--muted);
  margin-bottom: 12px;
}

.facts strong {
  color: var(--blue-900);
  font-size: clamp(1.45rem, 3vw, 2.6rem);
  line-height: 1;
}

.section-grid,
.content-band,
.squad-section,
.stats-section,
.history-section,
.results-section,
.falchetto-section,
.ecommerce-section,
.sponsors-section,
.documents-section,
.service-strip,
.sources,
.organigramma-section,
.membership-campaign-section,
.corporate-documents-section,
.accreditations-section,
.roster-dialog-section,
.stadium-section,
.videos-section,
.academy-section,
.csr-section,
.player-profile-section,
.sponsor-profile-section {
  /* Piu' respiro verticale tra le sezioni: allinea il sito a un feeling piu'
     editoriale/contemporaneo, coerente coi siti dei club professionistici. */
  padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 64px);
}

/* ---------------------------------------------------------------------
   Carosello foto DENTRO l'hero (stile sito del Perugia Calcio): sostituisce
   la vecchia foto di sfondo statica di ".hero-media", scorre da solo ogni
   15 secondi (vedi renderHeroPhotoCarousel in app.js) con frecce per
   navigare a mano. Deve stare SOTTO ".hero-media"/".hero-blob"/".hero-copy"
   nello stacking (per questo niente z-index qui: essendo il primo figlio di
   ".hero" nell'HTML, gli altri elementi assoluti dichiarati dopo di lui gli
   restano automaticamente sopra). Le frecce invece hanno z-index alto: sono
   fuori da ".hero-photo-carousel" nell'HTML (elementi diretti di ".hero")
   apposta per stare sempre sopra a tutto il resto ed essere sempre
   cliccabili. */
.hero-photo-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-photo-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .6s var(--fx-ease-out, ease);
}

.hero-photo-slide {
  flex: 0 0 100%;
  height: 100%;
}

.hero-photo-slide img,
.hero-photo-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(3, 15, 34, .42);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .18s ease, transform .18s ease;
}

.hero-photo-arrow:hover {
  background: rgba(3, 15, 34, .68);
  transform: translateY(-50%) scale(1.06);
}

.hero-photo-prev { left: clamp(12px, 2vw, 28px); }
.hero-photo-next { right: clamp(12px, 2vw, 28px); }

@media (max-width: 640px) {
  .hero-photo-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
}

.service-strip {
  display: grid;
  /* 5 colonne (prima 6): la voce "Segreteria" e' stata rimossa dalla
     pagina, Documenti/Documenti societari/Privacy restano accessibili
     solo dal footer. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--blue-950);
}

.service-strip a {
  min-height: 168px;
  display: grid;
  /* "start" invece di "center": con "center" ogni riquadro centra il
     proprio contenuto in verticale in base alla propria altezza, quindi se
     una card ha un testo che va a capo su una riga in piu' delle altre
     (es. "Falchetto IA" rispetto alle altre 4 voci), il suo numero/titolo
     finisce piu' in alto o piu' in basso rispetto ai vicini: la fila sembra
     disallineata. Con "start" tutte le card allineano numero e titolo allo
     stesso bordo superiore, a prescindere da quante righe occupa il testo
     sotto. */
  align-content: start;
  gap: 8px;
  padding: clamp(20px, 3vw, 34px);
  color: var(--white);
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(7, 95, 145, .9), rgba(6, 39, 70, .98));
  transition: transform .16s ease, background .16s ease;
}

.service-strip a:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(145deg, rgba(17, 167, 232, .9), rgba(7, 63, 124, .98));
}

.service-strip span {
  color: var(--sky-200);
  font-weight: 950;
  font-size: .8rem;
}

.service-strip strong {
  font-size: clamp(1.12rem, 2vw, 1.55rem);
  line-height: 1.05;
}

.service-strip small {
  color: rgba(255, 255, 255, .76);
  line-height: 1.35;
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(240px, .82fr) minmax(320px, 1.18fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.hub-card {
  min-height: 220px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .96)),
    url("assets/images/foligno-torres-1982-83.webp") center / cover;
  color: var(--blue-950);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hub-card:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 167, 232, .48);
  box-shadow: var(--shadow-strong);
}

.hub-card span {
  width: max-content;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--blue-900);
  color: var(--white);
  font-size: .76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.hub-card strong {
  max-width: 520px;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.05;
}

.hub-card small {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 750;
}

.history-section {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(216, 243, 255, .72)),
    linear-gradient(90deg, rgba(7, 95, 145, .08) 0 1px, transparent 1px 84px);
}

.history-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.history-copy,
.identity-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-soft);
}

.history-copy {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(18px, 2.5vw, 28px);
}

.history-copy h3,
.identity-card h3 {
  color: var(--blue-950);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.history-copy p {
  margin: 0;
  color: var(--text);
  line-height: 1.62;
}

.history-highlight {
  background:
    linear-gradient(150deg, rgba(6, 39, 70, .95), rgba(7, 95, 145, .92)),
    url("assets/foligno-calcio-1928-trasparente.webp") right -40px bottom -70px / 220px no-repeat;
  color: var(--white);
}

.history-highlight h3,
.history-highlight p {
  color: var(--white);
}

.history-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.history-archive-card {
  min-height: 178px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(7, 95, 145, .16);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(216, 243, 255, .82));
  box-shadow: var(--shadow-soft);
}

.history-archive-card:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 167, 232, .34);
  box-shadow: var(--shadow-strong);
}

.history-archive-grid span {
  color: var(--blue-700);
  font-size: .76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.history-archive-grid strong {
  color: var(--blue-950);
  font-size: 1.08rem;
  line-height: 1.15;
}

.history-archive-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.history-archive-card details {
  margin-top: 6px;
  border-top: 1px solid rgba(7, 95, 145, .14);
  padding-top: 10px;
}

.history-archive-card summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blue-900);
  cursor: pointer;
  font-weight: 950;
}

.history-archive-card summary::after {
  content: "+";
  margin-left: auto;
  color: var(--sky-500);
  font-size: 1.1rem;
  font-weight: 950;
}

.history-archive-card details[open] summary::after {
  content: "-";
}

.history-archive-card ul {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.42;
}

.history-archive-card a {
  width: fit-content;
  margin-top: 8px;
  border-radius: 8px;
  background: var(--blue-900);
  color: var(--white);
  padding: 10px 12px;
  font-weight: 900;
  text-decoration: none;
}

.history-archive-card a:hover {
  background: var(--crest-blue);
}

.history-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 18px;
  margin-top: 18px;
}

.club-timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.club-timeline li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-left: 5px solid var(--sky-500);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.club-timeline time {
  color: var(--blue-700);
  font-weight: 950;
}

.club-timeline span {
  color: var(--blue-950);
  line-height: 1.4;
}

.identity-card {
  padding: clamp(18px, 2.5vw, 28px);
}

.identity-card dl {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.identity-card div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.identity-card div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.identity-card dt {
  color: var(--muted);
  font-weight: 900;
}

.identity-card dd {
  margin: 0;
  color: var(--blue-950);
  font-weight: 850;
}

.live-section {
  background:
    linear-gradient(135deg, rgba(216, 243, 255, .9), rgba(255, 255, 255, .98)),
    repeating-linear-gradient(90deg, rgba(3, 70, 111, .08) 0 2px, transparent 2px 90px);
}

.scoreboard,
.article-editor,
.person-editor,
.login-panel,
.sponsor-editor,
.document-panel,
.email-panel,
.product-editor,
.shop-panel,
.social-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.scoreboard {
  position: relative;
  padding: clamp(18px, 3vw, 32px);
  overflow: hidden;
}

.scoreboard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--crest-blue-dark), var(--sky-500), var(--sun));
}

.teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.teams > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  justify-items: center;
}

.team-name {
  width: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--blue-950);
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}

.teams input,
.article-editor input,
.article-editor textarea,
.person-editor input,
.person-editor select,
.login-panel input,
.login-panel select,
.sponsor-editor input,
.document-panel input,
.email-panel input,
.email-panel textarea,
.size-select,
.product-editor input,
.product-editor select,
.checkout-form input,
.checkout-form textarea,
.social-editor input,
.customer-login-panel textarea,
.customer-login-panel input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfdff;
  color: var(--ink);
}

.teams strong {
  text-align: center;
  font-size: 3rem;
  line-height: 1;
  color: var(--blue-950);
}

.live-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.live-meta span.is-live {
  font-variant-numeric: tabular-nums;
}

.live-meta span.is-live::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--sky-500);
  animation: liveClockPulse 1.4s ease-in-out infinite;
}

@keyframes liveClockPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}

.live-meta span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--blue-950);
  color: var(--white);
  font-size: .84rem;
  font-weight: 900;
}

.roster-empty,
.sponsor-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--muted);
  font-weight: 750;
}

.sponsor-empty {
  grid-column: 1 / -1;
}

.sponsor-marquee-empty {
  min-width: min(360px, 80vw);
  justify-content: center;
}

.sponsor-track.is-empty {
  justify-content: center;
  animation: none;
}

/* Muro sponsor: tutti i loghi insieme in una griglia statica che va a capo
   (stile acperugiacalcio.com), separato dalla striscia scorrevole sopra
   (solo sponsor principali) e dalla griglia testo/link sotto. */
.sponsor-wall {
  display: grid;
  /* Prima "minmax(120px, 1fr)": la colonna poteva allargarsi fino a
     riempire tutta la larghezza disponibile, quindi con pochi sponsor
     ogni logo diventava enorme (una card a schermo intero). Un tetto
     massimo alla colonna (150px) tiene i loghi sempre piccoli, uguali
     tra loro, a prescindere da quanti sponsor ci sono. */
  grid-template-columns: repeat(auto-fill, minmax(110px, 150px));
  justify-content: center;
  gap: 14px;
  margin: 22px 0;
}

.sponsor-wall-item {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  max-height: 100px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sponsor-wall-item:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 167, 232, .5);
  box-shadow: var(--shadow-soft);
}

.sponsor-wall-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.versus {
  color: var(--muted);
  font-weight: 900;
}

.social-editor {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}

.timeline li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-left: 5px solid var(--sky-500);
  border-radius: 8px;
  background: var(--field);
  color: var(--blue-950);
}

.timeline time {
  font-weight: 950;
  color: var(--blue-700);
}

.lineup-card {
  margin-top: 22px;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.lineup-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.lineup-formation,
.lineup-coach {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 900;
}

.lineup-formation:empty,
.lineup-coach:empty {
  display: none;
}

.lineup-formation {
  background: var(--blue-950);
  color: var(--white);
}

.lineup-coach {
  background: var(--field);
  color: var(--blue-950);
}

.lineup-group + .lineup-group {
  margin-top: 18px;
}

.lineup-group h3 {
  margin: 0 0 10px;
  font-size: .95rem;
  color: var(--blue-700);
}

.lineup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lineup-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--field);
  color: var(--blue-950);
}

.lineup-list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-950);
  color: var(--white);
  font-size: .78rem;
}

.lineup-list small {
  color: var(--blue-700);
  font-weight: 700;
}

.delete-event {
  border: 0;
  background: transparent;
  color: var(--crest-blue-dark);
  cursor: pointer;
  font-weight: 900;
}

.results-section {
  background:
    linear-gradient(135deg, var(--white), rgba(216, 243, 255, .62)),
    repeating-linear-gradient(90deg, rgba(7, 95, 145, .045) 0 2px, transparent 2px 86px);
}

/* Due riquadri live (iframe ufficiali di Tuttocampo) affiancati per
   Risultati e Classifica, sempre aggiornati senza uscire dal sito. */
.results-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.widget-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid rgba(17, 167, 232, .34);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.widget-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.widget-card-head h3 {
  margin: 0;
  color: var(--blue-950);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.widget-card-head a {
  color: var(--blue-700);
  font-weight: 800;
  font-size: .85rem;
  white-space: nowrap;
}

.widget-embed {
  width: 100%;
  /* L'iframe della classifica e' alto 800px: il max-height doveva coprire
     anche il tasto "Chiudi ..." che appare SOTTO l'iframe una volta aperto
     (vedi mountTuttocampoWidget in app.js), altrimenti overflow:hidden lo
     tagliava via rendendolo invisibile (bug segnalato). */
  max-height: 880px;
  overflow: hidden;
  border-radius: 6px;
}

/* Wrapper che permette di scorrere in orizzontale con lo swipe quando la
   tabella di Tuttocampo (piu' larga di un telefono) non ci sta tutta:
   l'iframe sotto mantiene la sua larghezza naturale invece di essere
   forzato al 100% della card, altrimenti le colonne a destra (V, N, P, F,
   S della classifica) restavano tagliate fuori senza modo di vederle. */
.widget-embed-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.widget-embed-scroll iframe {
  display: block;
  width: 100%;
  min-width: 760px;
  border: 0;
}

/* Prima di caricare l'iframe (pesante, e' una pagina esterna con script e
   pubblicita') si mostra solo questo tasto: l'utente lo tocca quando vuole
   vedere davvero il widget, evitando di caricare tutto automaticamente ad
   ogni visita (piu' leggero e piu' sicuro su mobile). */
.widget-embed-load {
  width: 100%;
  min-height: 84px;
}

/* Testo per richiudere il widget dopo averlo aperto (vedi mountTuttocampoWidget
   in app.js): l'iframe di Tuttocampo e' alto e una volta caricato allunga
   parecchio la pagina, quindi serve un modo rapido per farlo sparire senza
   dover ricaricare tutto il sito. */
.widget-embed-close {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  border: 0;
  background: none;
  padding: 6px 4px;
  color: var(--blue-700);
  font-weight: 800;
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.widget-embed-close:hover {
  color: var(--blue-950);
}

/* Fino a 3 video YouTube: 1 sola card occupa una larghezza comoda per la
   visione, 2 o 3 si dispongono affiancate (una sotto l'altra sotto i
   980px, dove lo spazio orizzontale non basta). */
.results-video {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.results-video:has(> :only-child) {
  grid-template-columns: minmax(0, 560px);
}

.video-embed-item {
  display: grid;
  gap: 6px;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--blue-950);
  box-shadow: var(--shadow-soft);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Link di riserva sempre visibile sotto ogni video: se YouTube nega
   l'incorporamento per quel video specifico (proprietario che ha disabilitato
   l'embed altrove, "Errore 153"), il riquadro nero resta ma il visitatore ha
   comunque un modo diretto per guardare il video su YouTube. */
.video-embed-fallback {
  justify-self: start;
  font-size: .85rem;
  font-weight: 700;
  color: var(--sky-500);
  text-decoration: none;
}

.video-embed-fallback:hover {
  text-decoration: underline;
}

.falchetto-section {
  background:
    linear-gradient(135deg, var(--night), #0a315f),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 24px);
  color: var(--paper);
}

.falchetto-section h2 {
  color: var(--paper);
}

.chat-panel {
  display: grid;
  gap: 14px;
  max-width: 980px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: clamp(16px, 3vw, 26px);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

.chat-log {
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 4px;
}

.quick-questions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-questions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(216, 243, 255, .36);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  cursor: pointer;
  font-weight: 900;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.quick-questions button:hover {
  transform: translateY(-1px);
  border-color: var(--sky-200);
  background: rgba(255, 255, 255, .2);
}

.chat-message {
  max-width: min(680px, 100%);
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--night);
  line-height: 1.45;
  animation: chat-pop .24s ease both;
}

.chat-message.is-user {
  justify-self: end;
  background: rgba(0, 159, 227, .18);
}

.chat-message strong {
  display: block;
  margin-bottom: 4px;
}

.falchetto-answer-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 159, 227, .12);
  color: var(--night);
  font-size: .76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.chat-message small {
  display: block;
  margin-top: 8px;
  color: rgba(7, 27, 58, .68);
  font-weight: 800;
}

.chat-message a {
  color: var(--primary);
  font-weight: 950;
}

@keyframes chat-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.chat-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
}

.content-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(6, 39, 70, .98), rgba(3, 70, 111, .94)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 24px);
  color: var(--white);
}

.content-band::after {
  content: "";
  position: absolute;
  right: clamp(-90px, -4vw, -32px);
  bottom: -140px;
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 1;
  background: url("assets/foligno-calcio-1928-trasparente.webp") center / contain no-repeat;
  opacity: .12;
  pointer-events: none;
}

.content-band > * {
  position: relative;
  z-index: 1;
}

.content-band h2 {
  color: var(--white);
}

.section-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 96px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--crest-blue), var(--sky-500), var(--sun));
}

.article-editor {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
}

.squad-section {
  background:
    linear-gradient(180deg, var(--white), rgba(216, 243, 255, .28)),
    repeating-linear-gradient(135deg, rgba(7, 95, 145, .04) 0 1px, transparent 1px 22px);
}

.person-editor {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(160px, 1fr) minmax(160px, 1fr) 120px auto;
  gap: 10px;
  margin-bottom: 26px;
  padding: 16px;
  align-items: center;
}

.person-editor strong {
  color: var(--blue-950);
  line-height: 1.2;
}

.mini-upload {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sky-200);
  color: var(--blue-950);
  cursor: pointer;
  font-weight: 900;
}

.mini-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.people-layout {
  display: block;
}

.roster-section {
  margin-top: 38px;
}

.roster-section:first-child {
  margin-top: 0;
}

.roster-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 4px solid var(--blue-900);
  border-bottom: 1px solid var(--line);
}

.roster-section-head h3 {
  margin: 0;
  color: var(--blue-950);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}

.roster-section-head span {
  color: var(--blue-700);
  font-weight: 950;
}

.people-group {
  margin-top: 26px;
}

.people-group:first-child {
  margin-top: 0;
}

.people-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.people-group-head h4 {
  margin: 0 0 14px;
  color: var(--blue-950);
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
}

.people-group-head h4 {
  margin: 0;
}

.people-group-head span {
  color: var(--blue-700);
  font-weight: 950;
}

/* Carosello orizzontale per la rosa (stesso pattern della fotogallery):
   scroll-snap nativo, niente JS. Ogni card ha una larghezza fissa cosi'
   lo scorrimento resta prevedibile qualunque sia il numero di tesserati. */
.people-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  gap: 16px;
  padding-top: 6px;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

/* Card giocatore in stile "editoriale" (grande foto a figura intera, numero
   di maglia come pallino sovrapposto, nome/ruolo sotto): ispirata al layout
   delle card rosa di acperugiacalcio.com, mantenendo pero' la stessa
   struttura HTML/dati gia' esistente (nessuna modifica a app.js). */
.person-card {
  position: relative;
  flex: 0 0 clamp(190px, 42vw, 240px);
  scroll-snap-align: start;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  padding: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--modern-radius, 14px);
  background: var(--field);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(6, 39, 70, .07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.person-card:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 167, 232, .55);
  box-shadow: var(--shadow-soft);
}

.person-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--crest-blue-dark), var(--blue-950));
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-photo.is-logo img {
  object-fit: contain;
  padding: 18px;
}

.person-copy {
  min-width: 0;
  padding: 10px 14px 0;
}

/* Il numero di maglia si sovrappone all'angolo della foto, come un vero
   pallino da divisa, invece di stare in una riga di testo separata sotto. */
.person-number {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-950);
  font-weight: 950;
  font-size: .8rem;
  box-shadow: 0 4px 10px rgba(6, 39, 70, .28);
}

.person-card h4 {
  margin: 2px 0 2px;
  color: var(--blue-950);
  font-size: 1.15rem;
  font-weight: 950;
  line-height: 1.1;
}

.person-card p {
  margin: 0;
  color: var(--blue-700);
  font-weight: 900;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .03em;
}

.person-card > button {
  width: calc(100% - 28px);
  margin: 10px 14px 0;
}

.stats-section {
  background:
    linear-gradient(180deg, rgba(244, 247, 251, .96), var(--white)),
    repeating-linear-gradient(135deg, rgba(0, 159, 227, .05) 0 1px, transparent 1px 24px);
}

.stats-last-match {
  margin: 0 0 22px;
  color: var(--blue-700);
  font-weight: 900;
}

.stats-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.stats-card-grid article,
.stats-leader-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(6, 39, 70, .07);
}

.stats-card-grid article {
  padding: 16px;
}

.stats-card-grid span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stats-card-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--blue-950);
  /* Valori come "V-N-P" (es. "12-5-3") sono piu' lunghi di un singolo
     numero: al font-size grande di prima (fino a 2.45rem) non entravano
     nella colonna e andavano a capo proprio sui trattini (es. "0-" seguito
     da "0-0" su una seconda riga), sembrando un dato rotto invece che
     "0-0-0" su una riga sola. Font piu' contenuto + nowrap cosi' resta
     sempre su una riga, in tutte le larghezze di colonna (6/3/1 per riga). */
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: .95;
  white-space: nowrap;
}

.stats-leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stats-leader-card {
  padding: 18px;
}

.stats-leader-card h3 {
  margin: 0 0 12px;
  color: var(--blue-950);
}

.stats-leader-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-leader-card li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 850;
}

.stats-leader-card li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.stats-leader-card p {
  margin: 0;
  color: var(--muted);
}

.stats-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(6, 39, 70, .07);
}

.stats-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.stats-table th,
.stats-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.stats-table th {
  color: var(--blue-900);
  font-size: .78rem;
  text-transform: uppercase;
}

.stats-table td {
  color: var(--blue-950);
  font-weight: 800;
}

.login-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.logged-in .login-panel {
  display: none;
}

.login-panel h3,
.user-panel h3 {
  margin: 0;
  color: var(--blue-950);
  font-size: 1.35rem;
}

.login-panel p {
  min-height: 24px;
  margin: 0;
  color: var(--blue-700);
  font-weight: 850;
}

.login-panel .panel-note {
  min-height: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.4;
}

.user-panel {
  display: grid;
  gap: 14px;
}

/* Masonry con CSS Grid nativo (niente layout "a colonne" CSS): ogni card
   riceve via JS (layoutCardsMasonry in app.js) uno "span" di righe alto
   quanto la sua altezza reale, cosi' si impila subito sotto la card sopra
   nella stessa colonna, senza spazio vuoto forzato dentro le card e senza
   lasciar vedere lo sfondo blu della sezione nei "buchi" tra card di
   altezza diversa. Il layout "a colonne" (proprieta' CSS columns) e' stato
   scartato perche' su alcuni browser, quando una card frammentata tra le
   colonne riceve una trasformazione al passaggio del mouse, sparisce e
   ricompare per un attimo (bug noto del rendering dei fragment multicol).
   Con la griglia normale ogni card resta una singola cella e l'hover
   funziona senza glitch. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1px;
  /* Fondamentale: senza "start" ogni card viene stirata (align-items:stretch
     e' il default) per riempire la sua riga implicita, che prima che lo
     script le assegni lo "span" giusto e' alta solo 1px (grid-auto-rows) -
     la card viene quindi schiacciata e tagliata (il bug appena segnalato:
     card compresse, testo e foto tagliati). Con "start" ogni card mantiene
     sempre la propria altezza naturale, sia per il rendering sia per la
     misura che fa lo script. */
  align-items: start;
  gap: 16px;
  /* "dense" (default sarebbe "row", cioe' sparso): con lo "span" per-card
     assegnato via JS (layoutCardsMasonry in app.js) e altezze diverse tra
     card affiancate, l'algoritmo di piazzamento "sparso" avanza sempre in
     avanti riga per riga e non torna mai indietro a riempire lo spazio
     lasciato libero sotto una card piu' corta nella colonna accanto: quello
     spazio restava vuoto e mostrava lo sfondo della sezione (i "buchi blu"
     tra le colonne, visibili soprattutto su desktop dove le 3 colonne
     stanno affiancate). "dense" fa ripiazzare le card successive proprio in
     quegli spazi liberi appena si liberano, eliminando i buchi senza
     toccare ne' l'altezza naturale delle card ne' l'hover (restano sempre
     singole celle di griglia, non frammenti multicolonna). */
  grid-auto-flow: dense;
}

.article-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .13);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}

.article-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--sky-500), var(--white), var(--sun));
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 66px rgba(0, 0, 0, .18);
}

.article-card.is-pinned {
  border-color: var(--sun);
  box-shadow: 0 20px 50px rgba(6, 105, 180, .28);
}

.article-card.is-pinned::before {
  background: var(--sun);
}

.pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sun);
  /* Testo bianco invece di "--blue-950": da quando "--sun" e' diventato blu
     (sito monocolore), il testo scuro sullo stesso sfondo blu risultava
     illeggibile, un blob pieno senza scritta visibile ("In evidenza"). */
  color: var(--white);
  font-weight: 950;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.pinned-badge[hidden] {
  display: none;
}

.article-card span {
  color: var(--blue-700);
  font-weight: 950;
  text-transform: uppercase;
  font-size: .76rem;
}

/* ".article-card span" qui sopra ha piu' specificita' (elemento + classe)
   di ".pinned-badge" da solo, quindi vinceva sempre imponendo lo stesso blu
   dello sfondo del badge: testo e sfondo identici, "In evidenza" invisibile.
   Questa regola usa due classi per avere priorita' e forzare il bianco. */
.article-card .pinned-badge {
  color: var(--white);
}

.article-card h3 {
  margin: 8px 0 12px;
  color: var(--blue-950);
  font-size: 1.55rem;
  line-height: 1.05;
}

.article-card p {
  color: var(--muted);
  line-height: 1.5;
}

.article-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 4px;
}

.card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* Carosello orizzontale invece della griglia statica: pattern usato dai
   siti dei club professionistici per le fotogallery. Scroll-snap nativo
   (nessun JS necessario): scorre con swipe su mobile, con trackpad/rotellina
   su desktop; ogni foto si "aggancia" all'inizio della vista. */
.gallery-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  gap: 16px;
  padding-top: 6px;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.photo-tile {
  position: relative;
  flex: 0 0 clamp(200px, 58vw, 320px);
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--blue-900);
  box-shadow: 0 18px 42px rgba(6, 39, 70, .16);
}

.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.photo-tile:hover img {
  transform: scale(1.045);
  filter: saturate(1.08);
}

.photo-tile.is-logo img {
  object-fit: contain;
  padding: 22px;
  background: var(--white);
}

.photo-tile.is-placeholder {
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(17, 167, 232, .85), rgba(7, 63, 124, .95)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 2px, transparent 2px 14px);
}

.photo-tile.is-placeholder strong {
  max-width: 240px;
  font-size: 1.35rem;
  line-height: 1.08;
}

.fans-section {
  padding: clamp(54px, 8vw, 104px) clamp(18px, 5vw, 76px);
  color: var(--paper);
  background: var(--night);
}

.fans-section .section-head {
  margin-bottom: 28px;
}

.fans-section h2 {
  color: var(--paper);
}

.fans-section .secondary-button {
  border-color: rgba(255, 255, 255, .42);
  color: var(--paper);
  background: transparent;
}

.fan-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.fan-photo-card {
  position: relative;
  min-width: 0;
  min-height: 230px;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: #071b3a;
}

.fan-photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .3s ease;
}

.fan-photo-card:hover img {
  transform: scale(1.035);
}

.fan-gallery-empty {
  /* Sfondo chiaro (come le sezioni #gallery/#fans che la contengono): bordo
     e testo scuri invece del bianco-su-bianco originale, pensato per uno
     sfondo scuro che qui non c'e' mai, che rendeva il messaggio quasi
     invisibile. Stessi colori del pattern "vuoto" gia' usato altrove nel
     sito (.sponsor-empty/.roster-empty). */
  grid-column: 1 / -1;
  min-height: 210px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
  background: #f8fbfe;
}

.fan-gallery-empty strong {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--ink);
}

.fan-gallery-empty span {
  color: var(--muted);
}

/* Galleria "Momenti biancoazzurri" (#gallery): il messaggio placeholder
   ("Le foto della Redazione saranno pubblicate qui a breve") viene
   nascosto anche su mobile, non solo su desktop (dove era gia' nascosto
   da desktop-mobile-parity.css). Selettore ristretto a "#gallery" cosi'
   non tocca lo stesso messaggio nella sezione Tifosi (#fans), che usa la
   stessa classe. */
#gallery .fan-gallery-empty {
  display: none;
}

/* Qualunque foto resa "apribile" nella lightbox condivisa (galleria, tifosi,
   rosa, stadio, prodotti shop...): solo un cursore diverso, il resto lo fa
   gia' l'hover della card che la contiene. */
.site-photo-clickable {
  cursor: zoom-in;
}

.upload-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.ecommerce-section {
  background:
    linear-gradient(180deg, var(--white), var(--field)),
    repeating-linear-gradient(90deg, rgba(7, 95, 145, .04) 0 2px, transparent 2px 92px);
}

.product-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 170px 130px minmax(180px, 1fr) auto;
  gap: 10px;
  margin-bottom: 22px;
  padding: 16px;
}

.commerce-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
  gap: 18px;
  align-items: start;
}

.shop-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--blue-950);
  cursor: pointer;
  font-weight: 900;
}

.filter-button.is-active {
  background: var(--blue-900);
  color: var(--white);
  border-color: var(--blue-900);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-card,
.cart-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.product-card {
  position: relative;
  min-height: 330px;
  display: grid;
  grid-template-rows: 118px 1fr auto;
  gap: 18px;
  padding: 14px;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 167, 232, .5);
  box-shadow: var(--shadow-strong);
}

.product-visual {
  display: grid;
  place-items: center;
  border-radius: 8px;
  min-height: 118px;
  background:
    linear-gradient(135deg, rgba(6, 105, 180, .95), rgba(17, 167, 232, .78)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 16px);
  box-shadow: inset 0 -24px 42px rgba(3, 70, 111, .24);
  overflow: hidden;
}

.product-visual.has-image {
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px rgba(7, 27, 58, .08);
}

.product-visual img {
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}

.product-visual span {
  min-width: 78px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .7);
  padding: 0 12px;
  border-radius: 6px;
  color: var(--white);
  font-size: .86rem;
  font-weight: 950;
}

.shop-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shop-status span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--blue-900);
  background: var(--white);
  font-size: .78rem;
  font-weight: 900;
}

.product-category {
  color: var(--blue-700);
  font-weight: 950;
  text-transform: uppercase;
  font-size: .74rem;
}

.product-card h3,
.cart-panel h3 {
  margin: 8px 0 8px;
  color: var(--blue-950);
  font-size: 1.35rem;
  line-height: 1.08;
}

.product-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

/* Descrizione prodotto nascosta di default (vedi renderProducts, app.js):
   solo alcuni prodotti hanno una nota, spesso lunga (es. date/esclusioni
   di un abbonamento) - se sempre visibile allungava tutta la riga di card
   nella griglia, anche quelle senza nota (le card della stessa riga
   restano della stessa altezza). Il tasto "Mostra/Nascondi descrizione" e'
   un semplice link testuale, stesso stile leggero gia' usato per
   ".home-news-read-more"/".sponsor-show-toggle". */
.product-note {
  display: none;
}

.product-note.is-expanded {
  display: block;
}

.product-note-toggle {
  display: block;
  margin: 6px 0 0;
  border: 0;
  padding: 0;
  background: none;
  font-weight: 900;
  font-size: .82rem;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.product-note-toggle:hover {
  color: var(--night);
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
}

.product-actions strong {
  color: var(--blue-950);
  font-size: 1.15rem;
}

.cart-panel {
  position: sticky;
  top: 98px;
  padding: 22px;
  background:
    linear-gradient(180deg, var(--white), rgba(216, 243, 255, .42));
}

.cart-logo {
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}

.cart-items {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.cart-empty {
  margin: 0;
  color: var(--muted);
}

.cart-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: var(--field);
}

.cart-row strong,
.cart-row span {
  display: block;
}

.cart-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .9rem;
}

.quantity-controls {
  display: grid;
  grid-template-columns: 32px 30px 32px;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.quantity-controls button {
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--blue-900);
  color: var(--white);
  cursor: pointer;
  font-weight: 950;
}

.quantity-controls span {
  margin: 0;
  color: var(--blue-950);
  font-weight: 950;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.cart-total span {
  color: var(--muted);
  font-weight: 900;
}

.cart-total strong {
  color: var(--blue-950);
  font-size: 1.6rem;
}

.cart-panel .primary-button,
.cart-panel .secondary-button,
.cart-panel .ghost-button {
  width: 100%;
  margin-top: 10px;
}

.checkout-form {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.payment-data {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(244,251,255,.96));
}

.payment-data strong {
  color: var(--blue-950);
}

.payment-data small {
  color: var(--muted);
  line-height: 1.35;
}

.checkout-message {
  min-height: 24px;
  margin: 10px 0 0;
  color: var(--blue-700);
  font-weight: 850;
  line-height: 1.35;
}

.security-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(3, 70, 111, .1);
  color: var(--blue-950);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.35;
}

.official-ticketing-note {
  margin: 4px 0 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--blue-950);
}

.official-ticketing-note a {
  color: var(--sky-500);
  text-decoration: underline;
}

.sponsors-section {
  background:
    linear-gradient(180deg, var(--white), rgba(216, 243, 255, .35));
  overflow: hidden;
}

.sponsor-marquee {
  overflow: hidden;
  margin: 18px 0 24px;
  border: 1px solid rgba(17, 167, 232, .36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--blue-950), var(--crest-blue));
  box-shadow: var(--shadow-soft);
}

.sponsor-track {
  min-height: 112px;
  display: flex;
  gap: 14px;
  align-items: center;
  width: max-content;
  padding: 14px;
  animation: sponsor-scroll 36s linear infinite;
}

/* La pausa al passaggio del mouse deve valere solo sui dispositivi con un
   vero puntatore (desktop). Su mobile un tap viene letto dal browser come
   ":hover" e, non esistendo un vero "mouse out", quello stato restava
   agganciato per sempre dopo aver toccato il link di uno sponsor e essere
   tornati indietro: la striscia si bloccava e non ripartiva piu'. */
@media (hover: hover) and (pointer: fine) {
  .sponsor-marquee:hover .sponsor-track {
    animation-play-state: paused;
  }
}

.sponsor-marquee-item {
  min-width: 220px;
  height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--white);
  color: var(--blue-950);
  text-decoration: none;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}

.sponsor-marquee-item img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  object-position: center center;
}

@keyframes sponsor-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.sponsor-editor {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(220px, 1.2fr) 120px minmax(170px, auto) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
}

.sponsor-editor strong {
  color: var(--blue-950);
}

/* Anteprima del logo nell'editor sponsor: mostra la foto gia' salvata (o
   quella appena scelta) cosi' e' chiaro che scegliendo un nuovo file si
   sostituisce quella esistente, anche dopo che lo sponsor e' gia' stato
   compilato. */
.sponsor-logo-preview-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sponsor-logo-preview {
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: center center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.check-row {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue-950);
  font-weight: 900;
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* Link testuale "Mostra sponsor / Nascondi sponsor" (creato in
   renderSponsors, app.js): NESSUNA card sponsor e' visibile di default, solo
   questo link testuale. Le card compaiono tutte insieme solo dopo il click,
   sia su mobile che su desktop. Volutamente un semplice testo sottolineato
   (non un tasto pieno), stesso stile leggero gia' usato per
   ".home-news-read-more". */
.sponsor-grid:not(.is-expanded) {
  display: none;
}
.sponsor-grid.is-expanded {
  display: grid;
}

.sponsor-show-toggle {
  display: block;
  margin: 20px auto 0;
  border: 0;
  padding: 0;
  background: none;
  font-weight: 900;
  font-size: .92rem;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sponsor-show-toggle:hover {
  color: var(--night);
}

.sponsor-card {
  position: relative;
  min-height: 280px;
  display: grid;
  grid-template-rows: 120px 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  box-shadow: 0 14px 34px rgba(6, 39, 70, .07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Card sponsor "solo testo": senza box logo, solo nome azienda e link. */
.sponsor-card-text-only {
  min-height: 150px;
  grid-template-rows: 1fr auto;
}

.sponsor-card:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 167, 232, .5);
  box-shadow: var(--shadow-soft);
}

.sponsor-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--white), rgba(216, 243, 255, .62));
}

.sponsor-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 14px;
}

.sponsor-card span {
  color: var(--blue-700);
  font-weight: 950;
  font-size: .78rem;
}

.sponsor-card h3 {
  margin: 7px 0;
  color: var(--blue-950);
  font-size: 1.08rem;
  line-height: 1.1;
}

.sponsor-card p {
  /* Il link testuale (es. "https://...") non si vede piu' nella card:
     resta comunque cliccabile tramite il tasto "Apri" subito sotto, che
     punta allo stesso indirizzo. */
  display: none;
}

.sponsor-actions {
  display: grid;
  gap: 8px;
}

.documents-section {
  background:
    linear-gradient(180deg, var(--soft), var(--paper)),
    repeating-linear-gradient(135deg, rgba(3, 70, 111, .055) 0 2px, transparent 2px 88px);
}

.documents-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 18px;
  align-items: start;
}

.document-panel,
.email-panel {
  padding: 18px;
}

.document-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.document-login-hint {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--white), rgba(216, 243, 255, .62));
}

.document-login-hint strong {
  color: var(--blue-950);
  font-size: 1.08rem;
}

.document-login-hint p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.document-upload-zone {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px dashed var(--blue-700);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--white), rgba(216, 243, 255, .7));
}

.document-upload-zone strong {
  color: var(--blue-950);
  font-size: 1.08rem;
}

.document-upload-zone p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.document-upload-message {
  min-height: 22px;
  color: var(--blue-700) !important;
  font-weight: 850;
}

.document-panel h3,
.email-panel h3 {
  margin: 0;
  color: var(--blue-950);
  font-size: 1.35rem;
}

.document-list,
.email-panel {
  display: grid;
  gap: 10px;
}

.document-empty,
.email-panel p {
  margin: 0;
  color: var(--muted);
}

.document-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--field);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.document-row:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 167, 232, .42);
  box-shadow: 0 14px 28px rgba(6, 39, 70, .08);
}

.document-row strong,
.document-row span {
  display: block;
}

.document-row span {
  margin-top: 4px;
  color: var(--muted);
}

.document-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-panel,
.social-panel {
  padding: clamp(22px, 4vw, 38px);
}

.social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.social-links a {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--blue-950);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 950;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.social-links a > svg {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 7px;
  border-radius: 50%;
  color: var(--blue-700);
  background: var(--white);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.social-links a > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin-right: auto;
}

.social-links a strong,
.social-links a small {
  display: block;
}

.social-links a small {
  overflow: hidden;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-provider-status {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.4;
}

.social-login-button.is-unavailable {
  opacity: .72;
}

.social-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 167, 232, .48);
  box-shadow: 0 14px 28px rgba(6, 39, 70, .08);
}

.social-links a::after {
  content: "↗";
  color: var(--blue-700);
}

.sources {
  background: var(--field);
}

.sources h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.sources div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.sources a {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--blue-900);
  padding: 11px 14px;
  font-weight: 850;
  text-decoration: none;
}

.site-footer {
  position: relative;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px clamp(16px, 4vw, 56px);
  background:
    linear-gradient(135deg, var(--blue-950), var(--crest-blue-dark));
  color: var(--white);
  overflow: hidden;
}

/* Stesso bagliore sfumato dell'hero (vedi .hero-blob), qui statico e piu'
   discreto: chiude il sito con lo stesso linguaggio visivo con cui si apre. */
.site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -60%;
  right: -6%;
  width: clamp(200px, 26vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(0, 159, 227, .8), transparent 72%);
  filter: blur(50px);
  opacity: .5;
  mix-blend-mode: screen;
  pointer-events: none;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

.site-footer span {
  display: block;
  color: rgba(255, 255, 255, .74);
}

body:not(.admin-mode) .admin-only {
  display: none !important;
}

.admin-mode .document-login-hint {
  display: none;
}

.admin-mode .ghost-button {
  background: var(--blue-900);
  color: var(--white);
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .facts,
  .cards,
  .commerce-layout,
  .documents-layout,
  .people-layout,
  .product-grid,
  .product-editor,
  .person-editor,
  .sponsor-editor,
  .section-grid {
    grid-template-columns: 1fr;
  }

  .service-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .people-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sponsor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cart-panel {
    position: static;
  }

  .hero {
    min-height: 760px;
  }

  .history-layout,
  .history-bottom {
    grid-template-columns: 1fr;
  }

  .history-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .club-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-header {
    position: static;
  }

  .brand {
    min-width: 0;
  }

  .brand span {
    display: none;
  }

  .main-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .hero {
    min-height: 700px;
    padding-bottom: 168px;
  }

  /* Su mobile lo stemma decorativo in trasparenza (.hero::after) finiva
     sotto l'header fisso e i pulsanti in alto (Ultime notizie/Shop),
     restando tagliato e poco visibile. Qui lo spostiamo piu' in basso,
     nello spazio libero della foto hero, e lo rimpiccioliamo leggermente
     cosi' resta intero e ben leggibile su schermi stretti. */
  .hero::after {
    top: 260px;
    right: 12px;
    width: clamp(150px, 44vw, 230px);
  }

  /* La foto hero mobile e' impostata in style.css (che si carica dopo
     questo file e altrimenti la sovrascriverebbe comunque): vedi
     ".hero-media" dentro l'ultimo blocco "@media (max-width: 720px)" li'. */

  h1 {
    font-size: clamp(2.7rem, 15vw, 4.7rem);
  }

  .hero-copy {
    padding-bottom: 0;
  }

  .hub-card {
    min-height: 240px;
  }

  .match-strip {
    gap: 10px;
  }

  .match-strip-next {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .match-strip-live {
    gap: 6px 10px;
    padding-bottom: 10px;
  }

  .facts {
    grid-template-columns: 1fr 1fr;
  }

  .service-strip {
    grid-template-columns: 1fr;
  }

  .service-strip a {
    min-height: 138px;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .teams,
  .teams > div,
  .gallery-grid,
  .fan-gallery-grid,
  .history-archive-grid,
  .people-grid,
  .sponsor-grid,
  .product-actions,
  .cart-row,
  .document-row,
  .social-links {
    grid-template-columns: 1fr;
  }

  .teams strong {
    font-size: 2.4rem;
  }

  .versus {
    text-align: center;
  }

  .section-head,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .club-timeline li,
  .identity-card div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.falchetto-runner {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 15, 34, .78);
  backdrop-filter: blur(8px);
}

.falchetto-runner-card {
  position: relative;
  width: min(760px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(121, 192, 244, .96) 0 47%, rgba(233, 247, 255, .98) 47% 100%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
  color: var(--blue-950);
}

.falchetto-runner-card::before {
  content: "";
  position: absolute;
  inset: 22px 24px auto auto;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: -160px 28px 0 -24px rgba(255, 255, 255, .52), -90px 8px 0 -30px rgba(255, 255, 255, .5);
}

.falchetto-runner-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 27, 58, .86);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

.falchetto-runner-head,
.falchetto-runner-score,
.falchetto-runner-card > p {
  position: relative;
  z-index: 2;
}

.falchetto-runner-head {
  display: grid;
  gap: 2px;
  padding: 24px 72px 8px 24px;
}

.falchetto-runner-head strong {
  font-size: clamp(1.45rem, 4vw, 2.7rem);
  line-height: 1;
  color: var(--blue-950);
}

.falchetto-runner-head span,
.falchetto-runner-card > p {
  color: rgba(7, 27, 58, .72);
  font-weight: 800;
}

.falchetto-runner-score {
  margin: 0 24px 10px;
  font-weight: 950;
}

.falchetto-runner-track {
  position: relative;
  height: min(330px, 46vh);
  margin: 0 20px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0 64%, rgba(6, 111, 159, .18) 64% 100%),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(255, 255, 255, .32) 80px 82px);
  touch-action: manipulation;
  cursor: pointer;
}

.falchetto-runner-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-950), var(--sky-500), var(--sun));
}

.falchetto-runner-player {
  position: absolute;
  left: clamp(36px, 9vw, 78px);
  bottom: 51px;
  width: clamp(58px, 12vw, 88px);
  height: clamp(58px, 12vw, 88px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 16px 34px rgba(7, 27, 58, .22);
  display: grid;
  place-items: center;
  will-change: transform;
}

.falchetto-runner-player img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.falchetto-runner-obstacle {
  position: absolute;
  left: 0;
  bottom: 51px;
  width: clamp(28px, 6vw, 44px);
  height: clamp(46px, 9vw, 72px);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #071b3a, #075f91);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18);
  will-change: transform;
}

.falchetto-runner.is-game-over .falchetto-runner-track {
  box-shadow: inset 0 0 0 3px rgba(17, 167, 232, .45);
}

.falchetto-runner-card > p {
  margin: 10px 24px 22px;
  font-size: .92rem;
}

@media (max-width: 900px) {
  .stats-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .stats-card-grid,
  .stats-leaders {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-card-grid article {
    padding: 14px;
  }
}

/* Video e Highlights: griglia di video YouTube incorporati, ognuno con
   titolo/categoria/data sotto. Stesso riquadro ".video-embed" gia' usato
   nella sezione Risultati (16:9, bordi arrotondati). */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--modern-radius, 14px);
  background: var(--field);
  padding: 14px;
  box-shadow: 0 14px 34px rgba(6, 39, 70, .07);
}

.video-card .video-embed {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.video-card .video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card-copy h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.video-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}

/* Academy/Scuola calcio: intro libera + foto opzionale + elenco programmi
   a card (stesso stile card di .video-card sopra). */
.academy-photo {
  margin: 12px 0 18px;
  border-radius: var(--modern-radius, 14px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 640px;
}

.academy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.academy-intro {
  max-width: 820px;
  margin: 0 0 20px;
  color: var(--night);
  line-height: 1.6;
  white-space: pre-line;
}

.academy-programs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.academy-program-card {
  border: 1px solid var(--line);
  border-radius: var(--modern-radius, 14px);
  background: var(--field);
  padding: 16px;
}

.academy-program-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.academy-program-card p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

/* Impegno sociale/CSR: card con foto opzionale, titolo, data, descrizione. */
.csr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.csr-card {
  border: 1px solid var(--line);
  border-radius: var(--modern-radius, 14px);
  background: var(--field);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(6, 39, 70, .07);
}

.csr-card-photo {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.csr-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.csr-card-copy {
  padding: 16px;
}

.csr-card-copy h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.csr-card-date {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  margin-bottom: 8px;
}

.csr-card-copy p {
  margin: 0;
  color: var(--night);
  font-size: .92rem;
  line-height: 1.5;
}

/* Profilo giocatore/sponsor: dialog dinamico (vedi openPlayerProfile()/
   openSponsorProfile() in app.js), contenuto costruito via JS ogni volta. */
.player-profile-head,
.sponsor-profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.player-profile-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--soft);
}

.player-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-profile-head h2,
.sponsor-profile-head h2 {
  margin: 2px 0;
}

.player-profile-role {
  margin: 0;
  color: var(--muted);
}

.player-profile-bio {
  max-width: 640px;
  line-height: 1.6;
  color: var(--night);
  margin: 0 0 18px;
  white-space: pre-line;
}

.player-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.player-profile-stats article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  padding: 12px;
  text-align: center;
}

.player-profile-stats article span {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.player-profile-stats article strong {
  font-size: 1.2rem;
}

.sponsor-profile-head img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex: none;
}

.sponsor-profile-description {
  max-width: 640px;
  line-height: 1.6;
  color: var(--night);
  margin: 0 0 16px;
  white-space: pre-line;
}

/* Card della Rosa cliccabile (apre il profilo giocatore) quando non si e'
   in modalita' Redazione: solo un cursore diverso, il click e' gestito da
   app.js su ".person-copy". */
.person-card-clickable .person-copy {
  cursor: pointer;
}

/* Filtro album Fotogallery: chip semplici, stessa logica visiva dei filtri
   News (.news-filter) gia' presenti sul sito. */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px;
}

.gallery-filter button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--night);
  padding: 6px 14px;
  font-size: .85rem;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.gallery-filter button.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

@media (max-width: 620px) {
  .videos-grid,
  .csr-grid,
  .academy-programs {
    grid-template-columns: minmax(0, 1fr);
  }

  .player-profile-head,
  .sponsor-profile-head {
    flex-direction: column;
    align-items: flex-start;
  }
}