/* Structura comuna tuturor temelor. Culorile si tipografia vin din tema.css.
   Regulile de accesibilitate de aici sunt cerute de EN 301 549 / WCAG 2.1 si NU
   se suprascriu din tema.

   CE INSEAMNA "MODERN" AICI
   Publicul e format din persoane varstnice si familiile lor, pe dispozitive
   adesea vechi. Deci am luat din practica actuala doar ce nu strica nimic daca
   browserul e invechit:
     - tipografie fluida cu clamp(), sustinuta din 2020
     - mod intunecat prin prefers-color-scheme (si sistemul de design al statului
       francez il are, deci nu e moft)
     - suprafete moi: umbre discrete si colturi rotunjite in loc de chenare de 1px
     - scara de spatiere si de raze, in loc de valori nimerite pe ghicite
     - antet lipicios, ca navigatia sa fie mereu la indemana
     - prefers-reduced-motion respectat
   NU am luat: fonturi subtiri, animatii, carusele, meniu doar sub hamburger,
   contraste mici, efecte care cer un browser din ultimul an. */

:root {
  color-scheme: light dark;

  /* --- scara de spatiere --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  /* --- raze si umbre: suprafete moi, nu chenare taioase --- */
  --raza: 10px;
  --raza-mica: 6px;
  --umbra-1: 0 1px 2px rgba(16, 12, 8, .06), 0 1px 3px rgba(16, 12, 8, .05);
  --umbra-2: 0 2px 4px rgba(16, 12, 8, .06), 0 6px 16px rgba(16, 12, 8, .08);

  /* --- tipografie fluida: creste cu ecranul, fara salturi la praguri --- */
  --t-corp:  clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);
  --t-mare:  clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --t-h3:    clamp(1.25rem, 1.15rem + .45vw, 1.4375rem);
  --t-h2:    clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --t-h1:    clamp(1.875rem, 1.5rem + 1.7vw, 2.875rem);

  --latime-container: 72rem;
  --latime-text: 42rem;

  /* Temele redefinesc doar variabilele astea, plus perechea lor pentru mod intunecat. */
  --c-fundal: #ffffff;
  --c-text: #1b1b1b;
  --c-text-slab: #4a4a4a;
  --c-accent: #14508c;
  --c-accent-text: #ffffff;
  /* Textul de navigatie are variabila lui, separata de textul de pe butoane.
     In mod intunecat accentul devine deschis, deci butonul cere text INCHIS,
     dar bara de navigatie e inchisa si cere text DESCHIS. Cu o singura
     variabila, navigatia ar fi fost invizibila pe intuneric. */
  --c-nav-text: var(--c-accent-text);
  --c-linie: #d6d6d6;
  --c-fundal-slab: #f4f4f2;
  --c-suprafata: #ffffff;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titlu: var(--font-text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--c-fundal);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--t-corp);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--latime-container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* --- Accesibilitate --- */
.sari-la-continut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-accent); color: var(--c-accent-text);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--raza-mica) 0;
}
.sari-la-continut:focus { left: 0; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--raza-mica);
}

a { color: var(--c-accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-titlu);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-block: 1.4em .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); margin-top: .3em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; }
p, li { text-wrap: pretty; }

/* --- Antetul obligatoriu cu siglele.
       Ghidul MIPE cere sa fie vizibile fara derulare, deci sta primul. --- */
/* Banda de antet ramane DESCHISA si in mod intunecat. Ghidul MIPE prevede exact
   asta: "in cazul in care fundalul colorat nu poate fi evitat, emblema UE insotita
   obligatoriu de declaratia de finantare se va amplasa in interiorul unui
   dreptunghi". Altfel siglele apar ca doua petice albe pe pagina intunecata. */
.antet-ue {
  background: #ffffff;
  border-bottom: 1px solid var(--c-linie);
}
.antet-ue__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3);
}
/* Proportiile din antetul OFICIAL: emblema UE 8,33 x 1,75 cm, stema 2,75 x 2,70 cm.
   Stema e mai INALTA decat emblema, desi emblema e mult mai lata. */
.antet-ue__sigla-ue { height: clamp(2.1rem, 1.6rem + 1.4vw, 2.75rem); width: auto; }
.antet-ue__sigla-guvern { height: clamp(3.24rem, 2.5rem + 2.1vw, 4.24rem); width: auto; }

.fisa-proiect {
  background: var(--c-fundal-slab);
  border-bottom: 1px solid var(--c-linie);
  font-size: .8125rem; color: var(--c-text-slab);
  padding-block: var(--sp-2);
}
.fisa-proiect__linie { margin: .15rem 0; }

/* --- Navigatie lipicioasa --- */
.navigatie {
  background: var(--c-accent);
  position: sticky; top: 0; z-index: 20;
  box-shadow: var(--umbra-1);
}
.navigatie .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
}
.navigatie__marca {
  color: var(--c-nav-text); font-weight: 700; text-decoration: none;
  padding-block: var(--sp-3); margin-right: auto; letter-spacing: -.01em;
}
.navigatie__lista {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  list-style: none; margin: 0; padding: 0;
}
.navigatie__lista a {
  display: block; color: var(--c-nav-text); text-decoration: none;
  padding: var(--sp-3) var(--sp-4); min-height: 44px;   /* WCAG 2.5.5 */
  border-radius: var(--raza-mica);
  transition: background-color .15s ease;
}
.navigatie__lista a:hover { background: rgba(255, 255, 255, .16); text-decoration: underline; }
.navigatie__lista a[aria-current="page"] {
  background: rgba(255, 255, 255, .2);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px;
}

main { padding-block: var(--sp-6) var(--sp-7); }

/* --- Antet de pagina (hero) --- */
.hero { padding-block: var(--sp-6) var(--sp-5); }
.hero h1 { margin-top: 0; max-width: 20ch; }
.hero__introducere {
  font-size: var(--t-mare); color: var(--c-text-slab);
  max-width: var(--latime-text); margin-block: 0 var(--sp-5);
}
.hero__actiuni { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.buton {
  display: inline-block; padding: var(--sp-3) var(--sp-5); min-height: 44px;
  background: var(--c-accent); color: var(--c-accent-text);
  border: 2px solid var(--c-accent); border-radius: 999px;
  text-decoration: none; font-weight: 600;
  transition: transform .12s ease, box-shadow .15s ease;
}
.buton:hover { box-shadow: var(--umbra-2); transform: translateY(-1px); text-decoration: underline; }
.buton--secundar { background: transparent; color: var(--c-accent); }

/* --- Carduri --- */
.carduri {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-block: var(--sp-5);
  padding: 0; list-style: none;
}
.card {
  background: var(--c-suprafata);
  border: 1px solid var(--c-linie);
  border-radius: var(--raza);
  padding: var(--sp-5);
  box-shadow: var(--umbra-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--umbra-2); transform: translateY(-2px); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card__numar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  background: var(--c-accent); color: var(--c-accent-text);
  font-weight: 700; margin-bottom: var(--sp-3);
}

/* --- Subsol --- */
.subsol {
  background: var(--c-fundal-slab);
  border-top: 4px solid var(--c-accent);
  margin-top: var(--sp-7);
  padding-block: var(--sp-6);
  font-size: 1rem;
}
.subsol h2 { font-size: 1.125rem; margin-top: 0; }
.subsol__portal {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-suprafata);
  border-left: 5px solid var(--c-accent);
  border-radius: 0 var(--raza) var(--raza) 0;
  margin-bottom: var(--sp-5);
  box-shadow: var(--umbra-1);
}
.subsol__legale {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
}
.subsol__disclaimer {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-linie);
  font-size: .875rem; color: var(--c-text-slab);
}

/* --- Continut --- */
.rezumat {
  font-size: var(--t-mare); color: var(--c-text-slab);
  max-width: var(--latime-text);
}
main p, main li { max-width: var(--latime-text); }
main .date-proiect p, .card p { max-width: none; }

.date-proiect {
  border-collapse: separate; border-spacing: 0;
  width: 100%; margin-block: var(--sp-5);
  border: 1px solid var(--c-linie); border-radius: var(--raza);
  overflow: hidden; box-shadow: var(--umbra-1);
  background: var(--c-suprafata);
}
.date-proiect th, .date-proiect td {
  text-align: left; vertical-align: top;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-linie);
}
.date-proiect tr:last-child th, .date-proiect tr:last-child td { border-bottom: none; }
.date-proiect th { width: 34%; font-weight: 600; }

.lista-anunturi { list-style: none; padding: 0; }
.lista-anunturi > li {
  background: var(--c-suprafata);
  border: 1px solid var(--c-linie); border-radius: var(--raza);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
  box-shadow: var(--umbra-1);
}
.lista-anunturi h2, .lista-anunturi h3 { margin: 0 0 .25rem; }
.anunt-data { font-size: .9375rem; color: var(--c-text-slab); }

/* Camp fara sursa. Se scrie ce se intampla cu el, nu o eticheta tehnica: cine
   citeste pagina nu stie ce inseamna marcajul nostru intern si nici nu trebuie sa afle.
   Culorile sunt calculate, nu alese din ochi: 7,27:1 la lumina, 9,48:1 la intuneric,
   deci AAA in ambele moduri, ca tot restul temei. Publicul e varstnic. */
.de-completat {
  background: #fff3cd; border: 1px dashed #856404; color: #6b4a05;
  padding: .1rem .45rem; border-radius: var(--raza-mica); font-size: .92em;
}

/* Banda de versiune de lucru. Sta inaintea insemnelor, deci e primul lucru citit.
   Apare doar la build-ul cu --beta si dispare singura la varianta finala. */
.banda-beta {
  background: #fef3c7; color: #713f12;
  border-bottom: 3px solid #b45309;
  padding: .7rem 0; font-size: 1rem; line-height: 1.5;
}
.banda-beta strong { color: #713f12; }

@media (prefers-color-scheme: dark) {
  .de-completat { background: #3b2f10; border-color: #a98430; color: #f5d98a; }
  .banda-beta { background: #3a2c07; color: #fde68a; border-bottom-color: #a16207; }
  .banda-beta strong { color: #fde68a; }
}

@media (max-width: 40rem) {
  .antet-ue__interior { flex-wrap: wrap; }
  .navigatie__marca { margin-right: 0; width: 100%; padding-bottom: var(--sp-1); }
  .navigatie { position: static; }   /* pe ecran mic, antetul lipicios fura inaltime */
  .date-proiect th, .date-proiect td { display: block; width: 100%; }
  .date-proiect th { border-bottom: none; padding-bottom: 0; }
  .buton { width: 100%; text-align: center; }
}

@media print {
  .navigatie, .sari-la-continut, .hero__actiuni { display: none; }
  .card, .date-proiect, .lista-anunturi > li { box-shadow: none; }
}

/* --- Galerie --------------------------------------------------------------
   Miniaturile sunt generate la build (max 640px) si servite cu lazy loading:
   o pagina de galerie nu are voie sa traga 20 de fotografii de 4 MB pe o
   conexiune de la tara. Fiecare imagine are text alternativ obligatoriu. */
.galerie {
  list-style: none; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.galerie > li {
  background: var(--c-suprafata);
  border: 1px solid var(--c-linie); border-radius: var(--raza);
  overflow: hidden; box-shadow: var(--umbra-1);
}
.galerie a { display: block; line-height: 0; }
.galerie a:focus-visible { outline-offset: -3px; }
.galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .25s ease;
}
.galerie a:hover img { transform: scale(1.03); }
.galerie__descriere {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  font-size: .9375rem; line-height: 1.5; max-width: none;
}
.galerie__descriere .anunt-data { display: block; margin-top: .2rem; }

/* --- Grila de stiri de pe prima pagina --- */
.carduri--stiri { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.carduri--stiri h3 { margin: .1rem 0 .4rem; }
.carduri--stiri h3 a { text-decoration: none; }
.carduri--stiri h3 a:hover { text-decoration: underline; }
.carduri--stiri .anunt-data { margin: 0; }

/* --- Atentionare, pentru termene de achizitie --- */
.atentionare {
  background: var(--c-fundal-slab);
  border-left: 5px solid var(--c-accent);
  border-radius: 0 var(--raza) var(--raza) 0;
  padding: var(--sp-3) var(--sp-4);
  max-width: none;
}

/* ===================================================================
   PRIMA PAGINA: erou, banda de cifre, carduri cu semn.
   Adaugat pe 16.09.2026. Motivul, spus pe fata: varianta veche arata a
   document, nu a sit. Tot ce e aici e CSS simplu, fara JavaScript si fara
   dependente: trebuie sa mearga la fel si in 2030, cand contractele inca
   curg, si pe telefonul de acum sase ani al unui om de 75 de ani.
   =================================================================== */

.pagina-lata { display: block; }
.pagina-lata > .container { padding-top: var(--sp-6); }

/* --- Eroul. Banda pana in marginea ecranului, degrade intre doua tonuri ale
       temei. Textul e alb pe inchis in ambele moduri, deci contrastul nu depinde
       de setarea de sistem a cititorului. --- */
.erou {
  background: linear-gradient(135deg, var(--c-hero-1) 0%, var(--c-hero-2) 100%);
  color: #fff;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}
/* Forma discreta in coltul din dreapta. Pur decorativa, deci nu se anunta la
   cititorul de ecran si nu poarta informatie. */
.erou::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -40%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}
.erou__interior { position: relative; z-index: 1; max-width: 46rem; }
.erou h1 {
  color: #fff;
  margin: 0 0 var(--sp-4);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.erou__eticheta {
  margin: 0 0 var(--sp-3);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.erou__introducere {
  margin: 0 0 var(--sp-5);
  font-size: var(--t-mare);
  line-height: 1.6;
  color: rgba(255, 255, 255, .95);
  max-width: 38rem;
}
.erou__actiuni { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.erou .buton {
  background: #fff;
  color: var(--c-hero-1);
  border: 2px solid #fff;
}
.erou .buton--secundar {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .7);
}
.erou .buton:hover { background: rgba(255, 255, 255, .9); }
.erou .buton--secundar:hover { background: rgba(255, 255, 255, .14); }

/* --- Banda de cifre. Doar ce stim; ce lipseste nu apare deloc. --- */
.repere { background: var(--c-fundal-slab); border-bottom: 1px solid var(--c-linie); }
.repere__interior {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  padding: var(--sp-5) 0;
}
.reper { display: flex; flex-direction: column; gap: .15rem; }
.reper__cifra {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-accent);
}
.reper__eticheta { font-size: 1rem; color: var(--c-text-slab); }

/* --- Cardurile. Suprafata ridicata, semn colorat sus, ridicare discreta la
       trecerea cu mouse-ul. Ridicarea e dezactivata pentru cine a cerut mai
       putina miscare. --- */
.card__semn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--raza);
  background: var(--c-fundal-slab);
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}
.carduri > .card {
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
  .carduri > .card:hover { transform: translateY(-3px); box-shadow: var(--umbra-2); }
}
@media (prefers-reduced-motion: reduce) {
  .carduri > .card { transition: none; }
  .carduri > .card:hover { transform: none; }
}

.date-proiect__trimitere { margin-top: var(--sp-4); }

/* --- Banda de versiune de lucru, subtire. Un rand, nu un paragraf: pe telefon
       varianta lunga impingea insemnele obligatorii sub linia de pliere, iar
       ghidul le cere vizibile fara derulare. --- */
.banda-beta {
  padding: .45rem 0;
  font-size: .9375rem;
  line-height: 1.45;
  border-bottom-width: 2px;
}

@media (max-width: 40rem) {
  .repere__interior { gap: var(--sp-4) var(--sp-6); }
  .erou__actiuni .buton { width: 100%; }
}

/* ===================================================================
   CELE CINCI STILURI DE ASEZARE
   Adaugate pe 16.09.2026, dupa observatia lui Zamfir ca siturile difera
   doar prin culoare si ca asta nu e destul.

   Tema da CULOAREA. Stilul da TIPOGRAFIA, forma cardurilor, ritmul
   sectiunilor si asezarea eroului. Sunt axe independente: doua situri cu
   aceeasi tema si stiluri diferite nu seamana intre ele.

   De ce fonturi de sistem si nu de la Google: siturile sunt ale unor
   institutii publice, iar o cerere catre fonts.googleapis.com la fiecare
   vizita inseamna date trimise unui tert fara temei. In plus, contractele
   tin pana in 2030 si un font gazduit de altcineva poate sa dispara.
   Toate familiile de mai jos exista din fabrica pe Windows si macOS, cu
   rezerva generica la capat.
   =================================================================== */

/* --- COMPACT: oras, ritm strans, erou centrat. Rovinari. --- */
.stil-compact { --font-titlu: "Segoe UI", system-ui, sans-serif; }
.stil-compact .erou { padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) 0; }
.stil-compact .erou__interior { max-width: 52rem; margin: 0 auto; text-align: center; }
.stil-compact .erou__introducere { margin-left: auto; margin-right: auto; }
.stil-compact .erou__actiuni { justify-content: center; }
.stil-compact .repere__interior { justify-content: space-around; text-align: center; }
.stil-compact .reper { align-items: center; }
.stil-compact h1, .stil-compact h2 { letter-spacing: -.02em; }
.stil-compact .card { border-radius: var(--raza-mica); }

/* --- EDITORIAL: sate pe munte, aer mult, titluri cu serife. Tismana. --- */
.stil-editorial {
  --font-titlu: Constantia, "Palatino Linotype", Georgia, "Times New Roman", serif;
}
.stil-editorial h1, .stil-editorial h2, .stil-editorial h3 { letter-spacing: -.005em; }
.stil-editorial .erou { padding: clamp(3rem, 2rem + 5vw, 6.5rem) 0; }
.stil-editorial .erou__interior { max-width: 40rem; }
.stil-editorial .erou h1 { font-size: clamp(2rem, 1.5rem + 2.3vw, 3.5rem); line-height: 1.12; }
.stil-editorial .pagina-lata > .container { padding-top: var(--sp-8); }
.stil-editorial h2 {
  border-bottom: 1px solid var(--c-linie);
  padding-bottom: var(--sp-3);
  margin-top: var(--sp-8);
}
.stil-editorial .card { box-shadow: none; border: 1px solid var(--c-linie); }

/* --- GRAFIC: linii ferme, colturi drepte, bara de accent la titluri.
       Pestisani, satul lui Brancusi: piatra taiata, nu rotunjita. --- */
.stil-grafic { --font-titlu: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
.stil-grafic .card,
.stil-grafic .buton,
.stil-grafic .card__semn { border-radius: 0; }
.stil-grafic .erou { padding: clamp(2.5rem, 1.6rem + 4vw, 5rem) 0; }
.stil-grafic .erou::after { display: none; }
.stil-grafic .erou__interior { border-left: 5px solid rgba(255, 255, 255, .55); padding-left: var(--sp-5); }
.stil-grafic h2 {
  position: relative;
  padding-top: var(--sp-4);
  margin-top: var(--sp-7);
}
.stil-grafic h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3.5rem; height: 4px;
  background: var(--c-accent);
}
.stil-grafic .card { border: 1px solid var(--c-linie); box-shadow: none; }
.stil-grafic .card__semn { background: var(--c-accent); color: var(--c-accent-text); }

/* --- INSTITUTIONAL: asezat, sectiuni incadrate, litera lata si lizibila.
       Dragotesti: serviciul e un drept, iar pagina arata ca o institutie. --- */
.stil-institutional {
  --font-text: Verdana, "Segoe UI", system-ui, sans-serif;
  --font-titlu: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --raza: 4px;
  --raza-mica: 3px;
}
.stil-institutional .erou { padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) 0; }
.stil-institutional .erou::after { display: none; }
.stil-institutional .erou h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.stil-institutional .repere { border-top: 3px solid var(--c-accent); }
.stil-institutional .card {
  border: 1px solid var(--c-linie);
  border-top: 3px solid var(--c-accent);
  box-shadow: none;
}
.stil-institutional .date-proiect { border: 1px solid var(--c-linie); }
.stil-institutional h2 { margin-top: var(--sp-7); }

/* --- ROTUND: primitor, colturi moi, litera umanista. Barbatesti. --- */
.stil-rotund {
  --font-text: Corbel, Candara, "Segoe UI", system-ui, sans-serif;
  --font-titlu: Candara, Corbel, "Segoe UI", system-ui, sans-serif;
  --raza: 20px;
  --raza-mica: 12px;
}
.stil-rotund .erou { padding: clamp(2.75rem, 1.8rem + 4vw, 5rem) 0; }
.stil-rotund .erou__interior { max-width: 44rem; }
.stil-rotund .buton { border-radius: 999px; padding-left: var(--sp-6); padding-right: var(--sp-6); }
.stil-rotund .card { box-shadow: var(--umbra-2); border: none; }
.stil-rotund .card__semn { border-radius: 50%; width: 3.25rem; height: 3.25rem; }
.stil-rotund .repere__interior { gap: var(--sp-5) var(--sp-7); }
.stil-rotund .reper__cifra { font-weight: 600; }

/* --- Erou cu fotografie. Fotografia sta SUB un voal in culorile temei, nu sub un
       negru oarecare: asa ramane si identitatea sitului, si contrastul textului.
       Voalul e la 88-92%, adica imaginea se ghiceste, nu se vede in detaliu. Pare
       mult, dar textul alb peste o fotografie luminoasa devine ilizibil exact pentru
       cine are nevoie de contrast, iar publicul are peste 65 de ani. Fotografia e
       decorativa; nimic din informatia paginii nu depinde de ea. --- */
.erou--cu-imagine {
  background-image:
    /* strat 1: intunecare in partea cu text, ca sa nu depinda lizibilitatea de
       cat de luminoasa e fotografia in acea zona */
    /* Valorile NU sunt alese din ochi. Le-am calibrat pe 16.09.2026 masurand cel mai
       deschis pixel din zona in care sta textul, pe fiecare fotografie in parte, si
       calculand contrastul cu alb. La .45/.12 iesea 4,46:1, adica sub prag. La .70/.50
       iese 9,37:1 la Barbatesti si 9,12:1 la Dragotesti, deci AAA, si e cea mai slaba
       intunecare care trece: fotografia ramane cat se poate de vizibila.
       Verificarea se reia cu scripts/verifica_erou.py la fiecare fotografie noua. */
    linear-gradient(to right, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .50) 62%, rgba(0, 0, 0, .25) 100%),
    /* strat 2: voalul in culorile temei */
    linear-gradient(135deg,
      color-mix(in srgb, var(--c-hero-1) 82%, transparent) 0%,
      color-mix(in srgb, var(--c-hero-2) 68%, transparent) 100%),
    /* ATENTIE la calea asta. Prima varianta trecea adresa printr-o variabila pusa
       in `style=` pe element, si iesea `static/static/erou.jpg`: o adresa relativa
       dintr-o proprietate personalizata se rezolva fata de FISIERUL CSS care o
       foloseste, nu fata de pagina. Aici scriem direct, iar baza.css sta mereu in
       acelasi folder cu erou.jpg, la fiecare sit in parte. */
    url("erou.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
/* Rezerva pentru browsere fara color-mix (inainte de 2023): voal opac, deci fara
   fotografie, dar cu text lizibil. Mai bine fara poza decat cu text ilizibil. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .erou--cu-imagine {
    background-image: linear-gradient(135deg, var(--c-hero-1) 0%, var(--c-hero-2) 100%);
  }
}
.erou--cu-imagine::after { display: none; }
.erou__credit {
  position: relative;
  z-index: 1;
  margin: var(--sp-5) 0 0;
  padding: 0 var(--sp-4);
  max-width: var(--latime-container);
  margin-inline: auto;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .72);
}
.stil-compact .erou__credit { text-align: center; }