/* Liga Culturala "Fiii Gorjului" - foaie de stil unica.
   Paleta vine din logoul oficial: bleumarin si auriu. Tokenii sunt in DESIGN.md
   din radacina proiectului. Nu adauga culori aici fara sa le treci intai acolo. */

/* ---------- 1. Tokens ---------- */
:root {
  --brand-deep: #16244F;
  --brand: #24386F;
  --brand-hover: #1B2C58;
  --brand-soft: #EAEEF7;
  --gold: #8A6A15;
  --gold-bright: #C9A227;
  --gold-soft: #F7F0DC;
  --stag: #C8A882;

  --ink: #1A1C22;
  --ink-muted: #585D68;
  --ink-faint: #6C7280;
  --surface: #FFFFFF;
  --surface-warm: #FAF9F6;
  --surface-sunk: #F1EFE9;
  --line: #E3E0D8;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --shadow: 0 1px 2px rgba(18,24,44,.06), 0 8px 24px rgba(18,24,44,.06);
  --shadow-lift: 0 2px 4px rgba(18,24,44,.08), 0 16px 40px rgba(18,24,44,.12);

  --container: 1160px;
  --header-h: 86px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--surface-warm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, iframe { max-width: 100%; }
img { height: auto; display: block; border: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.125rem); }
h3 { font-size: clamp(1.175rem, 2.2vw, 1.4rem); }
p { margin: 0 0 1.1em; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-hover); }
ul, ol { padding-left: 1.25em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--brand-deep); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }

/* ---------- 3. Layout ---------- */
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.section { padding-block: clamp(40px, 7vw, 96px); }
/* Prima sectiune de dupa banda albastra. Banda are acum 110px, nu 400, deci 96px
   de aer inainte de primul titlu faceau pagina sa para ca incepe abia la jumatate. */
.hero + .section,
.hero + .banda-parcurs + .section { padding-top: clamp(26px, 3.4vw, 52px); }
.section--sunk { background: var(--surface-sunk); }
.section__head { max-width: 62ch; margin-bottom: 40px; }
.section__eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 8px;
}
.section__head p { color: var(--ink-muted); margin: 0; }

/* ---------- 4. Bara utilitara + antet ----------
   Meniul cerut de client are unsprezece intrari de nivel unu. Ca sa incapa pe un
   rand fara sa se inghesuie, antetul foloseste un container mai lat decat corpul
   paginii si o scara de text mai mica. Ce nu e navigare (telefon, mail, butonul de
   sustinere) urca in banda subtire de deasupra, ca sa nu fure loc meniului. */
.utilitar {
  background: var(--brand-deep);
  color: #C3CCE2;
  font-size: .8125rem;
}
.utilitar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; min-height: 40px; padding-block: 6px;
}
.utilitar__deviza {
  margin: 0; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 500; color: #A9B6D4;
}
.utilitar__actiuni { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.utilitar a { color: #D7DEEE; text-decoration: none; }
.utilitar a:hover { color: #fff; text-decoration: underline; }
.utilitar__cta {
  background: var(--gold-bright); color: #23272F !important;
  font-weight: 600; padding: 5px 14px; border-radius: var(--r-sm);
}
.utilitar__cta:hover { background: #fff; text-decoration: none !important; }
@media (max-width: 720px) {
  .utilitar__deviza { display: none; }
  .utilitar__inner { justify-content: center; }
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 3px solid var(--gold-bright);
  box-shadow: 0 1px 12px rgba(18,24,44,.06);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--header-h);
}

/* Sigla rotunda plus numele scris in HTML. Textul sigiliului sta pe inel, deci la
   inaltimea unui antet ar avea sub sase pixeli; ca text HTML se citeste la orice
   marime, ramane clar pe ecran retina si se traduce singur in cautare. */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--brand-deep); flex: 0 0 auto; }
.brand__sigla { height: 64px; width: auto; }
.brand__lockup { display: flex; flex-direction: column; gap: 3px; line-height: 1.05; }
.brand--text { flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--brand-deep);
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-body); font-size: .6875rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}

.nav__list {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--brand-deep); text-decoration: none;
  font-size: .875rem; font-weight: 500; letter-spacing: .005em;
  padding: 10px 11px; border-radius: var(--r-sm);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav__link:hover { background: var(--brand-soft); color: var(--brand); }
.nav__link[aria-current="page"],
.nav__link[data-in-sectiune="da"] {
  color: var(--brand-deep); border-bottom-color: var(--gold-bright); font-weight: 600;
}
.nav__chev { width: 9px; height: 6px; opacity: .55; flex: 0 0 auto; }
.nav__expand { display: none; }

/* Submeniul: panou alb sub itemul parinte, deschis la hover si la focus. Ramane
   lipit de parinte printr-o punte invizibila, altfel mouse-ul pica intre ele. */
.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 248px; margin: 0; padding: 8px;
  list-style: none; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--gold-bright);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item--sub::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.nav__item--sub:hover > .nav__sub,
.nav__item--sub:focus-within > .nav__sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav__sub a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: .9375rem; line-height: 1.35;
}
.nav__sub a:hover { background: var(--brand-soft); color: var(--brand); }
.nav__sub a[aria-current="page"] { background: var(--gold-soft); color: var(--brand-deep); font-weight: 600; }
.nav__sertar-cta { display: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--brand-deep); width: 46px; height: 46px;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1240px) {
  .nav__link { padding: 10px 8px; font-size: .84375rem; }
  .brand__sigla { height: 56px; }
  .brand__name { font-size: 1.0625rem; }
  .brand__sub { font-size: .625rem; }
}

/* Intre 1100 si 1180px numele nu mai incape langa unsprezece intrari de meniu.
   Cade textul, nu sigla: sigla poarta oricum acelasi nume scris pe inel. */
@media (max-width: 1180px) and (min-width: 1101px) {
  .brand__lockup { display: none; }
}

/* Sub 1100px meniul devine sertar cu acordeoane: unsprezece sectiuni cu submeniuri
   nu incap pe un rand, iar pe telefon oricum se citeste pe verticala. */
@media (max-width: 1100px) {
  :root { --header-h: 74px; }
  .brand { gap: 10px; }
  .brand__sigla { height: 52px; }
  .brand__name { font-size: 1.0625rem; }
  .brand__sub { font-size: .625rem; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--surface); padding: 8px 20px 28px;
    border-bottom: 3px solid var(--gold-bright);
    box-shadow: 0 12px 24px rgba(18,24,44,.14);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link {
    padding: 15px 6px; border-radius: 0; border-bottom: 0; font-size: 1rem;
    font-weight: 600; flex: 1;
  }
  .nav__link[aria-current="page"],
  .nav__link[data-in-sectiune="da"] { color: var(--brand); }
  .nav__chev { display: none; }
  .nav__item--sub { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item--sub::after { content: none; }
  .nav__expand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: 0 0 auto;
    background: none; border: 0; color: var(--brand-deep); cursor: pointer;
  }
  .nav__expand svg { width: 14px; height: 9px; transition: transform .2s ease; }
  .nav__item[data-open="true"] > .nav__expand svg { transform: rotate(180deg); }
  /* In sertar submeniul e acordeon, deci deschiderea o face butonul, nu hover-ul.
     Rescriem si regulile de hover/focus de mai sus, ca sa nu se deschida singur
     cand degetul atinge din greseala itemul parinte. */
  .nav__sub {
    position: static; width: 100%; flex-basis: 100%;
    min-width: 0; margin: 0 0 10px; padding: 4px 0 4px 14px;
    border: 0; border-left: 2px solid var(--gold-bright); border-radius: 0;
    box-shadow: none; background: transparent;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .nav__item--sub:hover > .nav__sub,
  .nav__item--sub:focus-within > .nav__sub { display: none; }
  .nav__item[data-open="true"] > .nav__sub,
  .nav__item[data-open="true"]:hover > .nav__sub,
  .nav__item[data-open="true"]:focus-within > .nav__sub { display: block; }
  .nav__sub a { padding: 11px 10px; font-size: .9375rem; }
  .nav__sertar-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
  .nav__sertar-cta .btn { flex: 1 1 160px; }
}

/* ---------- 5. Hero ---------- */
/* Hero-ul e o banda joasa, nu un afis. Inainte lua 677px pe prima pagina si 396px
   pe cele interioare, adica primul ecran era ocupat de un titlu si un paragraf.
   Acum informatia sta pe un rand, nu una sub alta, iar banda nu trece de 3cm
   (113px) pe ecran de laptop. Verificat prin masurare, nu din ochi. */
.hero {
  background: linear-gradient(180deg, #1B2C5C 0%, var(--brand-deep) 100%);
  color: #fff; padding-block: 14px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(201,162,39,.28);
}
.hero::after {
  content: ""; position: absolute; inset: -120% -4% auto auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.16), transparent 68%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 40px;
}
.hero__eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright);
  border: 1px solid rgba(201,162,39,.5); border-radius: 999px; padding: 4px 13px; margin: 0;
  flex: 0 0 auto;
}
.hero h1 { color: #fff; margin: 0; line-height: 1.14; }
.hero__lead {
  font-size: .9375rem; line-height: 1.5; color: #C3CCE2;
  margin: 0; flex: 1 1 22rem; max-width: 46rem; min-width: 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; margin-left: auto; }

/* ---------- 6. Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 24px; border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--gold-bright); color: #23272F; }
.btn--primary:hover { background: #fff; color: var(--brand-deep); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--solid { background: var(--brand-deep); color: #fff; }
.btn--solid:hover { background: var(--brand); color: #fff; }
.btn--outline { background: var(--surface); color: var(--brand); border-color: var(--line); }
.btn--outline:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ---------- 7. Carduri ---------- */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: #D3CFC4; }
/* Imaginea sta absolut in rama, altfel inaltimea ei naturala invinge aspect-ratio
   cand cardul e un flex item pe coloana. */
.card__media {
  position: relative; aspect-ratio: 16 / 9; flex: 0 0 auto;
  background: var(--surface-sunk); overflow: hidden;
}
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Cand articolul n-avea decat antetul vechi, punem sigla noua: intreaga, nu taiata. */
.card__media--marca { background: var(--brand-soft); }
.card__media--marca img { object-fit: contain; padding: 18px 18px 22px; }

/* Fara fotografie nu desenam rama goala: cardul incepe direct cu data si titlul,
   iar o linie aurie sus tine ritmul vizual cu celelalte carduri din grila. */
.card--fara-poza { border-top: 3px solid var(--gold-bright); }
.card--fara-poza .card__body { padding-top: 22px; }
.card__date {
  position: absolute; left: 12px; top: 12px;
  background: rgba(22,36,79,.94); color: #fff;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  padding: 5px 10px; border-radius: var(--r-sm);
}
/* Trebuie sa vina DUPA .card__date: are aceeasi specificitate, deci castiga cine
   e scris ultimul. Inainte era scrisa mai sus si eticheta ramanea absoluta, adica
   se aseza peste titlul cardului fara fotografie. */
.card__date--singur {
  position: static; display: inline-block; margin-bottom: 12px;
  background: var(--brand-soft); color: var(--brand-deep);
  /* .card__body e flex pe coloana, deci fara asta eticheta s-ar intinde pe toata
     latimea cardului in loc sa stea stransa in jurul datei. */
  align-self: flex-start;
}
.card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 8px; }
.card__body h3 a { color: var(--ink); text-decoration: none; }
.card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h3 a { color: var(--brand); }
.card__excerpt { color: var(--ink-muted); font-size: .9375rem; margin: 0 0 16px; }
.card__more { margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--brand); }

/* ---------- 8. Sectiuni de continut ---------- */
.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr .85fr; } }

.stat-row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px;
}
.stat__num {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  color: var(--brand-deep); line-height: 1;
  font-variant-numeric: tabular-nums;  /* cifrele nu mai danseaza in timp ce urca */
}
.stat__label { font-size: .9375rem; color: var(--ink-muted); margin-top: 10px; }

/* Bara aurie de sub cifra: se trage la intrarea in ecran, apoi ramane cu o
   sclipire lenta care tine sectiunea vie fara sa distraga de la citit. */
.stat__bara {
  display: block; height: 3px; margin-top: 14px; border-radius: 2px;
  background: var(--surface-sunk); overflow: hidden;
}
.stat__bara i {
  display: block; height: 100%; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 45%, var(--gold) 100%);
  background-size: 220% 100%;
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.stat.este-vizibil .stat__bara i {
  transform: scaleX(1);
  animation: sclipire-aurie 6s linear 1.2s infinite;
}
@keyframes sclipire-aurie {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}

/* Cardurile intra pe rand, cu o intarziere mica intre ele. Ascunderea de start e
   legata de [data-js], pus de o linie din <head>: fara JavaScript nimic nu se ascunde,
   deci cifrele si barele raman vizibile de la inceput. */
html[data-js] .stat-row[data-anima-cifre] .stat {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
html[data-js] .stat-row[data-anima-cifre] .stat.este-vizibil { opacity: 1; transform: none; }
html[data-js] .stat__bara i { transform: scaleX(0); }
html[data-js] .stat.este-vizibil .stat__bara i { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html[data-js] .stat-row[data-anima-cifre] .stat { opacity: 1; transform: none; transition: none; }
  html[data-js] .stat__bara i { transform: scaleX(1); transition: none; }
  .stat.este-vizibil .stat__bara i { animation: none; }
}

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow);
}
.panel--warm { background: var(--gold-soft); border-color: #EADFC2; }
.panel--brand { background: var(--brand-soft); border-color: #D5DDEE; }

/* Sponsori: sigla intr-o rama alba, la aceeasi inaltime pentru toti, ca sa nu
   para ca unul e mai important decat altul doar fiindca are logoul mai mare. */
.sponsori { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sponsor {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 24px; box-shadow: var(--shadow);
}
.sponsor__logo {
  flex: 0 0 108px; height: 72px; display: grid; place-items: center;
  background: #fff; border-radius: var(--r-sm); overflow: hidden;
}
.sponsor__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor--fara-sigla { border-left: 3px solid var(--gold-bright); }
/* Sigla in forma de banda (numele firmei scris pe un rand) nu incape intr-un patrat
   de 108px: acolo ar avea opt pixeli inaltime. Primeste un rand al ei, deasupra. */
.sponsor--lat { flex-direction: column; align-items: stretch; gap: 14px; }
.sponsor--lat .sponsor__logo { flex: 0 0 auto; width: 100%; height: auto; padding: 4px 0; }
.sponsor--lat .sponsor__logo img { width: 100%; max-height: 54px; object-fit: contain; }
.sponsor__text h3 { margin: 0 0 4px; font-size: 1.0625rem; }
.sponsor__text p { color: var(--ink-muted); font-size: .9375rem; }
@media (max-width: 520px) {
  .sponsor { flex-direction: column; align-items: flex-start; }
}

/* Panourile de proiect trebuie sa cheme la citit, nu doar sa informeze: linie aurie
   sus, ridicare la hover, buton in loc de link simplu. */
.panel--proiect {
  display: flex; flex-direction: column;
  border-top: 3px solid var(--gold-bright);
  transition: transform .18s ease, box-shadow .18s ease;
}
.panel--proiect:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.panel--proiect h3 { color: var(--brand-deep); }
.panel--proiect p:last-child { margin-top: auto; padding-top: 8px; }

.quote {
  font-family: var(--font-display); font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.5; color: var(--brand-deep);
  border-left: 4px solid var(--gold-bright); padding-left: 24px; margin: 0 0 32px;
}
.quote:last-child { margin-bottom: 0; }
.quote cite {
  display: block; font-family: var(--font-body); font-size: .9375rem;
  font-style: normal; color: var(--ink-muted); margin-top: 12px;
}

/* Grid, nu flex cu min-width: pe telefon min-width forta pagina peste latimea ecranului. */
.definition { display: grid; gap: 0; margin: 0; }
.definition > div {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .definition > div { grid-template-columns: 190px minmax(0, 1fr); gap: 8px 16px; }
}
.definition > div:last-child { border-bottom: 0; }
.definition dt { font-weight: 600; color: var(--ink); min-width: 0; }
.definition dd { margin: 0; color: var(--ink-muted); min-width: 0; }

.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li + li { border-top: 1px solid var(--line); }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; text-decoration: none; color: var(--ink); font-weight: 500;
}
.link-list a:hover { color: var(--brand); }
.link-list span { color: var(--ink-faint); font-size: .875rem; }

/* ---------- 9. Articol ---------- */
.article { padding-block: clamp(32px, 5vw, 64px); }
.article__head { max-width: 68ch; margin: 0 auto 36px; }
.breadcrumb { font-size: .875rem; color: var(--ink-faint); margin-bottom: 16px; }
.breadcrumb a { color: var(--ink-muted); }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  color: var(--ink-faint); font-size: .9375rem; margin-top: 12px;
}
.article__body { max-width: 68ch; margin-inline: auto; }
.article__body img { border-radius: var(--r-md); margin: 28px auto; box-shadow: var(--shadow); }
.article__body figure { margin: 28px 0; }
.article__body figcaption { font-size: .875rem; color: var(--ink-faint); text-align: center; margin-top: 10px; }
.article__body h2 { margin-top: 1.6em; }
.article__body .wide { max-width: none; width: 100%; }

.tag {
  display: inline-block; background: var(--brand-soft); color: var(--brand-deep);
  font-size: .8125rem; font-weight: 600; padding: 4px 12px; border-radius: 999px;
}

/* ---------- 10. Galerie + lightbox ---------- */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery button {
  padding: 0; border: 1px solid var(--line); background: var(--surface-sunk);
  border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery button:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(12,17,32,.93); padding: 24px;
  align-items: center; justify-content: center;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox img { max-width: min(1100px, 100%); max-height: 88dvh; object-fit: contain; border-radius: var(--r-md); }
.lightbox__close {
  position: absolute; top: 16px; right: 16px; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* ---------- 11. Video, incarcare la cerere ---------- */
.video-embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-sunk); border: 1px solid var(--line);
}
.video-embed img, .video-embed iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-embed__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(22,36,79,.35); border: 0; cursor: pointer; width: 100%;
}
.video-embed__play span {
  width: 72px; height: 72px; border-radius: 50%; background: var(--gold-bright); color: var(--brand-deep);
  display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ---------- 12. Formular ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); width: 100%; min-height: 46px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field small { color: var(--ink-faint); font-size: .8125rem; }

/* ---------- 13. Subsol ---------- */
.site-footer { background: var(--brand-deep); color: #C3CCE2; padding-block: 56px 28px; }
.site-footer h3 { color: #fff; font-size: 1.0625rem; margin-bottom: 14px; }
.site-footer a { color: #C3CCE2; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .9375rem; }
/* Sigla e PNG transparent si are inel alb, deci sta direct pe bleumarin. Placuta
   alba pe care o cerea logoul vechi a disparut odata cu el. */
.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { height: 132px; width: auto; }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: .875rem; color: #93A0C0;
}

/* ---------- 14. Utilitare ---------- */
.stack > * + * { margin-top: 20px; }
.center { text-align: center; }
.muted { color: var(--ink-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

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

@media print {
  .site-header, .site-footer, .nav-toggle, .lightbox { display: none !important; }
  body { background: #fff; }
}

/* ---------- 15. Componente pentru structura ceruta de client ----------
   Adaugate pe 31 august 2026, odata cu meniul in unsprezece sectiuni. */

/* Container mai lat, folosit de antet, subsol si de benzile late. */
.container--larg { width: min(100% - 40px, 1280px); }

/* Firimituri de navigare, generate din meniu in build.firimituri(). */
.breadcrumb {
  font-size: .875rem; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  margin-bottom: 18px;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb__sep { opacity: .6; }
.hero .breadcrumb { color: #A9B6D4; }
.hero .breadcrumb a:hover { color: #fff; }
.hero .breadcrumb [aria-current="page"] { color: #D3D9E8; }

/* Prima pagina: identitatea la stanga, o propozitie in mijloc, actiunile la dreapta.
   Paragraful lung de dinainte spunea acelasi lucru ca sectiunea „Despre Liga” de mai
   jos, deci a plecat de aici: o banda nu are loc de doua ori aceeasi informatie. */
.hero--acasa .hero__identitate { flex: 0 0 auto; }
.hero--acasa h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.hero__deviza {
  font-family: var(--font-display);
  font-size: 1rem; color: var(--gold-bright); font-weight: 600;
  letter-spacing: .01em; margin: 3px 0 0;
}
.hero__deviza::before, .hero__deviza::after { content: "„"; }
.hero__deviza::after { content: "”"; }

/* Pagini interioare: firimiturile pe primul rand, apoi titlul si rezumatul alaturi.
   Titlul primeste latimea de care are nevoie, rezumatul umple restul randului. */
.hero--pagina .breadcrumb { margin-bottom: 7px; font-size: .8125rem; }
.hero--pagina .hero__inner { align-items: baseline; }
.hero--pagina h1 { font-size: clamp(1.375rem, 2.1vw, 1.6875rem); flex: 0 1 auto; }
.hero--pagina .hero__lead { flex: 1 1 19rem; }

/* Pe ecran ingust banda tot nu trece de 3cm. Ce nu incape pe un rand pleaca, in
   ordinea importantei: intai propozitia din mijlocul primei pagini (sub 1100px),
   apoi rezumatul paginilor si deviza (sub 760px). Rezumatul se regaseste oricum in
   primul paragraf al paginii, iar deviza in sigla. Titlul si butoanele raman. */
@media (max-width: 1100px) {
  .hero--acasa .hero__lead { display: none; }
}
@media (max-width: 900px) {
  .hero--pagina .hero__lead { display: none; }
}
@media (max-width: 380px) {
  .hero--pagina h1 { font-size: 1.25rem; }
}
@media (max-width: 760px) {
  .hero { padding-block: 12px; }
  .hero__inner { gap: 8px 16px; }
  .hero__lead, .hero--acasa .hero__deviza { display: none; }
  .hero--pagina .breadcrumb { margin-bottom: 4px; }
  .hero--acasa .hero__actions { margin-left: 0; gap: 8px; }
  .hero--acasa .hero__actions .btn { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
}

/* Banda de elemente-cheie: 1997, ISTORIE, CULTURA, COMUNITATE... Pe desktop e un
   sir cu sageti intre verigi, pe telefon se rupe pe randuri fara sa taie nimic. */
.parcurs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 12px; list-style: none; margin: 0; padding: 0;
}
.parcurs li { display: inline-flex; align-items: center; gap: 12px; }
.parcurs li:not(:last-child)::after {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: .45;
}
.parcurs__veriga {
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); color: var(--brand-deep);
  text-decoration: none;
}
a.parcurs__veriga:hover { border-color: var(--brand); background: var(--brand-soft); }
.parcurs__veriga--tare { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.banda-parcurs { background: var(--surface-sunk); padding-block: 28px; border-block: 1px solid var(--line); }

/* Harta filialelor. Nu deseneaza granite, fiindca n-avem un fond cartografic pe
   care sa ne bazam; deseneaza in schimb pozitiile reale, proiectate din latitudine
   si longitudine, peste o retea de meridiane si paralele. Ce spune e adevarat:
   unde stau filialele una fata de alta si ce le leaga. */
.harta {
  background: linear-gradient(160deg, #1B2C5C 0%, var(--brand-deep) 62%, #101B3C 100%);
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  border: 1px solid rgba(201,162,39,.28);
}
.harta__svg { display: block; width: 100%; height: auto; }
.harta__nod circle { transition: r .2s ease, opacity .2s ease; }
.harta__nod:hover circle.pin, .harta__nod:focus-visible circle.pin { r: 11; }
.harta__nod text { font-family: var(--font-body); }
.harta__legenda {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  padding: 18px 24px 22px; color: #C3CCE2; font-size: .875rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.harta__legenda b { color: #fff; font-weight: 600; }

/* Cronologie verticala, folosita de istoria Ligii si de arhiva pe perioade. */
.cronologie { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.cronologie::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--line));
}
.cronologie > li { position: relative; padding-bottom: 32px; }
.cronologie > li:last-child { padding-bottom: 0; }
.cronologie > li::before {
  content: ""; position: absolute; left: -28px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--gold-bright);
}
.cronologie__an {
  display: block; font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 700; color: var(--brand-deep); line-height: 1.2; margin-bottom: 4px;
}
.cronologie p { margin: 0; color: var(--ink-muted); }

/* Cardurile de sectiune din paginile-hub. */
.hub { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hub__card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--gold-bright); border-radius: var(--r-md);
  padding: 22px 24px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hub__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-left-color: var(--brand); }
.hub__card h3 { margin: 0; font-size: 1.125rem; color: var(--brand-deep); }
.hub__card p { margin: 0; color: var(--ink-muted); font-size: .9375rem; }
.hub__card span {
  margin-top: auto; padding-top: 12px;
  font-size: .875rem; font-weight: 600; color: var(--brand);
}

/* Fisa de persoana: portret patrat sus, nume, rol, o fraza. */
.persoane { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.persoana {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.persoana:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.persoana__foto { position: relative; aspect-ratio: 1 / 1; background: var(--brand-soft); }
.persoana__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.persoana__foto--marca img { object-fit: contain; padding: 20px; }
/* Fara fotografie nu punem sigla de zece ori: un monogram pe fond bleumarin
   spune acelasi lucru (nu avem poza) fara sa para pagina neterminata. */
.persoana__foto--initiale {
  display: grid; place-items: center;
  background: linear-gradient(150deg, #1B2C5C, var(--brand-deep));
}
.persoana__foto--initiale span {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 600;
  letter-spacing: .06em; color: var(--gold-bright);
  border-bottom: 2px solid rgba(201,162,39,.45); padding-bottom: 6px;
}
.persoana__corp { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.persoana__nume { margin: 0; font-size: 1.0625rem; line-height: 1.25; }
.persoana__nume a { color: var(--ink); text-decoration: none; }
.persoana__nume a::after { content: ""; position: absolute; inset: 0; }
.persoana:hover .persoana__nume a { color: var(--brand); }
.persoana__rol { margin: 0; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.persoana__nota { margin: 6px 0 0; font-size: .875rem; color: var(--ink-muted); }

/* Lista de fapte scurte, folosita in paginile despre Gorj. */
.fapte { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; padding: 0; list-style: none; }
.fapte li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px;
}
.fapte b { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--brand-deep); }
.fapte span { font-size: .875rem; color: var(--ink-muted); }

/* Navigare interna, pentru paginile-hub cu ancore. */
.ancore { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ancore a {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--brand-deep); text-decoration: none; font-size: .875rem; font-weight: 500;
}
.ancore a:hover { border-color: var(--brand); background: var(--brand-soft); }

/* Banda de chemare la actiune, pe fundal inchis. */
.banda-cta {
  background: linear-gradient(135deg, var(--brand-deep), #1E2F63);
  color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 52px);
  display: grid; gap: 24px; align-items: center;
}
@media (min-width: 860px) { .banda-cta { grid-template-columns: 1.4fr auto; } }
.banda-cta h2 { color: #fff; margin: 0 0 8px; }
.banda-cta p { color: #C3CCE2; margin: 0; max-width: 52ch; }
.banda-cta__actiuni { display: flex; flex-wrap: wrap; gap: 12px; }

/* Legenda din lightbox: numele fisierului nu ajuta pe nimeni, alt-ul da. */
.lightbox__legenda {
  position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center; color: #E5E9F4; font-size: .875rem;
  margin: 0; padding: 0 24px;
}
.lightbox__legenda:empty { display: none; }

/* Galeria grupata pe ani. */
.galerie-an + .galerie-an { margin-top: 44px; }
.galerie-an__titlu {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.galerie-an__titlu h2 { margin: 0; }
.galerie-an__titlu span { font-size: .875rem; color: var(--ink-faint); }

/* Note editoriale: ce asteptam de la client. Se vede clar ca e o nota, nu continut. */
.nota-redactie {
  border: 1px dashed #C9BFA3; background: var(--gold-soft);
  border-radius: var(--r-md); padding: 18px 22px; color: #5C4E28;
  font-size: .9375rem;
}
.nota-redactie strong { color: #4A3D1C; }
.nota-redactie :last-child { margin-bottom: 0; }