/* ══════════════════════════════════════════════════════════════════════════════
   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 {
  display: var(--ornament-afisare, 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. */

.antet-bara {
  display: flex; align-items: center; gap: .7rem;
  min-height: 3.4rem; padding: .5rem 1rem;
  max-width: var(--latime-continut); margin: 0 auto;
}

/* 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. */
.antet-sigla-img {
  width: 2.2rem; height: 2.2rem; flex: 0 0 auto;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1.5px solid var(--c-ornament); background: var(--c-surface);
}
.antet-sigla-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; }
.antet-cruce {
  width: 1.9rem; height: 2.2rem; flex: 0 0 auto;
  background: var(--c-aur);
  -webkit-mask: var(--ornament-cruce-ort) no-repeat center / contain;
  mask: var(--ornament-cruce-ort) no-repeat center / contain;
}

.antet-titlu {
  font-family: var(--font-titlu); font-size: 1.05rem; font-weight: 600;
  line-height: 1.2; min-width: 0; color: var(--c-text); text-decoration: none;
}
.antet-titlu small {
  display: block; font-family: var(--font); font-size: .74rem; font-weight: 400;
  color: var(--c-aur-text); margin-top: .1rem;
  /* hramul e informație secundară: pe telefon rămâne pe un rând, cu tăiere */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@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) {
  body:has(.emblema) .antet-titlu { display: none; }
  body:has(.emblema) .antet-bara { min-height: 3rem; }
}

.antet-actiuni { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

.antet-buton {
  appearance: none; border: 1px solid var(--c-border-strong);
  background: transparent; color: var(--c-accent);
  border-radius: var(--r-full); padding: .4rem .9rem; font: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer; min-height: 2.3rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap; flex: 0 0 auto;
}
.antet-buton:hover { background: var(--c-accent-light); border-color: var(--c-accent); color: var(--c-accent); }

/* ── 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 */
  .acasa-grid { grid-template-columns: 20rem minmax(0, 1fr) 23rem; gap: 1.4rem; }
  /* 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; }
  .acasa-grid .actiuni { margin-top: 0; }
  .acasa-grid .program-card { margin-top: 0; }
}

/* ── 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. */
.program-card > h2 {
  font-size: 1.05rem; text-align: center; margin: 0;
  padding: .85rem 1rem; color: var(--c-on-accent); background: var(--c-accent);
  letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
}
.program-card > h2::before, .program-card > h2::after {
  content: ''; display: var(--ornament-afisare, block);
  width: .8rem; height: .8rem; flex: 0 0 auto;
  background: var(--c-ornament-accent, #fff);
  -webkit-mask: var(--ornament-cruce) no-repeat center / contain;
  mask: var(--ornament-cruce) no-repeat center / contain;
}

/* 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. */
.saptamana-nav {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem .7rem; border-bottom: 1px solid var(--c-border);
}
.saptamana-nav .eticheta {
  flex: 1; text-align: center; font-weight: 600; color: var(--c-text-2);
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
.sapt-buton {
  appearance: none; cursor: pointer; font: inherit;
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-accent);
  display: grid; place-items: center;
}
.sapt-buton:hover:not(:disabled) { background: var(--c-accent-light); border-color: var(--c-accent); }
.sapt-buton:disabled { opacity: .35; cursor: default; }
.sapt-buton > span {
  width: 1.05rem; height: 1.05rem; background: currentColor;
  -webkit-mask: var(--ico-sageata) no-repeat center / contain;
  mask: var(--ico-sageata) no-repeat center / contain;
}
.sapt-buton--inapoi > span { transform: rotate(180deg); }

/* 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. */
.program-corp {
  padding: 0 .9rem .9rem;
  display: flex; flex-direction: column;
  min-height: 20rem;
}
.program-jos { margin-top: auto; padding-top: .8rem; }
@media (min-width: 64rem) { .program-corp { min-height: 0; } }
.program-card .zi { border: 0; border-radius: 0; margin: 0; background: transparent; }
.program-card .zi + .zi { border-top: 1px solid var(--c-border); }
.program-card .zi-antet { background: transparent; border-bottom: 0; padding: .55rem 0 .05rem; }
.program-card .zi-corp { padding: 0 0 .35rem; }
.program-card .zi-fara { padding: 0 0 .5rem; }
/* rânduri mai strânse în cardul de pe prima pagină — pe /program rămân aerisite */
.program-card .slujba { padding: .3rem 0; }
.program-card .zi-nume, .program-card .zi-data { font-size: .98rem; }

/* ── 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ă ──────────────────────────────────────────── */
.zi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: .7rem; overflow: hidden; }
.zi--azi { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.zi--goala { background: var(--c-surface-2); }
/* 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. */
.zi-antet { display: flex; align-items: baseline; gap: .5rem; padding: .55rem .85rem; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.zi--goala .zi-antet { border-bottom: 0; }
.zi-nume { font-family: var(--font-titlu); font-weight: 600; font-size: 1.05rem; color: var(--c-accent); text-transform: capitalize; }
.zi-data { font-family: var(--font-titlu); font-weight: 600; font-size: 1.05rem; color: var(--c-accent); }
.zi-loc { margin-left: auto; font-size: .82rem; color: var(--c-text-3); text-align: right; }
.zi-azi-eticheta { margin-left: auto; font-size: .72rem; background: var(--c-accent); color: var(--c-on-accent); padding: .12rem .55rem; border-radius: var(--r-full); }
.zi-loc + .zi-azi-eticheta { margin-left: .5rem; }
.zi-corp { padding: .35rem .85rem .6rem; }
.zi-fara { padding: .5rem .85rem .7rem; color: var(--c-text-4); font-size: .88rem; }

/* 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). */
.sarbatoare { display: flex; align-items: baseline; gap: .4rem; font-size: .88rem; color: var(--c-aur-text); padding: .3rem 0 .45rem; font-weight: 500; }
.sarbatoare .cruce { background: currentColor; flex: 0 0 auto; align-self: center; }
.sarbatoare--mare, .sarbatoare--hram { color: var(--c-red); font-weight: 600; }
.sarbatoare--hram { font-weight: 700; }

/* 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. */
.slujba { display: flex; align-items: baseline; gap: .6rem; padding: .4rem 0; }
.slujba + .slujba { border-top: 1px dashed var(--c-border); }
.slujba-ora {
  flex: 0 0 auto; min-width: 6.4rem;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-accent);
  white-space: nowrap; font-size: .92rem;
}
.slujba-nume { flex: 1; min-width: 0; }
.slujba-nume small { display: block; color: var(--c-text-3); font-size: .8rem; }
.slujba--anulata .slujba-nume { text-decoration: line-through; color: var(--c-text-4); }

/* „Program de spovedit" nu e slujbă, ci interval de disponibilitate — se citește mai domol. */
.slujba--interval .slujba-ora { color: var(--c-text-3); font-weight: 500; }
.slujba--interval .slujba-nume { color: var(--c-text-2); }

/* sub-punctele unei intrări (ex. seara de duminică: paraclis + prezentare + pricesne) */
.slujba-detalii { display: block; margin-top: .3rem; padding-left: .1rem; border-left: 2px solid var(--c-border); }
.slujba-detaliu {
  display: block; padding: .12rem 0 .12rem .6rem;
  font-size: .84rem; color: var(--c-text-3); line-height: 1.35;
}
.slujba-detaliu .mono { color: var(--c-text-2); font-weight: 600; margin-right: .35rem; }
.slujba-detaliu .punct { color: var(--c-aur-text); margin-right: .35rem; }

/* ── 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.                        */
.subsol {
  margin-top: 3rem; background: var(--c-surface-2);
  border-top: 1px solid var(--c-border); color: var(--c-text-2); font-size: .88rem;
}
.subsol-fir {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-aur) 50%, transparent);
  opacity: .7;
}
.subsol-corp {
  padding: 1.75rem 1rem 2.25rem; max-width: var(--latime-continut); margin: 0 auto;
  display: grid; gap: 1.25rem; text-align: center;
}
@media (min-width: 48rem) {
  .subsol-corp { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; text-align: left; align-items: start; }
}
/* 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) {
  .subsol { margin-top: 1.75rem; font-size: .84rem; }
  .subsol-corp { padding: 1.1rem 1rem 1rem; gap: 1.5rem; }
  .subsol-jos { padding: .6rem 1rem .9rem; }
  .subsol-titlu { font-size: .95rem; }
}
.subsol-titlu {
  font-family: var(--font-titlu); font-size: 1rem; font-weight: 600; color: var(--c-text);
  margin-bottom: .35rem;
}
.subsol-cap {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-aur-text); font-weight: 600; margin-bottom: .45rem;
}
.subsol a { color: var(--c-text-2); text-decoration: none; }
.subsol a:hover { color: var(--c-accent); text-decoration: underline; }
.subsol-linkuri { display: flex; flex-direction: column; gap: .35rem; align-items: center; }
@media (min-width: 48rem) { .subsol-linkuri { align-items: flex-start; } }
.subsol-jos {
  border-top: 1px solid var(--c-border); margin-top: .5rem;
  padding: .9rem 1rem 1.5rem; max-width: var(--latime-continut); margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--c-text-4); font-size: .8rem; text-align: center;
}
.subsol-jos .cruce { width: .8rem; height: .8rem; color: var(--c-aur-text); }

/* ── 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ă.                                                */
.ico-program     { -webkit-mask-image: var(--ico-program);     mask-image: var(--ico-program); }
.ico-predici     { -webkit-mask-image: var(--ico-predici);     mask-image: var(--ico-predici); }
.ico-pomelnic    { -webkit-mask-image: var(--ico-pomelnic);    mask-image: var(--ico-pomelnic); }
.ico-doneaza     { -webkit-mask-image: var(--ico-doneaza);     mask-image: var(--ico-doneaza); }
.ico-programari  { -webkit-mask-image: var(--ico-programari);  mask-image: var(--ico-programari); }
.ico-contact     { -webkit-mask-image: var(--ico-contact);     mask-image: var(--ico-contact); }
.ico-cuvant      { -webkit-mask-image: var(--ico-cuvant);      mask-image: var(--ico-cuvant); }
.ico-domiciliu   { -webkit-mask-image: var(--ico-domiciliu);   mask-image: var(--ico-domiciliu); }
.ico-taine       { -webkit-mask-image: var(--ico-taine);       mask-image: var(--ico-taine); }
.ico-voluntariat { -webkit-mask-image: var(--ico-voluntariat); mask-image: var(--ico-voluntariat); }
.ico-proiecte    { -webkit-mask-image: var(--ico-proiecte);    mask-image: var(--ico-proiecte); }
.ico-evenimente  { -webkit-mask-image: var(--ico-evenimente);  mask-image: var(--ico-evenimente); }

: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); }
.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ță */
  .antet, .subsol, .fara-tipar, .toast { display: none !important; }
  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; }
  .program-card > h2 { padding-top: .6rem; font-size: 1.1rem; }
  .saptamana-nav { padding: .4rem .7rem .5rem; }
  .cuprins { padding-top: .9rem; padding-bottom: .9rem; }
  .subsol { margin-top: 1.1rem; }
  .subsol-corp { padding: .85rem 1rem .8rem; }
  .subsol-jos { padding: .5rem 1rem .7rem; }
}

/* ── 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. */
.cuvant {
  margin-top: 1rem; padding: 1.4rem 1.5rem;
  background: var(--c-surface); border-radius: var(--r-xl); box-shadow: var(--sh-sm);
  border-left: 3px solid var(--c-ornament-accent);
}
.cuvant-eticheta {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ornament-accent); font-weight: 700; margin: 0 0 .8rem;
}
.cuvant p { font-family: var(--font-titlu); font-size: 1.02rem; line-height: 1.75; color: var(--c-text-2); margin: 0 0 .9rem; }
.cuvant p:last-of-type { margin-bottom: 0; }

/* 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. */
.cuvant-text { position: relative; overflow: hidden; }
.cuvant-text:not(.desfacut) {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* estompare la tăietură, ca să se vadă că textul continuă */
.cuvant-text:not(.desfacut)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em;
  background: linear-gradient(transparent, var(--c-surface));
  pointer-events: none;
}
.cuvant-mai-mult {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  margin-top: .5rem; padding: .2rem 0;
  color: var(--c-accent); font-weight: 600; font-size: .9rem;
}
.cuvant-mai-mult:hover { text-decoration: underline; }
.cuvant-sursa {
  font-family: var(--font) !important; font-size: .82rem !important;
  color: var(--c-text-4) !important; text-align: right; margin-top: 1rem !important;
}

/* ── 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.          */
.frontispiciu {
  position: relative; text-align: center;
  padding: 1.6rem 1rem 1.4rem;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--c-aur) 16%, transparent), transparent 70%),
    var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.frontispiciu-icoana {
  width: 6.5rem; aspect-ratio: 480/691; margin: 0 auto .7rem;
  border-radius: var(--r-md); overflow: hidden;
  border: 3px solid var(--c-aur);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 25%, transparent), var(--sh-md);
}
.frontispiciu-icoana img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frontispiciu h1 { font-size: 1.3rem; margin: 0 0 .15rem; color: var(--c-accent); }
.frontispiciu p { margin: 0; font-size: .88rem; color: var(--c-text-3); }
/* 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) {
  .frontispiciu {
    display: flex; align-items: center; justify-content: center; gap: 1.1rem;
    text-align: left; padding: 1rem 1rem 1.1rem;
  }
  .frontispiciu-icoana { width: 4.4rem; margin: 0; flex: none; }
  .frontispiciu h1 { font-size: 1.55rem; }
}

/* 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,
.subsol::before {
  display: var(--ornament-afisare, block);
  height: 26px;
  background: var(--ornament-cusatura) repeat-x center / auto 26px;
}

.antet::after { content: ''; }
.frontispiciu::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; }
.subsol::before { content: ''; position: absolute; left: 0; right: 0; top: 0; }
.subsol { position: relative; padding-top: 2.2rem; }

/* Despărțitorul cu romb: „—— ◆ ——", ca între blocurile de text de pe afiș. */
.divizor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: .5rem auto;
  max-width: 18rem;
  color: var(--c-ornament-accent);
}
.divizor::before,
.divizor::after {
  content: '';
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: .5;
}
.divizor i {
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
  font-style: normal;
}


/* Î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) {
  .frontispiciu .divizor { width: 3.4rem; max-width: 3.4rem; margin: 0 .25rem; }
}
/* 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--discret .antet-titlu {
  visibility: hidden;
  opacity: 0;
}
.antet-sigla-img,
.antet-cruce,
.antet-titlu {
  transition: opacity .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .antet-sigla-img, .antet-cruce, .antet-titlu { transition: none; }
}

/* 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. */
.antet--discret {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.antet--discret::after { content: none; }

/* ══ 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.                                              */

.acasa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  align-items: start;
  margin: 1.25rem 0;
}

/* Telefon: o coloană — imagine, program, acțiuni, cuvântul zilei. */
.acasa-grid .col--central { order: 1; }
.acasa-grid .col--program { order: 2; }
.acasa-grid .col--actiuni { order: 3; }
.acasa-grid .col--blog    { order: 4; }

@media (min-width: 48rem) and (max-width: 74.99rem) {
  /* Tabletă: central + program pe două coloane, acțiunile pe un rând dedesubt. */
  .acasa-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .acasa-grid .col--central { grid-column: 1; grid-row: 1; }
  .acasa-grid .col--blog    { grid-column: 1; grid-row: 2; }
  .acasa-grid .col--program { grid-column: 2; grid-row: 1 / span 2; }
  .acasa-grid .col--actiuni { grid-column: 1 / -1; grid-row: 3; }
  .acasa-grid .col--actiuni .actiuni {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

@media (min-width: 75rem) {
  .acasa-grid {
    grid-template-columns: minmax(0, 272px) minmax(0, 1fr) minmax(0, 336px);
  }
  /* 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. */
  .acasa-grid .col--actiuni { grid-column: 1; grid-row: 1 / span 2; }
  .acasa-grid .col--central { grid-column: 2; grid-row: 1; }
  .acasa-grid .col--blog    { grid-column: 2; grid-row: 2; }
  .acasa-grid .col--program { grid-column: 3; grid-row: 1 / span 2; }
}

/* ── 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 {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.4rem;              /* țintă de atingere confortabilă pe telefon */
  padding: .7rem .8rem;
  border: 1px solid var(--c-aur);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-aur) 22%, transparent);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.actiune:hover,
.actiune:focus-visible {
  border-color: var(--c-accent);
  background: var(--c-surface-2);
  transform: translateY(-1px);
}
.actiune[aria-disabled="true"] {
  cursor: default;
  color: var(--c-text-3);
  border-color: var(--c-border);
  box-shadow: none;
  transform: none;
  background: var(--c-surface);
}

.actiune-ico {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
}
.actiune-ico > span {
  width: 1.7rem;
  height: 1.7rem;
  background: var(--c-accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.actiune[aria-disabled="true"] .actiune-ico > span { background: var(--c-text-4); }

/* 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. */
.actiune-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.actiune-titlu {
  font-family: var(--font-titlu);
  font-size: 1rem;
  line-height: 1.24;
  letter-spacing: .01em;
}

.actiune-sageata {
  flex: none;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--c-accent);
  border-top: 2px solid var(--c-accent);
  transform: rotate(45deg);
}
.actiune-curand {
  align-self: flex-start;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-4);
}

.actiune--toate {
  justify-content: center;
  min-height: 2.8rem;
  font-family: var(--font-titlu);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--c-accent);
  background: transparent;
}

/* ── 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 {
  position: relative;
  margin: 0 0 1.15rem;
  padding: .55rem;
  border: 1px solid var(--c-aur);
  border-radius: 50% 50% var(--r-md) var(--r-md) / 32% 32% var(--r-md) var(--r-md);
  background: var(--c-surface);
}
.arcada > img,
.arcada > .arcada-desen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 50% 50% calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) / 32% 32% calc(var(--r-md) - 2px) calc(var(--r-md) - 2px);
}
.arcada > .arcada-desen {
  height: auto;
  padding: 1.4rem 1.2rem 0;
  color: var(--c-accent);
  background: var(--c-surface-2);
  object-fit: contain;
}


/* ── 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).           */
.col--program .program-card { font-size: .92rem; }
.col--program .zi-antet {
  padding: .5rem .8rem .3rem;
  font-size: .96rem;
}
.col--program .zi-corp { padding: 0 .8rem .5rem; }
.col--program .slujba { padding: .28rem 0; gap: .6rem; }
.col--program .slujba-ora { font-size: .88rem; }
.col--program .slujba-nume { font-size: .92rem; line-height: 1.35; }
.col--program .sarbatoare { font-size: .88rem; padding: .25rem 0; }


/* ── 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; }
.zoom-litera { font-family: var(--font-titlu); line-height: 1; width: 1.6rem; text-align: center; }

/* ── 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="5"] .acasa-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  :root[data-zoom="4"] .acasa-grid .col--central,
  :root[data-zoom="5"] .acasa-grid .col--central { grid-column: 1; grid-row: 1; }
  :root[data-zoom="4"] .acasa-grid .col--blog,
  :root[data-zoom="5"] .acasa-grid .col--blog { grid-column: 1; grid-row: 2; }
  :root[data-zoom="4"] .acasa-grid .col--program,
  :root[data-zoom="5"] .acasa-grid .col--program { grid-column: 2; grid-row: 1 / span 2; }
  :root[data-zoom="4"] .acasa-grid .col--actiuni,
  :root[data-zoom="5"] .acasa-grid .col--actiuni { grid-column: 1 / -1; grid-row: 3; }
  :root[data-zoom="4"] .acasa-grid .col--actiuni .actiuni,
  :root[data-zoom="5"] .acasa-grid .col--actiuni .actiuni {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

/* ── 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. */
.blog {
  border: 1px solid var(--c-aur);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: 1rem 1.1rem 1.1rem;
}
.blog-cap {
  margin: 0 0 .6rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ornament-accent);
  text-align: center;
}
.blog-lista {
  max-height: clamp(16rem, 46vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;      /* la capătul listei nu smucește pagina de dedesubt */
  padding-right: .35rem;
}
/* Se poate derula cu tastatura, deci trebuie să se și vadă că e focalizată. */
.blog-lista:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-sm); }

.postare + .postare { border-top: 1px solid var(--c-border); margin-top: .9rem; padding-top: .9rem; }
.postare-categorie {
  margin: 0 0 .2rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.postare-titlu { margin: 0; font-size: 1.15rem; line-height: 1.25; color: var(--c-accent); }
.postare-subtitlu { margin: .15rem 0 0; font-size: .95rem; color: var(--c-text-2); font-style: italic; }
.postare-semnatura { margin: .3rem 0 0; font-size: .78rem; color: var(--c-text-3); }
/* 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. */
.postare-rezumat {
  margin: .45rem 0 .5rem;
  color: var(--c-text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.postare-mai-mult { font-size: .88rem; font-weight: 600; color: var(--c-accent); }

/* ── 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); }

/* ══ SHELL FIX (desktop) ════════════════════════════════════════════════════════
   Ca la Agremin: antetul, coloana din stânga și programul din dreapta stau pe loc; derulează
   DOAR zona centrală. Proporțiile sunt cele de acolo — bară 220px, antet 56px, `100dvh` cu
   `overflow: hidden` pe cadru.

   Numai pe ecran lat. Pe telefon un shell fix e ostil: tastatura virtuală micșorează viewport-ul,
   iar bara de adrese care apare și dispare face conținutul să sară. Acolo pagina curge normal.  */
/* ȘI o înălțime minimă, nu doar lățime. Pe un laptop de 720px, cadrul fix nu avea unde încăpea:
   arcada era retezată la jumătate, iar blogul se termina fără margine — pagina arăta stricată.
   Sub 46rem înălțime, pagina curge normal și nu se taie nimic. */
@media (min-width: 75rem) and (min-height: 46rem) {
  :root { --bara-l: 220px; --antet-h: 56px; }

  html, body { height: 100%; }
  body {
    height: 100dvh;
    overflow: hidden;              /* cadrul nu derulează niciodată; doar ce e înăuntru */
    display: flex;
    flex-direction: column;
  }

  .antet, .frontispiciu { flex: none; }
  .antet .antet-bara { min-height: var(--antet-h); }

  /* `min-height: 0` e obligatoriu: fără el, un copil flex refuză să se micșoreze sub conținutul
     lui, cadrul crește peste ecran și `overflow: hidden` taie exact partea de jos. */
  .cuprins { flex: 1; min-height: 0; overflow: hidden; padding: 1rem 0 0; }
  .cuprins > .invelis { height: 100%; display: flex; flex-direction: column; min-height: 0; }

  .acasa-grid { flex: 1; min-height: 0; margin: 0 0 .75rem; }
  .acasa-grid { grid-template-columns: var(--bara-l) minmax(0, 1fr) minmax(0, 336px); }

  /* Fiecare coloană își ține propriul derulaj. Cea centrală e singura care chiar are ce derula;
     celelalte două primesc derulaj ca plasă de siguranță — la literă mare, cinci carduri sau
     un program lung tot trebuie să poată fi ajunse. */
  .acasa-grid > .col { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

  /* Arcada și blogul sunt DOUĂ RÂNDURI ale grilei, nu doi copii ai aceleiași coloane — deci se
     reglează rândurile, nu un flex. Arcada se micșorează până la un minim, blogul ia restul.
     Fără asta, arcada își păstra înălțimea și era retezată prin mijlocul desenului: o biserică
     tăiată pe orizontală citește ca pagină stricată, nu ca pagină lungă. */
  .acasa-grid { grid-template-rows: minmax(9rem, auto) minmax(0, 1fr); }
  .acasa-grid > .col--central { overflow: hidden; padding-right: 0; }
  .col--central > .arcada { height: 100%; margin: 0; display: flex; }
  .col--central > .arcada > img,
  .col--central > .arcada > .arcada-desen {
    height: 100%; width: 100%; aspect-ratio: auto; object-fit: contain; min-height: 0;
  }

  /* Blogul umple rândul lui și derulează ÎNĂUNTRU — o singură zonă de derulaj, cu marginea
     cardului mereu vizibilă, în loc de un card care se termină în gol. */
  .acasa-grid > .col--blog { overflow: hidden; }
  .col--blog > .blog { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .col--blog .blog-lista { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

  /* Subsolul devine o bandă subțire pe un rând — în shell fix nu e loc de trei coloane, dar
     adresa și telefonul nu au voie să dispară. */
  .subsol { flex: none; padding-top: 1.4rem; }
  .subsol-corp { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: .5rem 1rem; }
  .subsol-corp > div { display: flex; align-items: center; gap: .75rem; }
  .subsol-cap { display: none; }
  .subsol-corp a, .subsol-corp div > div { font-size: .82rem; }
  .subsol-jos { display: none; }
}
.afis-previzualizare { display: block; width: 100%; max-width: 24rem; height: auto; margin-top: 1rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); }

/* ── Site în construcție: doar programul ─────────────────────────────────────
   O singură coloană, centrată și îngustă. Programul lăsat pe toată lățimea ar avea ora într-un
   capăt și denumirea în celălalt — între ele, o câmpie de nimic. */
.acasa-grid--doar-program { grid-template-columns: minmax(0, 1fr) !important; max-width: 30rem; margin-inline: auto; }
.acasa-grid--doar-program > .col { height: auto !important; overflow: visible !important; }
.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;
}
.font-treapta { align-items: flex-start; }
.font-mostra { font-size: 1.35rem; line-height: 1.1; width: 2.2rem; text-align: center; flex: none; }
.font-nume { display: grid; gap: .05rem; }
.font-nume small { font-size: .74rem; color: var(--c-text-3); line-height: 1.3; }
.zoom-panou { max-width: min(20rem, calc(100vw - 2rem)); }

/* Antetul are acum TREI comenzi (font, mărime, cont). La litera maximă pe un telefon îngust nu
   mai încap pe un rând și împingeau pagina în lateral. Se strâng: butoanele își păstrează ținta
   de atingere, iar eticheta contului se scurtează cu „…" în loc să lățească pagina. */
.antet-bara { flex-wrap: wrap; row-gap: .35rem; }
.antet-actiuni { flex-shrink: 1; min-width: 0; }
.antet-buton {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 30rem) {
  .antet-titlu { flex-basis: 100%; order: 3; }
}
.font-buton-admin { align-items: flex-start; gap: .7rem; text-align: left; }
.font-mostra-admin { font-size: 1.6rem; line-height: 1; flex: none; width: 2.4rem; text-align: center; }
.font-nume-admin { display: grid; gap: .1rem; }
.font-nume-admin small { font-size: .76rem; color: var(--c-text-3); line-height: 1.35; }
.font-avertisment { color: var(--c-warn) !important; }

/* ══ BARA LATERALĂ ══════════════════════════════════════════════════════════════
   Proporțiile din Agremin — 220px lățime, antet 56px — dar RESPONSIVE: fixă doar pe ecran lat,
   sertar sub 75rem. Un panou de 220px pe un telefon de 390px ar mânca peste jumătate de ecran. */
:root { --bara-l: 220px; }

.bara {
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  padding: 1rem .7rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bara-grup + .bara-grup { margin-top: 1.1rem; }
.bara-cap {
  margin: 0 0 .35rem .55rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-3);
}
.bara ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.bara-intrare {
  display: flex; align-items: center; gap: .6rem;
  min-height: 2.6rem;                    /* țintă de atingere, nu doar text */
  padding: .4rem .55rem;
  border-radius: var(--r-sm);
  color: var(--c-text); text-decoration: none; font-size: .93rem; line-height: 1.25;
}
.bara-intrare:hover, .bara-intrare:focus-visible { background: var(--c-surface-2); color: var(--c-accent); }
.bara-intrare[aria-current="page"] {
  background: var(--c-accent-light); color: var(--c-accent); font-weight: 600;
}
.bara-ico {
  width: 1.15rem; height: 1.15rem; flex: none; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* Butonul de sertar — trei linii, desenate, nu emoji (se randează altfel pe fiecare sistem). */
.bara-buton {
  width: 2.6rem; height: 2.6rem; 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.05rem; 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; }

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

/* ── Sub 75rem: SERTAR ────────────────────────────────────────────────────── */
@media (max-width: 74.99rem) {
  .bara {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    width: min(var(--bara-l), 82vw);      /* pe un telefon îngust nu ia tot ecranul */
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sh-md);
    padding-top: 4rem;                    /* sub antet, ca butonul să rămână apăsabil */
  }
  body.bara-deschisa .bara { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bara { transition: none; } }

/* ── Peste 75rem: FIXĂ, lângă conținut ────────────────────────────────────── */
@media (min-width: 75rem) {
  .bara-buton { display: none; }
  .bara-voal { display: none; }

  body.cu-bara { display: grid; grid-template-columns: var(--bara-l) minmax(0, 1fr); }
  body.cu-bara > .antet { grid-column: 1 / -1; }
  body.cu-bara > .frontispiciu { grid-column: 2; }
  body.cu-bara > .bara { grid-row: 2 / span 3; grid-column: 1; }
  body.cu-bara > .cuprins { grid-column: 2; }
  body.cu-bara > .subsol { grid-column: 2; }
}

/* Cu bară laterală rămân două coloane: povestea (imagine + blog) și programul. Coloana de carduri
   a plecat în bară, deci grila se reașază — altfel ar rămâne o urmă de gol în stânga. */
@media (min-width: 75rem) {
  .acasa-grid--cu-bara { grid-template-columns: minmax(0, 1fr) minmax(0, 336px); }
  .acasa-grid--cu-bara > .col--central { grid-column: 1; grid-row: 1; }
  .acasa-grid--cu-bara > .col--blog    { grid-column: 1; grid-row: 2; }
  .acasa-grid--cu-bara > .col--program { grid-column: 2; grid-row: 1 / span 2; }
}