/* =========================================================
   Oasi Volley Viareggio - Template style
   Font: Montserrat 900 (display) + Inter 400/600 (body)
   Colori brand: Rosa #E5007E - Oro #D4AF37 - Nero #0A0A0A
   ========================================================= */

:root{
  --oasi-fuchsia:#E5007E;
  --oasi-gold:#D4AF37;
  --oasi-black:#0A0A0A;
}

html{scroll-behavior:smooth;}
body{background:#0A0A0A;color:#fff;font-family:'Inter',sans-serif;}

.font-display{font-family:'Montserrat',sans-serif;}
.font-body{font-family:'Inter',sans-serif;}

/* ---- Hero title ---- */
.hero-title{
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:clamp(38px,7vw,84px);
  line-height:0.98;
  letter-spacing:-0.01em;
}
/* "NERA." è un file .svg a parte (templates/oasi_volley/images/nera-label.svg),
   richiamato via CSS background-image esattamente come lo stemma societario:
   questa tecnica non passa mai dal filtro di sicurezza di Joomla (che invece
   taglia via i tag <svg> scritti direttamente nei moduli Custom HTML), quindi
   non sparirà più dopo un salvataggio. Il contorno vettoriale vero (dentro il
   file svg) resta pulito su qualunque browser, a differenza di text-stroke via
   CSS diretto, provato in precedenza con risultati sempre "arzigogolati". */
.nera-label{
  display:inline-block;
  width:3.02em;
  height:0.855em;
  vertical-align:-0.05em;
  background-image:url(../images/nera-label.png);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left center;
  /* Il testo vero "NERA." resta nel markup (invisibile) invece di uno span
     vuoto: alcuni filtri di Joomla cancellano i tag senza contenuto. */
  color:transparent;
  overflow:hidden;
  white-space:nowrap;
}
/* ---- Live badge / ticker ---- */
@keyframes liveFlash{
  0%,100%{opacity:1;}
  50%{opacity:.72;}
}
@keyframes pulseDot{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.4);opacity:.5;}
}
/* Ticker in alto: su schermi larghi il testo normalmente ci sta e resta
   fermo; sotto i 768px (smartphone) invece scorre in automatico, così un
   messaggio lungo si vede comunque tutto invece di restare tagliato. */
.oasi-ticker-wrap{
  position:relative;
  overflow:hidden;
  height:100%;
  display:flex;
  align-items:center;
}
.oasi-ticker-track{
  white-space:nowrap;
}
@media (max-width:768px){
  .oasi-ticker-track{
    display:inline-block;
    padding-left:100%;
    animation:tickerScroll 14s linear infinite;
  }
}
@keyframes tickerScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ---- Cards ---- */
.oasi-card{
  background:#141414;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  transition:transform .25s ease, border-color .25s ease;
}
.oasi-card:hover{
  transform:translateY(-4px);
  border-color:rgba(229,0,126,.5);
}

/* ---- Timeline ---- */
.timeline-line{
  background:linear-gradient(180deg,var(--oasi-fuchsia),var(--oasi-gold));
}

/* ---- Buttons ---- */
.btn-oasi-primary{
  background:var(--oasi-fuchsia);
  color:#fff;
}
.btn-oasi-primary:hover{ filter:brightness(1.1); }
.btn-oasi-gold{
  background:var(--oasi-gold);
  color:#000;
}
.btn-oasi-gold:hover{ background:#e7c14a; }

/* ---- Form ---- */
.oasi-input{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:10px;
  padding:12px 14px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  width:100%;
}
.oasi-input:focus{
  outline:none;
  border-color:var(--oasi-fuchsia);
}
.oasi-input::placeholder{color:rgba(255,255,255,.35);}
/* Le opzioni di un <select> aperto sono renderizzate dal sistema operativo/
   browser con sfondo quasi sempre chiaro, indipendentemente dal CSS del
   select stesso: forziamo qui un testo scuro leggibile SOLO per le singole
   opzioni della tendina aperta (il campo chiuso resta scuro come tutti gli
   altri campi del form). */
.oasi-input option{
  color:#0A0A0A;
  background:#fff;
}

/* ---- Module position placeholder (visible only when logged in as admin, editing) ---- */
.oasi-empty-position{
  border:1px dashed rgba(255,255,255,.2);
  border-radius:12px;
  padding:24px;
  text-align:center;
  color:rgba(255,255,255,.4);
  font-family:'Inter',sans-serif;
  font-size:12px;
}

/* ---- Utility: fade in on scroll (optional, requires js/main.js) ---- */
.oasi-fade{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.oasi-fade.is-visible{opacity:1;transform:translateY(0);}

/* ---- Menu principale (mod_menu): di default Joomla lo rende come lista
   verticale <ul><li>; qui forziamo il layout orizzontale nell'header desktop.
   Il menu mobile (il div fuori dal tag &lt;nav&gt;) resta invece verticale,
   di default. ---- */
header nav ul{
  display:flex;
  align-items:center;
  gap:1.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
header nav li{
  position:relative;
  list-style:none;
}
header nav a{
  color:rgba(255,255,255,.85);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
  text-decoration:none;
  transition:color .2s ease;
}
header nav a:hover{ color:#fff; }
header nav ul ul{
  /* eventuali sottomenu: disattivati visivamente, non usati in questo sito one-page */
  display:none;
}

/* ---- Hero: box statistiche + CTA a fianco del titolo ---- */
.hero-stat-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:18px 20px;
}
.hero-stat-number{
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:22px;
  color:#fff;
}
.hero-stat-label{
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,.45);
  margin-top:2px;
}
.hero-stat-bar{
  margin-top:12px;
  height:2px;
  background:linear-gradient(90deg,var(--oasi-fuchsia),var(--oasi-gold));
  border-radius:2px;
}
.hero-callout{
  background:#fff;
  color:#0A0A0A;
  border-radius:16px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.hero-callout-icon{
  width:32px;height:32px;flex-shrink:0;border-radius:50%;
  background:#0A0A0A;color:#fff;display:grid;place-items:center;font-size:14px;
}

/* ---- Toast di conferma navigazione (basso-destra, 2s poi si sposta) ---- */
.oasi-toast{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  background:#1A1A1A;
  border:1px solid rgba(229,0,126,.4);
  color:#fff;
  padding:14px 22px;
  border-radius:999px;
  box-shadow:0 10px 40px rgba(229,0,126,.35);
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
  transform:translateY(80px);
  opacity:0;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  max-width:calc(100vw - 32px);
}
.oasi-toast.show{
  transform:translateY(0);
  opacity:1;
}
.oasi-toast .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--oasi-fuchsia);
  flex-shrink:0;
  animation:pulseDot 1.2s infinite;
}

/* ---- Card "Nuova architettura" (6 box di accesso rapido) ---- */
.oasi-arch-card{
  background:#1A1A1A;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:20px;
  flex:1;
  min-width:160px;
  cursor:pointer;
  transition:all .25s ease;
}
.oasi-arch-card:hover{
  border-color:rgba(229,0,126,.35);
  transform:translateY(-2px);
  background:#1e1e1e;
}

/* ---- Carosello orizzontale (usato per lo Staff) ---- */
.oasi-carousel{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:6px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.oasi-carousel::-webkit-scrollbar{ display:none; }
.oasi-carousel .oasi-carousel-item{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:380px;
  max-width:88vw;
}

/* =========================================================
   PARTNER: card unificata scura per i 3 livelli (Gold/Silver/Bronze),
   dimensioni diverse ma stesso stile - sfondo nero, bordo fucsia,
   testo bianco leggibile, logo sempre contenuto per intero (mai tagliato).
   ========================================================= */
.oasi-sponsor-card{
  background:#0A0A0A;
  border:1px solid rgba(229,0,126,.3);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.oasi-sponsor-card:hover{ border-color:var(--oasi-fuchsia); transform:translateY(-3px); }

.oasi-sponsor-card .logo-wrap{
  width:100%;
  min-height:0;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.oasi-sponsor-card .logo-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.oasi-sponsor-card .fallback-placeholder{
  width:100%;
  height:100%;
  background-image:url(../images/sponsor-placeholder.svg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.oasi-sponsor-card .name-block{ width:100%; }
.oasi-sponsor-card .name{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  color:#fff;
  line-height:1.25;
}
.oasi-sponsor-card .sub{
  font-family:'Inter',sans-serif;
  color:rgba(255,255,255,.45);
  margin-top:2px;
}
.oasi-sponsor-card .tier-badge{
  align-self:flex-start;
  font-size:10px;
  letter-spacing:.06em;
  padding:5px 10px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-weight:800;
  font-family:'Inter',sans-serif;
}
.oasi-sponsor-card .visit-btn{
  margin-top:auto;
  padding-top:14px;
  font-size:12px;
  font-weight:700;
  color:var(--oasi-fuchsia);
  font-family:'Inter',sans-serif;
}

/* Gold: la più grande, logo in evidenza */
.oasi-sponsor-card--gold{
  padding:22px;
  min-height:280px;
}
.oasi-sponsor-card--gold .logo-wrap{ height:130px; margin-top:14px; }
.oasi-sponsor-card--gold .name-block{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.oasi-sponsor-card--gold .name{ font-size:17px; }
.oasi-sponsor-card--gold .sub{ font-size:11px; }

/* Silver: media */
.oasi-sponsor-card--silver{
  padding:18px;
  min-height:190px;
  justify-content:center;
}
.oasi-sponsor-card--silver .logo-wrap{ height:80px; }
.oasi-sponsor-card--silver .name-block{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.oasi-sponsor-card--silver .name{ font-size:13px; }
.oasi-sponsor-card--silver .sub{ font-size:10px; }

/* Bronze: la più compatta, in griglia a piena larghezza (non più fila corta) */
.oasi-sponsor-card--bronze{
  padding:14px 10px;
  min-height:120px;
  justify-content:center;
}
.oasi-sponsor-card--bronze .logo-wrap{ height:52px; }
.oasi-sponsor-card--bronze .name-block{ margin-top:10px; }
.oasi-sponsor-card--bronze .name{ font-size:11px; }

/* ---- Box "Perché sponsorizzarci" ---- */
.oasi-why-sponsor{
  background:#1A1A1A;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:18px;
}
.oasi-why-sponsor .icon{ font-size:20px; }

/* ---- Sezione pubblica "Guida colori e font" (in fondo alla pagina) ---- */
.oasi-brandguide-public{
  background:#0A0A0A;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ---- Footer: grigio molto scuro (non nero puro) ---- */
.oasi-footer{
  background:#141414;
}
.oasi-footer .social-icon{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:700;font-family:'Inter',sans-serif;
  transition:background .2s ease;
}
.oasi-footer .social-icon:hover{ background:var(--oasi-fuchsia); }
/* Menu link legali (mod_menu) in riga orizzontale nella barra inferiore */
.oasi-footer ul{
  display:flex;
  align-items:center;
  gap:14px;
  list-style:none;
  margin:0;padding:0;
}
.oasi-footer ul li{ list-style:none; }
.oasi-footer ul a{
  color:rgba(255,255,255,.4);
  text-decoration:none;
  font-family:'Inter',sans-serif;
  font-size:11px;
}
.oasi-footer ul a:hover{ color:#fff; }

/* ---- Rifiniture mobile (schermi molto piccoli, es. iPhone SE ~375px) ---- */
@media (max-width:480px){
  .oasi-arch-card{ min-width:100%; }           /* un box per riga, niente wrap a metà */
  .hero-stat-card{ padding:14px 16px; }
  .oasi-toast{ left:12px; right:12px; bottom:16px; max-width:none; justify-content:center; }
  .oasi-carousel .oasi-carousel-item{ width:88vw; }
  .hero-title{ font-size:clamp(32px,10vw,84px); } /* leggermente più piccolo su telefoni stretti */
}

/* =========================================================
   VIDEO & HIGHLIGHTS
   ========================================================= */
.oasi-video-filter-btn{
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.6);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12px;
  cursor:pointer;
  transition:all .2s ease;
}
.oasi-video-filter-btn:hover{ background:rgba(255,255,255,.1); color:#fff; }
.oasi-video-filter-btn.is-active{
  background:var(--oasi-fuchsia);
  border-color:var(--oasi-fuchsia);
  color:#fff;
}

.oasi-video-card{
  background:#1A1A1A;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.oasi-video-card:hover{ border-color:rgba(229,0,126,.35); transform:translateY(-2px); }
.oasi-video-card.is-hidden{ display:none; }

.oasi-video-thumb-btn{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  background:#000;
  border:none;
  padding:0;
  cursor:pointer;
}
.oasi-video-thumb-btn img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.oasi-video-thumb-fallback{
  width:100%;height:100%;display:grid;place-items:center;font-size:32px;background:#141414;
}
.oasi-video-play-icon{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:grid;place-items:center;
  font-size:14px;
  transition:background .2s ease, transform .2s ease;
}
.oasi-video-thumb-btn:hover .oasi-video-play-icon{
  background:var(--oasi-fuchsia);
  transform:translate(-50%,-50%) scale(1.08);
}
.oasi-video-live-badge{
  position:absolute;
  top:10px;left:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--oasi-fuchsia);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:10px;
  letter-spacing:.06em;
  padding:5px 10px;
  border-radius:999px;
}
.oasi-video-live-badge .dot{
  width:6px;height:6px;border-radius:50%;background:#fff;
  animation:pulseDot 1s infinite;
}

/* ---- Lightbox riproduzione video ---- */
.oasi-video-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.oasi-video-lightbox.is-open{ display:flex; }
.oasi-video-lightbox-inner{
  width:100%;
  max-width:960px;
  position:relative;
}
.oasi-video-lightbox-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
}
.oasi-video-lightbox-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.oasi-video-lightbox-close{
  position:absolute;
  top:-44px;right:0;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:none;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.oasi-video-lightbox-close:hover{ background:var(--oasi-fuchsia); }

/* ---- Stemma societario (logo "5° anno"): richiamato via CSS invece che
   <img>, perché va inserito anche dentro moduli Custom HTML statici che non
   eseguono PHP. Il percorso è relativo al file style.css stesso, quindi
   funziona sempre, sia in locale sotto una sottocartella sia online sul
   dominio definitivo, senza bisogno di adattarlo. ---- */
.oasi-stemma{
  display:inline-block;
  background-image:url(../images/logo-stemma.png);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  flex-shrink:0;
}

/* =========================================================
   BACHECA OASI: card + pannelli (Partite / News / Foto / Social)
   ========================================================= */
.oasi-bacheca-card{
  background:#1A1A1A;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:22px;
  flex:1;
  min-width:170px;
  cursor:pointer;
  transition:all .25s ease;
}
.oasi-bacheca-card:hover{
  border-color:rgba(229,0,126,.35);
  transform:translateY(-2px);
  background:#1e1e1e;
}

.oasi-panel{
  position:fixed;
  inset:0;
  z-index:10001;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:24px 16px;
  overflow-y:auto;
}
.oasi-panel.is-open{ display:flex; }
.oasi-panel-inner{
  width:100%;
  max-width:1000px;
  background:#111;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:24px;
  margin-top:4vh;
}
.oasi-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.oasi-panel-close{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;
}
.oasi-panel-close:hover{ background:var(--oasi-fuchsia); }

.oasi-poster-thumb, .oasi-photo-thumb{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  background:#1A1A1A;
  transition:border-color .2s ease;
}
.oasi-poster-thumb:hover, .oasi-photo-thumb:hover{ border-color:rgba(229,0,126,.4); }
.oasi-poster-thumb img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.oasi-photo-thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

.oasi-news-item{
  background:#1A1A1A;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:16px;
  display:flex;
  gap:16px;
  flex-direction:column;
}
.oasi-news-item .thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.oasi-news-item .body{ min-width:0; }
.oasi-news-item .date{ font-size:11px; color:var(--oasi-gold); font-weight:700; }
.oasi-news-item .title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; color:#fff; margin-top:4px; }
.oasi-news-item .desc{ font-size:13px; color:rgba(255,255,255,.5); margin-top:6px; }
.oasi-news-item a.readmore{ font-size:12px; font-weight:700; color:var(--oasi-fuchsia); margin-top:8px; display:inline-block; }

@media (min-width:640px){
  .oasi-news-item{ flex-direction:row; align-items:flex-start; }
  .oasi-news-item .thumb{ width:180px; flex-shrink:0; aspect-ratio:4/3; }
}

.oasi-social-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  text-decoration:none;
  margin-bottom:10px;
  transition:background .2s ease;
}
.oasi-social-btn:hover{ background:rgba(229,0,126,.15); border-color:rgba(229,0,126,.35); }
.oasi-social-btn .icon{
  width:36px;height:36px;border-radius:50%;
  background:#fff;color:#000;
  display:grid;place-items:center;
  font-weight:800;font-size:13px;flex-shrink:0;
}

/* ---- Lightbox immagine a schermo intero (poster/foto) ---- */
.oasi-image-lightbox{
  position:fixed;inset:0;z-index:10002;
  background:rgba(0,0,0,.95);
  display:none;
  align-items:center;justify-content:center;
  padding:40px 20px;
}
.oasi-image-lightbox.is-open{ display:flex; }
.oasi-image-lightbox img{ max-width:100%; max-height:100%; border-radius:8px; }

.oasi-spinner{
  width:44px;height:44px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--oasi-fuchsia);
  animation:oasiSpin .8s linear infinite;
}
@keyframes oasiSpin{ to{ transform:rotate(360deg); } }

.oasi-image-lightbox-close-btn{
  position:fixed;
  top:16px;right:16px;
  z-index:10010;
  width:56px;height:56px;
  border-radius:50%;
  background:#1A1A1A;
  border:2px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.oasi-image-lightbox-close-btn:hover{ background:var(--oasi-fuchsia); border-color:var(--oasi-fuchsia); }

/* =========================================================
   BANNER COOKIE
   ========================================================= */
.oasi-cookie-banner{
  position:fixed;
  left:16px;right:16px;
  bottom:16px;
  z-index:10020;
  max-width:720px;
  margin:0 auto;
  background:#141414;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:20px 22px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  transform:translateY(140%);
  opacity:0;
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  pointer-events:none;
}
.oasi-cookie-banner.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.oasi-cookie-banner p{
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,.7);
  line-height:1.5;
  margin:0;
}
.oasi-cookie-banner a{ color:#fff; text-decoration:underline; }
.oasi-cookie-banner .actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.oasi-cookie-banner button{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:13px;
  border-radius:999px;
  padding:10px 20px;
  cursor:pointer;
  border:none;
}
.oasi-cookie-accept{ background:var(--oasi-fuchsia); color:#fff; }
.oasi-cookie-decline{ background:transparent; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.2) !important; }

.oasi-video-consent-gate{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
  padding:24px;
  background:#141414;
}
.oasi-video-consent-gate p{
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,.6);
  max-width:400px;
  line-height:1.5;
  margin:0;
}

.oasi-carousel-arrow{
  width:48px;height:48px;
  border-radius:50%;
  background:#1A1A1A;
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}
.oasi-carousel-arrow svg{ width:20px; height:20px; }
.oasi-carousel-arrow:hover{
  background:var(--oasi-fuchsia);
  border-color:var(--oasi-fuchsia);
  transform:scale(1.06);
}

/* =========================================================
   VISTA ARTICOLO SINGOLO (Squadra/Staff/Partner/News/Foto/Partita)
   Il contenuto qui dentro arriva "grezzo" da Joomla (jdoc:include
   type="component"), pensato di default per uno sfondo chiaro: lo
   adattiamo al tema scuro del sito con regole generiche sui tag HTML,
   così funziona con qualunque markup esatto generi la tua versione di
   Joomla, senza dover indovinare nomi di classi specifici.
   ========================================================= */
.oasi-article-view{
  color:rgba(255,255,255,.75);
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.7;
}
.oasi-article-view h1,
.oasi-article-view h2,
.oasi-article-view h3{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  color:#fff;
  margin-top:1.4em;
  margin-bottom:.5em;
  line-height:1.25;
}
.oasi-article-view h1{ font-size:28px; margin-top:0; }
.oasi-article-view h2{ font-size:22px; }
.oasi-article-view h3{ font-size:18px; }
.oasi-article-view p{ margin:0 0 1em; }
.oasi-article-view a{ color:var(--oasi-fuchsia); text-decoration:underline; }
.oasi-article-view a:hover{ color:var(--oasi-gold); }
.oasi-article-view img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  margin:1.2em 0;
  display:block;
}
.oasi-article-view ul,
.oasi-article-view ol{ margin:0 0 1em 1.4em; }
.oasi-article-view li{ margin-bottom:.4em; }
.oasi-article-view blockquote{
  border-left:3px solid var(--oasi-fuchsia);
  padding-left:1em;
  margin:1.2em 0;
  color:rgba(255,255,255,.6);
  font-style:italic;
}
.oasi-article-view table{
  width:100%;
  border-collapse:collapse;
  margin:1.2em 0;
  font-size:14px;
}
.oasi-article-view table th,
.oasi-article-view table td{
  border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;
  text-align:left;
}
.oasi-article-view hr{ border-color:rgba(255,255,255,.1); margin:2em 0; }
.oasi-article-view .page-header,
.oasi-article-view [class*="page-header"]{
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  color:#fff;
  font-size:28px;
  margin-bottom:.6em;
}
.oasi-article-view [class*="article-info"],
.oasi-article-view [class*="createdby"],
.oasi-article-view [class*="create-date"],
.oasi-article-view .muted,
.oasi-article-view small{
  color:rgba(255,255,255,.4);
  font-size:12px;
}
.oasi-article-view [class*="category"] a{ color:var(--oasi-gold); }
.oasi-article-view *{ max-width:100%; }

/* ---- Palestre: card con foto reale, indirizzo, squadre e link a Maps ---- */
.oasi-gym-card{
  background:#1A1A1A;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.oasi-gym-card:hover{ border-color:rgba(229,0,126,.35); transform:translateY(-2px); }
.oasi-gym-card .photo{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  background:#0d0d0d;
}
.oasi-gym-card .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.oasi-gym-card .photo .fallback{ width:100%; height:100%; display:grid; place-items:center; font-size:36px; }
.oasi-gym-card .photo .badge{
  position:absolute;
  top:10px; left:10px;
  font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(229,0,126,.9);
  color:#fff;
  font-family:'Inter',sans-serif;
}
.oasi-gym-card .body{ padding:18px; }
.oasi-gym-card .maps-btn{
  display:inline-flex;
  margin-top:14px;
  height:38px;
  padding:0 16px;
  align-items:center;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:12px;
}

/* ---- Sfondo a gradiente soffuso (fucsia/oro), stessa tecnica della Hero
   ma molto più tenue, pensata per sezioni lunghe piene di card: il
   gradiente resta visibile solo negli spazi vuoti tra le card, non
   interferisce con la leggibilità del testo (le card hanno il loro
   sfondo scuro pieno sopra). ---- */
.oasi-section-gradient{
  position:relative;
  background-color:#0A0A0A;
}
.oasi-section-gradient::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(229,0,126,.13), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(212,175,55,.10), transparent 60%);
}
.oasi-section-gradient > *{ position:relative; z-index:1; }

/* ---- Navigazione "Articolo precedente/successivo" (generata da Joomla in
   fondo alla pagina di dettaglio): senza queste regole i due link finiscono
   appiccicati l'uno all'altro. Copre le classi più comuni usate da Joomla 5
   per questo blocco, qualunque sia la struttura esatta generata. ---- */
.oasi-article-view .pager,
.oasi-article-view nav[aria-label="Article Navigation"],
.oasi-article-view nav[aria-label="Articolo Navigazione"],
.oasi-article-view .item-page + nav,
.oasi-article-view ul.pager-nav{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  list-style:none;
  margin:32px 0 0 0 !important;
  padding:20px 0 0 0 !important;
  border-top:1px solid rgba(255,255,255,.10);
}
.oasi-article-view .pager li,
.oasi-article-view nav[aria-label="Article Navigation"] > *,
.oasi-article-view ul.pager-nav li{
  margin:0 !important;
  padding:0 !important;
  list-style:none;
}
.oasi-article-view .pager a,
.oasi-article-view nav[aria-label="Article Navigation"] a,
.oasi-article-view ul.pager-nav a{
  display:inline-block;
  color:var(--oasi-fuchsia) !important;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  max-width:320px;
}
.oasi-article-view .pager a:hover,
.oasi-article-view nav[aria-label="Article Navigation"] a:hover,
.oasi-article-view ul.pager-nav a:hover{
  text-decoration:underline;
}
/* Le etichette "Articolo precedente:"/"Articolo successivo:" di Joomla,
   se presenti come testo dentro lo stesso link, restano ma più discrete */
.oasi-article-view .pager small,
.oasi-article-view .pager .pager-item-title small{
  display:block;
  font-weight:400;
  color:rgba(255,255,255,.4);
  font-size:11px;
  margin-bottom:2px;
}