/* ===============================================================
   ACS Vulpițele Galbene Roman
   Stiluri globale — paleta preluată din siglă (albastru + galben)
   =============================================================== */

/* ---------------------------- Fonturi -------------------------
   Găzduite local (`assets/fonts/`), nu de la Google: nicio cerere
   către un server străin, deci nimic de declarat privind datele
   vizitatorilor, și o încărcare în plus mai puțin.

   Barlow Condensed — titluri și cifre. Îngust și ferm, așa cum se
   scrie pe tricouri și pe panourile de stadion.
   Inter — text curent, gândit pentru citit pe ecran.

   Fiecare font are două fișiere: `latin` și `latin-ext`. Diacriticele
   românești ș și ț stau în `latin-ext`, deci acela nu e opțional.
   `font-display: swap` afișează textul imediat, cu fontul de sistem,
   și îl schimbă când fontul propriu a ajuns — mai bine decât o pagină
   goală pe o conexiune slabă.
   ------------------------------------------------------------- */

/* Doar grosimea 800: toate titlurile site-ului o folosesc, iar un fișier de
   font nefolosit nu are ce căuta în livrare. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter este un font variabil: un singur fișier acoperă 400–800. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --galben: #ffd200;
  --galben-inchis: #e6b400;
  --galben-pal: #fff6d1;

  --albastru: #0f6cb6;
  --albastru-inchis: #123a6e;
  --albastru-adanc: #0d2a52;
  --albastru-pal: #e8f1fa;

  --negru: #101a2b;
  --gri: #5a6472;
  --gri-deschis: #dfe4ea;
  --fundal: #ffffff;
  --fundal-alt: #f4f7fb;

  /* Stari (notificari din panou, pastila de mesaje necitite). Fara ele,
     `.notificare-succes/eroare` ramaneau cu fundal transparent si text alb. */
  --verde: #1c7a46;
  --rosu: #c0392b;

  --radius: 14px;
  --radius-mic: 8px;
  --umbra: 0 2px 8px rgba(16, 26, 43, .08);
  --umbra-mare: 0 14px 34px rgba(16, 26, 43, .16);
  --container: 1180px;
  /* Inaltimea antetului pe desktop. Aceeasi pe toate paginile: vezi blocul
     „Aceeasi inaltime pe desktop” de la Hero. */
  --antet-inaltime: 500px;
  /* Cat de lat se topeste fotografia din antet in albastru, la margini. E si
     cu cat depaseste ea coloana de continut, de fiecare parte — cele doua
     trebuie sa fie egale, altfel topirea intra sub text. Vezi `.hero-poza`. */
  --antet-topire: 90px;
  --font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-titlu: "Barlow Condensed", "Arial Narrow", var(--font);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--negru);
  background: var(--fundal);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--albastru); text-decoration: none; }
a:hover { color: var(--albastru-inchis); }

/* ---------------------- Navigare cu tastatura ------------------
   Până acum doar câmpurile de formular arătau unde se află cursorul de
   tastatură; pe linkuri și butoane nu se vedea nimic, deci site-ul nu se
   putea parcurge fără mouse. `:focus-visible` (nu `:focus`) desenează
   conturul doar la navigarea cu Tab, nu și la clic.
   ------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--albastru);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Pe fundal albastru, un contur albastru nu se vede. */
.site-header :focus-visible,
.hero :focus-visible,
.sectiune-albastra :focus-visible,
.site-footer :focus-visible { outline-color: var(--galben); }

/* Primul element din pagină: invizibil până e atins cu Tab, apoi sare peste
   meniu direct în conținut. Cine folosește tastatura sau un cititor de ecran
   nu mai parcurge cele opt linkuri de meniu la fiecare pagină. */
.sari-la-continut {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--galben);
  color: var(--albastru-inchis);
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 18px;
  border-radius: var(--radius-mic);
  box-shadow: var(--umbra-mare);
  transition: top .15s;
}
.sari-la-continut:focus { top: 12px; color: var(--albastru-inchis); }

/* Titlurile folosesc fontul condensat. Fiind mai îngust decât Inter, cere
   corpuri mai mari ca să aibă aceeași prezență optică — de aici valorile
   crescute față de un font normal. */
h1, h2, h3, h4 {
  margin: 0 0 .6em;
  font-family: var(--font-titlu);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--albastru-inchis);
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------- Header --------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--albastru-inchis);
  border-bottom: 4px solid var(--galben);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
}

.logo { display: flex; align-items: center; gap: 12px; color: #fff; }
.logo:hover { color: #fff; }
.logo img { width: 68px; height: 68px; flex-shrink: 0; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-text strong {
  font-family: var(--font-titlu);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.logo-text span {
  font-size: .7rem;
  color: var(--galben);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  color: #d5e0ee;
  padding: 10px 13px;
  border-radius: var(--radius-mic);
  font-size: .92rem;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a.activ { color: var(--albastru-inchis); background: var(--galben); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-mic);
  color: #fff;
  padding: 8px 12px;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Butonul de închidere și voalul din spatele panoului există în pagină tot
   timpul, dar se văd doar cât ține meniul de telefon. */
.nav-inchide, .nav-fundal { display: none; }

/* --------------- Antetul care se strânge la derulare -----------
   Antetul e lipit de marginea de sus (`sticky`), deci ocupă 88px din ecran
   pe toată durata vizitei. După primele derulări nimeni nu mai citește
   numele clubului — are nevoie de pagină. Se strânge la 62px și lasă
   sloganul deoparte.

   Doar pe ecran mare: sub 980px antetul nu e lipit, ci pleacă în sus odată
   cu pagina, deci nu are de la cine lua loc.
   ------------------------------------------------------------- */

@media (min-width: 981px) {
  .header-inner { transition: min-height .2s ease; }
  .logo img { transition: width .2s ease, height .2s ease; }
  .site-header { transition: box-shadow .2s ease; }

  .site-header.restrans .header-inner { min-height: 62px; }
  .site-header.restrans .logo img { width: 46px; height: 46px; }
  .site-header.restrans .logo-text span { display: none; }
  .site-header.restrans { box-shadow: 0 6px 18px rgba(16, 26, 43, .22); }
}

/* ------------------ Meniul de telefon: panou lateral -----------
   Înainte era o listă căzută sub antet, cu ținte de atingere mici. Acum e
   un panou care intră din dreapta, cu voal peste pagină — adică un dialog,
   deci se poartă ca unul: se închide cu Escape, cu clic în afară și cu
   butonul ×, iar Tab-ul rămâne închis înăuntru cât e deschis.

   Închis, panoul are `visibility: hidden`, nu doar poziția în afara
   ecranului: altfel linkurile lui ar rămâne focalizabile cu Tab, invizibile
   pe undeva prin dreapta.
   ------------------------------------------------------------- */

@media (max-width: 980px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 68px 16px 24px;
    background: var(--albastru-inchis);
    border-left: 4px solid var(--galben);
    box-shadow: var(--umbra-mare);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(105%);
    transition: transform .22s ease, visibility .22s;
  }
  .nav.deschis { visibility: visible; transform: none; }
  .nav a { padding: 13px 14px; font-size: 1rem; }

  .nav-inchide {
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius-mic);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }

  .nav-fundal {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(13, 42, 82, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .nav-fundal.vizibil { opacity: 1; pointer-events: auto; }

  /* Pagina din spate nu se mai derulează sub panou. */
  body.meniu-deschis { overflow: hidden; }

  /* `z-index: auto` (nu 50, ca pe desktop) e esential: cu z-index, antetul
     devine context de stivuire, iar panoul de meniu — care sta inauntrul lui —
     ramane prizonier acolo, sub voalul de la nivelul body (z-70). Rezultatul:
     voalul acoperea linkurile si le fura atingerile, desi vizual panoul parea
     deasupra (voal si panou au aceeasi culoare). Fara stacking context, `z-80`
     al panoului conteaza la radacina si trece peste voal. */
  .site-header { position: relative; z-index: auto; }
  /* Fontul condensat ocupă mai puțin pe orizontală decât cel de dinainte,
     deci pe telefon numele clubului suportă un corp mai mare fără să
     îmbulzească butonul de meniu. */
  .logo-text strong { font-size: 1.05rem; }
  /* Sloganul, mai lung decât spațiul din antetul de telefon, folosește fontul
     condensat (mult mai îngust) și o siglă puțin mai mică, ca să încapă pe un
     rând. Sub ~350px tot se rupe în două — acceptabil pe ecranele foarte mici. */
  .logo img { width: 50px; height: 50px; }
  .logo-text span {
    font-family: var(--font-titlu);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: 0;
  }
}

/* ---------------------------- Hero ---------------------------- */

/* Fundalul antetului e exact culoarea barei de sus — `--albastru-inchis`, plat,
   fara gradient. Impreuna, cele doua citesc ca o singura banda albastra in
   capul paginii, in loc de doua benzi apropiate dar diferite.

   Aici stateau si doua ornamente: dungile diagonale din sigla si o pata galbena
   radiala in coltul din dreapta-jos. Au plecat amandoua. Pe o pagina fara
   fotografie nu se vedea decat zgomot, iar pe una cu fotografie se bateau cu
   ea; galbenul, mai ales, tragea ochiul intr-un colt gol. */
.hero {
  position: relative;
  background: var(--albastru-inchis);
  color: #fff;
  padding: clamp(60px, 10vw, 118px) 0;
  overflow: hidden;
}
/* Fotografia din antet, completată din panou (Setări site → Fotografie antet).
   Elementul stă ascuns până când `site.js` chiar are o adresă: altfel un
   dreptunghi întunecat ar acoperi degeaba gradientul de mai sus. Fără poză,
   antetul arată exact ca înainte.

   PUNCTUL DE INTERES
   Antetul are înălțime fixă, dar lățimea lui ține de ecran: pe telefon e un
   dreptunghi aproape pătrat, pe monitor o fâșie lungă. Cu `cover`, poza se
   întinde până acoperă tot, iar restul se taie — și se taie tocmai pe latura
   care variază. Ce rămâne în cadru decide `background-position`: cu `center`,
   mereu mijlocul geometric, deci copilul din stânga cadrului dispare primul
   pe telefon.

   `--focus` e punctul pe care poza îl ține în cadru la orice lățime. `site.js`
   îl pune pe element din setarea `<cheie>Focus`, aleasă prin clic în panou
   („Punctul care rămâne mereu în cadru”). Procentele nu sunt coordonate pe
   ecran, ci pe poză: la 25% 40%, browserul aliniază punctul aflat la un sfert
   din lățimea pozei cu punctul aflat la un sfert din lățimea cadrului, deci
   acel loc rămâne vizibil oricât s-ar strânge cadrul. Fără setare, `50% 50%`
   — exact comportamentul de dinainte. */
/* LATIMEA
   Fotografia se opreste la latimea coloanei de continut, nu se intinde pe tot
   ecranul. Impreuna cu inaltimea fixa de mai sus, asta face cutia pozei
   complet stabila pe desktop: 1360x500 la orice latime de ecran, de la 1360px
   in sus. Raportul ei e 2.72, indiferent daca monitorul are 1400 sau 2560 de
   pixeli — inainte varia de la 2.9 la 5.1, iar aceeasi poza se taia altfel la
   fiecare vizitator. Sub 1360px poza atinge marginile ecranului, ca inainte.

   1360 = coloana de continut (1180) plus cate o topire (90px) de fiecare parte.
   Depasirea nu e cosmetica: topirea trebuie sa se consume INAINTE de coloana
   de text. Cu poza oprita fix la 1180, titlul incepea chiar acolo unde poza
   deja palea, si se vedea urat — text pe o fotografie stinsa. Asa, marginea de
   sus a titlului cade exact pe capatul topirii, adica pe fotografie intreaga. */
.hero-poza {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, calc(var(--container) + 2 * var(--antet-topire)));
  background: var(--focus, 50% 50%)/cover no-repeat;
}
.hero-poza.are-poza { display: block; }

/* Marginile din stanga si din dreapta se topesc in albastru, nu se taie drept.

   Fara asta, pe un ecran de 1466px raman doua fasii albastre inguste, cu
   muchie dreapta — si arata a randare gresita, nu a decizie. Topita, aceeasi
   fasie citeste ca o trecere catre culoarea clubului.

   Cat de lata e topirea nu e o cifra fixa, ci exact cat albastru exista de
   fiecare parte, pana la `--antet-topire`. Asa nu apare o treapta: sub 1180px
   nu e nimic in care sa se topeasca, deci topirea e zero si poza arata ca
   inainte; peste, creste odata cu fasia si se opreste cand aceasta e destul de
   lata. Cu o valoare fixa, un ecran de 1181px ar fi primit dintr-o data 90px
   de topire peste o fasie de un pixel — adica o umbrire a fotografiei, din
   senin.

   Aceeasi formula face ca topirea sa se termine mereu exact pe marginea
   coloanei de text, la orice latime de ecran. Sub 1360px poza e lata cat
   ecranul, iar topirea creste cat marginea; peste, poza sta la 1360 si topirea
   ramane la 90 — in amandoua cazurile, capatul ei cade pe marginea coloanei.
   Nu e o potriveala fericita, ci consecinta faptului ca depasirea si topirea
   sunt aceeasi valoare.

   Un browser fara `mask-image` ramane cu muchia dreapta: mai putin frumos,
   dar nimic nu se strica. */
.hero-poza.are-poza {
  /* `100vw` numara si bara de derulare, pe care asezarea paginii n-o are la
     dispozitie — deci supraevalueaza marginea cu vreo 7px. Fara scaderea de
     mai jos, exact intre 1181px si 1360px topirea ar trece cu atat peste
     marginea coloanei si ar prinde primele litere ale titlului. Nu exista o
     unitate CSS pentru latimea utila a paginii; 20px acopera cu prisosinta
     orice bara de derulare, iar topirea iese cu 10px mai ingusta in banda
     aceea — ceea ce nu se vede. */
  --topire: clamp(0px, calc((100vw - var(--container) - 20px) / 2), var(--antet-topire));
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--topire), #000 calc(100% - var(--topire)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--topire), #000 calc(100% - var(--topire)), transparent 100%);
}

/* VOALUL
   Peste poză se așază două voaluri: unul albastru dinspre stânga, pe unde stă
   textul, și unul de jos, care așază poza pe restul paginii. Fără ele, titlul
   alb ar deveni ilizibil pe o poză luminoasă — iar poza o alege clubul, nu noi.

   Intensitățile stau în variabile, nu scrise direct în gradient, ca reglajul
   să fie o singură cifră schimbată, nu patru culori rescrise. Voalul e ținut
   la minimul care păstrează contrastul textului: greu în stânga, unde stau
   titlul și butoanele, și aproape absent în dreapta, unde se vede poza. */
.hero-poza::after {
  --voal-text: .70;      /* stânga, sub titlu — partea care asigură lizibilitatea */
  --voal-mijloc: .44;    /* ~35%, unde încă mai ajung rândurile titlului */
  --voal-coada: .16;     /* ~70%, dincolo de ultima literă */
  --voal-margine: .05;   /* dreapta — cât mai aproape de poza curată */
  --voal-jos: .30;       /* legătura cu secțiunea de dedesubt */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(18, 58, 110, var(--voal-text)) 0%,
      rgba(18, 58, 110, var(--voal-mijloc)) 35%,
      rgba(18, 58, 110, var(--voal-coada)) 70%,
      rgba(18, 58, 110, var(--voal-margine)) 100%),
    linear-gradient(to top, rgba(18, 58, 110, var(--voal-jos)), transparent 55%);
}

/* Umbra literelor face treaba pe care altfel ar face-o un voal mai gros:
   apără contrastul exact pe conturul textului, în loc să întunece toată
   fotografia. Un titlu alb rămâne lizibil chiar dacă în spatele lui nimerește
   un petic de cer luminos, iar restul pozei se vede curat. Doar pe antetele
   cu fotografie — pe fundalul albastru simplu n-ar avea ce apăra. */
.hero:has(.hero-poza.are-poza) h1 { text-shadow: 0 2px 14px rgba(9, 26, 51, .55); }
.hero:has(.hero-poza.are-poza) p { text-shadow: 0 1px 8px rgba(9, 26, 51, .6); }

/* Pe ecran îngust textul nu mai stă într-o coloană din stânga, ci lat peste
   toată poza, deci un voal care se subțiază spre dreapta nu-l mai acoperă.
   Aici gradientul devine vertical: întunecat sub text, limpede deasupra. */
@media (max-width: 700px) {
  .hero-poza::after {
    background:
      linear-gradient(to top,
        rgba(18, 58, 110, .82) 0%,
        rgba(18, 58, 110, .58) 45%,
        rgba(18, 58, 110, .28) 100%);
  }
}
.hero:has(.hero-poza.are-poza) { padding: clamp(88px, 14vw, 168px) 0; }

.hero > .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero h1 em { color: var(--galben); font-style: normal; }
.hero p { max-width: 640px; font-size: 1.08rem; color: #cfdcea; }
.hero-actiuni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-mic { padding: 58px 0; }
/* Antetul scurt, cu fotografie, cere puțin mai multă înălțime ca poza să
   se vadă — dar rămâne mai jos decât antetul mare al primei pagini. */
.hero-mic:has(.hero-poza.are-poza) { padding: clamp(64px, 9vw, 116px) 0; }

/* ACEEAȘI ÎNĂLȚIME PE DESKTOP
   Până aici, înălțimea antetului o dădea textul din el: cine avea titlul pe
   două rânduri sau un paragraf mai lung primea un antet mai înalt. Măsurat la
   1440px, ieșeau șase înălțimi diferite pe opt pagini — de la 440px la Știri
   până la 783px pe prima pagină. Trecând dintr-o pagină în alta, antetul
   sălta, iar fotografia se tăia de fiecare dată altfel.

   Aici înălțimea devine o singură cifră, iar textul se așază la mijloc,
   oricât ar fi el. `min-height`, nu `height`: un text mult mai lung decât
   cele de acum întinde antetul în loc să iasă din el — se pierde uniformitatea,
   nu se rupe pagina. `padding` rămâne ca prag de siguranță pentru acel caz.

   Pe telefon nu se aplică: acolo lățimea e mică, textul curge pe multe rânduri,
   iar o înălțime fixă ar fi ori prea strâmtă, ori plină de gol. */
@media (min-width: 860px) {
  .hero,
  .hero-mic,
  .hero:has(.hero-poza.are-poza),
  .hero-mic:has(.hero-poza.are-poza) {
    display: flex;
    align-items: center;
    min-height: var(--antet-inaltime);
    padding: 40px 0;
  }
}

.eticheta {
  display: inline-block;
  background: var(--galben);
  color: var(--albastru-inchis);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

/* --------------------------- Butoane -------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, background .15s, color .15s, border-color .15s;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }

/* Un buton inactiv trebuie sa si arate inactiv: „Scoate” e rosu-aprins, iar
   fara regula asta parea apasabil chiar si cand nu exista nicio poza de scos. */
.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.btn-primar { background: var(--galben); color: var(--albastru-inchis); }
.btn-primar:hover { background: var(--galben-inchis); color: var(--albastru-inchis); }

.btn-secundar { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-secundar:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.btn-intunecat { background: var(--albastru); color: #fff; }
.btn-intunecat:hover { background: var(--albastru-inchis); color: #fff; }

.btn-mic { padding: 8px 16px; font-size: .85rem; }
.btn-pericol { background: #d64545; color: #fff; }
.btn-pericol:hover { background: #b93636; color: #fff; }
.btn-fantoma { background: transparent; border-color: var(--gri-deschis); color: var(--albastru); }
.btn-fantoma:hover { border-color: var(--albastru); color: var(--albastru-inchis); }

/* -------------------------- Secțiuni -------------------------- */

.sectiune { padding: clamp(48px, 8vw, 84px) 0; }
.sectiune-alt { background: var(--fundal-alt); }
.sectiune-albastra {
  background: var(--albastru-inchis);
  color: #cfdcea;
}
.sectiune-albastra h2, .sectiune-albastra h3 { color: #fff; }

.sectiune-titlu { max-width: 720px; margin-bottom: 40px; }
.sectiune-titlu p { color: var(--gri); font-size: 1.05rem; margin: 0; }
.sectiune-albastra .sectiune-titlu p { color: #a8bcd4; }
.sectiune-titlu h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--galben);
  border-radius: 4px;
  margin-top: 14px;
}

.grila { display: grid; gap: 24px; }
.grila-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grila-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grila-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* --------------------------- Carduri -------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--gri-deschis);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--umbra-mare); border-color: var(--albastru); }

/* Containerul isi pastreaza proportia chiar si gol, deci locul pozei e
   rezervat inainte ca ea sa ajunga: nimic nu salta la incarcare. */
.card-imagine {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--gri-deschis);
  overflow: hidden;
  flex-shrink: 0;
}
.card-poza { width: 100%; height: 100%; object-fit: cover; }
.card-imagine-goala {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--albastru-inchis), var(--albastru));
  position: relative;
}
.card-imagine-goala::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/logo-mic.png") center/76px no-repeat;
  opacity: .92;
}
.card-continut { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.card-continut h3 { margin-bottom: 8px; }
.card-continut h3 a { color: var(--albastru-inchis); }
.card-continut h3 a:hover { color: var(--albastru); }
.card-continut p { color: var(--gri); font-size: .93rem; flex: 1; }

.card-meta {
  font-size: .76rem;
  color: var(--albastru);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin-bottom: 10px;
}

/* Card persoană (staff / jucător) */
.persoana {
  background: #fff;
  border: 1px solid var(--gri-deschis);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: transform .18s, box-shadow .18s;
}
.persoana:hover { transform: translateY(-4px); box-shadow: var(--umbra-mare); }
.persoana-foto {
  aspect-ratio: 1;
  background: var(--gri-deschis);
  overflow: hidden;
  position: relative;
}
.persoana-poza { width: 100%; height: 100%; object-fit: cover; }
.persoana-foto .initiale {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--albastru-inchis), var(--albastru));
  text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.persoana-info { padding: 14px; }
.persoana-info strong { display: block; font-size: .98rem; color: var(--albastru-inchis); }
.persoana-info span { display: block; font-size: .83rem; color: var(--gri); margin-top: 2px; }
.persoana-numar {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--galben);
  color: var(--albastru-inchis);
  font-weight: 800;
  font-size: .85rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* Titlu de sectiune in liste lungi: centrele de pregatire pe pagina Grupe,
   grupele pe pagina Echipa. Primul din container nu are ce despatri de ce e
   deasupra, deci nu ia spatiul de sus. */
.lot-titlu:first-child { margin-top: 0; }
.lot-titlu {
  margin: 40px 0 18px;
  padding-left: 14px;
  border-left: 5px solid var(--galben);
  font-size: 1.5rem;
}

/* Card grupă */
.grupa {
  background: #fff;
  border: 1px solid var(--gri-deschis);
  border-top: 5px solid var(--galben);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .18s, box-shadow .18s;
}
.grupa:hover { transform: translateY(-3px); box-shadow: var(--umbra-mare); }
.grupa-varsta {
  display: inline-block;
  background: var(--albastru-inchis);
  color: var(--galben);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.grupa p { color: var(--gri); font-size: .93rem; }
.grupa-antrenor { font-size: .88rem !important; color: var(--albastru-inchis) !important; }
.grupa-orar { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--gri-deschis); }
.grupa-orar li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .88rem;
  padding: 3px 0;
  color: var(--gri);
}
.grupa-orar strong { color: var(--albastru-inchis); }

/* ------------------ Centre de pregătire (pagina Grupe) ---------
   Un centru e un bloc: titlu, ce e comun tuturor grupelor lui (locul de
   antrenament, iar la cinci din șase centre și antrenorul), apoi grupele
   într-un tabel. Repetate pe fiecare grupă, aceleași două informații
   umpleau pagina cu text identic.
   ------------------------------------------------------------- */

/* Două centre alături pe ecran lat. Un tabel cu trei coloane nu are ce face
   cu 1180px, iar stivuite pe toată lățimea cele șase centre cereau patru
   ecrane de derulat — mai mult decât cartonașele pe care le-au înlocuit.
   `align-items: start` lasă fiecare bloc la înălțimea lui, ca Trifești, cu o
   singură grupă, să nu se întindă cât Roman, cu cinci. */
.centre-grila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 8px 32px;
  align-items: start;
}

.centru { margin-bottom: 36px; }
/* Tabel compact: rândurile sunt scurte, nu au nevoie de aerul unui tabel
   de conținut lung. */
.centru th, .centru td { padding: 11px 14px; }
.centru-detalii {
  margin: -8px 0 16px;
  font-size: .93rem;
  color: var(--gri);
  max-width: 760px;
}
.centru-detalii strong { color: var(--albastru-inchis); }

/* Tabelul se strânge în coloana lui. Regula generală `table { min-width: 580px }`
   e pentru orarul lat de pe pagina Antrenamente; aici producea o bară de
   derulare orizontală sub fiecare centru. */
.centru table { min-width: 0; }
.centru .tabel-wrap { overflow-x: visible; }

/* Prima coloană — anii de naștere — e cea după care se caută din priviri. */
.centru td:first-child {
  font-family: var(--font-titlu);
  font-size: 1.15rem;
  color: var(--albastru-inchis);
  white-space: nowrap;
}

/* Zilele și orele stau una lângă alta, rând cu rând: „Marți → 18:30–20:00”.
   Orele nu se rup niciodată în două, altfel alinierea se pierde. */
.centru .orar-zile, .centru .orar-ore { white-space: nowrap; }
.centru .orar-ore { text-align: right; }

/* ---------------- Căutarea după anul nașterii ------------------ */

.cautare-an {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 16px 20px;
  background: var(--albastru-pal);
  border: 1px solid #bcd6ee;
  border-radius: var(--radius);
}
.cautare-an label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--albastru-inchis);
}
.cautare-an select {
  font-family: inherit;
  font-size: .95rem;
  padding: 9px 14px;
  border: 1px solid var(--gri-deschis);
  border-radius: var(--radius-mic);
  background: #fff;
  color: var(--negru);
}
.stare-cautare { font-size: .9rem; font-weight: 600; color: var(--albastru-inchis); }

/* Evidențiere, nu filtrare: părintele vede unde se încadrează copilul, dar și
   ce alte grupe are centrul lui — de multe ori un frate mai mare. */
.cauta tbody tr { transition: opacity .15s, background .15s; }
.cauta tbody tr:not(.potrivit) { opacity: .35; }
.cauta tbody tr.potrivit {
  background: var(--galben-pal);
  box-shadow: inset 4px 0 0 var(--galben);
}
.cauta tbody tr.potrivit:hover { background: var(--galben-pal); }
.cauta .centru.fara-potrivire { opacity: .45; }

/* Lotul unei grupe, deschis din tabelul paginii Grupe. */
.buton-lot {
  background: var(--albastru-pal);
  border: 1px solid #bcd6ee;
  border-radius: 100px;
  color: var(--albastru-inchis);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.buton-lot:hover { background: #d8e8f7; }
.buton-lot::after { content: " ▾"; }
.buton-lot[aria-expanded="true"]::after { content: " ▴"; }
.lot-gol { color: var(--gri); font-size: .85rem; }
.rand-lot > td { background: var(--fundal-alt); padding: 18px 16px; }
.rand-lot .grila { gap: 14px; }

/* Ziua din orar: acelasi bloc ca un centru pe pagina Grupe. */
.zi-orar { margin-bottom: 36px; }
.zi-orar table { min-width: 0; }
.zi-orar .tabel-wrap { overflow-x: visible; }
.zi-orar .ora {
  font-family: var(--font-titlu);
  font-size: 1.15rem;
  white-space: nowrap;
}

/* Cifra mare din secțiunea „Grupele noastre” de pe prima pagină. */
.cifra-mare {
  display: block;
  font-family: var(--font-titlu);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--albastru);
  margin-bottom: 6px;
}

/* ------------------ Banda de parteneri (toate paginile) --------
   Pentru un sponsor, vizibilitatea pe tot site-ul e contraprestația.
   Secțiunea bogată din pagina Despre rămâne — aceea invită colaboratori noi,
   banda doar mulțumește.
   ------------------------------------------------------------- */

.banda-parteneri {
  background: var(--fundal-alt);
  border-top: 1px solid var(--gri-deschis);
  padding: 28px 0;
}
.banda-parteneri-titlu {
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gri);
  text-align: center;
  margin-bottom: 18px;
}
.parteneri-banda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 44px;
}
.banda-partener { display: block; }
.banda-sigla {
  height: 52px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  /* Siglele vin în culori foarte diferite; decolorate, banda arată unitar,
     iar la hover fiecare își recapătă culoarea. */
  filter: grayscale(1);
  opacity: .7;
  transition: filter .2s, opacity .2s;
}
.banda-partener:hover .banda-sigla { filter: none; opacity: 1; }
.banda-nume { font-weight: 700; color: var(--albastru-inchis); }
.banda-invitatie { margin: 0; font-size: .9rem; color: var(--gri); text-align: center; }

/* --------------------------- Statistici ----------------------- */

.statistici {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  text-align: center;
}
.stat {
  padding: 26px 12px;
  background: #fff;
  border: 1px solid var(--gri-deschis);
  border-radius: var(--radius);
}
.stat strong {
  display: block;
  font-family: var(--font-titlu);
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--albastru);
  line-height: 1;
  margin-bottom: 6px;
}
.stat span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gri);
  font-weight: 700;
}

/* --------------------------- Parteneri ------------------------ */

.parteneri { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.partener {
  background: #fff;
  border: 1px solid var(--gri-deschis);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.partener:hover { transform: translateY(-3px); box-shadow: var(--umbra); border-color: var(--albastru); }
.partener-sigla {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--albastru-inchis);
  background: var(--galben);
  border: 3px solid var(--albastru-inchis);
}
/* Sigla reala nu imprumuta nimic din cercul galben de mai sus: e un `<img>`
   propriu, afisat intreg. `contain` pentru ca siglele de firma sunt
   dreptunghiulare — `cover` le-ar taia marginile. */
.partener-sigla-imagine {
  width: 100%;
  max-width: 130px;
  height: 62px;
  margin: 0 auto 14px;
  object-fit: contain;
}
.partener strong { display: block; font-size: .92rem; color: var(--albastru-inchis); }
.partener span { display: block; font-size: .78rem; color: var(--gri); margin-top: 3px; }

/* Cartonasul devine link cand partenerul are site. */
a.partener { display: block; text-decoration: none; }
a.partener:hover strong { color: var(--albastru); }

/* ---------------------------- Tabel --------------------------- */

.tabel-wrap { overflow-x: auto; border: 1px solid var(--gri-deschis); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 580px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--gri-deschis); }
th {
  background: var(--albastru-inchis);
  color: #fff;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--albastru-pal); }
td.ora { font-weight: 700; white-space: nowrap; color: var(--albastru-inchis); }

/* --------------- Orarul pe telefon: cartonașe, nu tabel --------
   `min-width: 580px` obligă la deranjare orizontală ca să se ajungă la
   coloana cu ora — exact informația căutată. Iar orarul e pagina cea mai
   consultată de părinți, aproape numai de pe telefon.

   Sub 640px fiecare antrenament devine un cartonaș: ziua ca titlu, restul
   ca perechi etichetă/valoare. Eticheta nu e scrisă în HTML, ci luată din
   `data-eticheta`, pusă pe fiecare celulă în `site.js` — astfel capul de
   tabel și cartonașele nu se pot desincroniza.
   ------------------------------------------------------------- */

@media (max-width: 640px) {
  .tabel-wrap-cartonase { border: none; background: none; overflow: visible; }
  .tabel-cartonase { min-width: 0; }
  .tabel-cartonase thead { display: none; }
  .tabel-cartonase, .tabel-cartonase tbody, .tabel-cartonase tr, .tabel-cartonase td { display: block; }

  .tabel-cartonase tbody tr {
    background: #fff;
    border: 1px solid var(--gri-deschis);
    border-top: 4px solid var(--galben);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .tabel-cartonase tbody tr:hover { background: #fff; }

  .tabel-cartonase td { border: none; padding: 4px 0; }

  /* Prima celulă (ziua) e titlul cartonașului, deci fără etichetă. */
  .tabel-cartonase td:first-child {
    font-family: var(--font-titlu);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--albastru-inchis);
    padding-bottom: 8px;
  }
  .tabel-cartonase td:first-child strong { font-weight: 800; }

  .tabel-cartonase td:not(:first-child) {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  .tabel-cartonase td:not(:first-child)::before {
    content: attr(data-eticheta);
    flex-shrink: 0;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gri);
    align-self: center;
  }
  /* Rândul de „gol”, de eroare sau de încărcare ocupă tot cartonașul. Nu e
     ziua unui antrenament, deci nu ia nici eticheta, nici fontul de titlu. */
  .tabel-cartonase td[colspan] {
    display: block;
    text-align: center;
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 400;
    color: var(--gri);
  }
  .tabel-cartonase td[colspan]::before { content: none; }
}

/* --------------------------- Formular ------------------------- */

.formular { display: grid; gap: 16px; }
.camp { display: flex; flex-direction: column; gap: 6px; }
.camp label { font-size: .85rem; font-weight: 700; color: var(--albastru-inchis); }
.camp input,
.camp textarea,
.camp select {
  font-family: inherit;
  font-size: .95rem;
  padding: 11px 14px;
  border: 1px solid var(--gri-deschis);
  border-radius: var(--radius-mic);
  background: #fff;
  color: var(--negru);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.camp input:focus,
.camp textarea:focus,
.camp select:focus {
  outline: none;
  border-color: var(--albastru);
  box-shadow: 0 0 0 3px rgba(15, 108, 182, .18);
}
.camp textarea { resize: vertical; min-height: 120px; }
.camp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .camp-2 { grid-template-columns: 1fr; } }

/* --------------------------- Mesaje --------------------------- */

.alerta { padding: 12px 16px; border-radius: var(--radius-mic); font-size: .9rem; font-weight: 600; }
.alerta-succes { background: #e8f6ee; color: #1c6b40; border: 1px solid #b7e2c9; }
.alerta-eroare { background: #fdecec; color: #9b2c2c; border: 1px solid #f5c2c2; }
.alerta-info { background: var(--albastru-pal); color: var(--albastru-inchis); border: 1px solid #bcd6ee; }

.gol {
  text-align: center;
  padding: 56px 20px;
  color: var(--gri);
  border: 2px dashed var(--gri-deschis);
  border-radius: var(--radius);
}

.incarcare { text-align: center; padding: 40px; color: var(--gri); font-size: .9rem; }

/* ------------------------ Schelete de încărcare ----------------
   Conținutul vine din Firestore, deci pagina se afișează întâi goală. Un
   „Se încarcă…” pe un rând se înlocuiește brusc cu o grilă întreagă, iar
   pagina saltă sub degetul vizitatorului. Plăcile de mai jos au forma și
   înălțimea cardurilor reale, așa că locul e deja rezervat: la sosirea
   datelor nu se mișcă nimic.

   Înălțimile sunt aproximative — nu au cum să fie exacte, fiindcă un card
   depinde de lungimea textului. Contează să fie apropiate, nu identice.
   ------------------------------------------------------------- */

.schelet {
  position: relative;
  overflow: hidden;
  background: var(--gri-deschis);
  border-radius: var(--radius);
}
.schelet::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: schelet-lucire 1.4s ease-in-out infinite;
}
@keyframes schelet-lucire { to { transform: translateX(100%); } }

.schelet-card     { height: 358px; }
.schelet-grupa    { height: 212px; }
.schelet-persoana { height: 268px; }
.schelet-partener { height: 152px; }
.schelet-linie    { display: block; height: 14px; border-radius: 7px; }

/* --------------------------- Voalul de încărcare --------------
   Paginile pornesc cu textele implicite scrise în HTML, iar `site.js` le
   înlocuiește cu cele din panou și adaugă fotografia din antet. Fără voal,
   vizitatorul vede întâi varianta implicită și apoi saltul la conținutul
   real. Voalul acoperă pagina exact cât ține acel salt.

   E injectat de un script inline din fiecare pagină — deci fără JavaScript
   nici nu apare, iar conținutul rămâne vizibil pentru vizitator și pentru
   motoarele de căutare. `site.js` îl ridică după ce sosesc textele, poza din
   antet și fonturile, sau după un plafon de siguranță, ca un Storage lent să
   nu țină pe nimeni blocat într-un ecran de încărcare.
   ------------------------------------------------------------- */
html.se-incarca { overflow: hidden; }

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--albastru-adanc, #0d2a52);
  opacity: 1;
  transition: opacity .45s ease;
}
#preloader.gata { opacity: 0; pointer-events: none; }

.preloader-cutie { display: grid; justify-items: center; gap: 22px; }

/* Sigla reala a clubului (aceeasi ca in antet) sta pe un card alb, ca sa se
   citeasca la fel pe fundalul inchis, indiferent de culorile ei. Card cu
   colturi rotunjite, nu cerc: emblema e un scut care ajunge pana aproape de
   marginile panzei, iar un decupaj rotund i-ar taia varful si banda de sus. */
.preloader-cutie img {
  width: 104px;
  height: 104px;
  padding: 12px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.preloader-rotor {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, .22);
  border-top-color: var(--galben, #ffd200);
  border-radius: 50%;
  animation: preloader-invarte .8s linear infinite;
}
@keyframes preloader-invarte { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #preloader { transition: none; }
  .preloader-rotor { animation: none; border-top-color: rgba(255, 255, 255, .22); }
}

/* --------------------------- Contact -------------------------- */

.contact-info { display: grid; gap: 18px; }
.contact-linie { display: flex; gap: 14px; align-items: flex-start; }
.contact-linie .ico {
  width: 42px; height: 42px; flex-shrink: 0;
  background: var(--albastru-pal);
  border: 2px solid var(--albastru);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.05rem;
}
.contact-linie strong {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gri);
}
.contact-linie a, .contact-linie span:not(.ico) { font-weight: 600; }

/* --------------------- Contact rapid (telefon) -----------------
   Scopul site-ului este înscrierea, iar drumul până la număr trecea prin
   meniu sau prin subsol. Pe ecran mic, butoanele astea stau mereu la
   îndemână. Pe desktop nu apar: acolo numărul e vizibil în pagină și
   nimeni nu sună dând clic pe el.

   Blocul e adăugat din `site.js`, nu scris în fiecare pagină — altfel
   aceleași opt linii s-ar copia în nouă fișiere. Dacă numărul e șters din
   panou, dispare tot blocul (`data-setare-ascunde`).
   ------------------------------------------------------------- */

.contact-rapid { display: none; }

@media (max-width: 768px) {
  .contact-rapid {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
  }
  .contact-rapid a {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(16, 26, 43, .3);
    transition: transform .12s;
  }
  .contact-rapid a:active { transform: scale(.94); }
  .contact-rapid svg { width: 27px; height: 27px; fill: currentColor; }

  .contact-rapid-telefon { background: var(--galben); color: var(--albastru-inchis); }
  .contact-rapid-telefon:hover { color: var(--albastru-inchis); }
  .contact-rapid-whatsapp { background: #25d366; color: #fff; }
  .contact-rapid-whatsapp:hover { color: #fff; }
}

/* --------------------------- Footer --------------------------- */

.site-footer {
  background: var(--albastru-adanc);
  color: #9db2cc;
  padding: 56px 0 24px;
  font-size: .9rem;
  border-top: 4px solid var(--galben);
}
.footer-grila { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 780px) { .footer-grila { grid-template-columns: 1fr; gap: 28px; } }
/* Titlu mic, distanțat, cu majuscule: fontul condensat s-ar înghesui aici,
   deci subsolul rămâne pe Inter. */
.site-footer h4 {
  color: #fff;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.site-footer a { color: #9db2cc; }
.site-footer a:hover { color: var(--galben); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-sigla { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-sigla img { width: 62px; height: 62px; object-fit: contain; }
.footer-sigla strong {
  color: #fff;
  font-family: var(--font-titlu);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}
/* Butoanele de contact rapid plutesc peste colțul subsolului — îi facem loc
   dedesubt, ca linkul de administrare să rămână atingibil. Regula stă aici,
   după definiția subsolului, altfel ar fi rescrisă de aceasta. */
@media (max-width: 768px) {
  .site-footer { padding-bottom: 92px; }
}

/* Randul legal, deasupra celui de copyright. Linkurile se pun pe un rand,
   iar datele de identificare ale asociatiei dedesubt, mai mici — sunt de
   citit doar cand cineva le cauta anume. */
.footer-legal {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem;
}
.footer-legal-linkuri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-legal-linkuri a { color: rgba(255, 255, 255, .8); }
.footer-legal-linkuri a:hover { color: var(--galben); }
.footer-identificare {
  margin-top: 10px;
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
}
/* Lipit de randul legal: doua linii orizontale una sub alta ar fi fost de
   prisos. */
.footer-legal + .footer-jos { margin-top: 18px; padding-top: 0; border-top: 0; }

.footer-jos {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .8rem;
}

/* --------------------------- Articol -------------------------- */

.articol { max-width: 780px; margin: 0 auto; }
/* Poza mare a articolului nu se incarca lenes: e chiar lucrul dupa care a
   venit vizitatorul si sta deja pe ecran. */
/* Poza principala a articolului.
   Regulile de aici sunt punctul de plecare: pentru articolele la care panoul a
   retinut forma pozei, `site.js` pune pe element proportia potrivita si punctul
   de interes ales. Articolele scrise inainte raman pe banda de 16/7. */
.articol-hero {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  background: var(--gri-deschis);
  border-radius: var(--radius);
  margin-bottom: 28px;
}

/* Banda de deasupra titlului, pentru fotografiile orizontale. `width: auto`
   impreuna cu `aspect-ratio` si `max-height` inseamna: pastreaza forma, iar
   daca plafonul te opreste, ingusteaza-te — nu te taia inca o data. */
.articol-hero-banda {
  width: auto;
  max-width: 100%;
  max-height: 66vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Deschiderea cu poza verticala: fotografia intr-o coloana ingusta, titlul
   langa ea.

   O verticala pusa deasupra titlului, la latimea coloanei de text, inseamna un
   bloc de peste 600px inaltime: primul ecran e numai poza, iar cititorul nu
   vede nici titlul, nici despre ce e vorba. Alaturi, aceeasi poza incape
   intreaga, netaiata, si tot ce trebuie citit ramane pe ecran. Asa deschide
   orice revista un portret. */
.articol-deschidere {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}
.articol-deschidere > div > :last-child { margin-bottom: 0; }
.articol-hero-lateral {
  width: 100%;
  margin-bottom: 0;
}

/* Pe ecran ingust nu mai sunt doua coloane de pus una langa alta: deschiderea
   se aseaza pe verticala, iar poza primeste un plafon de inaltime, ca titlul
   sa ramana la vedere fara sa fie nevoie de derulare. */
@media (max-width: 700px) {
  .articol-deschidere { grid-template-columns: 1fr; gap: 20px; }
  .articol-hero-lateral {
    width: auto;
    max-width: 100%;
    max-height: 48vh;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

.articol-rezumat {
  font-size: 1.12rem;
  color: var(--gri);
  border-left: 4px solid var(--galben);
  padding-left: 16px;
}
.articol-continut { font-size: 1.04rem; }
.articol-continut p { margin-bottom: 1.2em; }

/* ------------------- Documente legale ------------------------
   Politica de confidentialitate si Termenii. Sunt texte lungi, cu titluri
   numerotate si tabele, citite rar dar cautat punctual: cineva vrea sa vada
   „cat timp pastrati mesajele” si trebuie sa gaseasca repede punctul 4. De
   aceea titlurile respira mai mult decat intr-un articol obisnuit, iar
   randurile sunt mai scurte decat latimea coloanei.
   ------------------------------------------------------------- */

.document-meta {
  margin: -14px 0 26px;
  font-size: .82rem;
  color: var(--gri);
}
.document-legal .articol-continut { font-size: 1rem; }
.document-legal .articol-continut h2 {
  margin: 2.2em 0 .7em;
  padding-top: .8em;
  border-top: 1px solid var(--gri-deschis);
  font-size: 1.32rem;
}
.document-legal .articol-continut h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.document-legal .articol-continut h3 { margin: 1.6em 0 .5em; font-size: 1.05rem; }
.document-legal .articol-continut ul { margin: 0 0 1.2em 1.1em; }
.document-legal .articol-continut li { margin-bottom: .5em; }
.document-legal .articol-continut code {
  background: var(--fundal-alt);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .92em;
}
/* Tabelele de prelucrari au patru coloane de text si nu incap pe telefon:
   `min-width`-ul global de 580px le tine lizibile, iar invelisul le lasa sa
   fie derulate lateral in loc sa impinga toata pagina. */
.document-legal .tabel-wrap {
  overflow-x: auto;
  margin: 0 0 1.6em;
  border: 1px solid var(--gri-deschis);
  border-radius: var(--radius-mic);
}
.document-legal table { font-size: .92rem; min-width: 620px; }
.document-legal td { vertical-align: top; }
.document-legal tbody tr:last-child td { border-bottom: 0; }

/* Galeria de la finalul unui articol: aceleasi butoane ca galeria paginii
   Fotbal feminin, doar mai mici. Acolo fotografiile sunt subiectul paginii;
   aici sunt un adaos dupa text, si n-au de ce sa-l concureze. */
.articol-galerie {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--gri-deschis);
}
.galerie-mica { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.galerie-mica .galerie-poza { box-shadow: none; border-radius: var(--radius-mic); }
.galerie-mica .galerie-poza:hover { box-shadow: var(--umbra); }
.articol-credit {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--gri);
}

/* ---------------------- Utilitare / animații ------------------ */

.text-centrat { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ascuns { display: none !important; }


/* Întârzierea vine prin variabilă, nu prin `transition-delay` scris direct pe
   element: acolo ar întârzia și tranziția de hover a aceluiași card, care e
   definită separat. Așa, decalajul atinge doar apariția. */
.aparitie {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease var(--intarziere, 0s),
              transform .5s ease var(--intarziere, 0s);
}
.aparitie.vizibil { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .aparitie { opacity: 1; transform: none; }
}

/* --------------------------- Palmares -------------------------
   Doua coloane: senioare si junioare. Anul e ancora ochiului, deci
   sta pe o coloana proprie, cu latime fixa — altfel faptele nu s-ar
   mai alinia intre ele.
   ------------------------------------------------------------- */

.palmares-titlu {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--galben);
  font-size: 1.15rem;
}

.palmares-lista { list-style: none; margin: 0; padding: 0; }

.palmares-lista li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--gri-deschis);
}
.palmares-lista li:last-child { border-bottom: none; }

.palmares-an {
  font-family: var(--font-titlu);
  font-size: 1rem;
  font-weight: 800;
  color: var(--albastru);
  letter-spacing: .02em;
  white-space: nowrap;
}
.palmares-fapt { font-size: .93rem; line-height: 1.5; }
/* Textul vine acum din panou, unde accentul se scrie intre asteriscuri, iar
   `marcajSimplu()` il preda ca <em> — semnul de accent folosit peste tot pe
   site. Aici accentul inseamna „asta e performanta”, deci se ingroasa; italic,
   cum ar fi implicit, ar soptit-o in loc s-o spuna. */
.palmares-fapt em,
.palmares-fapt strong {
  font-style: normal;
  font-weight: 700;
  color: var(--albastru-inchis);
}

@media (max-width: 560px) {
  /* Pe telefon, anul urca deasupra faptului: la 92px coloana, un text
     de doua randuri ar fi ramas cu o dunga ingusta in dreapta. */
  .palmares-lista li { grid-template-columns: 1fr; gap: 3px; }
}

/* --------------------------- Galerie --------------------------
   Miniaturile sunt butoane, nu linkuri: nu duc nicaieri, deschid poza
   mare in aceeasi pagina. Un cititor de ecran aude „buton”, ceea ce e
   adevarat, in loc de „link”, ceea ce n-ar fi.
   ------------------------------------------------------------- */

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

.galerie-poza {
  padding: 0;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gri-deschis);
  cursor: zoom-in;
  aspect-ratio: 3 / 2;
  box-shadow: var(--umbra);
  transition: transform .2s, box-shadow .2s;
}
.galerie-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-poza:hover { transform: translateY(-3px); box-shadow: var(--umbra-mare); }
.galerie-poza:focus-visible { outline: 3px solid var(--albastru); outline-offset: 3px; }

/* Poza mare, peste pagina. */
.galerie-mare {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 42, 82, .93);
  opacity: 0;
  transition: opacity .2s ease;
}
.galerie-mare.vizibila { opacity: 1; }

.galerie-mare img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  border-radius: var(--radius);
  box-shadow: var(--umbra-mare);
}

.galerie-mare figcaption {
  margin-top: 14px;
  color: #fff;
  font-size: .9rem;
  text-align: center;
  max-width: 60ch;
}

.galerie-inchide {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.galerie-inchide:hover { background: var(--galben); color: var(--albastru-inchis); }

/* Sagetile de rasfoire. Ascunse pe ecran mic, unde ar acoperi poza —
   acolo se inchide si se deschide alta. */
.galerie-sageata {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.galerie-sageata:hover { background: var(--galben); color: var(--albastru-inchis); }
.galerie-inapoi { left: 22px; }
.galerie-inainte { right: 22px; }

@media (max-width: 700px) {
  .galerie-sageata { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .galerie-poza, .galerie-mare { transition: none; }
  .galerie-poza:hover { transform: none; }
}