/* =====================================================================
   ALTIORA — STILE DI SISTEMA
   Un solo posto per gli elementi che devono essere uguali in tutto il sito:
   occhielli, titoli di sezione, pulsanti, etichette.
   Viene caricato dopo gli stili dei singoli moduli; dove serve usa
   !important perché alcuni moduli stampano i loro stili dentro la pagina.
   ===================================================================== */

:root{
  --alt-blu:#16224F;
  --alt-notte:#0D1638;
  --alt-rosa:#E4157E;
  --alt-rosa-chiaro:#FF6FAE;
  --alt-azzurro:#23408C;
  --alt-verde:#159A48;
  --alt-rosso:#E11D48;
  --alt-titolo-aria:40px;      /* spazio tra titolo di sezione e contenuto */
}
@media (max-width:767px){ :root{ --alt-titolo-aria:26px; } }


/* ---------------------------------------------------------------------
   1. TITOLI DI SEZIONE: niente più barretta "/" e più aria sotto
   --------------------------------------------------------------------- */
.aho-barra,.atv-barra-m,.asp2-barra,.amv-barra,.apr-barra,.ahb-barra,.anh-barra,.apf-barra,
.aho-h2 > .aho-barra,.ahb-h2 .ahb-barra{display:none!important}

html body .aho-h2,html body .atv-h2,html body .asp2-h2,html body .amv-h2,
html body .apr-h2,html body .ahb-h2,html body .anh-h2,html body .aso-h2{
  display:block!important;
  font-family:"Bebas Neue",Impact,sans-serif!important;
  font-weight:400!important;
  font-style:normal!important;
  font-size:clamp(52px,6vw,84px)!important;
  line-height:.9!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
  margin-top:12px!important;
  margin-bottom:0!important;
  padding-bottom:var(--alt-titolo-aria)!important;
}

/* su telefono: titoli di sezione leggermente più grandi (60px), uguali in tutte le pagine */
@media (max-width:767px){
  html body .aho-h2.aho-h2,html body .atv-h2.atv-h2,html body .asp2-h2.asp2-h2,html body .amv-h2.amv-h2,
  html body .apr-h2.apr-h2,html body .ahb-h2.ahb-h2,html body .anh-h2.anh-h2,html body .aso-h2.aso-h2,
  html body .aho-video__tit.aho-video__tit,html body .aho-mini__tit.aho-mini__tit,html body .aho-numeri__tit.aho-numeri__tit{
    font-size:60px!important;line-height:.9!important;
  }
}

/* ---------------------------------------------------------------------
   2. OCCHIELLI (la riga piccola sopra i titoli): tutti uguali
   Il colore resta quello del modulo (rosa su chiaro, rosa chiaro su scuro).
   --------------------------------------------------------------------- */
html body .aho-occ,html body .atv-occ,html body .asp2-occ,html body .amv-occ,
html body .apr-occ,html body .ahb-occ,html body .anh-occhiello,html body .apc2-occ,html body .aso-occ{
  font-family:"Roboto Mono",ui-monospace,monospace!important;
  font-size:12px!important;
  font-weight:700!important;
  font-style:normal!important;
  letter-spacing:.16em!important;
  line-height:1.4!important;
  text-transform:uppercase!important;
}
@media (max-width:767px){
  html body .aho-occ,html body .atv-occ,html body .asp2-occ,html body .amv-occ,
  html body .apr-occ,html body .ahb-occ,html body .anh-occhiello,html body .apc2-occ,html body .aso-occ{font-size:11px!important;letter-spacing:.14em!important}
}


/* ---------------------------------------------------------------------
   3. PULSANTI: stessa forma, misura e carattere ovunque
   (il colore resta quello della variante: rosa, blu, vetro, bianco…)
   --------------------------------------------------------------------- */
html body .aho-btn,html body .atv-btn,html body .asp2-btn,html body .amv-btn,
html body .apr-btn,html body .ahb-btn,html body .ahh-btn,html body .aso-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center;
  gap:12px!important;
  font-family:"Bebas Neue",Impact,sans-serif!important;
  font-weight:400!important;
  font-size:21px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  padding:17px 26px 14px!important;
  border:0!important;
  border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px))!important;
  text-decoration:none!important;
  white-space:nowrap;
}
@media (max-width:767px){
  html body .aho-btn,html body .atv-btn,html body .asp2-btn,html body .amv-btn,
  html body .apr-btn,html body .ahb-btn,html body .ahh-btn,html body .aso-btn{font-size:19px!important;padding:15px 22px 12px!important}
}


/* ---------------------------------------------------------------------
   4. ETICHETTE (es. "NEWS · FEMMINILE", "COMUNICATO STAMPA")
   Non più blocco pieno colorato: fondo blu scuro con una barretta del
   colore del settore a sinistra. Leggibile sia sulle foto sia sul bianco.
   Il colore della barretta: variabile --tag (rosa di base).
   --------------------------------------------------------------------- */
html body .alt-tag,html body .apr-tag,html body .anh__tag,html body .atv-tag,
html body .ahb-tag,html body .apc2-tag,html body .ahh-chip:not(.ahh-chip--live){
  --tag:var(--alt-rosa);
  display:inline-flex!important;
  align-items:center;
  font-family:"Roboto Mono",ui-monospace,monospace!important;
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.1em!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
  color:#fff!important;
  background:rgba(13,22,56,.82)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:6px 10px 5px 12px!important;
  clip-path:none!important;
  box-shadow:inset 3px 0 0 var(--tag)!important;
  white-space:nowrap;
}
/* colori per settore */
html body .apr-tag--m,html body .atv-tag--m,html body .alt-tag--m{--tag:#5B86FF}
html body .apr-tag--x,html body .atv-tag--x,html body .alt-tag--x{--tag:#3CCB75}
html body .apr-tag--rosa,html body .apr-tag--f,html body .alt-tag--f{--tag:var(--alt-rosa)}
html body .ahb--m .ahb-tag{--tag:#5B86FF}
html body .ahb--x .ahb-tag{--tag:#3CCB75}
/* etichette con il colore scritto nella pagina (hero e news della home) */
html body [style*="23408C"].anh__tag,html body [style*="23408C"].ahh-chip{--tag:#5B86FF}
html body [style*="159A48"].anh__tag,html body [style*="159A48"].ahh-chip{--tag:#3CCB75}
html body [style*="E11D48"].anh__tag,html body [style*="E11D48"].ahh-chip{--tag:var(--alt-rosso)}
html body [style*="E4157E"].anh__tag,html body [style*="E4157E"].ahh-chip{--tag:var(--alt-rosa)}
/* la chip LIVE resta rossa piena: è uno stato, non un'etichetta */
html body .ahh-chip--live{font-family:"Roboto Mono",ui-monospace,monospace!important;font-size:10.5px!important;letter-spacing:.1em!important;padding:6px 10px 5px!important}

/* occhielli di footer, mega menu e contatti: stesso carattere (misura più piccola, sono di servizio) */
html body .aft-occ,html body .amm__occhiello,html body .amm__hub-occhiello,html body .apc2-rif__sopra{
  font-family:"Roboto Mono",ui-monospace,monospace!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
}
html body .asp__tag,html body .asc__tag{
  --tag:var(--alt-rosa);
  font-family:"Roboto Mono",ui-monospace,monospace!important;font-size:10.5px!important;font-weight:700!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;
  color:#fff!important;background:rgba(13,22,56,.82)!important;padding:6px 10px 5px 12px!important;
  box-shadow:inset 3px 0 0 var(--tag)!important;
}
/* pulsante "Apri in Maps" delle palestre (pagina Società): forma di sistema */
html body .asp__btn{
  font-family:"Bebas Neue",Impact,sans-serif!important;font-size:21px!important;letter-spacing:.02em!important;
  padding:17px 26px 14px!important;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px))!important;
}


/* ---------------------------------------------------------------------
   5. FILTRI: tutti nel formato della home
   bianco con bordino grigio, angolo tagliato in basso a sinistra,
   blu pieno quando è attivo, Bebas.
   Vale per: home, Altiora TV, Press (settori), pagine settore/squadra,
   Società (staff), filtro partite della squadra.
   --------------------------------------------------------------------- */
html body .aho-filtro,html body .atv-filtro,html body .asf__btn,html body .apfs-btn,
html body .ahb-filtro,html body .apr-chip{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  font-family:"Bebas Neue",Impact,sans-serif!important;font-weight:400!important;
  font-size:20px!important;line-height:1!important;letter-spacing:.02em!important;text-transform:uppercase!important;
  padding:13px 18px 11px!important;margin:0!important;
  background:#fff!important;color:var(--alt-blu)!important;
  border:0!important;border-radius:0!important;outline-offset:2px;
  box-shadow:inset 0 0 0 1.5px #DCE1EC!important;
  clip-path:polygon(0 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px))!important;
  text-decoration:none!important;white-space:nowrap;cursor:pointer;
  transition:box-shadow .2s,background .2s,color .2s;
}
html body .aho-filtro:hover,html body .atv-filtro:hover,html body .asf__btn:hover,html body .apfs-btn:hover,
html body .ahb-filtro:hover,html body .apr-chip:hover{
  background:#fff!important;color:var(--alt-blu)!important;box-shadow:inset 0 0 0 1.5px var(--alt-blu)!important;
}
html body .aho-filtro.is-on,html body .atv-filtro.is-on,html body .asf__btn.is-on,html body .apfs-btn.is-attivo,
html body .ahb-filtro.is-on,html body .apr-chip.is-on{
  background:var(--alt-blu)!important;color:#fff!important;box-shadow:none!important;
}
html body .apfs-btn.is-vuoto{opacity:.4;cursor:default}
/* gruppi di filtri: stesso spazio tra un filtro e l'altro */
html body .aho-filtri,html body .atv-chips,html body .apr-filtri__set,html body .ahb-filtri{gap:8px!important}
@media (max-width:767px){
  html body .aho-filtro,html body .atv-filtro,html body .asf__btn,html body .apfs-btn,
  html body .ahb-filtro,html body .apr-chip{font-size:17px!important;padding:11px 12px 9px!important}
}
html body .aho-filtro[hidden],html body .atv-filtro[hidden],html body .asf__btn[hidden],html body .apfs-btn[hidden],
html body .ahb-filtro[hidden],html body .apr-chip[hidden]{display:none!important}


/* ---------------------------------------------------------------------
   6. ICONE (play e freccia "apre in un'altra scheda")
   Disegnate in SVG: niente più simboli che su iPhone diventano emoji.
   --------------------------------------------------------------------- */
.alt-ico{display:inline-block;flex:none;width:.95em;height:.95em;vertical-align:-.1em}
.atv-altra__vai::after{display:inline-block;vertical-align:-2px}


/* ---------------------------------------------------------------------
   7. ARIA TRA LE SEZIONI SU TELEFONO
   Ogni sezione ha lo stesso respiro sopra e sotto: --alt-sez-mob.
   --------------------------------------------------------------------- */
:root{--alt-sez-mob:80px}
@media (max-width:767px){
  html body .aho-sez.aho-sez,html body .atv-sez.atv-sez,html body .amv-sez.amv-sez,html body .asp2-sez.asp2-sez,
  html body .aho-mini__dentro.aho-mini__dentro,html body .aho-numeri__dentro.aho-numeri__dentro,html body .aho-video__dentro.aho-video__dentro{
    padding-top:var(--alt-sez-mob)!important;padding-bottom:var(--alt-sez-mob)!important;
  }
  html body .ahb-sez.ahb-sez{padding-top:var(--alt-sez-mob)!important;padding-bottom:var(--alt-sez-mob)!important}
  html body .ahb-sez.ahb-sez--attaccata{padding-top:0!important}
  html body .apr-elenco.apr-elenco{padding-top:56px!important;padding-bottom:var(--alt-sez-mob)!important}
}


/* ---------------------------------------------------------------------
   8. VOCI DEI MENU A TENDINA DEI FILTRI (squadre femminili / maschili)
   Carattere più fine del Bebas: Inter, maiuscole/minuscole normali.
   Vale per la home e per i filtri partite delle altre pagine.
   --------------------------------------------------------------------- */
html body .aho .aho-menu__voce,html body .apf .apf-voce{
  font-family:"Inter",system-ui,sans-serif!important;font-weight:500!important;
  font-size:16px!important;line-height:1.25!important;letter-spacing:0!important;text-transform:none!important;
  padding:12px 22px!important;
}
html body .apf .apf-voce{padding:12px 12px!important}
html body .aho .aho-menu__voce--tutte,html body .apf .apf-voce:first-of-type{font-weight:600!important}

/* ---------------------------------------------------------------------
   9. LOGHI SPONSOR SU FONDO CHIARO: il bianco del file sparisce
   Molti loghi arrivano come JPG/PNG con il fondo bianco: con "multiply" il
   bianco prende il colore del riquadro (grigio chiaro) e resta solo il marchio.
   Solo dove il fondo è chiaro: pagina Sponsor, home, partner della Società.
   --------------------------------------------------------------------- */
html body .asp2-main__logo img,
html body .asp2-tessera img,
html body .aho-logo img,
html body .asr .asr__voce img{mix-blend-mode:multiply}
