/* =========================================================
   Cabinet de avocatura — stiluri pentru site-ul public
   Paleta si tipografia se modifica din variabilele de mai jos.
   ========================================================= */

:root {
  --bleu:        #0f2138;   /* albastru profund — culoarea principala */
  --bleu-2:      #17314f;
  --bleu-3:      #24466d;
  --alama:       #b08d4f;   /* accent cald */
  --alama-clar:  #cfae74;
  /* Alama de mai sus arata bine, dar pe fundal alb e prea deschisa pentru text
     mic: raportul de contrast iese 3,1 : 1, iar regulile de accesibilitate cer
     4,5 : 1. Varianta de mai jos e aceeasi culoare, doar mai inchisa (4,7 : 1
     pe crem, 5,0 : 1 pe alb) si se foloseste NUMAI pentru text asezat pe fundal
     deschis. Pe fundalurile inchise ramane alama obisnuita, care acolo se vede
     foarte bine. */
  --alama-text:  #8a6a30;
  --crem:        #faf7f2;
  --crem-2:      #f2ece2;
  --text:        #1c2430;
  --text-slab:   #5b6675;
  --linie:       #e2dcd2;
  --alb:         #ffffff;
  --ok:          #2f7d5d;
  --alerta:      #b3402f;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --lat: 1180px;
  --r: 4px;
  --umbra: 0 1px 2px rgba(15,33,56,.06), 0 8px 24px rgba(15,33,56,.07);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--alb);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.22; color: var(--bleu); margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.1em; }
a  { color: var(--bleu-3); text-decoration: none; }
a:hover { color: var(--alama-text); }

/* Legaturile din mijlocul unui text nu se deosebeau decat prin culoare, iar
   diferenta fata de textul din jur era prea mica (1,65 : 1, se cere 3 : 1).
   Le subliniem: e solutia recomandata si merge si pentru cine nu distinge
   culorile. Butoanele raman nesubliniate. */
p a:not(.btn), li a:not(.btn), td a:not(.btn), dd a:not(.btn), label a:not(.btn), figcaption a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

/* Pe fundalurile inchise alama obisnuita este cea lizibila. */
.hero .eyebrow,
.sectiune--bleu .eyebrow,
.subsol .logo__sub { color: var(--alama); }
.sectiune--bleu a:hover,
.subsol a:hover { color: var(--alama-clar); }
img, svg { max-width: 100%; }

.container { width: 100%; max-width: var(--lat); margin: 0 auto; padding: 0 24px; }
.sectiune { padding: 84px 0; }
.sectiune--crem { background: var(--crem); }
.sectiune--bleu { background: var(--bleu); color: #d8e0ea; }
.sectiune--bleu h2, .sectiune--bleu h3 { color: var(--alb); }

.eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--alama-text);
  margin: 0 0 14px;
}
.lead { font-size: 1.15rem; color: var(--text-slab); max-width: 62ch; }
.centrat { text-align: center; }
.centrat .lead { margin-left: auto; margin-right: auto; }

.rigla { width: 54px; height: 3px; background: var(--alama); border: 0; margin: 0 0 26px; }
.centrat .rigla { margin-left: auto; margin-right: auto; }

/* ---------- Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; transition: .18s ease; text-decoration: none;
}
.btn--primar   { background: var(--alama); color: #2a1f0c; }
.btn--primar:hover { background: var(--alama-clar); color: #2a1f0c; }
.btn--inchis   { background: var(--bleu); color: var(--alb); }
.btn--inchis:hover { background: var(--bleu-2); color: var(--alb); }
.btn--contur   { background: transparent; border-color: var(--bleu); color: var(--bleu); }
.btn--contur:hover { background: var(--bleu); color: var(--alb); }
.btn--clar     { background: transparent; border-color: rgba(255,255,255,.45); color: var(--alb); }
.btn--clar:hover { background: rgba(255,255,255,.12); color: var(--alb); }
.btn--mic { padding: 8px 16px; font-size: .86rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.antet__actiuni .btn { white-space: nowrap; }

/* ---------- Antet plutitor ----------
   Sticky se aplica pe containerul #site-antet: altfel antetul ar ramane
   agatat doar cat tine inaltimea propriului parinte si ar disparea la derulare.

   #site-antet:empty — antetul este scris de site.js dupa ce se incarca pagina.
   Pana atunci containerul ar avea inaltime zero, pagina s-ar aseza sus, iar la
   aparitia antetului tot continutul ar sari in jos cu vreo 120 de pixeli. Aici
   ii pastram locul dinainte, ca sa nu mai sara nimic. Inaltimile trebuie sa
   ramana egale cu ale antetului randat (rand + bara de contact + spatii). */
#site-antet { position: sticky; top: 0; z-index: 60; }
#site-antet:empty { height: 143px; }
@media (max-width: 760px) { #site-antet:empty { height: 126px; } }
.antet {
  padding: 14px 20px 10px;
  background: transparent;
}
.antet__card {
  position: relative;
  max-width: var(--lat); margin: 0 auto;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(226,220,210,.9);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15,33,56,.05), 0 16px 40px rgba(15,33,56,.16);
}
.antet__rand {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 72px; padding: 0 20px;
}

/* ---------- Bara de contact (telefon / WhatsApp / e-mail) ---------- */
.bara-contact {
  display: flex; align-items: stretch;
  border-top: 1px solid var(--linie);
  background: rgba(242,236,226,.55);
  border-radius: 0 0 11px 11px;
  overflow: hidden;
}
.bara-contact a {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 12px;
  font-size: .9rem; font-weight: 600; color: var(--bleu);
  border-right: 1px solid var(--linie);
  transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bara-contact a:last-child { border-right: 0; }
.bara-contact a:hover { background: var(--bleu); color: var(--alb); }
.bara-contact a:hover svg { color: var(--alama-clar); }
.bara-contact svg { width: 17px; height: 17px; flex: none; color: var(--alama); }
.bara-contact--wa:hover { background: #1faa59; color: #fff; }
.bara-contact--wa:hover svg { color: #fff; }
.bara-contact .scurt { display: none; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__semn { width: 44px; height: 44px; flex: none; object-fit: contain; display: block; }
.subsol .logo__semn { border-radius: 8px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__nume { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--bleu); white-space: nowrap; }
.logo__sub  { font-size: .66rem; letter-spacing: .17em; text-transform: uppercase; color: var(--alama-text); font-weight: 700; }

.nav {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--alb); border: 1px solid var(--linie); border-radius: 12px;
  padding: 8px 18px 12px;
  box-shadow: 0 16px 40px rgba(15,33,56,.18); z-index: 5;
}
.nav:not(.deschis) { display: none; }
.nav a {
  font-size: .95rem; font-weight: 500; color: var(--text);
  padding: 12px 2px; border-bottom: 1px solid var(--crem-2);
}
.nav a:last-child { border-bottom: 0; }
.nav a:hover { color: var(--alama-text); }
.nav a.activ { color: var(--alama-text); font-weight: 600; }
.antet__actiuni { display: flex; align-items: center; gap: 12px; }

.meniu-buton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--linie); background: var(--alb);
  border-radius: var(--r); cursor: pointer;
  font-family: var(--sans); font-size: .86rem; font-weight: 600; color: var(--bleu);
  transition: .15s ease; white-space: nowrap;
}
.meniu-buton svg { width: 17px; height: 17px; flex: none; }
.meniu-buton:hover { border-color: var(--alama); }
.meniu-buton[aria-expanded="true"] {
  background: var(--bleu); border-color: var(--bleu); color: var(--alb);
}

/* ---------- Hero ----------
   Fundalul este imaginea de bibliotecă din /img/biblioteca-1600.webp
   (varianta pentru telefon: /img/biblioteca-900.webp).
   Ca s-o înlocuiești cu o fotografie reală: pune fișierul în public/img/ și
   schimbă adresele de mai jos, aici și în blocul „Responsive” de la final. */
.hero {
  position: relative; color: #e6ecf3; overflow: hidden;
  padding: 96px 0 78px;
  /* Fundalul era biblioteca.svg — un desen vectorial de 287 kB, cu 3548 de
     dreptunghiuri. Pe telefon browserul trebuia sa le deseneze pe toate inainte
     sa poata arata sectiunea: ~1,6 secunde numai de desenat, iar sectiunea asta
     e cel mai mare element de pe ecran (LCP). Acum folosim acelasi desen, dar
     transformat in imagine: 69 kB pe calculator, 34 kB pe telefon, afisata
     instantaneu. Desenul original a ramas in proiect (public/img/biblioteca.svg)
     — de acolo se regenereaza imaginile daca trebuie alta marime. */
  background: #0f2138 url("/img/biblioteca-1600.webp") center center / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9,20,35,.62) 0%, rgba(9,20,35,.28) 48%, rgba(9,20,35,0) 72%),
    radial-gradient(900px 420px at 78% 10%, rgba(176,141,79,.14), transparent 62%),
    linear-gradient(180deg, rgba(11,24,41,.78) 0%, rgba(11,24,41,.72) 55%, rgba(11,24,41,.88) 100%);
}
.hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 460px; height: 460px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23b08d4f' stroke-width='.6' opacity='.5'%3E%3Cpath d='M50 8v78M22 26h56M22 26l-11 22a11 11 0 0 0 22 0zM78 26l-11 22a11 11 0 0 0 22 0zM34 88h32'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity: .14; pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { color: var(--alb); max-width: 17ch; }
.hero p  { font-size: 1.18rem; color: #b9c6d5; max-width: 52ch; }

/* hero pe doua coloane: text + fotografie */
.hero__grila { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.hero__foto { position: relative; margin: 0; justify-self: end; max-width: 380px; width: 100%; }
.hero__foto img {
  /* aspect-ratio ii da inaltimea DINAINTE sa se incarce fisierul. Fara el,
     pana venea poza, rama avea inaltime zero: eticheta cu numele si textul
     alternativ cadeau peste continut, apoi totul sarea la loc — exact
     „suprapunerea" de o fractiune de secunda de la reincarcarea paginii.
     object-fit: cover face ca orice poza incarcata din aplicatie sa umple
     rama, indiferent daca e portret sau peisaj. */
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: 6px;
  box-shadow: 0 26px 60px rgba(0,0,0,.42);
  background: rgba(255,255,255,.04);
}
.hero__foto::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid rgba(176,141,79,.55); border-radius: 6px; pointer-events: none;
}
.hero__foto figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(9,20,34,.86); backdrop-filter: blur(6px);
  border: 1px solid rgba(176,141,79,.32); border-radius: 4px; padding: 12px 16px;
}
.hero__foto figcaption strong { display: block; color: var(--alb); font-family: var(--serif); font-size: 1rem; }
.hero__foto figcaption span { display: block; color: var(--alama-clar); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; margin-top: 3px; }
.hero__actiuni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__fapte {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin-top: 40px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.fapt__nr {
  font-family: var(--serif); color: var(--alama-clar); line-height: 1;
  font-size: clamp(1.15rem, 2.1vw, 1.85rem); white-space: nowrap;
}
.fapt__et {
  color: #96a6b8; margin-top: 7px; line-height: 1.35;
  font-size: clamp(.63rem, .78vw, .8rem);
}

/* ---------- Grile si carduri ---------- */
.grila { display: grid; gap: 26px; }
.grila--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grila--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grila--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--alb); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 30px 28px; transition: .2s ease;
}
.card:hover { border-color: var(--alama); box-shadow: var(--umbra); transform: translateY(-2px); }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--text-slab); font-size: .96rem; margin-bottom: 0; }
.card__icon { width: 44px; height: 44px; color: var(--alama); margin-bottom: 18px; }
.card__link { display: inline-block; margin-top: 16px; font-size: .9rem; font-weight: 600; color: var(--bleu-3); }

/* ---------- Sectiunea Portal clienti (compacta) ---------- */
.sectiune--portal {
  position: relative; padding: 40px 0; overflow: hidden;
  background: #0f2138 url("/img/biblioteca-1600.webp") center center / cover no-repeat;
}
.sectiune--portal::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9,20,35,.62) 0%, rgba(9,20,35,.30) 50%, rgba(9,20,35,.08) 100%),
    linear-gradient(180deg, rgba(11,24,41,.80) 0%, rgba(11,24,41,.86) 100%);
}
.sectiune--portal > .container { position: relative; z-index: 2; }
.portal-grila { display: grid; grid-template-columns: 1.05fr .95fr; gap: 38px; align-items: center; }
.portal-grila .eyebrow { font-size: .7rem; margin-bottom: 9px; }
.portal-grila h2 { font-size: clamp(1.3rem, 2.1vw, 1.68rem); margin-bottom: 9px; }
.portal-grila > div > p { margin-bottom: 0; font-size: .9rem; line-height: 1.55; color: #b9c6d5; max-width: 48ch; }

.portal-lista {
  list-style: none; padding: 0; margin: 13px 0 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px;
  font-size: .83rem; color: #cdd8e4;
}
.portal-lista li { position: relative; padding-left: 19px; line-height: 1.4; }
.portal-lista li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--alama-clar); font-weight: 700; font-size: .82rem;
}

.portal-demo {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 14px 16px; font-size: .8rem;
}
.portal-demo__cap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px;
}
.portal-demo__cap strong { color: #fff; font-family: var(--serif); font-size: .92rem; }
.portal-demo__stare {
  background: rgba(176,141,79,.25); color: var(--alama-clar);
  font-size: .62rem; padding: 2px 8px; border-radius: 20px; letter-spacing: .08em; white-space: nowrap;
}
.portal-demo__rand {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.09);
}
.portal-demo__rand:last-of-type { border-bottom: 0; }
.portal-demo__rand .val { color: #fff; text-align: right; }
.portal-demo__rand .val.accent { color: var(--alama-clar); }
.portal-demo__nota { margin: 9px 0 0; font-size: .71rem; opacity: .55; }

@media (max-width: 860px) {
  .sectiune--portal { padding: 32px 0; background-position: 30% center; }
  .sectiune--portal::before {
    background: linear-gradient(180deg, rgba(11,24,41,.90) 0%, rgba(11,24,41,.93) 100%);
  }
  .portal-grila { grid-template-columns: 1fr; gap: 22px; }
  .portal-lista { grid-template-columns: 1fr; gap: 6px; margin: 12px 0 16px; }
}

/* Sectiunea ariilor de practica: doar cardurile, cu acelasi spatiu sus si jos */
.sectiune--domenii { --spatiu: 26px; padding: var(--spatiu) 0; }
@media (max-width: 760px) { .sectiune--domenii { --spatiu: 20px; } }

/* Grila domeniilor: 6 pe rand pe ecran lat, 3 pe ecran mediu, 2 pe telefon */
.grila-domenii {
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1180px) { .grila-domenii { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 860px)  { .grila-domenii { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* card compact: pictograma la stanga, titlul in dreapta; tot cardul este link */
.card--simplu {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px; text-decoration: none;
}
.card--simplu .card__icon { margin: 0; width: 24px; height: 24px; }
.card--simplu h3 {
  margin: 0; font-size: .94rem; color: var(--bleu); line-height: 1.25;
  overflow-wrap: break-word; hyphens: auto;
}
@media (max-width: 1180px) {
  .card--simplu { gap: 13px; padding: 15px 18px; }
  .card--simplu .card__icon { width: 25px; height: 25px; }
  .card--simplu h3 { font-size: 1rem; }
}
@media (max-width: 860px) {
  .card--simplu { gap: 10px; padding: 13px 13px; }
  .card--simplu h3 { font-size: .92rem; }
}
.card--simplu:hover h3 { color: var(--bleu); }

.pas { display: flex; gap: 18px; align-items: flex-start; }
.pas__nr {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--crem-2);
  font-family: var(--serif); color: var(--bleu); font-size: 1.05rem;
}
.sectiune--bleu .pas__nr { background: rgba(176,141,79,.22); color: var(--alama-clar); }

/* Echipa */
.membru { text-align: center; }
.membru__foto {
  width: 150px; height: 150px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--crem-2); display: grid; place-items: center;
  font-family: var(--serif); font-size: 2.4rem; color: var(--alama); border: 1px solid var(--linie);
}
.membru h3 { margin-bottom: .15em; }
.membru__rol { color: var(--alama); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.membru p { font-size: .93rem; color: var(--text-slab); }

/* Citat */
.citat { border-left: 3px solid var(--alama); padding: 6px 0 6px 26px; font-family: var(--serif); font-size: 1.3rem; color: var(--bleu); }

/* ---------- Formulare ---------- */
.camp { margin-bottom: 18px; }
.camp label { display: block; font-size: .86rem; font-weight: 600; color: var(--bleu); margin-bottom: 7px; }
.camp .ajutor { font-size: .8rem; color: var(--text-slab); font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: .97rem; color: var(--text);
  background: var(--alb); border: 1px solid var(--linie); border-radius: var(--r); transition: .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--alama); box-shadow: 0 0 0 3px rgba(176,141,79,.16); }
textarea { min-height: 130px; resize: vertical; }
.rand-campuri { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.ore { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ora-btn {
  padding: 11px 6px; text-align: center; border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--alb); cursor: pointer; font-size: .93rem; font-weight: 600; color: var(--bleu); transition: .15s;
}
.ora-btn:hover { border-color: var(--alama); }
.ora-btn.aleasa { background: var(--bleu); border-color: var(--bleu); color: var(--alb); }

.notificare { padding: 14px 18px; border-radius: var(--r); font-size: .93rem; margin-bottom: 18px; border: 1px solid; }
.notificare--ok    { background: #eef6f1; border-color: #bcdccb; color: #1f5c43; }
.notificare--eroare{ background: #fbeeec; border-color: #f0cdc7; color: #8f3123; }
.notificare--info  { background: #eef2f7; border-color: #cfd9e5; color: #2b4a6e; }

/* ---------- Tabel ---------- */
.tabel { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabel th, .tabel td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--linie); }
.tabel th { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-slab); font-weight: 700; }
.tabel tbody tr:hover { background: var(--crem); }

/* ---------- Subsol ---------- */
.subsol { background: #0b1828; color: #93a3b6; padding: 66px 0 0; font-size: .93rem; }
.subsol h4 { color: var(--alb); font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.subsol a { color: #93a3b6; display: block; padding: 5px 0; }
.subsol a:hover { color: var(--alama-clar); }
/* o singura sectiune, asezata pe mijloc */
.subsol__grila { display: grid; grid-template-columns: 1fr; padding-bottom: 44px; text-align: center; }
.subsol__grila .logo { margin-left: auto; margin-right: auto; }
.subsol__grila p { max-width: 54ch; margin-left: auto; margin-right: auto; }
.subsol__grila > div > a:last-child { justify-content: center; }
/* sigla si "cabinet de avocat" centrate fata de nume */
.subsol .logo {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; width: max-content; max-width: 100%;
}
.subsol .logo__text { align-items: center; }
.subsol .logo__semn { width: 66px; height: 66px; }
/* Datele de contact din subsol. <address> este inclinat implicit — il indreptam.
   Stau in HTML de la server, deci le vad si robotii care nu ruleaza JavaScript. */
.subsol__adresa { font-style: normal; max-width: 46ch; margin: 16px auto 12px; font-size: .92rem; line-height: 1.65; }
.subsol__adresa a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.subsol__adresa a:hover { color: var(--alama-clar); }
/* Programul e scris mai discret decat restul, dar nu atat de discret incat sa
   scada sub pragul de contrast cerut (4,5 : 1 pe fundalul inchis al subsolului). */
.subsol__program { color: #a3b3c5; }
.subsol .logo__nume { color: var(--alb); font-size: 1.5rem; white-space: normal; }
.subsol .logo__sub { font-size: .78rem; letter-spacing: .19em; margin-top: 3px; }
.subsol__jos { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; align-items: center; font-size: .84rem; text-align: center; }
.subsol__jos a { display: inline; padding: 0; white-space: nowrap; }

/* ---------- Bara de avertizare macheta ---------- */
.bara-macheta {
  background: #2a1f0c; color: var(--alama-clar); text-align: center;
  font-size: .82rem; padding: 9px 16px; letter-spacing: .02em;
}
.bara-macheta strong { color: #f0dcb6; }

/* ---------- Utilitare ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:22px}.mt-3{margin-top:36px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:22px}.mb-3{margin-bottom:36px}
.ascuns { display: none !important; }
/* Text doar pentru cititoarele de ecran: nu se vede, dar exista in pagina.
   Il folosim pentru titlurile de sectiune care lipsesc vizual, ca structura
   paginii (h1 → h2 → h3) sa ramana corecta pentru cine navigheaza cu tastatura
   sau cu un cititor de ecran. */
.doar-cititor {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.text-slab { color: var(--text-slab); }
.mic { font-size: .86rem; }
/* Coloana de text lizibila: randurile prea lungi obosesc ochiul. */
.text-lat { max-width: 68ch; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .sectiune { padding: 60px 0; }
  .hero {
    padding: 64px 0 56px;
    background-position: 30% center;
    background-image: url("/img/biblioteca-900.webp");   /* varianta usoara pentru telefon */
  }
  /* aceeasi imagine si aici, altfel pagina ar descarca doua fundaluri */
  .sectiune--portal { background-image: url("/img/biblioteca-900.webp"); }
  /* pe telefon se vede doar o fasie ingusta din raft, asa ca il tinem mai discret */
  .hero::before {
    background:
      radial-gradient(600px 300px at 70% 8%, rgba(176,141,79,.12), transparent 62%),
      linear-gradient(180deg, rgba(11,24,41,.90) 0%, rgba(11,24,41,.87) 55%, rgba(11,24,41,.94) 100%);
  }
  .rand-campuri { grid-template-columns: 1fr; }
  .antet { padding: 10px 12px 8px; }
  .antet__rand { height: 64px; padding: 0 14px; }
  .bara-contact a { font-size: .85rem; gap: 7px; padding: 9px 6px; }
  .bara-contact .lung { display: none; }
  .bara-contact .scurt { display: inline; }
  .hero__fapte { gap: 10px; margin-top: 30px; padding-top: 24px; }
  .hero__grila { grid-template-columns: 1fr; gap: 38px; }
  .hero__foto { justify-self: center; max-width: 300px; }
  .hero__foto::before { inset: 14px -14px -14px 14px; }
}

@media print {
  .antet, .subsol, .bara-macheta, .btn { display: none !important; }
}

/* link vizibil doar in meniul mobil */
.doar-mobil { display: none; }
/* "Portal clienti" apare ca buton in antet, deci nu il mai dublam in meniu */
.doar-mobil { display: none !important; }

/* Pe ecrane foarte inguste pastram doar butonul "Portal clienti" */
@media (max-width: 620px) {
  .antet__actiuni .btn--primar { display: none; }
  .antet__actiuni { gap: 8px; }
  .antet__actiuni .btn { padding: 7px 11px; font-size: .8rem; }
  .logo { gap: 9px; }
  .logo__semn { width: 36px; height: 36px; }
  .logo { min-width: 0; }
  .logo__text { min-width: 0; }
  .logo__nume { font-size: .9rem; white-space: normal; line-height: 1.18; }
  .logo__sub { display: none; }
  /* in subsol raman vizibile si mai mari decat in antet */
  .subsol .logo__sub { display: block; font-size: .7rem; }
  .subsol .logo__semn { width: 56px; height: 56px; }
  .subsol .logo__nume { font-size: 1.24rem; }
  .meniu-buton { padding: 7px 11px; font-size: .8rem; gap: 6px; }
}

/* Sub 430px pastram doar pictograma pe butonul de meniu */
@media (max-width: 430px) {
  .meniu-buton__text { display: none; }
  .meniu-buton { padding: 8px 10px; }
  .antet__rand { gap: 10px; padding: 0 12px; }
}

/* ---------- Camp de parola cu buton „arata / ascunde" ---------- */
.camp-parola { position: relative; display: block; }
.camp-parola input[type=password],
.camp-parola input[type=text] { padding-right: 46px; }
.ochi-parola {
  position: absolute; top: 0; right: 0; height: 100%; width: 42px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-slab); transition: color .15s;
}
.ochi-parola:hover  { color: var(--alama); }
.ochi-parola:focus-visible { outline: 2px solid var(--alama); outline-offset: -2px; border-radius: var(--r); }
.ochi-parola svg { width: 19px; height: 19px; display: block; }