/* CSEI — temă peste Bootstrap 5.3 (servit local). Accent pe lizibilitate. */
/* culori implicite; suprascrise din Setări → Aspect */
:root { --brand: #1d5fa8; --brand-dark: #174f8d; --brand-darker: #134680; --brand-soft: #e8f0fa; --brand-rgb: 29, 95, 168; --brand-dark-rgb: 23, 79, 141; --banner-text: #fff; --banner-shadow: 0 .125rem .5rem rgba(0, 0, 0, .55); }
:root {
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-darker);
  --bs-link-hover-color-rgb: 19, 70, 128;
  --bs-body-color: #1b2533;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.7;
  --bs-body-bg: #f6f8fb;
  --bs-border-color: #e1e6ee;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --csei-ink-soft: #46546a;
}
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-darker); --bs-btn-active-border-color: var(--brand-darker); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-dark); }
.text-primary { color: var(--brand) !important; }
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-color: var(--brand); }

body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid #e8a33d !important; outline-offset: 2px; }
main:focus { outline: none; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h5 { color: #121b27; letter-spacing: -.01em; line-height: 1.3; }
.page-title { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; }
.lead { color: var(--csei-ink-soft); }
.letter-wide { letter-spacing: .08em; }

/* ---------------- antet */
.site-header { background: #fff; border-bottom: 1px solid var(--bs-border-color); }
.brand { color: inherit; }
/* +30% față de 1.08rem / 0.875rem / 42px, cerut pentru lizibilitate. */
.brand-name { font-size: 1.4rem; color: #121b27; }
.brand-tagline { font-size: 1.14rem; }

/* Telefon: mărimile dinainte și numai localitatea pe rândul doi.
   Cu +30% și subtitlul întreg, antetul ajungea la 192px pe un ecran de 375px —
   aproape un sfert din înălțime, permanent, fiindcă antetul e lipicios. */
@media (max-width: 575.98px) {
  .brand-name { font-size: 1.08rem; }
  .brand-tagline { font-size: .875rem; }
  /* Doua clase: regula generala .brand-logo e scrisa mai jos in fisier
     si, la specificitate egala, ar castiga ea. */
  .brand .brand-logo { height: 42px; }
  .brand-subtitlu { display: none; }
}
.search-input { width: 16rem; background: #f3f6fa; }
.search-input:focus { background: #fff; }
/* Navigația stă pe rândul antetului, lângă logo; submeniurile se deschid în cascadă. */
.header-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: .5rem; padding-bottom: .5rem; }
.brand { min-width: 0; flex: 0 1 auto; }
.header-search { order: 3; margin-left: auto; }
.nav-burger { order: 2; margin-left: auto; }
.main-nav { order: 4; flex: 1 0 100%; }
/* Bara de meniu colorată: fundalul e nuanța închisă a culorii principale din Setări, aleasă
   ca textul alb să treacă de 7:1 (AAA) indiferent ce culoare pune școala. Rândul cu sigla
   rămâne alb, fiindcă sigla are fundal alb și ar apărea ca un pătrat pe bandă colorată. */
.main-nav { background: var(--brand-dark); }
.main-nav .menu-link, .main-nav .menu-toggle { color: #fff; }
.main-nav .menu-link:hover, .main-nav .menu-link:focus-visible, .main-nav .menu-link.active { color: #fff; }
.main-menu { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.menu-item { position: relative; }
.menu-row { display: flex; align-items: center; }
.menu-link { display: inline-flex; align-items: center; gap: .3rem; flex: 1 1 auto; background: none; border: 0;
  color: #1b2533; font-weight: 500; font-size: .98rem; text-align: left; text-decoration: none; padding: .55rem .6rem; border-radius: .5rem; }
.menu-link:hover, .menu-link:focus-visible { color: var(--brand-darker); }
.menu-link.active { color: var(--brand-darker); }
.caret { display: inline-block; width: .4em; height: .4em; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); margin-left: .15em; margin-bottom: .2em; opacity: .6; }
.menu-toggle { background: none; border: 0; color: inherit; padding: .55rem .5rem; border-radius: .5rem; }
.menu-toggle-caret { flex: 0 0 auto; }
.submenu { list-style: none; margin: 0; padding: 0; }

@media (min-width: 992px) {
  .header-row { flex-wrap: wrap; }
  /* Meniul primește un rând întreg: cele 6 rubrici cer mai mult decât rămâne lângă logo,
     iar cerința e să stea pe un singur rând. Fontul se strânge puțin pe ecrane înguste,
     ca rubricile să nu se rupă pe al doilea rând înainte de pragul mobil. */
  .main-nav { order: 4; flex: 0 0 100%; min-width: 0; }
  .header-search { order: 3; margin-left: auto; flex: 0 1 auto; }
  .search-input { width: 12rem; }
  .main-menu { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
  .main-menu > .menu-item > .menu-row > .menu-link,
  .main-menu > .menu-item > .menu-row > .menu-toggle {
    white-space: nowrap; font-size: clamp(.8rem, .62rem + .42vw, .98rem); padding-left: .45rem; padding-right: .45rem; }
  .menu-item > .submenu { position: absolute; z-index: 1030; display: none; min-width: 17rem; max-width: 22rem;
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: .9rem; padding: .4rem;
    box-shadow: 0 .75rem 2rem rgba(18, 27, 39, .14); }
  /* nivel 0: sub element; niveluri următoare: lateral, în cascadă */
  .main-menu > .menu-item > .submenu { top: 100%; left: 0; }
  .submenu .menu-item > .submenu { top: -.4rem; left: 100%; }
  .submenu .menu-item.flip > .submenu { left: auto; right: 100%; }
  .main-menu > .menu-item.flip > .submenu { left: auto; right: 0; }
  /* Ultimele două rubrici stau lipite de marginea dreaptă: submeniul lor se aliniază la
     dreapta direct din CSS, ca să nu apară o bară orizontală în intervalul dintre afișare
     și momentul în care JS-ul calculează direcția. */
  .main-menu > .menu-item:nth-last-child(-n+2) > .submenu { left: auto; right: 0; }
  .menu-item.has-sub:hover > .submenu,
  .menu-item.has-sub:focus-within > .submenu,
  .menu-item.has-sub.open > .submenu { display: block; }
  .submenu .menu-link { font-weight: 400; font-size: .95rem; padding: .4rem .6rem; }
  /* panourile flotante sunt albe: acolo textul redevine închis */
  .submenu .menu-link, .submenu .menu-toggle { color: #1b2533; }
  .submenu .menu-link:hover, .submenu .menu-link:focus-visible, .submenu .menu-link.active { color: var(--brand-darker); }
  .main-menu > .menu-item > .menu-row:hover, .main-menu > .menu-item > .menu-row:focus-within {
    background: rgba(255, 255, 255, .14); border-radius: .4rem; }
  /* în cascadă săgeata arată direcția de deschidere */
  .submenu .caret { transform: rotate(-45deg); margin-bottom: 0; }
  .submenu .menu-item.flip > .menu-row .caret { transform: rotate(135deg); }
  .submenu .menu-row:hover, .submenu .menu-row:focus-within { background: #eef3f9; border-radius: .5rem; }
  .submenu .menu-link.active { background: var(--brand-soft); border-radius: .5rem; }
  .main-menu > .menu-item > .menu-row > .menu-link.active { box-shadow: inset 0 -3px 0 #fff; border-radius: .5rem .5rem 0 0; }
  .main-menu > .menu-item > .menu-row { padding: .1rem 0; }
}

@media (max-width: 991.98px) {
  .brand { flex: 1 1 60%; }
  .nav-burger { flex: 0 0 auto; }
  .main-nav { display: none; }
  .main-nav.open { display: block; max-height: calc(100vh - 6rem); overflow-y: auto; padding-bottom: .5rem; }
  .menu-item > .submenu { display: none; margin: 0 0 .25rem .75rem; padding-left: .75rem; border-left: 2px solid rgba(255, 255, 255, .3); }
  .menu-item.open > .submenu { display: block; }
  .menu-link { white-space: normal; }
  /* pe acordeon săgeata rubricii stă tot în dreapta, ca la elementele cu link */
  .menu-link.menu-toggle { justify-content: space-between; }
  .menu-item.open > .menu-row > .menu-toggle .caret { transform: rotate(-135deg); margin-bottom: -.1em; }
}

.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: ""; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }

/* ---------------- carduri cu imagine */
/* Cadru fix: imaginile intră aliniat indiferent de proporțiile sursei, fără să fie mărite. */
/* height:auto anulează atributul height="..." scris de Wagtail, altfel cadrul 16:10 e ignorat */
/* 7:5 e proporția imaginilor pregătite pentru carduri (700x500), deci nu se taie nimic din ele */
.tile-image { width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; background: var(--brand-soft); }
/* Sursele mici ocupă toată lățimea cardului, pe proporțiile lor: nu se decupează nimic din
   poză, dar mărirea peste dimensiunea fișierului se vede ca neclaritate — e un compromis
   asumat, nu o scăpare. Fișierele se pregătesc cu tools/prelucreaza_imagini.py --umple-latimea. */
.tile-image-mica { width: 100%; height: auto; aspect-ratio: auto; max-height: none; }

/* ---------------- hero */
.hero { background: linear-gradient(135deg, var(--brand-soft), #fff 65%); }

/* Banner pe toată lățimea: imaginea își păstrează proporția reală, fără decupare.
   Fotografiile de banner sunt late (≈3:1); pe ecrane înguste înălțimea scade
   proporțional, deci nu se taie nimic din ea. */
/* Banner: aceeași lățime ca bara de meniu, care stă tot într-un .container. */
/* Secțiunea nu poartă fundal: în mod banner, panoul e de sine stătător, iar o
   bandă colorată în jurul lui arăta ca un al doilea voal, pe toată lățimea.
   Selectorul are două clase ca să bată regulile .bg-tone-*, scrise mai jos. */
.hero.hero-banner { background: none; }
.hero-banner { padding-block: 1rem 1.25rem; }
.hero-banner-cadru { position: relative; border-radius: .9rem; overflow: hidden;
  box-shadow: 0 .5rem 1.5rem rgba(18, 27, 39, .1); }
.hero-banner-img { display: block; width: 100%; height: auto; object-fit: cover; }

/* Proporțiile urmează decupajele din <picture>, ca spațiul să fie rezervat
   înainte de încărcare și pagina să nu sară. */
.hero-banner-img { aspect-ratio: 2000 / 667; }
@media (max-width: 991.98px) { .hero-banner-img { aspect-ratio: 1400 / 700; } }
@media (max-width: 575.98px) { .hero-banner-img { aspect-ratio: 900 / 700; } }

/* Textul peste fotografie.
   Voalul nu acoperă toată imaginea: acolo unde stă textul e dens, în rest se
   stinge, ca fotografia să rămână limpede. Contrastul albului a fost măsurat
   pe pixelii reali ai imaginii, nu estimat. */
.hero-banner-text { position: absolute; inset: 0; display: flex;
  padding: 1rem 1.25rem; color: var(--banner-text); }
.hero-banner-motto { width: 100%; }
.hero-banner-motto p { margin: 0 auto; max-width: 32ch;
  font-weight: 700; line-height: 1.25;
  font-size: clamp(1.2rem, 2.9vw, 2.5rem);
  text-shadow: var(--banner-shadow); }
.hero-banner-motto p + p { margin-top: .4em; }

/* Telefon și tabletă: decupajul e strâns pe copii, deci nu există zonă liberă
   laterală. Textul coboară jos, iar voalul se concentrează în partea de jos —
   fețele rămân descoperite. */
.hero-banner-text { align-items: flex-end; justify-content: center; text-align: center;
  background: linear-gradient(180deg, rgba(var(--brand-dark-rgb), 0) 0%, rgba(var(--brand-dark-rgb), .09) 45%, rgba(var(--brand-dark-rgb), .35) 100%); }

/* Desktop: în cadrul lat copiii stau în dreapta (aproximativ 47–87% din lățime),
   deci textul trece în stânga, peste copaci și fațadă. Voalul se stinge complet
   până la 62%, așa că fețele nu sunt atinse de niciun strat. */
@media (min-width: 992px) {
  .hero-banner-text { align-items: center; justify-content: flex-start; text-align: left;
    padding-inline: clamp(1.5rem, 3.5vw, 3rem);
    background: linear-gradient(90deg, rgba(var(--brand-dark-rgb), .37) 0%, rgba(var(--brand-dark-rgb), .33) 40%, rgba(var(--brand-dark-rgb), .145) 52%, rgba(var(--brand-dark-rgb), 0) 64%); }
  /* Opacități înjumătățite față de varianta măsurată ca prag (0,74/0,66),
     la cererea explicită a beneficiarului, pentru un banner mai transparent.
     Consecință măsurată: contrastul textului scade sub 3:1 pe zonele unde
     cerul și fațada albă transpar. Revenirea la valorile conforme înseamnă
     dublarea acestor numere. */
  .hero-banner-motto { width: auto; max-width: 44%; }
  .hero-banner-motto p { margin: 0; max-width: none; font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
}

/* ---------------- rând de imagini */
/* Imaginile sunt cărți complete: se afișează întregi, fără decupare, deci
   înălțimea urmează proporția fișierului. */
.image-row-img { display: block; width: 100%; height: auto; border-radius: .9rem;
  box-shadow: 0 .25rem .75rem rgba(18, 27, 39, .08); }
.image-row-link { transition: transform .2s, box-shadow .2s; border-radius: .9rem; }
.image-row-link:hover .image-row-img, .image-row-link:focus-visible .image-row-img {
  box-shadow: 0 .5rem 1.5rem rgba(18, 27, 39, .16); }
.image-row-link:hover { transform: translateY(-2px); }

/* ---------------- carduri */
.card { --bs-card-bg: #fff; --bs-card-cap-bg: #fff; --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: .9rem; --bs-card-inner-border-radius: .85rem; }
.card-hover { transition: box-shadow .2s, transform .2s, border-color .2s; }
.card-hover:hover { box-shadow: 0 .5rem 1.5rem rgba(18, 27, 39, .1) !important; border-color: #cfdaea; transform: translateY(-2px); }
.card-title { line-height: 1.35; }

.tile-card .tile-arrow { color: var(--brand); font-weight: 700; transition: transform .2s; }
.tile-card:hover .tile-arrow { transform: translateX(3px); }
.aside-card { top: 9rem; }

/* ---------------- text editorial */
.prose { font-size: 1.075rem; line-height: 1.8; }
.prose p, .prose h2, .prose h3, .prose h4, .prose blockquote, .prose ol,
.prose ul:not(:has(> li > a[href*="/documente/"])) { max-width: 75ch; }
.prose > :first-child, .prose > :first-child > :first-child { margin-top: 0; }
.prose > :last-child, .prose > :last-child > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.45rem; margin: 2rem 0 .75rem; }
.prose h3 { font-size: 1.2rem; margin: 1.75rem 0 .6rem; }
.prose h4 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.prose p { margin-bottom: 1.05rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.prose li { margin: .35rem 0; }
.prose a { text-underline-offset: .2em; }
.prose blockquote { margin: 1.5rem 0; padding: .75rem 1.25rem; border-left: 4px solid var(--brand); background: #f3f6fa; border-radius: 0 .6rem .6rem 0; }

/* liste de documente în text: afișate ca list-group */
.prose ul:not(.list-group):has(> li > a[href*="/documente/"]) { list-style: none; padding: 0; max-width: none; border: 1px solid var(--bs-border-color);
  border-radius: .75rem; overflow: hidden; background: #fff; }
.prose ul:not(.list-group):has(> li > a[href*="/documente/"]) > li { margin: 0; border-top: 1px solid var(--bs-border-color); }
.prose ul:not(.list-group):has(> li > a[href*="/documente/"]) > li:first-child { border-top: 0; }
.prose ul:not(.list-group):has(> li > a[href*="/documente/"]) > li > a { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem;
  text-decoration: none; color: #1b2533; }
.prose ul:not(.list-group):has(> li > a[href*="/documente/"]) > li > a:hover { background: #eef3f9; color: var(--brand-darker); }
.prose a[href*="/documente/"]::before { content: "PDF"; flex-shrink: 0; display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; color: #a4221a; background: #fdecea; border-radius: .35rem; padding: .15rem .45rem; margin-right: .4rem; }
.prose ul:not(.list-group):has(> li > a[href*="/documente/"]) > li > a::before { margin-right: 0; }

.contact-list dt { font-weight: 600; color: var(--csei-ink-soft); }

/* ---------------- subsol */
/* Fundalul stă pe panoul interior, nu pe învelișul de pe toată lățimea: astfel
   partea vizibilă are exact lățimea barei de meniu, ca antetul și ca bannerul. */
.site-footer { font-size: .98rem; padding-bottom: 1.25rem; }
.site-footer a { color: #fff; }
.footer-panou { background: #121b27; color: #c9d2dd; border-radius: .9rem; overflow: hidden; }
.footer-continut { padding: 2.5rem clamp(1.1rem, 2.5vw, 2rem); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); color: #97a3b1;
  font-size: .88rem; padding: .85rem clamp(1.1rem, 2.5vw, 2rem); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .card-hover:hover { transform: none; } }
/* ---------------- fereastra de anunț */
.popup { border: 0; padding: 0; width: min(92vw, 640px); border-radius: 1.25rem; overflow: hidden;
  background: var(--brand-dark); color: #fff; box-shadow: 0 2rem 4rem rgba(10, 15, 25, .45); }
.popup::backdrop { background: rgba(12, 18, 28, .62); }
/* Fotografia se vede întreagă; lizibilitatea o dă voalul întunecat de deasupra, nu estomparea
   imaginii. Voalul e suficient de dens cât textul alb să rămână peste 7:1 chiar și pe cer. */
.popup-fundal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.popup-continut { position: relative; padding: 2.75rem 1.75rem 2.25rem; text-align: center;
  background: linear-gradient(180deg, rgba(6, 10, 18, .62), rgba(6, 10, 18, .84)); }
.popup-titlu { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; color: #fff; margin-bottom: .75rem; }
.popup-text { font-size: 1.05rem; line-height: 1.6; margin: 0 auto 1.75rem; max-width: 34rem; color: rgba(255, 255, 255, .92); }
.popup-actiuni { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.popup-inchide { position: absolute; top: .5rem; right: .75rem; width: 2.5rem; height: 2.5rem;
  background: rgba(255, 255, 255, .16); border: 0; border-radius: 50%; color: #fff; font-size: 1.6rem; line-height: 1; }
.popup-inchide:hover, .popup-inchide:focus-visible { background: rgba(255, 255, 255, .3); }
.popup[open] { animation: popup-intra .28s ease-out; }
@keyframes popup-intra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .popup[open] { animation: none; } }

/* ---------------- bara de cookie-uri */
/* Învelișul e pe toată lățimea, dar caseta vizibilă are exact lățimea containerului,
   ca bara de meniu. „pointer-events” lasă clicurile să treacă pe lângă casetă. */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; pointer-events: none; }
.cookie-panou { background: var(--brand-dark); color: #fff; pointer-events: auto;
  border-radius: .75rem .75rem 0 0; box-shadow: 0 -.5rem 1.5rem rgba(18, 27, 39, .2); }
.cookie-panou p { flex: 1 1 18rem; min-width: 0; }  /* textul se strânge, butonul rămâne pe rând */
/* țintă de atingere de cel puțin 44px, utilă mai ales pe telefon */
.cookie-bar .btn { min-height: 44px; padding-inline: 1.1rem; }
.cookie-bar a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.cookie-bar a:hover, .cookie-bar a:focus-visible { color: #fff; }
@media print { .cookie-bar { display: none !important; } }

@media print { .site-header, .site-footer, aside { display: none !important; } .card { border: 0; box-shadow: none !important; } }

/* ---------------- carduri colorate (nuanțe pastel, contrast text AA) */
:root {
  --tint-1: #e8f0fb; --accent-1: #2f6fbd;   /* albastru */
  --tint-2: #e3f5f1; --accent-2: #1f8a74;   /* verde-mentă */
  --tint-3: #fdf3e2; --accent-3: #c27a12;   /* chihlimbar */
  --tint-4: #fbe9ee; --accent-4: #c0436a;   /* roz */
  --tint-5: #efeafb; --accent-5: #6a4fc2;   /* violet */
  --tint-6: #e6f4fb; --accent-6: #1b86b0;   /* azur */
}
.row > .col:nth-child(6n+1) { --tint: var(--tint-1); --accent: var(--accent-1); }
.row > .col:nth-child(6n+2) { --tint: var(--tint-2); --accent: var(--accent-2); }
.row > .col:nth-child(6n+3) { --tint: var(--tint-3); --accent: var(--accent-3); }
.row > .col:nth-child(6n+4) { --tint: var(--tint-4); --accent: var(--accent-4); }
.row > .col:nth-child(6n+5) { --tint: var(--tint-5); --accent: var(--accent-5); }
.row > .col:nth-child(6n+6) { --tint: var(--tint-6); --accent: var(--accent-6); }

/* tile-uri de secțiune */
.tile-card { --bs-card-bg: var(--tint, var(--tint-1)); border: 1px solid transparent; }
.tile-card a { color: #16202c !important; }
.tile-card .tile-arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 50%; background: #fff; color: var(--accent, var(--accent-1));
  box-shadow: 0 1px 3px rgba(18, 27, 39, .12); }
.tile-card:hover { border-color: var(--accent, var(--accent-1)); }

/* carduri de anunțuri */
.card-hover:not(.tile-card) .card-subtitle time { display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  background: var(--tint, var(--tint-1)); color: #243142; font-weight: 500; }
.card-hover:not(.tile-card) .badge { background: var(--tint, var(--tint-1)) !important; border-color: transparent !important; color: #243142; }

/* carduri de conținut: antet colorat pentru secțiuni (ex. DAI pe ani) */
section.card > .card-header { background: linear-gradient(90deg, var(--tint-1), #fff 80%) !important;
  border-bottom-color: #dbe6f4; }
section.card:nth-of-type(2n) > .card-header { background: linear-gradient(90deg, var(--tint-2), #fff 80%) !important;
  border-bottom-color: #d3ece5; }
section.card { border-top: 4px solid var(--accent-1); }
section.card:nth-of-type(2n) { border-top-color: var(--accent-2); }

/* cardul principal de text: bară fină de accent */
.col-lg-10 > .card.shadow-sm:not(section), .col-lg-8 > .card.shadow-sm, article.card.shadow-sm:not(.card-hover) { border-top: 4px solid var(--accent-1); }
.aside-card { border-top: 4px solid var(--accent-2); }
.aside-card .card-header { background: var(--tint-2) !important; }

/* mesaj „în curând” */
.bg-body-tertiary { background: linear-gradient(135deg, var(--tint-3), #fff) !important; }

/* ---------------- declarații de avere */
.declarations-year-title { display: inline-block; padding: .2rem .8rem; border-radius: 999px; background: var(--tint-1); color: #1b3a63; }
.doc-badge { background: #fdecea; color: #a4221a; font-weight: 700; letter-spacing: .04em; }
.kind-avere { background: var(--tint-2); color: #145c4d; font-weight: 500; }
.kind-interese { background: var(--tint-5); color: #4a3491; font-weight: 500; }
.list-group { --bs-list-group-bg: #fff; }
.prose .list-group-item::before, .prose .list-group-item a::before { content: none !important; }
.editor-bar { padding: .6rem .8rem; border: 1px dashed #b8c7da; border-radius: .6rem; background: #f7faff; }
.decl-link:hover .fw-semibold { color: var(--brand-darker); text-decoration: underline; text-underline-offset: .2em; }
.prose ul.list-group { padding-left: 0; max-width: none; }
.prose ul.list-group > li { margin: 0; }

/* ---------------- blocuri StreamField */
.stream > .stream-item + .stream-item { margin-top: 1.5rem; }
.stream-flat .block-card { border: 0 !important; box-shadow: none !important; background: transparent; }
.stream-flat .block-card > .card-body { padding: 0 !important; }
.subpage-card > .card-header { background: linear-gradient(90deg, var(--tint-1), #fff 80%); }
.block-heading h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }

.tone-blue, .row > .col.tone-blue { --tint: var(--tint-1); --accent: var(--accent-1); }
.tone-mint, .row > .col.tone-mint { --tint: var(--tint-2); --accent: var(--accent-2); }
.tone-amber, .row > .col.tone-amber { --tint: var(--tint-3); --accent: var(--accent-3); }
.tone-rose, .row > .col.tone-rose { --tint: var(--tint-4); --accent: var(--accent-4); }
.tone-violet, .row > .col.tone-violet { --tint: var(--tint-5); --accent: var(--accent-5); }
.tone-azure, .row > .col.tone-azure { --tint: var(--tint-6); --accent: var(--accent-6); }
.row > .col.tone-white, .tone-white { --tint: #fff; --accent: var(--brand); }
.content-tile .card-text { color: #33414f; }

.bg-tone-none { background: transparent; }
.bg-tone-soft { background: #eef2f7; }
.bg-tone-blue { background: linear-gradient(135deg, var(--brand-soft), #fff 70%); }
.bg-tone-mint { background: linear-gradient(135deg, var(--tint-2), #fff 70%); }
.bg-tone-amber { background: linear-gradient(135deg, var(--tint-3), #fff 70%); }
.bg-tone-dark { background: #16212e; color: #e6ebf1; }
.bg-tone-dark h1, .bg-tone-dark h2, .bg-tone-dark h3, .bg-tone-dark .lead, .bg-tone-dark .hero-eyebrow { color: #fff !important; }
.bg-tone-dark .btn-outline-primary { --bs-btn-color: #fff; --bs-btn-border-color: #fff; }
.hero { border-bottom: 1px solid var(--bs-border-color); }
.hero-eyebrow { color: var(--brand); }
.home-section + .home-section { border-top: 1px solid var(--bs-border-color); }

/* Spatiul din jurul separatoarelor.
   Sectiunile pe toata latimea au py-5 (48px) in interior, blocurile obisnuite
   py-4 (24px). Acolo unde un separator se invecineaza cu o sectiune, spatiul de
   o parte iesea cu 24px mai mare decat de cealalta: masurat, 56px deasupra si
   80px dedesubt. Se egalizeaza la 56px de ambele parti. */
/* „!important” e necesar: utilitarul py-5 din Bootstrap e declarat cu !important,
   asa ca specificitatea singura nu-l invinge. */
.stream-divider + .home-section > .container { padding-top: 1.5rem !important; }
/* Cazul simetric (sectiune urmata de separator) are nevoie de :has(); acolo unde
   browserul nu-l suporta, ramane spatiul de dinainte — diferenta, nu o stricare. */
.home-section:has(+ .stream-divider) > .container { padding-bottom: 1.5rem !important; }

.block-cta { border: 1px solid var(--bs-border-color); }
.block-quote .blockquote { font-size: 1.25rem; font-style: italic; border-left: 4px solid var(--brand); padding-left: 1rem; }
.block-alert .prose { max-width: none; }
.block-alert .prose > :last-child { margin-bottom: 0; }
.stat-value { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 800; color: var(--accent, var(--brand)); line-height: 1.1; }
.stat-label { color: #3a4757; margin-top: .35rem; }
.block-image.size-medium { max-width: 720px; margin-inline: auto; }
.block-image.size-small { max-width: 420px; margin-inline: auto; }
.block-spacer { height: 2.5rem; }
.block-divider { margin: .5rem 0; opacity: .15; }
.block-gallery img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.block-gallery a:hover img { transform: scale(1.02); }
.block-table table { width: 100%; margin: 0; border-collapse: collapse; }
.block-table th, .block-table td { border: 1px solid var(--bs-border-color); padding: .55rem .75rem; vertical-align: top; }
.block-table thead th, .block-table tr:first-child th { background: var(--brand-soft); }
.accordion { --bs-accordion-active-bg: var(--brand-soft); --bs-accordion-active-color: var(--brand-darker);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .25); }
.announcement { background: var(--tint, var(--tint-3)); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.announcement a, .announcement span { color: #1b2533; text-decoration: none; }
.announcement a:hover { text-decoration: underline; }
.brand-logo { height: 55px; width: auto; }
.social-links a { color: #fff; opacity: .85; }
.social-links a:hover { opacity: 1; }

/* ======================================================= telefon: carduri compacte
   Pe un ecran de 375px pagina de start ajunsese la 8131px, adica zece ecrane de
   derulat, din care „Ce gasiti la noi" singura ocupa 3473px: opt carduri, fiecare
   cu o imagine de ~250px pusa deasupra textului.

   Pe telefon cardurile din sectiuni trec pe orizontala — miniatura la stanga,
   titlul si textul la dreapta. Inaltimea unui card scade de la ~430px la ~120px.

   Regula e legata de `.home-section`, nu de `.tile-card` in general, fiindca
   blocul „Structura invatamantului" sta direct in pagina, nu intr-o sectiune:
   acolo imaginile rămân deasupra textului, in cadrul 7:5 pe care sunt pregatite
   fisierele (700x500), ca sa nu se decupeze nimic din ele. */
@media (max-width: 575.98px) {
  .home-section .tile-card {
    display: grid;
    /* coloana imaginii e `auto`: la un card fara poza se strange la zero,
       in loc sa lase o coloana goala */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "poza text" "poza subsol";
    align-items: start;
  }
  .home-section .tile-card > .tile-image {
    grid-area: poza;
    width: 7.5rem;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* in asezarea pe orizontala, rotunjirea trece de sus pe stanga */
    border-radius: var(--bs-card-inner-border-radius, .5rem) 0 0
                   var(--bs-card-inner-border-radius, .5rem);
  }
  .home-section .tile-card > .card-body { grid-area: text; padding: .8rem .9rem; }
  .home-section .tile-card > .card-footer { grid-area: subsol; padding: 0 .9rem .8rem; }
  .home-section .tile-card .card-title { font-size: 1.02rem; margin-bottom: .3rem; }
  .home-section .tile-card .card-text { font-size: .92rem; }

  /* Butonul de meniu avea 38px inaltime, sub pragul de 44px pentru o tinta de
     atingere comoda. */
  .nav-burger { min-height: 44px; }

  /* Banda de cookie-uri acoperea aproape un sfert de ecran. Textul si spatiile
     se strang, butonul isi pastreaza cei 44px. */
  .cookie-panou { font-size: .9rem; }
  .cookie-panou p { margin-bottom: .5rem; }
  .cookie-bar .container { padding-block: .75rem; }
}
