/* ==========================================================================
   components.css — biblioteca de clase.
   Fiecare clasă de aici devine o Global Class în Bricks, cu același nume.
   Fără stiluri inline. Fără ID-uri ca agățătoare de stil.
   ========================================================================== */

/* --- Structură ---------------------------------------------------------- */
.et-container      { width: 100%; max-width: var(--et-container); margin-inline: auto;
                     padding-inline: var(--et-space-m); }
.et-container--text{ max-width: var(--et-container-text); }
.et-sectiune       { padding-block: var(--et-space-3xl); }
.et-sectiune--strans { padding-block: var(--et-space-2xl); }
.et-sectiune--alt  { background: var(--et-bg-alt); }

.et-stiva > * + *  { margin-top: var(--et-space-s); }
.et-stiva-l > * + *{ margin-top: var(--et-space-l); }

/* --- Etichete și titluri de secțiune ------------------------------------ */
.et-eticheta {
  font-family: var(--et-font-eticheta);
  font-size: var(--et-text-label);
  font-weight: 600;
  letter-spacing: var(--et-ls-label);
  text-transform: uppercase;
  color: var(--et-muted);
  margin: 0;
}
.et-eticheta--accent { color: var(--et-accent-text); }

.et-titlu-sectiune {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--et-space-m);
  flex-wrap: wrap;
  padding-bottom: var(--et-space-s);
  border-bottom: var(--et-rule) solid var(--et-line);
  margin-bottom: var(--et-space-xl);
}
.et-titlu-sectiune__titlu { font-size: var(--et-text-h2); }
.et-titlu-sectiune__link {
  font-family: var(--et-font-eticheta);
  font-size: var(--et-text-label);
  font-weight: 600;
  letter-spacing: var(--et-ls-label);
  text-transform: uppercase;
  color: var(--et-accent-text);
  text-decoration: none; white-space: nowrap;
}
.et-titlu-sectiune__link:hover { text-decoration: underline; }

/* --- Antet -------------------------------------------------------------- */
.et-antet { background: var(--et-bg-alt); position: relative; }
.et-antet__sus {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--et-space-m);
  padding-block: var(--et-space-m);
  min-height: 9rem;                        /* 144px */
}
.et-antet__rand { display: flex; align-items: center; justify-content: space-between;
                  gap: var(--et-space-m); width: 100%; }
.et-marca { display: flex; align-items: center; gap: var(--et-space-s);
            text-decoration: none; color: var(--et-primary); }
.et-marca__stema { width: auto; height: 5rem; flex: none; color: var(--et-primary); }
.et-marca__nume  { font-family: var(--et-font-titlu); font-size: var(--et-text-h1);
                   font-weight: 600; line-height: 1.1; display: block; }

.et-meniu { display: flex; flex-wrap: wrap; gap: var(--et-space-2xs) var(--et-space-m);
            width: 100%; }
.et-meniu__lista { display: contents; }
.et-meniu__item { position: relative; }
.et-meniu__link {
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label); text-transform: uppercase;
  color: var(--et-primary); text-decoration: none;
  padding-block: var(--et-space-2xs);
  border-bottom: var(--et-rule) solid transparent;
}
.et-meniu__link:hover { border-bottom-color: var(--et-accent); }
.et-meniu__link[aria-current="page"] { border-bottom-color: var(--et-primary); }


/* Meniu pe ecran mic — <details>, fără JavaScript. Butonul stă în dreapta,
   pe linia mărcii; panoul se deschide sub antet, pe toată lățimea. */
.et-meniu-mobil { display: none; }
.et-meniu-mobil__buton {
  display: flex; align-items: center; gap: var(--et-space-2xs);
  min-height: 2.75rem; padding-inline: var(--et-space-2xs);
  cursor: pointer; list-style: none; color: var(--et-primary);
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label); text-transform: uppercase;
}
.et-meniu-mobil__buton::-webkit-details-marker { display: none; }
.et-meniu-mobil__text { line-height: 1; }
.et-hamburger { width: 1.375rem; height: 1.375rem; }
.et-hamburger--inchide { display: none; }
.et-meniu-mobil[open] .et-hamburger { display: none; }
.et-meniu-mobil[open] .et-hamburger--inchide { display: block; }

.et-meniu-mobil__panou {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--et-bg-alt);
  padding: var(--et-space-s) 0;
}
.et-meniu-mobil__lista { width: min(75rem, 100%); margin-inline: auto;
                         padding-inline: var(--et-space-m); }
.et-meniu-mobil__lista .et-meniu__link { display: block; padding-block: var(--et-space-s);
                                         border-bottom: 0; }

/* Singura excepție de la regula „fără chenare": câmpurile de formular.
   WCAG 1.4.11 cere ca marginea unui câmp să se distingă la cel puțin 3:1, iar o
   simplă diferență de fundal la 1,1:1 nu ajunge. Rămâne o linie sub câmp —
   subliniere, nu casetă — la 3,02:1. */
.et-camp {
  font-family: var(--et-font-text); font-size: var(--et-text-sm);
  color: var(--et-primary); background: var(--et-caseta);
  border: 0; border-bottom: var(--et-rule) solid var(--et-line-strong);
  border-radius: var(--et-radius) var(--et-radius) 0 0;
  padding: var(--et-space-2xs) var(--et-space-xs);
  min-width: 0; width: 100%;
}
.et-camp::placeholder { color: var(--et-muted); opacity: 1; }

/* --- Butoane și legături ------------------------------------------------ */
.et-buton {
  display: inline-block;
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label); text-transform: uppercase;
  padding: 0.9375rem 1.625rem;            /* 15/26 — din Theme Style */
  border-radius: var(--et-radius-buton);
  text-decoration: none; cursor: pointer; border: 0;
  background: var(--et-primary); color: var(--et-bg);
}
.et-buton:hover { background: var(--et-wash); color: var(--et-primary); }
.et-buton--secundar { background: var(--et-wash); color: var(--et-primary); }
.et-buton--secundar:hover { background: var(--et-primary); color: var(--et-bg); }
.et-buton-lat-cutie { margin-top: var(--et-space-xl); }
/* Butoanele de la știri și evenimente folosesc stilul secundar: fundalul plin
   trage prea mult ochiul într-un flux de citit. Primarul rămâne pentru acțiuni
   propriu-zise — trimiterea unui formular. */
.et-buton-lat { display: block; text-align: center; }

/* --- Pagina de start: flux de știri + coloană laterală ------------------ */
.et-doua-coloane { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
                   gap: var(--et-space-2xl); align-items: start; }

.et-lead { margin-bottom: var(--et-space-xl); }
.et-lead__titlu { font-size: var(--et-text-h2); line-height: var(--et-lh-titlu);
                  margin-block: var(--et-space-2xs); }
.et-lead__titlu a { text-decoration: none; }
.et-lead__titlu a:hover { text-decoration: underline; text-decoration-color: var(--et-accent); }
.et-lead__media { display: block; margin-block: var(--et-space-s);
                  border-radius: var(--et-radius); overflow: hidden; background: var(--et-wash); }
.et-lead__img { width: 100%; aspect-ratio: var(--et-ratio-foto); object-fit: cover; }
.et-lead__rezumat { font-size: var(--et-text-lg); line-height: var(--et-lh-lg);
                    margin-bottom: var(--et-space-m); }

.et-grila--stransa { gap: var(--et-space-l); }

/* Coloana laterală — la MMSM este „Program Ierarhi". La Tulcea programul liturgic
   nu are încă sursă de date (intent.md §5, întrebarea 6), așa că locul îl ia
   directorul de parohii, care are date reale: 141 de parohii, pe trei protopopiate. */
.et-panou--lateral { position: sticky; top: var(--et-space-s); }
.et-panou__intro { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                   color: var(--et-muted); margin-bottom: var(--et-space-m); }
.et-panou__linie { border: 0; border-top: var(--et-border) solid var(--et-line);
                   margin-block: var(--et-space-l); }
.et-panou-lista { margin-bottom: var(--et-space-m); }
.et-panou-lista__item { padding-block: var(--et-space-2xs);
                        border-bottom: var(--et-border) solid var(--et-line); }
.et-panou-lista__link { font-family: var(--et-font-titlu); font-size: var(--et-text-body);
                        font-weight: 600; text-decoration: none; }
.et-panou-lista__link:hover { text-decoration: underline; text-decoration-color: var(--et-accent); }
.et-date--strans .et-date__val { font-size: var(--et-text-sm); }

.et-link-accent {
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label); text-transform: uppercase;
  color: var(--et-accent-text); text-decoration: none;
}
.et-link-accent:hover { text-decoration: underline; }

/* --- Program liturgic --------------------------------------------------- */
/* Însemnările pe care Episcopia le scrie deja la viitor, despărțite de arhivă. */
.et-program__lista { margin-bottom: var(--et-space-s); }
/* Pe pagina de arhivă, aceleași însemnări stau pe trei coloane, nu într-o casetă. */
.et-program__lista--lat { display: contents; }
.et-program__lista--lat .et-program__item { border-bottom: 0; padding-block: 0;
                                            border-top: 3px solid var(--et-accent);
                                            padding-top: var(--et-space-s); }
.et-program__item { padding-block: var(--et-space-xs);
                    border-bottom: var(--et-border) solid var(--et-line); }
.et-program__item:last-child { border-bottom: 0; }
.et-program__cand { color: var(--et-accent-text); margin-bottom: var(--et-space-3xs); }
.et-program__ce { font-family: var(--et-font-titlu); font-size: var(--et-text-body);
                  font-weight: 600; line-height: 1.2; margin: 0; }
.et-program__unde { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                    color: var(--et-muted); margin: var(--et-space-3xs) 0 0; }
.et-panou__nota { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                  color: var(--et-muted); font-style: italic; margin: 0; }
.et-panou__nota--sub { margin-top: var(--et-space-l); }

/* --- Card de știre ------------------------------------------------------ */
/* Regulă: dacă un card ajunge de aproximativ două ori mai înalt decât lat,
   grila coboară de la 4 la 3 coloane. Un card prea îngust rupe titlul pe cinci
   rânduri și coloana devine un turn. Măsurat pe cardurile de știri, care au
   titlu lung plus rezumat: 1,84 la 1280 px și 2,05 la 1100 px cu patru coloane;
   cu trei, raportul scade sub 1,3. Cardurile de mănăstire, cu titlu scurt,
   rămân la patru: raportul lor e 1,23. */
.et-grila { display: grid; gap: var(--et-space-xl); }
.et-grila--2 { grid-template-columns: repeat(2, 1fr); }
.et-grila--3 { grid-template-columns: repeat(3, 1fr); }
.et-grila--4 { grid-template-columns: repeat(4, 1fr); }

/* Text lung lângă o casetă de date. Nu jumătate-jumătate: panoul are patru
   rânduri, textul are șase paragrafe. Coloana de text se oprește la lățimea
   de lectură — 2fr/1fr o ducea la 736px, adică 80 de caractere pe rând, prea lat
   pentru citit; la 624px sunt 68. Panoul ia restul.
   `align-items: start` fiindcă întins pe înălțimea textului lăsa 1240px de gol. */
.et-grila--text-panou {
  /* Aceeași lățime de lectură ca pe pagina de știre: containerul de text are
     672px cutie minus 24px padding pe fiecare parte, deci 624px de text. Aici
     coloana nu are padding, așa că se scade explicit — altfel același act de
     citit iese la două lățimi în două șabloane. 624px = 68 de caractere. */
  grid-template-columns: minmax(0, calc(var(--et-container-text) - 2 * var(--et-space-m))) 1fr;
  align-items: start; }

.et-card { display: flex; flex-direction: column; }
.et-card__media {
  aspect-ratio: var(--et-ratio-foto);
  overflow: hidden; background: var(--et-wash);
  border-radius: var(--et-radius);
  margin-bottom: var(--et-space-s);
}
.et-card__img { width: 100%; height: 100%; object-fit: cover; }
.et-card__meta {
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label); text-transform: uppercase;
  color: var(--et-muted); margin-bottom: var(--et-space-2xs);
}
.et-card__titlu { font-size: var(--et-text-h4); margin-bottom: var(--et-space-2xs); }
.et-card__titlu a { text-decoration: none; }
.et-card__titlu a:hover { text-decoration: underline; text-decoration-color: var(--et-accent); }
.et-card__rezumat { font-size: var(--et-text-sm); line-height: var(--et-lh-sm); color: var(--et-muted); }

.et-lead__titlu { font-size: var(--et-text-h2); line-height: var(--et-lh-titlu);
                  margin-block: var(--et-space-2xs) var(--et-space-2xs); }

/* --- Hero de pagină ----------------------------------------------------- */
.et-hero { padding-block: var(--et-space-2xl) var(--et-space-xl);
           border-bottom: var(--et-border) solid var(--et-line); }
.et-hero__titlu { font-size: var(--et-text-h1); margin-block: var(--et-space-2xs) var(--et-space-s); }
.et-hero__intro { font-size: var(--et-text-lg); line-height: var(--et-lh-lg);
                  color: var(--et-muted); max-width: var(--et-container-text); }

/* --- Firimituri --------------------------------------------------------- */
.et-firimituri { padding-block: var(--et-space-s);
                 font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
                 letter-spacing: var(--et-ls-label); text-transform: uppercase;
                 color: var(--et-muted); }
.et-firimituri__lista { display: flex; flex-wrap: wrap; gap: var(--et-space-2xs); }
.et-firimituri__item::after { content: "·"; margin-left: var(--et-space-2xs); color: var(--et-line-strong); }
.et-firimituri__item:last-child::after { content: none; }
.et-firimituri a { color: inherit; }

/* --- Articol ------------------------------------------------------------ */
/* Fotografia de deschidere a unui articol stă pe aceeași coloană cu textul.
   Când imaginea era pe lățimea containerului iar textul pe coloana de lectură,
   pagina avea trei alinieri diferite: nota, imaginea și titlul. */
.et-figura-articol { margin: var(--et-space-l) 0; }
.et-figura-articol__img { width: 100%; height: auto;
                          border-radius: var(--et-radius); background: var(--et-wash); }
.et-articol__corp { font-size: var(--et-text-lg); line-height: var(--et-lh-lg); }
.et-articol__corp p + p { margin-top: var(--et-space-s); }

/* --- Imagine lată de deschidere ----------------------------------------- */
/* Fotografiile importate au între 450 și 1800 px lățime; jumătate sunt sub 800.
   Figura nu depășește 46rem, ca să nu se întindă peste rezoluția fișierului. */
.et-figura-lata { margin: var(--et-space-l) 0 0; max-width: min(50rem, 100%); }
/* Fotografiile au între 400 și 800 px lățime, după sursă. Se afișează la
   dimensiunea lor, nu întinse pe toată coloana: o imagine mărită se vede. */
.et-figura-lata__img { width: auto; max-width: 100%; height: auto;
                       border-radius: var(--et-radius); background: var(--et-wash); }

/* --- Deschidere cu fotografie verticală --------------------------------- */
/* Pentru o clădire înaltă, cadrul vertical spune mai mult decât o bandă lată. */
.et-deschidere { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
                 gap: var(--et-space-2xl); align-items: center; }
.et-deschidere__date { margin-top: var(--et-space-l); }
.et-deschidere__figura { margin: 0; }
.et-deschidere__img { width: auto; max-width: 100%; height: auto;
                      border-radius: var(--et-radius); background: var(--et-wash); }

/* --- Monografie: text lung cu subtitluri și citate din documente --------- */
.et-monografie > h2:first-child { margin-top: 0; }
.et-monografie h2 { margin-top: var(--et-space-2xl); scroll-margin-top: var(--et-space-l); }
.et-monografie p { max-width: 42rem; }

/* Citat dintr-un document de epocă — pisanie, jurnal parohial, însemnare. */
.et-citat-doc { margin: var(--et-space-l) 0; padding-left: var(--et-space-m);
                border-left: var(--et-rule) solid var(--et-accent); }
.et-citat-doc__text { font-size: var(--et-text-lg); line-height: var(--et-lh-lg);
                      color: var(--et-muted); margin: 0; }

/* --- Cuprins ------------------------------------------------------------ */
.et-cuprins { position: sticky; top: var(--et-space-l); align-self: start; }
.et-cuprins__lista { counter-reset: cap; margin-top: var(--et-space-s); }
.et-cuprins__item { counter-increment: cap; padding-block: var(--et-space-2xs); }
.et-cuprins__item::before { content: counter(cap) ". ";
                            font-family: var(--et-font-eticheta);
                            font-size: var(--et-text-label); color: var(--et-muted); }
.et-cuprins__link { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                    text-decoration: none; }
.et-cuprins__link:hover { text-decoration: underline;
                          text-decoration-color: var(--et-accent); }

/* --- Capitol de pagină lungă (istoric) ---------------------------------- */
/* Text și imagine alternând stânga–dreapta, ca la episcopiammsm.ro/istoric. */
.et-capitol { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
              gap: var(--et-space-2xl); align-items: start; }
/* La capitolele inversate se schimbă și lățimile, nu doar ordinea: altfel textul
   ajunge în coloana îngustă și crește în înălțime, lăsând gol lângă imagine. */
.et-capitol--invers { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.et-capitol--invers .et-capitol__text { order: 2; }
.et-capitol--invers .et-capitol__figura { order: 1; }
.et-capitol__perioada { color: var(--et-accent-text); margin-bottom: var(--et-space-2xs); }
.et-capitol__titlu { font-size: var(--et-text-h3); line-height: var(--et-lh-h3);
                     margin-bottom: var(--et-space-m);
                     padding-bottom: var(--et-space-s);
                     border-bottom: var(--et-border) solid var(--et-line); }
.et-capitol__text p { font-size: var(--et-text-body); line-height: var(--et-lh-body); }
.et-capitol__text p + p { margin-top: var(--et-space-s); }
/* Figura rămâne lipită în timp ce se citește capitolul: la un text lung,
   imaginea urmărește derularea în loc să dispară sus. */
.et-capitol__figura { margin: 0; position: sticky; top: var(--et-space-l);
                      align-self: start; }
.et-capitol__img,
.et-capitol__gol { width: 100%; aspect-ratio: var(--et-ratio-foto);
                   object-fit: cover; border-radius: var(--et-radius);
                   background: var(--et-wash); }
.et-capitol__gol { color: var(--et-primary); height: auto; }
.et-capitol__legenda { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                       color: var(--et-muted); margin-top: var(--et-space-2xs); }

/* --- Hartă -------------------------------------------------------------- */
.et-harta { height: 32rem; border-radius: var(--et-radius); background: var(--et-caseta); }
.et-harta__nota { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                  color: var(--et-muted); margin-top: var(--et-space-2xs); }
/* Conținutul balonului de pe hartă. */
.leaflet-popup-content { margin: 0; }
.et-popup__img { width: 100%; aspect-ratio: var(--et-ratio-foto); object-fit: cover;
                 display: block; margin-bottom: var(--et-space-2xs); }
.et-popup__nume { display: block; font-family: var(--et-font-titlu);
                  font-size: var(--et-text-h4); font-weight: 600; line-height: 1.15;
                  padding: 0 var(--et-space-xs); }
.et-popup__rand { display: block; font-size: var(--et-text-sm);
                  line-height: var(--et-lh-sm); color: var(--et-muted);
                  padding: 0 var(--et-space-xs); }
.et-popup__link { display: inline-block; margin: var(--et-space-2xs) var(--et-space-xs)
                  var(--et-space-xs);
                  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
                  font-weight: 600; letter-spacing: var(--et-ls-label);
                  text-transform: uppercase; color: var(--et-accent-text);
                  text-decoration: none; }
.et-popup__link:hover { text-decoration: underline; }

/* Leaflet își pune fonturile proprii; le aducem la ale site-ului. */
.leaflet-container { font-family: var(--et-font-text); font-size: var(--et-text-sm); }
.leaflet-popup-content { font-family: var(--et-font-text); color: var(--et-primary); }
.leaflet-tooltip { font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
                   letter-spacing: var(--et-ls-label); text-transform: uppercase; }

/* --- Galerie ------------------------------------------------------------ */
/* Coloane cât să nu depășim rezoluția celei mai mici fotografii din arhivă
   (338 px). La 1152 px container ies patru coloane de 276 px, deci nicio
   fotografie nu se afișează mai mare decât fișierul ei. */
.et-galerie { display: grid; gap: var(--et-space-s);
              grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.et-galerie__fig { margin: 0; }
.et-galerie__img {
  width: 100%; aspect-ratio: var(--et-ratio-foto); object-fit: cover;
  border-radius: var(--et-radius); background: var(--et-wash);
}

/* --- Citat -------------------------------------------------------------- */
.et-citat { border-left: var(--et-rule) solid var(--et-accent);
            padding-left: var(--et-space-m); margin: 0; }
/* Roman, nu italic: fișierul italic al Literata cântărește 121 KB și ar fi fost
   descărcat pentru un singur element. Cursivele rămân declarate în fonts.css
   pentru textele editoriale de mai târziu. */
.et-citat__text { font-size: var(--et-text-lg); font-family: var(--et-font-text);
                  font-weight: 400; line-height: var(--et-lh-lg); }
/* <cite> este cursiv implicit în browser, iar Archivo nu are cursive:
   ar fi ieșit o cursivă falsă, înclinată de browser. */
.et-citat__sursa { display: block; margin-top: var(--et-space-xs); font-style: normal; }

/* --- Rând de director (mănăstiri, anunțuri) ----------------------------- */
.et-lista { border-top: var(--et-border) solid var(--et-line); }
.et-rand {
  display: grid; gap: var(--et-space-xs) var(--et-space-m);
  grid-template-columns: 1fr auto;
  padding-block: var(--et-space-m);
  border-bottom: var(--et-border) solid var(--et-line);
}
.et-rand__titlu { font-size: var(--et-text-h4); margin-bottom: var(--et-space-3xs); }
.et-rand__nume { font-size: var(--et-text-body); margin: var(--et-space-3xs) 0 0; }
.et-rand__titlu a { text-decoration: none; }
.et-rand__titlu a:hover { text-decoration: underline; text-decoration-color: var(--et-accent); }
.et-rand__detalii { font-size: var(--et-text-sm); line-height: var(--et-lh-sm); color: var(--et-muted); }
.et-rand__lateral { text-align: right; align-self: center; }

/* Cancelaria are 11 intrări scurte — pe două coloane încap fără să curgă pagina. */
.et-lista--doua { display: grid; grid-template-columns: 1fr 1fr;
                  column-gap: var(--et-space-2xl); }

/* --- Filtre de director (parohii, mănăstiri, slujitori) ----------------- */
/* Un singur tipar, trei folosiri. Filtrarea propriu-zisă o dă JetEngine la
   faza 4; în prototip e JavaScript simplu, ca tiparul să se poată încerca. */
.et-filtre { display: grid; gap: var(--et-space-s);
             grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
             align-items: end; margin-bottom: var(--et-space-s); }
.et-filtre__camp { display: grid; gap: var(--et-space-3xs); min-width: 0; }
.et-filtre__camp--actiune { align-self: end; }
.et-filtre__rezultat { font-size: var(--et-text-sm); color: var(--et-muted);
                       margin: 0 0 var(--et-space-l); }
.et-filtre__gol { font-size: var(--et-text-lg); color: var(--et-muted);
                  padding-block: var(--et-space-xl); text-align: center; }
.et-slujitor__fara { color: var(--et-muted); font-style: italic; }

/* --- Perechi de date (hram, adresă, stareț, termen…) -------------------- */
.et-date { display: grid; grid-template-columns: auto 1fr; gap: var(--et-space-2xs) var(--et-space-m); }
.et-date__cheie {
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label); text-transform: uppercase;
  color: var(--et-muted); padding-top: .35em;
}
.et-date__val { margin: 0; font-size: var(--et-text-body); }

/* --- Card de sector ----------------------------------------------------- */
/* Sectoarele nu intră în submeniu (regulă de navigație): din pagina
   Administrației se merge mai departe prin cardurile de mai jos. */
.et-card-sector { background: var(--et-caseta); border-radius: var(--et-radius);
                  border-top: 3px solid var(--et-accent);
                  padding: var(--et-space-m); height: 100%; }
.et-card-sector__titlu { font-size: var(--et-text-h4); line-height: var(--et-lh-h4);
                         margin-bottom: var(--et-space-s); }
.et-card-sector__titlu a { text-decoration: none; }
.et-card-sector__titlu a:hover { text-decoration: underline;
                                 text-decoration-color: var(--et-accent); }
.et-card-sector__rol { font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
                       font-weight: 600; letter-spacing: var(--et-ls-label);
                       text-transform: uppercase; color: var(--et-muted); margin: 0; }
.et-card-sector__nume { font-size: var(--et-text-body); margin: var(--et-space-3xs) 0; }
.et-card-sector__contact { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                           color: var(--et-muted); margin: 0; }

/* --- Fișă de persoană --------------------------------------------------- */
/* Tiparul de la episcopiammsm.ro: casetă pe fundal cald, cu o linie verticală
   în stânga, rolul mic deasupra numelui, apoi datele de contact. */
.et-fisa { background: var(--et-caseta); border-radius: var(--et-radius);
           padding: var(--et-space-m); height: 100%; }
.et-fisa__interior { border-left: 3px solid var(--et-accent);
                     padding-left: var(--et-space-m); }
.et-fisa__nume { font-family: var(--et-font-titlu); font-size: var(--et-text-h4);
                 font-weight: 600; line-height: 1.15;
                 margin: var(--et-space-3xs) 0 var(--et-space-xs); }
.et-fisa__rand { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                 color: var(--et-muted); margin: 0 0 var(--et-space-3xs); }

/* --- Panou (casetă de informații) --------------------------------------- */
.et-panou { background: var(--et-caseta); border-radius: var(--et-radius);
            padding: var(--et-space-l); }
.et-panou__titlu { font-size: var(--et-text-h4); margin-bottom: var(--et-space-m); }

/* --- Stare (deschis / închis) ------------------------------------------- */
.et-stare {
  display: inline-block;
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label); text-transform: uppercase;
  padding: var(--et-space-3xs) var(--et-space-2xs);
  background: var(--et-wash); border-radius: var(--et-radius);
  white-space: nowrap;
}
.et-stare--inchis   { color: var(--et-muted); }
/* Contrapartea stării „închis". Niciun anunț nu este în derulare azi
   (vezi intent.md §5, întrebarea 12), dar starea există în modelul de conținut. */
.et-stare--derulare { color: var(--et-liturgic); }

/* --- Notă / anunț de stare a paginii ------------------------------------ */
.et-nota--exemplu { margin-bottom: var(--et-space-l); }
.et-nota { border-left: var(--et-rule) solid var(--et-liturgic);
           background: var(--et-wash); padding: var(--et-space-m);
           border-radius: var(--et-radius); font-size: var(--et-text-sm);
           line-height: var(--et-lh-sm); }

/* Program liturgic: componenta există în sistemul de design, dar nu are date.
   Vezi intent.md §5, întrebarea 6. Se adaugă la migrare, când există sursa. */

/* --- Paginare ----------------------------------------------------------- */
.et-paginare { display: flex; gap: var(--et-space-2xs); flex-wrap: wrap;
               align-items: center; justify-content: center; }
.et-paginare__link {
  font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
  font-weight: 600; letter-spacing: var(--et-ls-label);
  min-width: 2.5rem; text-align: center;
  padding: var(--et-space-2xs) var(--et-space-xs);
  background: var(--et-wash);
  border-radius: var(--et-radius); text-decoration: none;
}
.et-paginare__link:hover { background: var(--et-wash); }
.et-paginare__link[aria-current="page"] { background: var(--et-primary);
                                          color: var(--et-bg); border-color: var(--et-primary); }

/* --- Subsol ------------------------------------------------------------- */
/* Pe fundalul albastru al subsolului, inelul liturgic ar avea contrast 1,24 —
   practic invizibil la navigarea cu tastatura. Aici inelul devine ivoriu (9,79). */
.et-subsol { --et-focus: var(--et-bg);
             background: var(--et-primary); color: var(--et-bg);
             padding-block: var(--et-space-2xl) var(--et-space-l); margin-top: var(--et-space-3xl); }
.et-subsol a { color: var(--et-bg); }
.et-subsol__grila { display: grid; grid-template-columns: 1.4fr 1.05fr 1fr 1fr;
                    gap: var(--et-space-xl); }

/* Apartenența: stema Patriarhiei la mărime dublă față de mărcile de jos, cu
   numele Bisericii dedesubt. Stă în grila de sus, a doua coloană, nu în rândul
   de mărci — acolo era una între cinci; aici spune unde se află eparhia. */
.et-apartenenta__link { display: inline-flex; flex-direction: column;
                        align-items: flex-start; gap: var(--et-space-xs);
                        text-decoration: none; color: var(--et-bg); }
/* 120px față de cei 140 ai stemei Episcopiei. Raportul e 1,17 în favoarea
   gazdei, nu 0,65 cum era — și diferența reală e mai mare decât spun cifrele:
   placeholderul nostru e un contur simplu, stema Patriarhiei are 378 de trasee,
   deci pare mai densă la aceeași înălțime. */
.et-apartenenta__stema { display: block; width: auto;
                         height: clamp(3.5rem, 8.6vw, 7.5rem); }
.et-apartenenta__nume { font-family: var(--et-font-eticheta);
                        font-size: var(--et-text-label); font-weight: 600;
                        letter-spacing: var(--et-ls-label); text-transform: uppercase;
                        opacity: .75; text-wrap: balance; }
.et-apartenenta__link:hover .et-apartenenta__nume { opacity: 1;
                                                    text-decoration: underline; }
.et-subsol__titlu { font-family: var(--et-font-eticheta); font-size: var(--et-text-label);
                    font-weight: 600; letter-spacing: var(--et-ls-label);
                    text-transform: uppercase; margin-bottom: var(--et-space-s); opacity: .75; }
.et-subsol__lista li + li { margin-top: var(--et-space-2xs); }
.et-subsol__lista a,
.et-subsol__link { font-size: var(--et-text-sm); text-decoration: none; }
.et-subsol__lista a:hover { text-decoration: underline; }
/* Stema Episcopiei conduce subsolul, la orice lățime. Crește cu aceeași lege ca
   mărcile instituționale, dar cu un raport de circa 1,3 față de ele: la fix ar fi
   ajuns egală cu ele când mărcile au urcat la 5rem, adică gazda cât oaspetele,
   în propriul ei subsol. */
.et-subsol__stema { width: auto; height: clamp(4rem, 10vw, 8.75rem);
                    color: var(--et-bg); margin-bottom: var(--et-space-s); }
.et-subsol__jos { margin-top: var(--et-space-2xl); padding-top: var(--et-space-m);
                  border-top: var(--et-border) solid rgba(244, 240, 234, .25);
                  display: flex; flex-wrap: wrap; gap: var(--et-space-s) var(--et-space-m);
                  justify-content: space-between; font-size: var(--et-text-sm); opacity: .85; }

/* ==========================================================================
   Puncte de rupere. Bricks: 991px = tablet, 767px = mobile landscape.
   ========================================================================== */
@media (max-width: 61.9375rem) {   /* 991px — tabletă */
  .et-meniu { display: none; }
  .et-meniu-mobil { display: block; }
  .et-antet__sus { min-height: 0; padding-block: var(--et-space-m); }
  .et-marca__nume { font-size: var(--et-text-h3); }
  .et-grila--3, .et-grila--4 { grid-template-columns: repeat(2, 1fr); }
  .et-doua-coloane { grid-template-columns: 1fr; gap: var(--et-space-2xl); }
  .et-capitol,
  .et-capitol--invers { grid-template-columns: 1fr; gap: var(--et-space-l); }
  .et-deschidere { grid-template-columns: 1fr; gap: var(--et-space-l); }
  .et-cuprins { position: static; }
  .et-deschidere__img { aspect-ratio: var(--et-ratio-foto); }
  .et-capitol__figura { position: static; }
  .et-capitol--invers .et-capitol__text,
  .et-capitol--invers .et-capitol__figura { order: 0; }
  /* Coloana laterală urcă deasupra fluxului de știri: altfel programul liturgic
     ar cădea sub toate cardurile și nimeni nu l-ar vedea pe telefon.
     Un singur marcaj, două așezări. */
  .et-panou--lateral { position: static; order: -1; }
  /* Grila text+panou se colapsează aici, nu la 767: panoul primește `order: -1`
     chiar deasupra, iar într-o grilă asimetrică asta l-ar muta în coloana de
     624px și ar lăsa textul în cei 180px rămași. Măsurat la 900px lățime. */
  .et-grila--text-panou { grid-template-columns: 1fr; }
  .et-subsol__grila { grid-template-columns: 1fr 1fr; }
  .et-sectiune { padding-block: var(--et-space-2xl); }
  .et-galerie { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .et-harta { height: 26rem; }
  .et-lista--doua { column-gap: var(--et-space-xl); }
}

@media (max-width: 47.9375rem) {   /* 767px */
  .et-grila--2, .et-grila--3, .et-grila--4 { grid-template-columns: 1fr; }
  .et-grila { gap: var(--et-space-l); }
  .et-subsol__grila { grid-template-columns: 1fr; gap: var(--et-space-l); }
  .et-rand { grid-template-columns: 1fr; }
  .et-lista--doua { grid-template-columns: 1fr; column-gap: 0; }
  .et-rand__lateral { text-align: left; }
  .et-date { grid-template-columns: 1fr; gap: var(--et-space-3xs); }
  .et-date__cheie { padding-top: var(--et-space-2xs); }
  /* Numele trebuie să încapă pe un rând lângă buton: stemă mai mică, titlu mai mic. */
  .et-antet__sus { gap: var(--et-space-s); padding-block: var(--et-space-s); min-height: 0; }
  .et-antet__rand { gap: var(--et-space-s); }
  .et-marca { gap: var(--et-space-xs); }
  .et-marca__stema { height: 3rem; }
  .et-marca__nume { font-size: var(--et-text-h4); }
  .et-grila--stransa { gap: var(--et-space-l); }
    .et-sectiune { padding-block: var(--et-space-xl); }
}

/* --- Donații ------------------------------------------------------------ */
/* Contul se citește cu ochiul și se copiază cu mâna: cifre tabulare, grupate
   câte patru, fără ligaturi. */
.et-cont { font-variant-numeric: tabular-nums; letter-spacing: .04em;
           font-size: var(--et-text-lg); }
.et-semnatura { margin-top: var(--et-space-l); color: var(--et-muted);
                line-height: var(--et-lh-lg); }

/* --- Panou de vizitare (pagina de mănăstire) ---------------------------- */
/* Coloana din dreapta era goală pe două ecrane, lângă un text lung. Acum
   poartă tot ce îi trebuie unui vizitator: date, telefon, hartă, coordonate.
   Panoul crește de la 268px la 670px, iar restul golului îl acoperă
   însoțind lectura. `max-height` îl ține sub înălțimea ferestrei, ca să nu
   ajungă un panou mai înalt decât ecranul, blocat pe loc. */
.et-vizita { position: sticky; top: var(--et-space-s);
             max-height: calc(100vh - 2 * var(--et-space-s)); overflow-y: auto; }
@media (max-width: 61.9375rem) {   /* sub 992px grila e pe o coloană */
  /* `order: -1` urcă panoul deasupra textului: pe telefon, cine caută
     telefonul și harta nu trebuie să treacă întâi prin șapte paragrafe de
     istorie. Aceeași regulă ca la coloana laterală de pe pagina de start. */
  .et-vizita { position: static; max-height: none; overflow-y: visible; order: -1; }
}
.et-vizita__titlu { font-size: var(--et-text-h4); margin: var(--et-space-l) 0
                    var(--et-space-xs); }
.et-harta--mica { height: 16rem; border-radius: var(--et-radius); }
.et-vizita__coord { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                    margin: var(--et-space-xs) 0 0; }
.et-vizita__gps { color: var(--et-muted); font-variant-numeric: tabular-nums; }

/* --- Ierarhul ----------------------------------------------------------- */
.et-ierarh__nume { font-family: var(--et-font-titlu); font-size: var(--et-text-h4);
                   margin: var(--et-space-3xs) 0 var(--et-space-2xs); }
/* Nota de exemplu stă deasupra listei de program, deci trebuie citită, nu
   ocolită: text normal pe fundal spălăcit, nu italic mic sub listă. */
.et-panou__exemplu { font-size: var(--et-text-sm); line-height: var(--et-lh-sm);
                     background: var(--et-wash); border-radius: var(--et-radius);
                     padding: var(--et-space-xs); margin: 0 0 var(--et-space-m); }

/* --- Mărci instituționale (subsol) -------------------------------------- */
/* Un rând de mărci, nu o coloană de bannere — acela era obiceiul sitului vechi.
   Înălțime comună, lățime după proporția fiecăreia; cele două aproape pătrate
   ies mai înguste decât logotipul lat, ceea ce e corect optic. */
.et-institutii { margin-top: var(--et-space-2xl);
                 padding-top: var(--et-space-l);
                 border-top: var(--et-border) solid var(--et-line-subsol, rgba(244,240,234,.22)); }
/* Spațiul e 1,5rem: la 5rem înălțime mărcile ocupă 1.047px într-un container
   de 1.152, deci spațiile mari le împingeau pe rândul următor. */
.et-institutii__lista { list-style: none; margin: 0; padding: 0;
                        display: flex; flex-wrap: wrap; align-items: center;
                        gap: var(--et-space-m); }
/* Ținta de atingere ajunge la 44px chiar dacă marca e mai scundă: logotipul
   lat are doar 26px înălțime, peste minimul de 24 din WCAG 2.5.8, dar prea
   strâmt pentru un deget. Marca nu se mărește, se mărește zona din jur. */
.et-institutii__link { display: flex; align-items: center;
                       min-height: 2.75rem; }
/* Rezervă pentru o marcă fără logo: legătură-text în culoarea logotipurilor,
   ca să stea în rând cu ele fără să pretindă că este una. Neutilizată azi —
   toate patru au fișier — dar rămâne pentru următoarea care lipsește. */
.et-institutii__link--text { font-family: var(--et-font-eticheta);
                             font-size: var(--et-text-label);
                             letter-spacing: var(--et-ls-label);
                             text-transform: uppercase;
                             color: var(--et-accent); text-decoration: none; }
.et-institutii__link--text:hover { text-decoration: underline; }
/* O singură înălțime pentru toate mărcile, fluidă, cu 5rem ca plafon.
   Fixă la 5rem, cele cinci mărci ocupă 1.047px plus spații într-un container
   de 1.152 — încape la desktop, dar se rupe în trei rânduri sub 1.200px.
   Coeficientul 6,2vw vine din lățimea lor reală: 13,08 × înălțime + spații
   trebuie să încapă în min(1152, 100vw − 48). */
/* După ce Patriarhia a urcat în grilă, rândul de jos are trei logotipuri cu
   exact același raport (260×71) — o singură clasă le ajunge. Calendarul e
   aproape pătrat: la aceeași înălțime avea o cincime din masa lor vizuală și
   rândul citea „trei logotipuri și ceva". Primește o înălțime proprie. */
.et-institutii__marca { display: block; width: auto;
                        height: clamp(1.75rem, 6.2vw, 5rem); }
.et-institutii__marca--lockup { height: clamp(2.75rem, 8.2vw, 6.5rem); }