/* ══════════════════════════════════════════════════════════════════════════════
   SHELL — componentele aplicației parohiale.

   REGULA DE AUR: în acest fișier NU există nicio culoare literală. Doar `var(--c-*)`.
   Culorile vin din `/css/tema.css`, generat pe server din `setari` (vezi src/teme.js).
   Schimbi tema din panoul de administrare → se schimbă tot, fără să atingi CSS-ul.

   Mobile-first: stilurile de bază sunt pentru telefon. `@media (min-width:…)` doar adaugă.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Ornamente bizantine, ca forme (măști), nu ca imagini colorate ─────────────
   Sunt măști SVG: culoarea vine din token, deci ornamentul își schimbă culoarea
   odată cu tema. `--ornament-afisare` e pus de temă pe `none` acolo unde nu se vor
   ornamente (tema „Sobru"), fără să fie nevoie de clase speciale în pagini.        */
:root {
  --ornament-impletitura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M0 8C5 0 15 0 20 8 25 16 35 16 40 8'/%3E%3Cpath d='M0 8C5 16 15 16 20 8 25 0 35 0 40 8'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-cruce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1'/%3E%3Crect x='4' y='7.6' width='16' height='2.8' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  /* Cruce ortodoxă cu trei brațe — emblema din antet. Înlocuiește cercul cu inițiale,
     care arăta a avatar de aplicație, nu a parohie. */
  --ornament-cruce-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26' viewBox='0 0 22 26'%3E%3Cg fill='%23000'%3E%3Crect x='9.6' y='1' width='2.8' height='24' rx='1.2'/%3E%3Crect x='6' y='4.6' width='10' height='2.2' rx='1'/%3E%3Crect x='2' y='10.4' width='18' height='2.6' rx='1.2'/%3E%3Crect x='4.6' y='18.2' width='12.8' height='2.2' rx='1' transform='rotate(-18 11 19.3)'/%3E%3C/g%3E%3C/svg%3E");
  /* Motiv de colț — vrej cu volute, ornamentul tradițional din machete. */
  --ornament-colt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M2 46V16C2 8 8 2 16 2h30'/%3E%3Cpath d='M9 46V19c0-6 4-10 10-10h27'/%3E%3Ccircle cx='16' cy='32' r='4.5'/%3E%3Ccircle cx='32' cy='16' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  /* CADRUL paginii se scrie în px, nu în rem: la mărirea literei, `rem` ar umfla și coloanele,
     iar textul n-ar mai avea unde se reașeza — ar fi mărire de poză, nu de literă. */
  --latime-continut: 1088px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  /* doar o adiere caldă în colțul de sus — nu un fundal colorat */
  background-image:
    radial-gradient(1100px 380px at 12% -10%, color-mix(in srgb, var(--c-aur) 7%, transparent), transparent 70%),
    radial-gradient(850px 340px at 92% 2%, color-mix(in srgb, var(--c-accent) 4%, transparent), transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Textura de pergament — fibră fină, generată ÎN pagină (feTurbulence), fără nicio imagine
   descărcată (CSP-ul interzice oricum orice origine externă). Intensitatea e token, ca tema
   închisă s-o poată tempera, iar „Sobru" s-o stingă de tot. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--textura-opacitate, .3);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, .titlu { font-family: var(--font-titlu); font-weight: 600; line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .85rem; }
a { color: var(--c-accent); text-underline-offset: .18em; }
a:hover { color: var(--c-accent-hover); }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

.invelis { width: 100%; max-width: var(--latime-continut); margin: 0 auto; padding: 0 1rem; }
.mono { font-variant-numeric: tabular-nums; }
.centrat { text-align: center; }
.discret { color: var(--c-text-3); font-size: .92rem; }
.ascuns { display: none !important; }

/* ── Ornament: banda împletită ────────────────────────────────────────────── */
.ornament {
  display: var(--ornament-afisare, block);
  height: 14px;
  background-color: var(--c-ornament);
  -webkit-mask: var(--ornament-impletitura) repeat-x center / 36px 14px;
  mask: var(--ornament-impletitura) repeat-x center / 36px 14px;
  opacity: .85;
}
.ornament--subtire { height: 11px; -webkit-mask-size: 28px 11px; mask-size: 28px 11px; opacity: .6; }

.cruce {
  /* `--ornament-afisare-inline`, NU `--ornament-afisare`: aceea e pentru benzile late, care sunt
     blocuri. Crucea stă în rând, lângă numele sărbătorii — cu `block` sărea pe rândul ei. */
  display: var(--ornament-afisare-inline, inline-block);
  width: 1em; height: 1em; vertical-align: -.12em;
  background-color: currentColor;
  -webkit-mask: var(--ornament-cruce) no-repeat center / contain;
  mask: var(--ornament-cruce) no-repeat center / contain;
}

/* separator cu cruce la mijloc */
.separator { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; color: var(--c-aur-text); }
.separator::before, .separator::after { content: ''; flex: 1; height: 1px; background: var(--c-border-strong); opacity: .6; }

/* ── Antet ────────────────────────────────────────────────────────────────────
   Deschis, nu un bloc greu de culoare. Pagina e luminoasă; un antet plin, saturat, cu o bandă
   împletită lată dedesubt o strivea. Rămân: crucea aurie, numele cu serif și o linie subțire
   de aur. Atât — restul e spațiu.                                                            */
.antet {
  background: var(--c-surface);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-xs);
  /* LIPICIOS: rămâne sus la derulare. Motivul pentru care nu era — medalionul hramului atârna
     peste marginea lui de jos și ar fi fost acoperit — a dispărut odată cu medalionul.

     `z-index` peste conținut: antetul găzduiește panoul „Mărimea literei", care se deschide
     PESTE pagină. Cu z-index 1, titlul cardului de program (poziționat, deci în aceeași ordine
     de stivuire) prindea clicurile destinate panoului — butonul se vedea, dar nu se apăsa. */
  position: sticky; top: 0; z-index: 40;
}
/* Banda ÎMPLETITĂ sub antet — ornamentul tradițional din machete. E mască SVG, deci ia culoarea
   aurului din temă și se stinge singură în temele fără ornament. */
/* Aur pe BORDO, nu aur pe crem. Prima variantă era aur deschis pe fond aproape alb — tehnic
   prezentă, practic invizibilă. Ornamentul trebuie să se vadă, altfel nu e ornament. */


/* Sigla din antet: aceeași icoană, tăiată pătrat pe chip (`object-position` sus), ca la
   2 cm să se recunoască sfântul, nu o siluetă. Fără icoană, cade pe cruce. */

@media (min-width: 30rem) { .antet-titlu { font-size: 1.15rem; } .antet-titlu small { white-space: normal; font-size: .8rem; } }

/* Pe telefon, pe pagina cu medalion, numele iese din antet: nu încap amândouă pe lățimea unui
   ecran de 390px, iar medalionul ar tăia textul. Numele apare oricum imediat dedesubt, mai mare.
   Pe celelalte pagini (fără medalion) antetul îl păstrează, fiindcă acolo e singurul loc. */
@media (max-width: 63.999rem) {
}



/* ── Cuprins ──────────────────────────────────────────────────────────────── */
.cuprins { padding: 1.25rem 0 3rem; }
/* pe prima pagină, medalionul atârnă de antet — deci conținutul începe lipit de el */
.cuprins:has(.emblema) { padding-top: 0; }

/* ── Aranjarea primei pagini ──────────────────────────────────────────────────
   MOBIL (implicit): o coloană, în ordinea din sursă — program, acțiuni, restul.
   Programul primul, fiindcă „ce e săptămâna asta" e întrebarea numărul unu.

   DESKTOP (≥64rem): trei coloane, ca în macheta de desktop —
     stânga  = acțiunile,  centru = identitatea și anunțurile,  dreapta = programul.
   Ordinea se schimbă cu `order`, nu prin rearanjarea HTML-ului: aceeași sursă servește
   ambele aranjamente, deci nu există două structuri de întreținut.                      */
/* Pe telefon, programul e primul: e răspunsul la întrebarea pentru care se deschide site-ul.
   Identitatea vine după — nimeni nu intră pe site ca să afle cum se numește parohia. */

@media (min-width: 64rem) {
  :root { --latime-continut: 1248px; }   /* px, nu rem — vezi nota de la definiție */
  /* Fără barele de acțiune rămân două blocuri. `align-items: stretch` face heroul să umple
     înălțimea coloanei — altfel se termina la jumătate, iar golul de sub el părea o greșeală
     de aliniere, nu o alegere. */
  /* programul PRIMUL — e singurul lucru pentru care oamenii deschid site-ul */
  /* FĂRĂ `height: 100%`: fixa înălțimea coloanei la cea a rândului de grilă, iar „Cuvântul zilei",
     adăugat după randare, deborda — subsolul ajungea PESTE butonul „Citește mai mult" și îi fura
     clicurile. Coloana are acum conținut real care o umple; nu mai are nevoie de proptea. */
  .cuprins { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .col--actiuni { order: 1; }
  .col--central { order: 2; }
  .col--program { order: 3; }
  /* pe ecran lat, coloanele laterale rămân lipite sus la derulare */
  .col--actiuni, .col--program { position: sticky; top: 1rem; }
}

/* ── Medalionul hramului ──────────────────────────────────────────────────────
   Icoana hramului, într-un DREPTUNGHI cu colțuri rotunjite — nu oval. O icoană ortodoxă e
   compusă pe verticală, cu chenar; tăiată în cerc și-ar pierde marginile pictate și ar arăta
   a poză de profil. Rama aurie ține locul ferecăturii.

   Pe TELEFON atârnă peste marginea de jos a antetului. Pe DESKTOP e centrul coloanei din mijloc. */
.emblema {
  --emblema-latime: 6.5rem;
  width: var(--emblema-latime);
  aspect-ratio: 480 / 691;              /* proporția icoanei, ca să nu fie tăiată */
  margin: 2.2rem auto 0;                /* stă PESTE banda de culoare a heroului */
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  border: 3px solid var(--c-aur);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-aur) 30%, transparent), var(--sh-lg);
  z-index: 5;
}
.emblema img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* fără icoană încărcată, rămâne crucea — o parohie nouă nu trebuie să arate a pagină stricată */
.emblema-cruce {
  width: 100%; height: 100%;
  background: var(--c-accent);
  -webkit-mask: var(--ornament-cruce-ort) no-repeat center / 46% 62%;
  mask: var(--ornament-cruce-ort) no-repeat center / 46% 62%;
}

/* ── Hero: identitatea parohiei ────────────────────────────────────────────────
   Icoana străpunge un panou de culoare — nu mai plutește într-o cutie albă cu chenar subțire.
   Chenarul de 1px pe fond crem era exact semnalul de „site vechi": totul plat, totul egal,
   nimic care să spună unde să te uiți întâi.

   Aici e o singură informație: HRAMUL. Numele parohiei e în antet, contactul în subsol.        */
/* banda de culoare din spatele icoanei */
/* Împletitura AURIE peste banda bordo — aici contrastul e maxim, se vede de la distanță. */

/* Colțuri ornamentate pe cardul de identitate — motivul de colț din machete. */
/* „În curând" NU se face prin `opacity`: asta ar coborî textul alb pe un pastel spălăcit,
   sub orice prag de lizibilitate. Devine o bară neutră — clar inactivă, dar perfect citibilă. */


/* culorile disponibile — toate verificate WCAG în src/verifica-contrast.js */
/* cap colorat, ca programul să aibă greutate — nu un titlu gri pe alb.
   Cruce mică de fiecare parte a titlului: ornament, nu decor gratuit — marchează că e liturgic. */

/* Navigarea pe săptămâni. Pe prima pagină se arată DOAR o săptămână — o lună întreagă ar
   umple ecranul și ar împinge tot restul paginii sub trei derulări. */

/* Pe TELEFON cardul are înălțime FIXĂ: altfel sare la fiecare încărcare și împinge tot ce e
   sub el. Două zile + butonul încap exact. Pe ecran lat nu mai e nevoie — acolo coloana are
   oricum spațiul ei. */
@media (min-width: 64rem) { .program-corp { min-height: 0; } }
/* rânduri mai strânse în cardul de pe prima pagină — pe /program rămân aerisite */

/* ── Carduri ──────────────────────────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); padding: 1rem; margin-bottom: 1rem; }
.card-antet { display: flex; align-items: center; gap: .6rem; margin: -1rem -1rem 1rem; padding: .75rem 1rem; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card-antet h2, .card-antet h3 { margin: 0; }

/* card „de pergament" cu chenar auriu — pentru lucruri importante (următoarea slujbă) */
.card--aur { border-color: var(--c-aur); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-aur) 35%, transparent), var(--sh-sm); }

/* ── Butoane ──────────────────────────────────────────────────────────────── */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 500; cursor: pointer;
  padding: .6rem 1.1rem; min-height: 2.75rem;   /* ținta de atingere pe telefon */
  border-radius: var(--r-md); border: 1px solid var(--c-border-strong);
  background: var(--c-surface); color: var(--c-text); text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-light); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primar { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn--primar:hover:not(:disabled) { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: var(--c-on-accent); }
.btn--fantoma { background: transparent; border-color: transparent; color: var(--c-accent); }
.btn--fantoma:hover:not(:disabled) { background: var(--c-accent-light); }
.btn--pericol { background: var(--c-red); border-color: var(--c-red); color: var(--c-on-accent); }
.btn--pericol:hover:not(:disabled) { background: var(--c-red-hover); border-color: var(--c-red-hover); color: var(--c-on-accent); }
.btn--lat { width: 100%; }
.btn--mic { padding: .35rem .7rem; min-height: 2.15rem; font-size: .88rem; }

.btn-rand { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-rand--capat { justify-content: space-between; }

/* ── Comutator segmentat (Lună / Săptămână) ───────────────────────────────── */
.comutator { display: inline-flex; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-full); padding: .2rem; gap: .2rem; }
.comutator button {
  appearance: none; border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--c-text-2);
  padding: .38rem .95rem; border-radius: var(--r-full); cursor: pointer; min-height: 2.1rem;
}
.comutator button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); font-weight: 500; }
.comutator button:hover:not([aria-pressed="true"]) { color: var(--c-accent); }

/* ── Câmpuri ──────────────────────────────────────────────────────────────── */
.camp { margin-bottom: .9rem; }
.camp > label { display: block; font-size: .88rem; font-weight: 500; color: var(--c-text-2); margin-bottom: .3rem; }
.camp input, .camp select, .camp textarea {
  width: 100%; font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  padding: .6rem .75rem; min-height: 2.75rem;
}
.camp input:focus, .camp select:focus, .camp textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }
.camp-ajutor { font-size: .82rem; color: var(--c-text-3); margin-top: .25rem; }
.camp-eroare { font-size: .85rem; color: var(--c-red); margin-top: .25rem; }

/* ── Mesaje ───────────────────────────────────────────────────────────────── */
.mesaj { border-radius: var(--r-md); padding: .7rem .9rem; margin-bottom: 1rem; font-size: .93rem; border: 1px solid; }
.mesaj--info { background: var(--c-accent-light); border-color: var(--c-accent); color: var(--c-text); }
.mesaj--bine { background: var(--c-green-light); border-color: var(--c-green); color: var(--c-text); }
.mesaj--rau  { background: var(--c-red-light);   border-color: var(--c-red);   color: var(--c-text); }
.mesaj--atentie { background: var(--c-warn-light); border-color: var(--c-warn); color: var(--c-text); }
.mesaj ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  background: var(--c-text); color: var(--c-surface);
  padding: .7rem 1.1rem; border-radius: var(--r-full); box-shadow: var(--sh-lg);
  font-size: .92rem; z-index: 60; max-width: calc(100vw - 2rem);
}
.toast--rau { background: var(--c-red); color: var(--c-on-accent); }
.toast--bine { background: var(--c-green); color: var(--c-on-accent); }

/* ── Program: vedere săptămânală ──────────────────────────────────────────── */
/* Titlul zilei: bordo, cu serif — capul de listă pe care ochiul îl prinde primul.
   Locația stă în dreapta, ca în machetă, fiindcă e informația secundară a rândului. */

/* Sărbătoarea e SINGURUL rând cu simbol. Ca în calendarul tipărit: sărbătorile mari și hramul
   cu CRUCE ROȘIE, sfinții obișnuiți discret, cu auriu — altfel „cruce roșie" n-ar mai însemna
   nimic, fiind pe toate rândurile. Regula asta decide și unde se ține Liturghie (vezi 004). */

/* Ora în FAȚĂ, aliniată în coloană — exact ca în programul tipărit. Fără pictograme:
   oamenii caută ora, nu un simbol, iar un rând cu icoană la fiecare slujbă devine zgomot. */

/* „Program de spovedit" nu e slujbă, ci interval de disponibilitate — se citește mai domol. */

/* sub-punctele unei intrări (ex. seara de duminică: paraclis + prezentare + pricesne) */

/* ── Program: vedere lunară ───────────────────────────────────────────────── */
.luna { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.luna-cap { background: var(--c-surface-2); text-align: center; font-size: .72rem; font-weight: 600; color: var(--c-text-3); padding: .4rem .1rem; text-transform: uppercase; letter-spacing: .03em; }
.luna-zi { background: var(--c-surface); min-height: 3.6rem; padding: .25rem .3rem; display: flex; flex-direction: column; gap: .15rem; }
.luna-zi--alta { background: var(--c-surface-2); opacity: .55; }
.luna-zi--azi { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.luna-numar { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.luna-zi--sarbatoare .luna-numar { color: var(--c-accent); font-weight: 700; }
.luna-puncte { display: flex; flex-wrap: wrap; gap: 2px; }
.luna-punct { width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
.luna-punct--sarbatoare { background: var(--c-aur); }
@media (min-width: 40rem) {
  .luna-zi { min-height: 5.2rem; padding: .35rem .45rem; }
  .luna-cap { font-size: .8rem; padding: .5rem .2rem; }
}

/* ziua selectată din calendar, detaliată sub el */
.luna-detaliu { margin-top: 1rem; }

/* ── Pomelnic ─────────────────────────────────────────────────────────────── */
.pasi { display: flex; gap: .3rem; margin-bottom: 1.1rem; }
.pas-punct { flex: 1; height: 4px; border-radius: var(--r-full); background: var(--c-border); }
.pas-punct--facut { background: var(--c-aur); }
.pas-punct--curent { background: var(--c-accent); }
.pas-eticheta { font-size: .8rem; color: var(--c-text-3); margin-bottom: .2rem; }

.optiuni { display: grid; gap: .6rem; }
.optiune {
  display: flex; align-items: flex-start; gap: .7rem; width: 100%; text-align: left;
  padding: .85rem .9rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer;
}
.optiune:hover { border-color: var(--c-accent); background: var(--c-accent-light); }
.optiune[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-light); box-shadow: 0 0 0 1px var(--c-accent); }
.optiune-titlu { font-weight: 600; }
.optiune-sub { font-size: .85rem; color: var(--c-text-3); }

.lista-nume { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.nume-rand { display: flex; align-items: center; gap: .4rem; }
.nume-rand input { flex: 1; }
.nume-sterge {
  appearance: none; border: 1px solid var(--c-border-strong); background: var(--c-surface);
  color: var(--c-text-3); width: 2.4rem; height: 2.4rem; border-radius: var(--r-md); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.nume-sterge:hover { border-color: var(--c-red); color: var(--c-red); background: var(--c-red-light); }

.contor { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--c-text-3); }
.contor--plin { color: var(--c-red); font-weight: 600; }

.grup-nume { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: .8rem; margin-bottom: .8rem; background: var(--c-surface); }
.grup-nume > h3 { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; margin-bottom: .4rem; }

/* ── Subsol ───────────────────────────────────────────────────────────────────
   Trei blocuri cu rost (parohie · legături · legal), o cruce ca despărțitor și un fir de aur
   sus. Varianta veche era o grămadă de linkuri într-un dreptunghi gri.                        */
@media (min-width: 48rem) {
}
/* Pe ecran lat, prima pagină trebuie să încapă într-un ecran. Un subsol de 236px mânca un sfert
   din el. Pe telefon rămâne aerisit — acolo se derulează oricum. */
@media (min-width: 64rem) {
}
@media (min-width: 48rem) { .subsol-linkuri { align-items: flex-start; } }

/* ── Selector de temă ─────────────────────────────────────────────────────── */
.teme { display: flex; gap: .5rem; flex-wrap: wrap; }
.tema-buton { appearance: none; cursor: pointer; font: inherit; font-size: .85rem;
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text);
  border-radius: var(--r-md); padding: .4rem .6rem; display: flex; align-items: center; gap: .45rem; }
.tema-buton[aria-pressed="true"] { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.tema-mostre { display: flex; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--c-border); }
.tema-mostra { width: .85rem; height: 1.1rem; }

/* ── Stări de încărcare ───────────────────────────────────────────────────── */
.se-incarca { color: var(--c-text-3); padding: 1.25rem; text-align: center; }
.gol { text-align: center; padding: 2rem 1rem; color: var(--c-text-3); }
.gol .cruce { display: block; margin: 0 auto .5rem; width: 2rem; height: 2rem; opacity: .35; }

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

/* ── Pictograme (măști SVG, deci își iau culoarea din token) ────────────────
   Inline, ca să nu existe nicio cerere către un CDN de iconițe. CSP-ul interzice
   oricum orice origine externă.                                                */

:root {
  --ico-predici: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='3'/%3E%3Cpath d='M10 9.5l5 2.5-5 2.5z'/%3E%3C/svg%3E");
  --ico-program: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --ico-pomelnic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v4h4M9 12h7M9 16h5'/%3E%3C/svg%3E");
  --ico-doneaza: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-9.5A3.5 3.5 0 0 1 12 8a3.5 3.5 0 0 1 7 2.5C19 15.5 12 20 12 20z'/%3E%3C/svg%3E");
  --ico-programari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --ico-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.2 2 2 0 0 1 6.5 3z'/%3E%3C/svg%3E");
  --ico-cuvant: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6a3 3 0 0 1 2 5 3 3 0 0 1-2 5H4z' transform='translate(0 2)'/%3E%3Cpath d='M20 4h-6a3 3 0 0 0-2 5 3 3 0 0 0 2 5h6z' transform='translate(0 2)'/%3E%3C/svg%3E");
  /* servicii la domiciliu — casă cu cruce */
  --ico-domiciliu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M12 10v6M9.5 12.5h5'/%3E%3C/svg%3E");
  /* botez și cununie — două verighete */
  --ico-taine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='9' cy='14' r='5.5'/%3E%3Ccircle cx='15.5' cy='11' r='5.5'/%3E%3C/svg%3E");
  --ico-voluntariat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12l4-3 4 2 4-2 4 2 4-3'/%3E%3Cpath d='M6 9l3.5-3.5a2 2 0 0 1 2.8 0L16 9'/%3E%3Cpath d='M2 12v3l5 4h10l5-4v-3'/%3E%3C/svg%3E");
  --ico-proiecte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 6v13H4V8z'/%3E%3Cpath d='M12 2v6M9 21v-6h6v6'/%3E%3C/svg%3E");
  --ico-evenimente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 15h4'/%3E%3C/svg%3E");
  /* lumânare — pastila din fața fiecărei slujbe */
  --ico-lumanare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c1.6 1.8 1.6 3.4 0 4.6C10.4 5.4 10.4 3.8 12 2z'/%3E%3Crect x='9' y='9' width='6' height='12' rx='1.4'/%3E%3C/svg%3E");
  --ico-sageata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* ── Panoul de administrare ──────────────────────────────────────────────────
   Reciclează componentele publice (card, camp, btn, teme). Doar tabelul de program și
   comutatoarele sunt proprii — restul ar fi fost duplicare.                            */
.admin-bara { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .8rem; }
.admin-bara .discret { margin-left: auto; }

.tbl-admin { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl-admin th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-text-3); font-weight: 600; padding: .4rem .35rem; white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
}
.tbl-admin td { padding: .3rem .35rem; border-bottom: 1px dashed var(--c-border); vertical-align: middle; }
.tbl-admin select, .tbl-admin input {
  width: 100%; min-width: 6.5rem; font: inherit; font-size: .88rem; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: .35rem .4rem; min-height: 2.25rem;
}
.tbl-admin select:disabled { background: var(--c-surface-2); color: var(--c-text-4); }
/* Capul de tabel poate purta o lămurire sub titlul coloanei, pentru coloanele al căror înțeles
   depinde de rândul din care te uiți la ele. */
.tbl-admin th small { display: block; font-weight: 400; font-size: .74rem; text-transform: none; }

/* ── Afișul cu programul ──────────────────────────────────────────────────── */
.afis-comenzi { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-bottom: .9rem; }
.camp--mic { margin-bottom: 0; flex: 0 1 12rem; }
.camp--mic > span { display: block; font-size: .84rem; font-weight: 500; color: var(--c-text-2); margin-bottom: .25rem; }
.camp--mic input, .camp--mic select { width: 100%; }
/* Pânza are 1754 px la A3; fără plafon ar întinde pagina de trei ori peste ecran. Raportul îl
   păstrează `height:auto`, deci previzualizarea rămâne fidelă formatului ales. */
.afis-previzualizare {
  display: block; width: 100%; max-width: 30rem; height: auto; margin: 1rem auto;
  background: #fff; border: 1px solid var(--c-border); box-shadow: var(--sh-xs);
}
.tbl-admin select:focus, .tbl-admin input:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }

.comutator-rand {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .2rem;
  border-bottom: 1px dashed var(--c-border); cursor: pointer;
}
.comutator-rand:last-child { border-bottom: 0; }
.comutator-rand input { width: 1.15rem; height: 1.15rem; accent-color: var(--c-accent); }

/* ── Lista de pomenire (ecranul preotului) ───────────────────────────────────
   Foaie de citit, nu tabel de administrare: literă mare, două coloane, contrast puternic.
   Pe tabletă ținută în mână, în altar — de aceea nimic nu e sub 1.1rem.                     */
.pomenire-cap { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.pomenire-cap > div { flex: 1; min-width: 0; }
.pomenire-contor {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  background: var(--c-accent); color: var(--c-on-accent);
  border-radius: var(--r-full); padding: .15rem .6rem; font-variant-numeric: tabular-nums; font-weight: 600;
}
.pomenire-comutator { margin-bottom: .9rem; }

.pomenire-nume {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 1.5rem;
  font-family: var(--font-titlu); font-size: 1.35rem; line-height: 1.75;
}
.pomenire-nume li { break-inside: avoid; padding: .1rem 0; border-bottom: 1px dotted var(--c-border); }
.pomenire-ori { color: var(--c-accent); font-size: .8em; margin-left: .35rem; font-family: var(--font); font-weight: 600; }
@media (min-width: 48rem) { .pomenire-nume { font-size: 1.6rem; columns: 2; } }
@media (max-width: 26rem) { .pomenire-nume { columns: 1; } }

.pomenire-jos {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem;
  padding-top: .9rem; border-top: 2px solid var(--c-aur);
}
.pomenire-jos .mono { flex: 1; text-align: center; color: var(--c-text-3); font-size: .9rem; }
.pomenire-jos .btn { min-width: 3rem; }

/* ── Tipar: lista de pomenire ────────────────────────────────────────────────
   Cerință exactă a parohiei: A4 CULCAT, șase coloane de nume, MAJUSCULE, Cambria 13pt.
   Ecranul și hârtia au nevoi diferite (tabletă în mână vs. foaie citită de la depărtare),
   deci sunt două randări separate, nu una „responsivă" care le împacă prost pe amândouă. */
.doar-tipar { display: none; }

@media print {
  @page { size: A4 landscape; margin: 10mm 9mm 8mm; }

  /* pe hârtie nu are ce căuta nimic din interfață */
  body { background: #fff !important; color: #000; }
  body::before { display: none !important; }   /* textura de pergament */
  .cuprins, .invelis { padding: 0 !important; max-width: none !important; }

  .doar-tipar { display: block; }

  .tipar-cap { text-align: center; border-bottom: 1.5pt solid #000; padding-bottom: 2mm; margin-bottom: 3mm; }
  .tipar-parohie { font-family: Cambria, "Palatino Linotype", Georgia, serif; font-size: 14pt; font-weight: 700; }
  .tipar-data { font-family: Cambria, "Palatino Linotype", Georgia, serif; font-size: 12pt; }
  .tipar-sumar { font-size: 9pt; color: #333; }

  .tipar-sectiune > h2 {
    font-family: Cambria, "Palatino Linotype", Georgia, serif;
    font-size: 12pt; letter-spacing: .08em; text-align: center;
    margin: 0 0 2mm; padding-bottom: 1mm; border-bottom: .5pt solid #666;
  }
  /* a doua categorie începe pe foaie nouă: nimeni nu caută „adormiții" la mijlocul coloanei 4 */
  .tipar-pagina-noua { break-before: page; }

  .tipar-nume {
    list-style: none; margin: 0; padding: 0;
    columns: 6; column-gap: 5mm; column-fill: auto;
    font-family: Cambria, "Palatino Linotype", Georgia, serif;
    font-size: 13pt; line-height: 1.45;
    text-transform: uppercase;
  }
  .tipar-nume li { break-inside: avoid; padding: 0; }
  .tipar-ori { font-size: 10pt; }
  .tipar-gol { font-family: Cambria, serif; font-size: 13pt; }
}

.pomenire-zile { display: flex; gap: .35rem; flex: 0 0 auto; }

/* Ecrane late dar SCUNDE (laptopuri de 768px înălțime). Cerința „prima pagină încape într-un
   ecran" e a lățimii mari, dar acolo înălțimea e cea rară. Strângem medalionul și spațierea,
   nu conținutul: nu se pierde nicio informație, doar aerul din jurul ei. */
@media (min-width: 64rem) and (max-height: 860px) {
  .emblema { --emblema-latime: 6rem; margin-bottom: .6rem; }
  .cuprins { padding-top: .9rem; padding-bottom: .9rem; }
}

/* ── Cuvântul zilei ──────────────────────────────────────────────────────────
   Text de citit, nu card de interfață: coloană îngustă, serif, rânduri aerisite.
   Fără chenar și fără umbră — ce se citește nu are nevoie de cutie. */

/* Trei rânduri, apoi „Citește mai mult". Textul întreg are 880 de caractere — pe prima pagină
   ar împinge tot ce urmează sub două ecrane. Cine vrea să-l citească, îl deschide. */
/* estompare la tăietură, ca să se vadă că textul continuă */

/* ── Frontispiciul paginii ────────────────────────────────────────────────────
   NU e widgetul-card scos anterior. Acela plutea într-o cutie albă, repeta numele din antet
   și ocupa jumătate de ecran. Acesta e CAPUL paginii: bandă pe toată lățimea, cu textură de
   pergament, icoana ca punct de sprijin — exact rolul stemei din machetă.

   Motivul pentru care pagina arăta goală nu era compoziția, ci faptul că a rămas un singur
   modul aprins. Un frontispiciu real dă paginii un început; un card singuratic, nu.          */
/* Pe ecran lat, frontispiciul se așază pe ORIZONTALĂ: icoana lângă nume, ca pe capul unui act
   parohial. Stivuit, ocupa 324px doar ca să spună cum cheamă parohia — spațiu luat programului. */
@media (min-width: 64rem) {
}

/* cu un singur modul, pagina se citește pe o coloană centrată, nu pe două inegale */
@media (min-width: 64rem) {
}
/* ── Ornamente de afiș parohial ──────────────────────────────────────────────
   Cusătura vine ca token din temă (src/teme.js), desenată din culorile ei: ață roșie cu
   contur negru între două linii — motivul de romb cu colți de pe ștergar.

   E background-image, nu mask: motivul are DOUĂ culori simultan, iar o mască poate purta
   una singură. De asta arăta ca un lanț de cerculețe înainte.

   Se pune DOAR pe fâșii care se întind pe toată lățimea (antet, subsol, separații). Vignete
   la colțuri de card ar fi cerut poziții fixe, care se sparg la lățimi mici — site-ul rămâne
   responsiv, deci ornamentul trebuie să curgă, nu să fie ancorat.                          */

.banda-cusatura,
.antet::after,
.frontispiciu::after,

.antet::after { content: ''; }

/* Despărțitorul cu romb: „—— ◆ ——", ca între blocurile de text de pe afiș. */
.divizor::before,


/* În frontispiciul orizontal, divizorul e o virgulă vizuală între nume și hram — nu o
   linie care traversează banda. Fără limită, flex:1 îi întinde liniile pe tot golul. */
@media (min-width: 64rem) {
}
/* Antetul „discret": marca lui tace cât frontispiciul e vizibil, ca numele să nu apară de două
   ori. `visibility` (nu `display`) ca bara să nu-și schimbe înălțimea la derulare — un antet care
   sare cu câțiva pixeli când apare titlul se vede imediat și arată a defect. */
.antet--discret .antet-sigla-img,
.antet--discret .antet-cruce,
.antet-sigla-img,
.antet-cruce,
@media (prefers-reduced-motion: reduce) {
}

/* Cât e discret, antetul se TOPEȘTE în frontispiciu: fără fundal propriu, fără bandă de cusătură.
   Altfel rămâne o fâșie goală cu un buton singur, urmată de două benzi lipite una de alta —
   frontispiciul are deja banda lui la bază. La derulare, antetul își recapătă fundalul și devine
   bara obișnuită. */
/* Cât frontispiciul e pe ecran, antetul stă peste el și se topește în fundal. Din clipa în care
   pagina a derulat, `.antet--discret` cade și antetul își recapătă fundalul opac — fără el,
   textul ar trece pe sub un antet transparent și s-ar citi peste litere. */

/* ══ PRIMA PAGINĂ ═══════════════════════════════════════════════════════════════
   Trei coloane pe desktop (acțiuni · imagine+blog · program), două pe tabletă, una pe telefon.

   Ordinea de pe TELEFON diferă de cea de pe desktop și se face cu `order`, nu prin marcaj
   duplicat: identitate/imagine → programul bisericii → acțiuni → blog. Cine deschide site-ul
   din stradă vrea ora slujbei, nu un articol.                                              */


/* Telefon: o coloană — imagine, program, acțiuni, cuvântul zilei. */

@media (min-width: 48rem) and (max-width: 74.99rem) {
  /* Tabletă: central + program pe două coloane, acțiunile pe un rând dedesubt. */
}

@media (min-width: 75rem) {
  /* Așezare explicită, nu `order`: blogul trebuie SUB imagine, în aceeași coloană, iar acțiunile
     și programul să se întindă pe amândouă rândurile. */
}

/* ── Coloana din stânga: carduri conturate ───────────────────────────────────
   Conturate, nu pline cu culoare: cinci dreptunghiuri colorate unul sub altul ar concura cu
   programul, care e lucrul important de pe pagină. Aici linia aurie e suficientă.            */
.actiuni {
  display: grid;
  gap: .5rem;
  margin: 0;
}

.actiune:hover,


/* Titlul și eticheta stau UNA SUB ALTA, nu una lângă alta: pe o coloană de 17rem, „în curând"
   pus alături fura destulă lățime cât să rupă „Predici și cateheze video" pe trei rânduri. */



/* ── Coloana centrală: arcada ────────────────────────────────────────────────
   Arcada e desenată din `border-radius`, nu dintr-o imagine de colț: la orice lățime rămâne o
   arcadă, în loc să se rupă în patru bucăți care nu se mai potrivesc.                        */
.arcada > img,


/* ── Coloana din dreapta: programul, condensat ───────────────────────────────
   Scris mai mic decât în pagina /program, ca să încapă mai multe zile întregi pe un ecran.
   Câte anume nu e o cifră din CSS — se măsoară la randare (vezi pagina-acasa.js).           */


/* ── Mărimea afișării (buton public) ─────────────────────────────────────────
   Butonul e în antet, disponibil oricui — nu ascuns într-un cont. Panoul se deschide sub el,
   ancorat la DREAPTA, ca la lățimi mici să nu iasă din ecran. */
.zoom { position: relative; display: inline-flex; }
.zoom-buton {
  display: inline-flex;
  align-items: baseline;
  gap: .05rem;
  min-width: 2.6rem;
  min-height: 2.6rem;                /* țintă de atingere, nu doar text */
  justify-content: center;
  padding: 0 .55rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--font-titlu);
  font-size: 1rem;
  cursor: pointer;
}
.zoom-buton:hover, .zoom-buton:focus-visible { border-color: var(--c-accent); color: var(--c-accent); }
.zoom-plus { font-size: .7rem; }

.zoom-panou {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 60;
  min-width: 11rem;
  display: grid;
  gap: .15rem;
  padding: .35rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
}
.zoom-panou[hidden] { display: none; }

.zoom-treapta {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.4rem;
  padding: .3rem .5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.zoom-treapta:hover { background: var(--c-surface-2); }
.zoom-treapta[aria-checked="true"] { background: var(--c-surface-2); color: var(--c-accent); font-weight: 600; }

/* ── Litera mare = ecran îngust ──────────────────────────────────────────────
   La treptele 4 și 5, textul are nevoie de coloane mai late, altfel „Marți, 4 august" se rupe
   în două rânduri și programul devine o coloană de cuvinte tăiate.

   Regula e cea de la responsive, aplicată după MĂRIMEA LITEREI, nu după lățimea ferestrei:
   pragurile din `@media` scrise în `rem` se evaluează după mărimea inițială a rădăcinii (16px),
   deci nu se mișcă singure când crește litera. Le mutăm noi. */
@media (min-width: 75rem) {
  :root[data-zoom="4"] .acasa-grid,
  :root[data-zoom="4"] .acasa-grid .col--central,
  :root[data-zoom="4"] .acasa-grid .col--blog,
  :root[data-zoom="4"] .acasa-grid .col--program,
  :root[data-zoom="4"] .acasa-grid .col--actiuni,
  :root[data-zoom="4"] .acasa-grid .col--actiuni .actiuni,
}

/* ── Blogul parohiei ─────────────────────────────────────────────────────────
   Lista DERULEAZĂ în interiorul cardului, nu împinge pagina. Cu opt articole curgând liber,
   prima pagină ar fi de trei ecrane, iar programul din dreapta ar rămâne singur lângă un gol.

   Înălțimea e legată de ecran (`clamp` cu `vh`), nu fixă în px: pe un laptop scund cardul ar
   depăși marginea, pe un monitor înalt ar lăsa un gol sub el. */
/* Se poate derula cu tastatura, deci trebuie să se și vadă că e focalizată. */

/* Rezumatul se strânge la trei rânduri din CSS, nu tăiat pe caractere în JS: tăiat pe caractere
   s-ar rupe la mijlocul unui cuvânt, iar la altă lățime ar tăia în alt loc. */

/* ── Pagina unui articol ─────────────────────────────────────────────────────
   Coloană îngustă: un text de citit are nevoie de rânduri scurte. Peste ~70 de caractere pe rând,
   ochiul pierde începutul rândului următor. */
.invelis--ingust { max-width: 44rem; }
.firimituri { font-size: .85rem; color: var(--c-text-3); margin: 0 0 1.1rem; }
.articol-categorie {
  margin: 0 0 .3rem; font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-ornament-accent);
}
.articol-titlu { margin: 0 0 .3rem; font-size: 1.9rem; line-height: 1.2; color: var(--c-accent); }
.articol-subtitlu { margin: 0 0 .35rem; font-size: 1.1rem; font-style: italic; color: var(--c-text-2); }
.articol-semnatura { margin: 0; font-size: .85rem; color: var(--c-text-3); }
.articol-imagine {
  display: block; width: 100%; height: auto; margin: 0 0 1.2rem;
  border-radius: var(--r-md); border: 1px solid var(--c-aur);
}
.articol-corp p { margin: 0 0 1rem; line-height: 1.75; color: var(--c-text); }
.articol-inapoi { margin-top: 2rem; font-size: .9rem; }

/* ── Admin: articole și conectori ────────────────────────────────────────────*/
.admin-doua { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .admin-doua { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.cap-rand { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.lista-articole { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lista-articole button {
  width: 100%; text-align: left; display: grid; gap: .15rem;
  padding: .6rem .7rem; border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer;
}
.lista-articole li.ales button { border-color: var(--c-accent); background: var(--c-surface-2); }
.lista-meta { font-size: .78rem; color: var(--c-text-3); }
.publicari { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
.publicare { font-size: .72rem; color: var(--c-text-3); }
.publicare--trimis { color: var(--c-green); }
.publicare--esuat { color: var(--c-red); }
.conector { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: .9rem 1rem; margin: 0 0 1rem; }
.conector legend { font-family: var(--font-titlu); padding: 0 .4rem; }
.conector-cont { font-size: .8rem; color: var(--c-text-3); font-family: var(--font); }
.comutator-rand { display: flex; align-items: flex-start; gap: .5rem; margin: .6rem 0; }
.nota { font-size: .88rem; color: var(--c-text-2); line-height: 1.5; }
.gol { color: var(--c-text-3); font-size: .9rem; }
.raport { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .88rem; display: grid; gap: .2rem; }
.raport .ok { color: var(--c-green); }
.raport .rau { color: var(--c-red); }
.raport .neutru { color: var(--c-text-3); }

/* ══ DESIGNUL APROBAT (Figma „homepage-parohie") ═══════════════════════════════
   Culorile NU sunt hexuri scrise aici: vin din tokenii temei, ca multiskin-ul să continue să
   funcționeze. Designul a fost desenat peste paleta „bordo-vin", care e chiar tema implicită —
   de aceea se potrivesc. Schimbi tema din admin, se schimbă și ecranul ăsta.               */

:root {
  --antet-h: 100px;
  --col-stanga: 280px;
  --col-dreapta: 390px;
  --foto-substituent: color-mix(in srgb, var(--c-aur) 22%, var(--c-surface-2));
}

/* ── Antet ───────────────────────────────────────────────────────────────────*/
.antet {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-bg);
  border-bottom: 0;
}
.antet-bara {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--latime-continut); margin-inline: auto;
  padding: 0 1.5rem; min-height: var(--antet-h);
}

.marca { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; flex: none; }
.marca-cruce { width: 34px; height: 34px; flex: none; color: var(--c-aur); }
.marca-texte { display: grid; gap: .1rem; min-width: 0; }
.marca-supra {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-aur-text); font-weight: 600;
}
.marca-titlu {
  font-family: var(--font-titlu); font-size: 1.45rem; line-height: 1.15;
  color: var(--c-accent);
}
.marca-sub { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-3); }

.nav-sus { display: none; align-items: center; gap: 1.9rem; margin-inline: auto; }
.nav-sus a {
  position: relative; padding: .4rem 0;
  color: var(--c-text-2); text-decoration: none; font-size: 1rem;
}
.nav-sus a:hover { color: var(--c-accent); }
/* Pagina curentă poartă o linie SUB text, ca în design — nu un fundal colorat, care ar concura
   cu butonul de cont de alături. */
.nav-sus a[aria-current="page"] { color: var(--c-accent); font-weight: 600; }
.nav-sus a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--c-accent); border-radius: 2px;
}

.antet-actiuni { display: flex; align-items: center; gap: .7rem; flex: none; margin-left: auto; }
.btn-cont {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.15rem;
  border-radius: var(--r-md); background: var(--c-accent); color: #fff;
  text-decoration: none; font-size: .95rem; white-space: nowrap;
}
.btn-cont:hover { background: var(--c-accent-hover); color: #fff; }

/* Banda de cusătură populară, sub antet și deasupra subsolului. Motivul vine din temă
   (`--ornament-cusatura`), deci ața urmează paleta. */
.antet::after, .banda-cusatura {
  content: ''; display: var(--ornament-afisare, block); height: 12px;
  background: var(--ornament-cusatura) repeat-x center / auto 12px;
  opacity: .9;
}

/* ── Butonul de sertar + sertarul ────────────────────────────────────────────*/
.bara-buton {
  width: 2.7rem; height: 2.7rem; flex: none; display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); cursor: pointer;
}
.bara-buton > span, .bara-buton > span::before, .bara-buton > span::after {
  display: block; width: 1.1rem; height: 2px; background: var(--c-text-2); border-radius: 2px;
}
.bara-buton > span { position: relative; }
.bara-buton > span::before, .bara-buton > span::after { content: ''; position: absolute; left: 0; }
.bara-buton > span::before { top: -6px; }
.bara-buton > span::after  { top: 6px; }

.sertar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
  width: min(21rem, 86vw); padding: 4.5rem 1rem 2rem;
  background: var(--c-surface); border-right: 1px solid var(--c-border);
  box-shadow: var(--sh-md); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform .2s ease;
}
body.sertar-deschis .sertar { transform: none; }
@media (prefers-reduced-motion: reduce) { .sertar { transition: none; } }

.sertar-grup + .sertar-grup { margin-top: 1.2rem; }
.sertar-cap {
  margin: 0 0 .35rem .6rem; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-text-3);
}
.sertar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sertar a {
  display: flex; align-items: center; min-height: 2.7rem; padding: .4rem .6rem;
  border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; font-size: .96rem;
}
.sertar a:hover { background: var(--c-surface-2); color: var(--c-accent); }
.sertar a[aria-current="page"] { background: var(--c-accent-light); color: var(--c-accent); font-weight: 600; }

.sertar-voal { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.35); }
.sertar-voal[hidden] { display: none; }

/* ── Grila paginii ───────────────────────────────────────────────────────────*/
.cuprins { padding: 1.5rem 0 0; }
.acasa-grila { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
/* Telefon: program → acțiuni → cuvânt. Ora slujbei e întrebarea numărul unu. */
.acasa-grila .col--program { order: 1; }
.acasa-grila .col--actiuni { order: 2; }
.acasa-grila .col--centru  { order: 3; }

/* ── Coloana din stânga ──────────────────────────────────────────────────────*/
.actiuni { display: grid; gap: .55rem; }
.act {
  display: flex; align-items: center; gap: .85rem;
  min-height: 3.5rem; padding: .75rem 1rem;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.act:hover, .act:focus-visible { border-color: var(--c-accent); transform: translateY(-1px); }
.act[aria-disabled="true"] {
  cursor: default; color: var(--c-text-3); background: var(--c-surface);
  border-style: dashed; transform: none;
}
/* CTA-ul dominant: plin cu culoare, literă mai apăsată, majuscule — ca în design. */
.act--principal {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .95rem;
  box-shadow: var(--sh-sm);
}
.act--principal:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.act-ico { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--c-accent); }
.act--principal .act-ico, .act--principal .act-chevron { color: #fff; }
.act[aria-disabled="true"] .act-ico { color: var(--c-text-4); }
.ico { width: 1.35rem; height: 1.35rem; }
.ico-mic { width: 1.05rem; height: 1.05rem; }
.act-titlu { flex: 1; min-width: 0; line-height: 1.25; }
.act-chevron { flex: none; color: var(--c-text-3); display: grid; place-items: center; }
.act-chevron .ico { width: 1.05rem; height: 1.05rem; }
.act-curand {
  flex: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-4);
}

/* ── Coloana din mijloc ──────────────────────────────────────────────────────*/
.titlu-parohie {
  margin: 0 0 1rem; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15;
  color: var(--c-accent); font-weight: 400;
}
.foto-substituent {
  height: clamp(11rem, 26vh, 15rem); margin: 0 0 1.15rem;
  border-radius: var(--r-md); background: var(--foto-substituent);
  border: 1px solid var(--c-border);
}

.cuvant-card {
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); padding: 1.15rem 1.25rem 1.25rem;
}
.cuvant-titlu {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem;
  font-size: 1.25rem; color: var(--c-accent);
}
.citat { margin: 0 0 .9rem; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--c-accent); }
.citat p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--c-text); }
.citat cite {
  display: block; margin-top: .35rem; font-style: normal;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-aur-text);
}
.cuvant-text { margin: 0 0 .9rem; line-height: 1.7; color: var(--c-text-2); }

.link-sageata {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--c-accent); font-weight: 500; text-decoration: none;
}
.link-sageata:hover { text-decoration: underline; }

/* ── Coloana programului ─────────────────────────────────────────────────────*/
.program-card {
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); padding: 1.1rem 1.15rem 1.15rem;
}
.program-titlu {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem;
  font-size: 1.2rem; color: var(--c-accent);
}
.zi + .zi { border-top: 1px solid var(--c-border); margin-top: .8rem; padding-top: .8rem; }
.zi-cap { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.zi-cap h3 { margin: 0; font-size: 1.05rem; color: var(--c-accent); font-weight: 600; }
.zi-eticheta {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--c-warn-light); color: var(--c-warn);
}
.zi-sarbatoare { margin: .1rem 0 .3rem; font-size: .92rem; color: var(--c-ornament-accent); }
.zi-sarbatoare .cruce { margin-right: .35rem; }
.zi-fara { margin: .2rem 0; font-size: .9rem; color: var(--c-text-3); font-style: italic; }
.slujba { display: flex; gap: .8rem; margin: .25rem 0; align-items: baseline; }
.slujba-ora { flex: none; min-width: 4.6rem; color: var(--c-aur-text); font-size: .92rem; }
.slujba-nume { color: var(--c-text); line-height: 1.35; }
.slujba--anulata .slujba-nume { text-decoration: line-through; color: var(--c-text-3); }
.program-corp .link-sageata { margin-top: .9rem; }

/* ── Banda de proiecte ───────────────────────────────────────────────────────*/
.banda-proiecte {
  margin-top: 2rem; padding: 2rem 0 2.5rem;
  background: var(--c-surface-2); border-top: 1px solid var(--c-border);
}
.sectiune-titlu {
  margin: 0 0 1.4rem; text-align: center; font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--c-accent);
}
.proiecte-grila { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.proiect {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface);
}
.proiect-foto {
  background: var(--foto-substituent); min-height: 9rem;
}
.proiect-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proiect-corp { padding: .95rem 1.05rem 1.05rem; display: flex; flex-direction: column; gap: .5rem; }
.proiect-titlu {
  display: flex; align-items: center; gap: .4rem; margin: 0;
  font-size: 1.05rem; color: var(--c-accent);
}
/* Descrierea se strânge la DOUĂ rânduri, ca în design. Din CSS, nu tăiată pe caractere în JS:
   tăiată pe caractere s-ar rupe la mijlocul unui cuvânt, iar la altă lățime ar tăia altundeva. */
.proiect-desc {
  margin: 0; font-size: .92rem; line-height: 1.5; color: var(--c-text-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.progres {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--c-border) 70%, var(--c-surface));
}
/* O SINGURĂ culoare pe toată porțiunea completată — cerință explicită. Un degrade ar sugera că o
   parte din sumă valorează altfel decât restul. */
.progres-umplut { display: block; height: 100%; }
.progres--p1 { background: var(--c-red); }
.progres--p2 { background: #d97706; }
.progres--p3 { background: var(--c-aur); }
.progres--p4 { background: color-mix(in srgb, var(--c-green) 78%, #ffffff); }
.progres--p5 { background: var(--c-green); }
.proiect-procent { font-weight: 700; }
.proiect-procent.progres--p1, .proiect-procent.progres--p2, .proiect-procent.progres--p3,
.proiect-procent.progres--p4, .proiect-procent.progres--p5 { background: none; }
.proiect-procent.progres--p1 { color: var(--c-red); }
.proiect-procent.progres--p2 { color: #b45309; }
.proiect-procent.progres--p3 { color: var(--c-aur-text); }
.proiect-procent.progres--p4, .proiect-procent.progres--p5 { color: var(--c-green); }
.proiect-cifre {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  margin: 0; font-size: .88rem; color: var(--c-text-2);
}
.proiect-butoane { display: flex; gap: .5rem; margin-top: .15rem; }
.proiect-butoane .btn { flex: 1; justify-content: center; }

/* ── Subsol ──────────────────────────────────────────────────────────────────*/
.subsol { margin-top: 0; background: var(--c-bg); }
.subsol-corp {
  display: grid; gap: 1.6rem; grid-template-columns: 1fr;
  max-width: var(--latime-continut); margin-inline: auto; padding: 1.8rem 1.5rem 1.2rem;
}
.marca--subsol { margin-bottom: .8rem; }
.marca--subsol .marca-titlu { font-size: 1.15rem; }
.subsol-cap {
  margin: 0 0 .6rem; font-family: var(--font-titlu); font-size: 1rem; color: var(--c-accent);
}
.subsol-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.subsol-contact li { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; color: var(--c-text-2); }
.subsol-contact .ico-mic { flex: none; margin-top: .15rem; color: var(--c-accent); }
.subsol-linkuri { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.subsol-linkuri a { font-size: .9rem; color: var(--c-text-2); text-decoration: none; }
.subsol-linkuri a::before { content: '• '; color: var(--c-aur); }
.subsol-linkuri a:hover { color: var(--c-accent); }
.subsol-despre { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--c-text-2); }
.subsol-social { display: flex; gap: .6rem; margin-bottom: .8rem; }
.subsol-social a {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-accent);
}
.subsol-social a:hover { border-color: var(--c-accent); }
.subsol-drepturi { margin: 0; font-size: .76rem; color: var(--c-text-3); line-height: 1.5; }

.anpc {
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
  padding: .8rem 1rem 1.2rem; border-top: 1px solid var(--c-border);
  max-width: var(--latime-continut); margin-inline: auto;
}
.anpc a {
  font-size: .76rem; letter-spacing: .04em; padding: .3rem .7rem;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  color: var(--c-text-3); text-decoration: none;
}
.anpc a:hover { border-color: var(--c-accent); color: var(--c-accent); }

.in-constructie {
  max-width: 30rem; margin: 0 auto 1rem; padding: .7rem .9rem;
  border: 1px solid var(--c-aur); border-radius: var(--r-md);
  background: var(--c-surface-2); color: var(--c-text-2);
  font-size: .92rem; text-align: center; line-height: 1.5;
}
.acasa-grila--doar-program {
  grid-template-columns: minmax(0, 1fr) !important; max-width: 30rem; margin-inline: auto;
}

/* ── Tabletă ─────────────────────────────────────────────────────────────────*/
@media (min-width: 48rem) {
  .proiecte-grila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proiect { grid-template-columns: 40% 1fr; }
  .proiect-foto { min-height: 0; }
  .subsol-corp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Programul și mijlocul pe două coloane; acțiunile trec pe un rând, sub ele. */
  .acasa-grila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .acasa-grila .col--centru  { grid-column: 1; grid-row: 1; }
  .acasa-grila .col--program { grid-column: 2; grid-row: 1; }
  .acasa-grila .col--actiuni { grid-column: 1 / -1; grid-row: 2; }
  .acasa-grila .col--actiuni .actiuni { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* ── Desktop: aranjarea din design ───────────────────────────────────────────*/
@media (min-width: 64rem) {
  .bara-buton { display: none; }
  .sertar, .sertar-voal { display: none; }
  .nav-sus { display: flex; }

  .acasa-grila {
    grid-template-columns: var(--col-stanga) minmax(0, 1fr) var(--col-dreapta);
    gap: 1.5rem;
  }
  .acasa-grila .col--actiuni { grid-column: 1; grid-row: 1; }
  .acasa-grila .col--centru  { grid-column: 2; grid-row: 1; }
  .acasa-grila .col--program { grid-column: 3; grid-row: 1; }
  .acasa-grila .col--actiuni .actiuni { grid-template-columns: 1fr; }

  .proiecte-grila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subsol-corp { grid-template-columns: 1.4fr 1fr 1.3fr 1fr; }
}

/* Sub 64rem bara de sus dispare, deci marca nu mai trebuie să concureze cu ea. */
@media (max-width: 63.99rem) {
  .marca-titlu { font-size: 1.15rem; }
  .marca-supra { font-size: .64rem; }
  .antet-bara { gap: .8rem; padding: 0 1rem; min-height: 4.2rem; }
}

/* ── Corecturi de strâmtoare ─────────────────────────────────────────────────
   Pe un telefon de 375px, antetul are patru lucruri de așezat: hamburger, marcă, mărimea literei
   și contul. Fără voie să se strângă, marca împinge restul afară din ecran — verificat: 552px
   într-un ecran de 375. */
.antet-bara { min-width: 0; }
.marca { min-width: 0; flex: 1 1 auto; }
.marca-texte { min-width: 0; }
.marca-titlu, .marca-supra, .marca-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.antet-actiuni { min-width: 0; flex-shrink: 0; }
.btn-cont { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ținta de atingere: `.btn--mic` are 35px, sub pragul la care un deget nimerește din prima.
   Pe lățimile de telefon și tabletă se ridică — pe desktop rămâne compact, acolo e mouse. */
@media (max-width: 63.99rem) {
  .proiect-butoane .btn { min-height: 2.75rem; }
}

/* Sub 26rem, până și marca scurtată strânge prea tare: rândul de sus se rupe în două. */
@media (max-width: 26rem) {
  .antet-bara { flex-wrap: wrap; row-gap: .4rem; padding-bottom: .5rem; }
  .marca { order: 2; flex-basis: 100%; }
  .bara-buton { order: 1; }
  .antet-actiuni { order: 1; }
}

/* La litera maximă, cardurile de acțiune depășeau ecranul cu ~19px: eticheta „în curând" și
   pictograma nu se strâng, iar titlul lung nu avea voie să se rupă. Coloanele de grilă au nevoie
   de `minmax(0, …)` — implicit e `auto`, care refuză să coboare sub lățimea conținutului. */
.acasa-grila > .col { min-width: 0; }
.actiuni { grid-template-columns: minmax(0, 1fr); }
.act { min-width: 0; }
.act-titlu { overflow-wrap: anywhere; }
.proiecte-grila > * { min-width: 0; }

/* ══ CALIBRARE DUPĂ FIGMA ═══════════════════════════════════════════════════════
   Măsurat element cu element față de frame-ul aprobat: pagina ieșea 1843px în loc de 1085,
   coloana centrală 498 în loc de 680, o zi de program 123 în loc de 75. Cauza nu erau zeci de
   greșeli, ci două: containerul prea îngust și spațierea prea largă, repetate peste tot.        */

@media (min-width: 64rem) {
  /* Figma lucrează pe toată lățimea de 1440 cu 48px margine laterală: 1440−96 = 1344.
     `--latime-continut` (1248px) sufoca mijlocul cu 182px — de acolo și titlul rupt pe două
     rânduri, care în design stă pe unul. */
  .cuprins > .invelis, .banda-proiecte > .invelis { max-width: 1344px; padding-inline: 0; }
  .acasa-grila { grid-template-columns: 280px minmax(0, 1fr) 366px; gap: 9px; }
  .titlu-parohie { font-size: 2.1rem; margin-bottom: .8rem; }
}

/* Programul: 536px în design, 1041 la mine. Rândurile de slujbă erau construite ca text de
   citit, nu ca listă de scanat cu ochiul — de aici dublul. */
.zi + .zi { margin-top: .55rem; padding-top: .55rem; }
.zi-cap { margin-bottom: .2rem; gap: .45rem; }
.zi-cap h3 { font-size: .98rem; }
.zi-sarbatoare { margin: .05rem 0 .15rem; font-size: .86rem; line-height: 1.3; }
.slujba { margin: .1rem 0; gap: .6rem; line-height: 1.35; }
.slujba-ora { min-width: 4.3rem; font-size: .86rem; }
.slujba-nume { font-size: .9rem; }
.program-card { padding: .9rem 1rem 1rem; }
.program-titlu { margin-bottom: .6rem; font-size: 1.1rem; }
.program-corp .link-sageata { margin-top: .6rem; font-size: .9rem; }

/* Cardurile din stânga: 56px în design. Se strâng din padding, nu din literă. */
.act { min-height: 3.25rem; padding: .55rem .9rem; }
.actiuni { gap: .45rem; }

/* Banda de proiecte: 249 în design, 330 la mine. */
.banda-proiecte { padding: 1.4rem 0 1.7rem; margin-top: 1.4rem; }
.sectiune-titlu { margin-bottom: 1rem; }
.proiect-corp { padding: .8rem .9rem .9rem; gap: .4rem; }
.proiect-desc { font-size: .88rem; line-height: 1.45; }
.proiect-cifre { font-size: .84rem; }

/* Subsolul: 174 în design, 304 la mine — coloanele erau prea răsfirate. */
.subsol-corp { padding: 1.2rem 1.5rem .8rem; gap: 1.2rem; }
.subsol-cap { margin-bottom: .4rem; font-size: .95rem; }
.subsol-contact { gap: .28rem; }
.subsol-contact li, .subsol-linkuri a, .subsol-despre { font-size: .85rem; }
.subsol-linkuri { gap: .22rem; }
.subsol-despre { line-height: 1.5; }
.marca--subsol { margin-bottom: .55rem; }
.subsol-social { margin-bottom: .55rem; gap: .5rem; }
.subsol-social a { width: 2.1rem; height: 2.1rem; }
.anpc { padding: .6rem 1rem .9rem; }

/* Ziua de program: 75px în design. Rândurile erau încă aerisite ca un paragraf, nu strânse ca o
   listă de orar — de citit cu ochiul, nu de parcurs cu degetul. */
.zi + .zi { margin-top: .4rem; padding-top: .4rem; }
.zi-cap h3 { font-size: .94rem; }
.slujba { margin: .02rem 0; line-height: 1.28; }
.slujba-nume { font-size: .87rem; }
.slujba-ora { font-size: .83rem; }
.zi-sarbatoare { font-size: .82rem; margin: 0 0 .1rem; }

/* Subsolul: 174 în design. Coloanele mai aveau aer de pagină, nu de subsol. */
.subsol-corp { padding: .9rem 1.5rem .6rem; gap: 1rem; }
.subsol-contact li, .subsol-linkuri a, .subsol-despre { font-size: .82rem; line-height: 1.45; }
.subsol-cap { margin-bottom: .3rem; font-size: .9rem; }
.marca--subsol .marca-titlu { font-size: 1.02rem; }
.subsol-drepturi { font-size: .72rem; }
.anpc { padding: .45rem 1rem .7rem; }
.banda-proiecte { padding: 1.15rem 0 1.4rem; }

/* Card fără țintă: păstrează ACEEAȘI anatomie ca celelalte — bară, apoi cifre — dar bara e goală
   și hașurată, iar în locul procentului scrie de ce. Fără ea, cardul părea rupt lângă vecinii lui;
   cu o bară plină inventată, ar fi mințit. Hașura spune „locul e aici, cifra lipsește". */
.progres--fara {
  background: repeating-linear-gradient(135deg,
    var(--c-border) 0 6px, transparent 6px 12px);
  opacity: .65;
}
.proiect-fara-tinta {
  font-size: .78rem; font-style: italic; color: var(--c-text-3); white-space: nowrap;
}

/* ── Mod Editare (editorul din pagină) ─────────────────────────────────────────
   Nimic din blocul ăsta nu se vede cât modul e stins: `html.ed-mod` e comutatorul, iar creioanele
   nici măcar nu sunt puse în pagină. Un vizitator nu plătește nimic pentru existența editorului. */
.ed-editabil {
  position: relative;
  outline: 1px dashed color-mix(in srgb, var(--c-accent) 45%, transparent);
  outline-offset: 3px; border-radius: var(--r-sm);
}
.ed-editabil:hover { outline-style: solid; outline-color: var(--c-accent); }
/* Textele deja schimbate se văd dintr-o privire — altfel nu poți ști ce a fost atins. */
.ed-schimbat { outline-color: var(--c-ornament-accent); }

.ed-creion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; margin-left: .35em; vertical-align: middle;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--c-accent); color: var(--c-on-accent);
  box-shadow: var(--sh-xs); padding: 0; font-size: .72rem; line-height: 1;
}
.ed-creion:hover { filter: brightness(1.12); }
/* Aplicația parohiei desenează iconițele ca SVG inline — nu are fontul Material Symbols. Cu
   `<span class="ms-icon">edit</span>` pe buton scria, negru pe alb, cuvântul „edit". */
.ed-creion svg { width: .9em; height: .9em; }
.ed-schimbat > .ed-creion { background: var(--c-ornament-accent); }

.ed-panou {
  position: absolute; z-index: 120; padding: .75rem;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
}
.ed-panou-cap { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.ed-cheie { font-size: .72rem; color: var(--c-text-4); }
.ed-inchide { border: 0; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--c-text-3); }
.ed-text {
  width: 100%; font: inherit; font-size: .92rem; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: .45rem .5rem; resize: vertical;
}
.ed-text:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }
.ed-panou-butoane { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .55rem; }
.ed-implicit { border: 0; background: none; cursor: pointer; font-size: .8rem; color: var(--c-text-3); text-decoration: underline; }
.ed-mesaj { margin-top: .4rem; font-size: .82rem; min-height: 1.1em; }
.ed-mesaj--eroare { color: var(--c-red); }
.ed-mesaj--lucru { color: var(--c-text-3); }

.ed-bara {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 110;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem;
  padding: .5rem .9rem; background: var(--c-accent); color: var(--c-on-accent);
  box-shadow: var(--sh-lg); font-size: .88rem;
}
.ed-bara-titlu { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.ed-bara-ajutor { opacity: .85; }
@media (max-width: 30rem) { .ed-bara-ajutor { display: none; } }
/* Bara acoperă baza paginii; conținutul primește loc, altfel ultimul rând rămâne sub ea. */
html.ed-mod body { padding-bottom: 3.4rem; }

/* Butonul care aprinde modul Editare. Stă lângă „Contul meu", dar nu-i fură atenția: e o unealtă
   de lucru, nu o acțiune pentru vizitatori — pe care oricum n-o vor vedea niciodată. */
.ed-pornire {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text-2);
}
.ed-pornire:hover { border-color: var(--c-accent); color: var(--c-accent); }
html.ed-mod .ed-pornire { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }

/* ── Ferestre modale ──────────────────────────────────────────────────────────
   Nu existau în shell.css: fiecare pagină care avea nevoie de una și-o desena singură. Definite
   AICI, o dată, ca a doua fereastră din aplicație să nu arate altfel decât prima. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgb(0 0 0 / .45);
}
.modal-overlay > .modal {
  width: min(34rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto;
  padding: 1.15rem; background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.modal h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.modal-ftr { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ── Întrebarea „pe ce se aplică?" la slujbele care se repetă ─────────────────
   Opțiunile sunt rânduri mari, nu o listă strânsă: aici se alege între trei lucruri cu urmări
   diferite, iar lămurirea de sub fiecare trebuie citită, nu ghicită. */
.dom-optiune {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .6rem .7rem; margin-bottom: .4rem;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.dom-optiune:hover { border-color: var(--c-accent); background: var(--c-surface-2); }
.dom-optiune input { margin-top: .2rem; flex: none; }
.dom-optiune span { display: block; }
.dom-optiune small { display: block; margin-top: .15rem; color: var(--c-text-3); font-size: .84rem; }
.dom-zi { margin: .6rem 0 0; }
.dom-zi[hidden] { display: none; }

/* O slujbă retrasă rămâne în listă ca să poată fi readusă, dar nu se mai amestecă între cele vii. */
.lista-articole li.retras button { opacity: .6; }
.lista-articole li.retras strong { text-decoration: line-through; }

/* Picker de slujbă cu creion alături: caseta ia tot spațiul rămas, creionul stă fix. */
.picker-cu-creion { display: flex; align-items: center; gap: .3rem; }
.picker-cu-creion select { flex: 1 1 auto; min-width: 7rem; }
.picker-creion {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2.25rem; padding: 0; cursor: pointer;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text-3);
}
.picker-creion:hover { border-color: var(--c-accent); color: var(--c-accent); }
.picker-creion svg { width: 1.05rem; height: 1.05rem; }

/* ── Înfățișarea afișului ─────────────────────────────────────────────────────
   Panou strâns implicit: cele mai multe afișe se fac fără să i se schimbe nimic, iar deschis ar
   împinge previzualizarea sub linia ecranului tocmai când vrei să te uiți la ea. */
.afis-infatisare {
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: .6rem .8rem; margin-bottom: .9rem; background: var(--c-surface-2);
}
.afis-infatisare > summary { cursor: pointer; font-weight: 600; }
.afis-infatisare[open] > summary { margin-bottom: .6rem; }
.afis-rand {
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: .5rem .7rem .7rem; margin-bottom: .7rem; background: var(--c-surface);
}
.afis-rand > legend { font-size: .85rem; font-weight: 600; padding: 0 .35rem; }
.afis-culoare { display: flex; align-items: center; gap: .4rem; }
.afis-culoare input[type="color"] {
  width: 2.6rem; min-width: 2.6rem; height: 2.25rem; padding: .15rem;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface);
}
/* O culoare „nepusă" urmează tema; se vede că nu e o alegere, ci o moștenire. */
.afis-culoare input[data-nepus] { opacity: .45; }
.afis-culoare button {
  border: 0; background: none; cursor: pointer; font-size: .78rem;
  color: var(--c-text-3); text-decoration: underline; padding: 0;
}

/* ── Bara de secțiuni din administrare ────────────────────────────────────────
   Nu avea NICIUN stil: taburile erau butoane goale, iar cel curent se deosebea doar prin
   `aria-pressed` — adică prin nimic, pentru ochi. Marcarea e triplă, fiindcă una singură cade:
   fondul plin (se vede de departe), linia de dedesubt (rezistă dacă utilizatorul are contrast
   forțat) și greutatea literei (rămâne la tipărire alb-negru). */
.admin-taburi {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--c-border);
}
.admin-taburi button {
  font: inherit; font-size: .92rem; cursor: pointer;
  padding: .45rem .85rem; border: 1px solid transparent; border-radius: var(--r-md);
  background: none; color: var(--c-text-2); position: relative;
}
.admin-taburi button:hover { background: var(--c-surface-2); color: var(--c-text); }
.admin-taburi button.e-curent {
  background: var(--c-accent); color: var(--c-on-accent); font-weight: 600;
}
.admin-taburi button.e-curent::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: -.56rem; height: 3px;
  background: var(--c-accent); border-radius: 2px 2px 0 0;
}
.admin-taburi button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Firimiturile: unde ești, și cum te întorci cu un clic. */
.firimituri {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  list-style: none; margin: 0 0 .9rem; padding: 0; font-size: .85rem; color: var(--c-text-3);
}
.firimituri li + li::before { content: '›'; margin-right: .3rem; opacity: .6; }
.firimituri button {
  font: inherit; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--c-accent); text-decoration: underline;
}
.firimituri [aria-current="page"] { color: var(--c-text); font-weight: 600; }

/* Sărbătoarea din pagina de program. Clasa exista în cod, dar nu avea niciun stil: crucea ieșea
   lipită de denumire, iar rândul nu se deosebea cu nimic de o slujbă obișnuită. Faptul că e
   sărbătoare se vede din NUMELE ei și din culoare — nu-i trebuie cuvântul „sărbătoare" scris. */
.sarbatoare {
  display: flex; align-items: baseline; gap: .4rem;
  margin: .15rem 0 .45rem; font-size: .95rem; color: var(--c-ornament-accent);
}
.sarbatoare .cruce { flex: none; }
.sarbatoare--hram { font-weight: 600; }