/* =========================================================
   Royal Med Clinic — stiluri
   Paletă extrasă din identitatea vizuală (logo auriu pe crem)
   ========================================================= */

:root {
  /* Brand */
  --gold:        #C6A15B;
  --gold-deep:   #A67C2E;
  --gold-light:  #E3C88A;
  --gold-soft:   #EFDCB8;

  /* Neutre */
  --cream:       #FAF3E9;
  --cream-2:     #F3E7D6;
  --ivory:       #FFFCF7;
  --ink:         #2B2622;
  --ink-soft:    #5C544B;
  --line:        rgba(166, 124, 46, .20);

  /* Dark section */
  --dark:        #241F1A;
  --dark-2:      #302921;

  /* Layout */
  --maxw:        1200px;
  --pad:         clamp(1.25rem, 4vw, 2.5rem);
  /* Un singur radius pentru tot ce e dreptunghiular — carduri, rame de poză, plăci de
     galerie, acordeoane. Restul formelor sunt doar două: 999px (pastile) și 50% (cercuri).
     Dacă schimbi valoarea aici, se schimbă peste tot: nu pune raze locale în reguli. */
  --radius:      18px;
  --header-h:    86px;

  --shadow-sm:   0 4px 16px rgba(43, 38, 34, .06);
  --shadow-md:   0 14px 40px rgba(43, 38, 34, .10);
  --shadow-lg:   0 30px 70px rgba(43, 38, 34, .16);

  --ease:        cubic-bezier(.22, 1, .36, 1);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  /* ține locul barei de derulare și când pagina e blocată (meniu, lightbox), altfel
     conținutul sare lateral cu lățimea barei; pe iOS/Android bara e peste conținut,
     deci acolo regula nu schimbă nimic */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* `overflow: hidden` singur nu oprește scroll-ul din spate pe iOS Safari — pagina curge
   mai departe sub meniu sau sub lightbox. Body-ul iese din flux, iar `main.js` compensează
   poziția cu `top: -scrollY` și o redă la loc când se deblochează. */
body.is-locked {
  position: fixed; left: 0; right: 0; width: 100%;
  overflow: hidden; overscroll-behavior: none;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--gold-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Tipografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2.6rem, 1.7rem + 4.2vw, 5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.15rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; color: var(--ink-soft); }

.gold-text {
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-light) 45%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.muted { color: var(--gold-deep); opacity: .8; font-size: .88em; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }
.container.narrow { max-width: 820px; }

.section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; position: relative; }
.section--tint { background: linear-gradient(180deg, var(--ivory), var(--cream-2)); }
/* Secțiunile închise dau ritm paginii. Nu sunt plate: au o lumină aurie difuză,
   ca să nu pară o bandă neagră lipită între secțiunile crem. */
.section--dark {
  background:
    radial-gradient(900px 520px at 82% 12%, rgba(198, 161, 91, .16), transparent 62%),
    radial-gradient(700px 460px at 6% 92%, rgba(166, 124, 46, .12), transparent 60%),
    var(--dark);
  color: var(--cream);
}
.section--dark p { color: rgba(250, 243, 233, .72); }
.section--dark .eyebrow { color: var(--gold-light); }
.section--dark .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold-light)); }
.section--dark .section-head .eyebrow::after { background: linear-gradient(270deg, transparent, var(--gold-light)); }

/* Cardurile de pe fundal închis: sticlă subțire în loc de ivory, iar „ridicarea”
   la hover se face din contur și luminozitate, fiindcă umbrele nu se văd pe închis. */
.section--dark .value-card {
  background: rgba(255, 252, 247, .045);
  border-color: rgba(227, 200, 138, .16);
}
.section--dark .value-card:hover {
  background: rgba(255, 252, 247, .075);
  border-color: rgba(227, 200, 138, .38);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.section--dark .icon-circle {
  background: linear-gradient(145deg, rgba(227, 200, 138, .20), rgba(198, 161, 91, .06));
  border-color: rgba(227, 200, 138, .26);
  color: var(--gold-light);
}
.section--dark .value-card h3 { color: var(--cream); }

/* Galeria pe închis: rama caldă dispare, fotografiile ies în față */
.section--dark .gallery-item {
  background: rgba(255, 252, 247, .04);
  border: 1px solid rgba(227, 200, 138, .14);
  box-shadow: none;
}
.section--dark .gallery-item:hover,
.section--dark .gallery-item:focus-visible {
  border-color: rgba(227, 200, 138, .4);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .32);
}

.section-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after {
  content: ""; width: 34px; height: 1px;
  background: linear-gradient(270deg, transparent, var(--gold));
}
.section-sub { font-size: 1.02rem; }

.grid-2 {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
.align-center { align-items: center; }

/* ---------- Cercuri decorative ----------
   Trei inele concentrice, desenate din linii de un pixel, care ies pe jumătate din
   secțiune. Au pornit din hero; acum sunt un element de sine stătător, așezat în mai
   multe secțiuni, ca să dea paginii același fir vizual de sus până jos.
   Raza inelelor interioare e legată de `--orn-size` (11,3% și 24,2%), deci un cerc mai
   mic păstrează aceleași proporții — nu pune insets fixe.
   Secțiunea gazdă primește `.has-ornament`: `overflow: hidden` taie ce iese din ea
   (altfel apare derulare laterală), iar containerul urcă peste cercuri — sunt
   decor, nu trebuie să treacă peste text. */
.ornament {
  --orn-size: 620px;
  position: absolute;
  width: var(--orn-size); height: var(--orn-size);
  border-radius: 50%;
  border: 1px solid rgba(166, 124, 46, .24);
  pointer-events: none;
  z-index: 0;
}
.ornament::before,
.ornament::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(166, 124, 46, .18);
}
.ornament::before { inset: calc(var(--orn-size) * .113); }
.ornament::after  { inset: calc(var(--orn-size) * .242); }

/* Poziții: numele spune colțul spre care se ancorează cercul. Decalajul e socotit din
   `--orn-size`, nu în procente din secțiune: procentele pe verticală se raportează la
   înălțimea secțiunii, deci pe telefon (unde secțiunile sunt de câteva ori mai înalte)
   cercul ajungea împins complet în afara ecranului. */
.ornament--br { right: calc(var(--orn-size) * -.22); bottom: calc(var(--orn-size) * -.30); }
.ornament--bl { left:  calc(var(--orn-size) * -.30); bottom: calc(var(--orn-size) * -.28); }
.ornament--tr { right: calc(var(--orn-size) * -.24); top:    calc(var(--orn-size) * -.30); }
.ornament--tl { left:  calc(var(--orn-size) * -.32); top:    calc(var(--orn-size) * -.26); }
.ornament--sm { --orn-size: 420px; }
.ornament--lg { --orn-size: 780px; }

/* Pe fundal închis linia caldă nu se vede; trece pe auriu deschis */
.section--dark .ornament,
.site-footer .ornament { border-color: rgba(227, 200, 138, .20); }
.section--dark .ornament::before, .section--dark .ornament::after,
.site-footer .ornament::before, .site-footer .ornament::after { border-color: rgba(227, 200, 138, .14); }

.has-ornament { position: relative; overflow: hidden; }
.has-ornament > .container { position: relative; z-index: 1; }

/* Pe telefon un cerc de 620px acoperă tot ecranul și liniile ajung să treacă prin
   mijlocul textului; le strângem la jumătate, ca să rămână un accent pe margine. */
@media (max-width: 767px) {
  .ornament    { --orn-size: 340px; }
  .ornament--lg { --orn-size: 420px; }
  .ornament--sm { --orn-size: 260px; }
}

/* ---------- Butoane ---------- */
.btn {
  --btn-bg: var(--gold-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 2rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s, background-color .3s, border-color .3s;
}
.btn-primary {
  color: var(--ivory);
  background: linear-gradient(120deg, var(--gold-deep), var(--gold) 55%, var(--gold-deep));
  background-size: 200% 100%;
  box-shadow: 0 10px 26px rgba(166, 124, 46, .26);
}
.btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(166, 124, 46, .34);
}
.btn-ghost {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(198, 161, 91, .10);
  transform: translateY(-2px);
}
.section--dark .btn-ghost { color: var(--cream); border-color: rgba(227, 200, 138, .35); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(250, 243, 233, 0);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.site-header.is-stuck {
  background: rgba(250, 243, 233, .88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  /* iPhone în peisaj, dacă se activează viewport-fit=cover: decupajul mănâncă marginea */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.brand { display: flex; align-items: center; gap: .85rem; }
/* Decupaj pe simbolul din siglă (coroana + profilul), nu pe lockup-ul întreg */
.brand-mark {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background-image: url("../img/logo.jpg");
  background-size: 480% auto;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  transition: transform .5s var(--ease);
}
.brand:hover .brand-mark { transform: scale(1.06) rotate(-3deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 500;
  letter-spacing: .16em; color: var(--gold-deep);
}
.brand-text em {
  font-style: normal; font-size: .58rem; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: .3rem;
}

.nav { display: flex; align-items: center; gap: 2rem; }
/* Tabletă în landscape (≥992px, deci meniul desktop) pe touch: linkul are 15px înălțime.
   Îi extindem zona de atins la ~44px cu un pseudo-element, fără să-i schimbăm aspectul.
   Doar peste 992px — sub prag e meniul mobil, unde linkurile au deja padding. */
@media (min-width: 992px) and (hover: none) and (pointer: coarse) {
  .nav ul a { position: relative; }
  .nav ul a::after { content: ''; position: absolute; inset: -14px -6px; }
}
.nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav ul a {
  position: relative;
  font-size: .82rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .3s;
}
.nav ul a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav ul a:hover, .nav ul a.is-current { color: var(--gold-deep); }
.nav ul a:hover::after, .nav ul a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: .7rem 1.5rem; font-size: .72rem; }

.lang-switch {
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 252, 247, .5);
}
.lang-switch button {
  padding: .38rem .7rem;
  border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: .68rem; font-weight: 500; letter-spacing: .1em;
  color: var(--ink-soft);
  transition: background-color .3s, color .3s;
}
.lang-switch button:hover { color: var(--gold-deep); }
/* Pe touch, pastila de 31px e sub minimul recomandat (44px iOS / 48dp Android).
   Extindem zona de atins pe verticală cu un pseudo-element, ca aspectul pastilei
   să rămână neschimbat. Doar pe verticală: lateral s-ar suprapune peste RO/RU. */
@media (hover: none) and (pointer: coarse) {
  .lang-switch button { position: relative; }
  .lang-switch button::after { content: ''; position: absolute; inset: -7px 0; }
}
.lang-switch button.is-active {
  background: var(--gold-deep); color: var(--ivory);
}

.burger {
  display: none;
  width: 46px; height: 46px; flex: none;   /* fără flex:none se turtea sub 360px (Galaxy S8/S9, iPhone SE 1) */
  background: none; border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 50%; width: 18px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .4s var(--ease), opacity .25s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22.5px; }
.burger span:nth-child(3) { top: 28px; }
.burger.is-open span:nth-child(1) { transform: translateX(-50%) translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateX(-50%) translateY(-5.5px) rotate(-45deg); }

.scroll-progress {
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  transition: width .12s linear;
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(36, 31, 26, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s;
}
.nav-overlay.is-visible { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100vh, 900px);
  min-height: min(100svh, 900px);   /* svh doar de la iOS 15.4; vh de mai sus e rezerva */
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 3rem) 0 4.5rem;
  background:
    radial-gradient(1100px 620px at 78% 18%, rgba(227, 200, 138, .34), transparent 62%),
    radial-gradient(800px 520px at 8% 82%, rgba(198, 161, 91, .18), transparent 60%),
    linear-gradient(165deg, var(--ivory), var(--cream) 55%, var(--cream-2));
  overflow: hidden;
}
/* Cercurile concentrice din hero sunt acum un element de sine stătător — vezi
   „Cercuri decorative” mai jos; se repetă în toată pagina, nu doar aici. */

.hero-inner {
  display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center; position: relative; z-index: 2;
}
.hero-copy .lead {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  max-width: 54ch;
  margin-bottom: 2.25rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 1.25rem clamp(1.25rem, 2.5vw, 2.25rem);
  list-style: none; margin: 0; padding: 1.75rem 0 0;
  border-top: 1px solid var(--line);
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong {
  font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.7rem);
  font-weight: 500; color: var(--gold-deep); line-height: 1;
}
.hero-stats span {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: .55rem;
}
/* Pe telefon cele trei cifre nu încap pe un rând cu `flex-wrap`, iar a treia rămâne
   singură pe rândul doi. Grila de trei coloane le ține împreună: etichetele trec pe
   două rânduri, dar la fel pentru toate, deci linia de bază rămâne aceeași. */
@media (max-width: 599px) {
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 .7rem; }
  .hero-stats span { letter-spacing: .1em; }
}

.hero-visual { position: relative; }
/* Poza din hero e un `.media-frame` obișnuit — vezi „Media frames” mai jos, unde stă și
   singura ei excepție (umbra). Varianta veche, cu arcadă și chenar interior, semăna cu o
   oglindă de baie și nu se potrivea cu nicio altă imagine de pe site. */

.hero-badge {
  position: absolute; left: max(0px, calc(50% - 250px)); bottom: 26px;
  background: rgba(255, 252, 247, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1.25rem;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  animation: float 5s ease-in-out infinite;
}
.hero-badge-num { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-deep); line-height: 1; }
.hero-badge-label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .35rem; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: 24px; height: 40px;
  border: 1px solid var(--line); border-radius: 999px;
  display: none;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 9px;
  width: 3px; height: 7px; border-radius: 2px;
  background: var(--gold-deep);
  transform: translateX(-50%);
  animation: scrolldot 1.9s ease-in-out infinite;
}
@keyframes scrolldot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 15px); }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--dark);
  color: var(--gold-light);
  padding: .95rem 0;
  overflow: hidden;
  border-block: 1px solid rgba(227, 200, 138, .16);
}
.marquee-track {
  display: flex; gap: 2.25rem; width: max-content;
  animation: marquee 42s linear infinite;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track span:nth-child(even) { color: var(--gold); opacity: .6; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Media frames ----------
   O singură rețetă de ramă pentru toate fotografiile mari din pagină: colț cu raza
   standard, umbră medie și o linie de păr pe margine. Modificatorii de mai jos schimbă
   doar formatul și decupajul — nu forma ramei. Linia o punem din `box-shadow: inset`,
   nu din `border`: un chenar ar micșora caseta și ar lăsa o dungă între poză și ramă. */
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  max-width: 480px;
  margin-inline: auto;
}
.media-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
/* Pe fundal închis linia caldă dispare; o înlocuim cu una aurie, altfel poza plutește */
.section--dark .media-frame::after { box-shadow: inset 0 0 0 1px rgba(227, 200, 138, .28); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Rama de oglindă ----------
   Conturul subțire desenat PESTE fotografie, la câțiva pixeli de margine — el dă
   impresia de oglindă. E aceeași linie la toate pozele din pagină; se schimbă doar
   cât de departe stă de margine, prin --frame-inset: pe portretele mici din echipă
   trebuie mai aproape, altfel strânge fața.
   Alb translucid, nu auriu: linia stă peste imagine, nu peste fundalul secțiunii,
   deci trebuie să se vadă și pe fotografii deschise, și pe cele închise.
   Ocupă `::before` fiindcă `::after` e deja luat — de linia de pe marginea ramei
   (`.media-frame`, `.team-photo`) și de degradeul de la hover (`.gallery-item`). */
.media-frame::before,
.team-photo::before,
.gallery-item::before {
  content: "";
  position: absolute; inset: var(--frame-inset, 14px);
  border: 1px solid rgba(255, 252, 247, .62);
  /* Umbra dublează linia cu un fir întunecat, în exterior și în interior. Pe portretele
     deschise (halate albe pe perete alb) linia albă singură dispare; pe fotografiile în
     tonuri medii firul întunecat nu se vede. Așa conturul se citește pe orice poză. */
  box-shadow: 0 0 0 1px rgba(43, 38, 34, .07), inset 0 0 0 1px rgba(43, 38, 34, .05);
  border-radius: calc(var(--radius) * .55);
  pointer-events: none;
  z-index: 2;
}
.team-photo   { --frame-inset: 8px; }
.gallery-item { --frame-inset: 11px; }

/* Excepție: colajele „înainte / după”. Fiecare placă e deja o imagine împărțită în două
   cadre, cu propriile ei margini; o a doua linie peste ea încurca cititul — se vedeau
   trei chenare într-o singură placă. Restul galeriilor păstrează linia. */
.gallery--ba .gallery-item::before { content: none; }

/* Decupaj pentru o poză cu subiectul jos în cadrul original. Numele spune unde stă
   subiectul, ca să se vadă din HTML de ce are poza aia nevoie de o excepție.
   Poza fondatoarei e 1000×1250, adică exact 4:5 — cât rama. La raport egal `object-fit`
   n-are ce decupa, deci un `object-position` singur nu muta nimic: rămânea o treime de
   perete gol deasupra, iar cele două femei cădeau în jumătatea de jos a ramei.
   Așa că scurtăm întâi rama (4:4,15 în loc de 4:5) și abia apoi lipim poza de marginea
   de jos — se taie ~17% doar din partea de sus, unde nu e nimic, iar subiectul urcă
   spre mijloc. Cele două valori merg împreună: dacă schimbi raportul ramei fără
   `object-position: bottom`, decupajul se împarte sus și jos și taie din umeri. */
.media-frame--crop-low     { aspect-ratio: 4 / 4.15; }
.media-frame--crop-low img { object-position: 50% 100%; }  /* deasupra sunt doar peretele și jaluzelele */

/* Excepția de la rețeta de mai sus: poza din hero n-are ramă deloc. Marginile ei se
   sting în fundal, ca imaginea să se contopească cu secțiunea în loc să stea într-o
   casetă — deci fără umbră, fără colț, fără linie de oglindă. Se stinge nu doar pe
   margini, ci peste tot unde fotografia n-are subiect: peretele de sus și lenjeria
   de sub cap ajung în cremul paginii, iar din poză rămân fața, aparatul și mâna.
   Fotografia e și gradată cald în fișier (neutrele reci — perete, cearșaf, bonetă,
   aparat — au fost mutate pe axa bej a paletei), așa că masca nu mai are de ascuns
   un gri: acum doar topește poza în fundal. De aceea stingerea e mai lungă și mai
   moale decât înainte — nu mai trebuie să taie scurt, ca să nu rămână gri la vedere.
   Nu se poate face doar cu o elipsă: una singură, destul de strânsă cât să scoată
   peretele, ar fi mâncat și obrazul, iar una largă ar fi lăsat colțurile. De aceea
   masca e o intersecție de cinci straturi, detaliate mai jos.
   Safari cere varianta -webkit- a lui `mask-composite`; un browser fără mască
   afișează poza întreagă, cu colțul standard — degradare acceptabilă.
   Regula trebuie să rămână DUPĂ `.media-frame`: au aceeași specificitate, deci
   decide ordinea din fișier. */
.hero-frame {
  box-shadow: none;
  border-radius: 0;
  /* Cele cinci straturi se INTERSECTEAZĂ (vezi mask-composite mai jos), deci un pixel
     rămâne vizibil doar unde toate îl lasă. Sunt potrivite pe compoziția acestei
     fotografii (1200×1500, la fel ca rama — deci procentele de aici sunt și procente
     din imagine). Dacă se schimbă poza din hero, se reglează valorile aici:
       1-2. marginile laterale — stânga are peretele gol, deci se stinge mai lat;
            dreapta e ocupată de mâna cu mănușă, deci se stinge scurt;
       3.   sus peretele gri, jos cearșaful;
       4.   pana albă din colțul stânga-jos (lenjeria de sub cap);
       5.   elipsa care ține subiectul — fața, aparatul și mâna — și lasă restul
            să se piardă. Fără ea rămânea o bandă gri lipită de marginea de sus. */
  --mask-fade:
    linear-gradient(to right,       transparent 0, #000 22%),
    linear-gradient(to left,        transparent 0, #000 10%),
    linear-gradient(to bottom,      transparent 0, #000 19%, #000 84%, transparent 100%),
    linear-gradient(to bottom left, #000 60%, transparent 82%),
    radial-gradient(ellipse 62% 59% at 60% 47%, #000 40%, transparent 100%);
  -webkit-mask-image: var(--mask-fade);
          mask-image: var(--mask-fade);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero-frame::before,
.hero-frame::after { content: none; }

/* ---------- Check list ---------- */
.check-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .8rem; }
.check-list li {
  position: relative; padding-left: 2rem;
  color: var(--ink-soft); font-size: .98rem;
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 14px; height: 8px;
  border-left: 1.5px solid var(--gold-deep);
  border-bottom: 1.5px solid var(--gold-deep);
  transform: rotate(-45deg);
}

/* ---------- Icon circle ---------- */
.icon-circle {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(227, 200, 138, .30), rgba(198, 161, 91, .12));
  border: 1px solid var(--line);
  color: var(--gold-deep);
  margin-bottom: 1.4rem;
  transition: transform .5s var(--ease), background-color .4s, color .4s;
}
.icon-circle svg { width: 26px; height: 26px; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Value cards ---------- */
.cards-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.value-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(166,124,46,.4); }
.value-card:hover .icon-circle { transform: rotate(-6deg) scale(1.06); }
.value-card p { margin: 0; font-size: .96rem; }

/* ---------- Servicii (grupate pe categorii) ---------- */
.svc-groups { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* Pe desktop trecem pe coloane CSS: browserul echilibrează singur înălțimile,
   așa că un număr impar de categorii nu mai lasă un gol în ultimul rând. */

.svc-group {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.svc-group.is-open { border-color: rgba(166, 124, 46, .42); box-shadow: var(--shadow-sm); }

/* Titlurile de categorie sunt <h3> care conțin butonul (tiparul ARIA pentru acordeon),
   de aceea h3-ul nu trebuie să aducă marginile și mărimea lui implicită. */
.svc-group-h, .acc-h { margin: 0; font-size: inherit; font-weight: inherit; }

.svc-group-head {
  width: 100%;
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.15rem 1.35rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background-color .35s;
}
.svc-group-head:hover { background: rgba(198, 161, 91, .07); }
.svc-group-head .icon-circle {
  width: 46px; height: 46px; margin-bottom: 0;
}
.svc-group-head .icon-circle svg { width: 21px; height: 21px; }
.svc-group.is-open .icon-circle { background: var(--gold-deep); color: var(--ivory); }

.svc-group-title { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.svc-group-title strong {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; line-height: 1.2;
}
.svc-group-title em {
  font-style: normal; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}

/* „+” din colțul din dreapta: semnalul vizibil că un card se poate desfășura */
.svc-group-head .acc-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(166, 124, 46, .34);
  transition: background-color .35s, border-color .35s;
}
.svc-group-head .acc-icon::before,
.svc-group-head .acc-icon::after { inset: 50% 9px auto 9px; }
.svc-group-head:hover .acc-icon { background: rgba(198, 161, 91, .16); border-color: rgba(166, 124, 46, .6); }
.svc-group.is-open .acc-icon { background: var(--gold-deep); border-color: var(--gold-deep); }
.svc-group.is-open .acc-icon::before,
.svc-group.is-open .acc-icon::after { background: var(--ivory); }

.svc-group-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.svc-group.is-open .svc-group-body { grid-template-rows: 1fr; }

.svc-list { overflow: hidden; list-style: none; margin: 0; padding: 0; }
.svc-list li {
  display: grid; gap: .3rem;
  /* pe două coloane, procedura mai scurtă e întinsă la înălțimea vecinei din rând;
     fără `start`, spațiul în plus s-ar împărți între denumire, descriere și preț */
  align-content: start;
  padding: 1.05rem 1.35rem;
  border-top: 1px solid var(--line);
}
.svc-name { margin: 0; font-family: var(--font-display); font-size: 1.06rem; font-weight: 400; color: var(--ink); }
.svc-desc { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
.svc-meta {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
}
/* Prețul stă pe linie proprie: variantele („gambă 2000 lei · coapsă 2500 lei”)
   sunt prea lungi ca să încapă lângă denumire pe telefon. */
.svc-price {
  font-family: var(--font-display); font-size: .98rem; font-weight: 500;
  color: var(--gold-deep); line-height: 1.5;
}

.services-note { text-align: center; margin-top: 2.5rem; font-size: .95rem; }
.services-note a {
  color: var(--gold-deep); border-bottom: 1px solid var(--gold);
  /* numărul se apelează de pe telefon — îi dăm o zonă de atins decentă */
  display: inline-block; padding: .3rem 0;
}
.services-note--prices {
  max-width: 58ch; margin-left: auto; margin-right: auto;
  font-size: .86rem; color: var(--ink-soft);
}

/* ---------- Fondatoare ---------- */
.signature { margin: 1.75rem 0 2rem; }
.signature-name {
  display: block; font-family: var(--font-display);
  font-size: 1.6rem; color: var(--gold-light);
}
.signature-role {
  display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(250, 243, 233, .55); margin-top: .35rem;
}

/* ---------- Echipa ---------- */
/* Card pe orizontală, fără chenar: portret dreptunghiular în stânga, numele, rolul,
   lista de servicii și linkul în dreapta. Portretul 4:5 pe toată lățimea cardului (varianta
   inițială) cerea aproape un ecran de persoană; aici e la ~45% din latura aceea — destul
   cât fața să se vadă bine, dar toată echipa să încapă pe un ecran.
   Flex, nu grid: un ultim rând incomplet (2 + 2 + 1, când echipa are cinci oameni) se centrează
   singur, în loc să lase un card orfan lipit de marginea din stânga.
   align-items: flex-start — fiecare card își ia înălțimea din propriul conținut. Portretul
   rămâne mereu 4:5; ca să nu apară gol sub el, lista de servicii e ținută scurtă (denumiri,
   nu descrieri), cât să încapă în înălțimea portretului. Detaliile și prețurile stau în
   secțiunea Servicii, unde duce linkul din card. */
.team-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 2.4rem 2.5rem;
  max-width: 980px; margin-inline: auto;
}
.team-card {
  /* Lățime fixă pe coloană, nu flex-grow: altfel cardul rămas singur pe ultimul rând
     (când echipa are un număr impar de oameni) s-ar umfla până la max-width și ar ieși din ritmul
     celorlalte. Cele 1.3rem scăzute din 50% acoperă jumătatea de gap plus o fracțiune
     de pixel — la fix 50% − gap/2, rotunjirea subpixel poate rupe rândul în două. */
  flex: 0 1 100%; max-width: 520px;
  display: flex; align-items: stretch; gap: 1.35rem;
}

/* Portretul crește odată cu cardul (~36% din lățime, ca în macheta clientului), dar are
   praguri: sub min textul de alături n-ar mai încăpea pe telefon, peste max poza ar
   începe să domine rândul.
   Raportul 4:5 e fix: o poză întinsă după lungimea textului iese ca o fâșie și strică
   proporția portretului. Înălțimea cardului o ține tot poza, fiindcă lista de alături e
   scurtă (vezi .team-services). */
.team-photo {
  position: relative; flex: 0 0 auto; align-self: flex-start;
  width: clamp(108px, 40%, 190px); aspect-ratio: 4 / 5;
  border-radius: var(--radius); overflow: hidden;
  background: var(--cream-2);
}
/* Linie de păr peste marginea pozei: fără ea, portretele cu fundal deschis
   (halate albe pe perete alb) se pierd în cremul secțiunii */
.team-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line); pointer-events: none;
}
/* Portretele sunt tăiate deja la 4:5, cu fața la aceeași înălțime și la aceeași mărime în
   toate (vezi assets/img/photos/specialist-*.jpg), deci aici nu mai rămâne nimic de decupat.
   `object-position` e plasa de siguranță pentru o poză viitoare cu alt raport: o ancorează
   spre partea de sus, ca fața să rămână în cadru. */
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.team-card:hover .team-photo img { transform: scale(1.05); }

.team-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.team-body h3 { font-size: clamp(1.24rem, 1.16rem + .3vw, 1.42rem); margin-bottom: .25rem; }
.team-role {
  display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .7rem;
}
.team-body p { font-size: .88rem; line-height: 1.65; margin: 0; }

/* Ce prestează concret fiecare om din echipă — denumirile serviciilor, nu descrierile lor:
   pe desktop fiecare articol trebuie să încapă pe un rând, ca lista (5–6 articole) să stea
   în înălțimea portretului. Descrierea completă și prețul sunt oricum la un click distanță,
   în categoria unde duce linkul cardului.
   Bulinele sunt desenate din `::before`, nu din `list-style`: când un articol trece totuși
   pe două rânduri (pe telefon), marcatorul implicit al browserului se aliniază după linia
   de bază a primului rând și pare căzut sub text. */
.team-services {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .38rem;
}
.team-services li {
  position: relative; padding-left: .95rem;
  font-size: .84rem; line-height: 1.55; color: var(--ink-soft);
}
.team-services li::before {
  content: ""; position: absolute; left: .1rem; top: .58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.team-link {
  align-self: flex-start; margin-top: auto; padding-top: 1rem;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); border-bottom: 1px solid var(--gold);
  padding-bottom: .2rem;
}
.team-link:hover { color: var(--ink); border-bottom-color: var(--ink); }


/* Oamenii fără fotografie: inițiale pe cadrul gol. Degradeul e ținut palid
   intenționat — la mărimea asta, auriul plin ar trage privirea mai tare decât portretele
   reale de lângă el. */
.team-photo--initials {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ivory), var(--cream-2));
}
.team-photo--initials span {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); letter-spacing: .08em;
  color: var(--gold-deep);
}

/* Linkul spre servicii stă pe un rând propriu; `margin-top: auto` îl coboară la baza
   portretului când lista de servicii e mai scurtă decât poza */
.team-actions {
  margin-top: auto; padding-top: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.05rem;
}
.team-actions .team-link { margin-top: 0; padding-top: 0; }
/* Pe touch, linkul are ~18px înălțime — sub minimul recomandat (44px iOS /
   48dp Android). Extindem zona de atins pe verticală cu un pseudo-element,
   ca aspectul să rămână neschimbat. */
@media (hover: none) and (pointer: coarse) {
  .team-actions .team-link { position: relative; }
  .team-actions .team-link::after {
    content: ''; position: absolute; inset: -12px 0;
  }
}

/* Două carduri pe rând abia de la 1000px: acolo coloana de lângă portret rămâne la ~260px,
   adică fix cât trebuie ca fiecare serviciu să încapă pe un rând. La 820–1000px (pragul de
   dinainte) coloana scădea sub 240px, jumătate din articole treceau pe două rânduri și textul
   creștea cu ~100px peste înălțimea portretului. Sub prag cardurile stau pe o singură coloană,
   centrate, cu lățimea de 520px — acolo coloana de text e chiar mai lată. */
@media (min-width: 1000px) {
  .team-card { flex-basis: calc(50% - 1.3rem); max-width: none; }
}

/* Pe telefon (sub 560px) cardul nu mai are lățime pentru două coloane: lângă portret ar
   rămâne ~20 de caractere pe rând, fiecare serviciu s-ar rupe în trei rânduri, iar poza
   întinsă până la baza cardului ar deveni o fâșie de 1:4. Așa că sub pragul ăsta cardul
   își schimbă așezarea: portretul stă doar lângă nume și rol, iar lista și linkul trec
   dedesubt, pe toată lățimea.
   `display: contents` pe .team-body ridică numele, rolul, lista și linkul direct în grila
   cardului — altfel lista ar rămâne închisă în coloana din dreapta și n-ar putea trece
   sub poză. */
@media (max-width: 559px) {
  .team-card {
    display: grid; grid-template-columns: clamp(96px, 30%, 136px) 1fr;
    /* scurtătura `gap` scrie ambele axe: rând 0, coloană 1.15rem. Scrise separat, un
       `gap: 0` de după `column-gap` l-ar fi anulat — așa ajunsese numele lipit de poză. */
    gap: 0 1.15rem;
  }
  .team-body { display: contents; }
  /* poza ține rândurile numelui și rolului; ele se centrează pe verticală lângă ea */
  .team-photo { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: auto; }
  .team-card h3 { grid-column: 2; grid-row: 1; align-self: end; }
  .team-role { grid-column: 2; grid-row: 2; align-self: start; margin-bottom: 0; }
  .team-services { grid-column: 1 / -1; margin-top: 1.15rem; }
  .team-actions { grid-column: 1 / -1; }
}

/* Telefoane înguste: mai strângem distanța dintre carduri */
@media (max-width: 420px) {
  .team-grid { gap: 2rem; }
}

/* ---------- Galerie ---------- */
.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.gallery-item {
  position: relative; display: block;
  padding: 0; border: 0; background: var(--cream-2);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  /* Un singur format pentru toate plăcile de galerie — la fel ca în mozaicul clinicii.
     Colajele înainte/după sunt decupate la ~3:4 (vezi rezultat-buze-*.jpg), deci intră
     în placă fără să li se taie nimic. */
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-sm);
}

/* Etichetele „Înainte / După”: le punem noi, în HTML, ca să fie traductibile
   (textul englezesc a fost decupat din imaginile sursă). */
.ba-tag {
  position: absolute; left: .6rem; z-index: 3;
  padding: .26rem .6rem;
  border-radius: 999px;
  background: rgba(36, 31, 26, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--ivory);
  font-size: .56rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.5;
  pointer-events: none;
}
/* Etichetele stau în colțul din stânga, lipite de marginea plăcii, nu centrate: buzele
   pacientei sunt exact pe mijlocul fiecărei jumătăți de colaj, iar o etichetă centrată
   le acoperea — mai ales pe telefon, unde placa e mică și textul ocupă din ea o parte
   mult mai mare. În colț rămâne citibilă și lasă rezultatul complet vizibil. */
.ba-tag--before { top: .6rem; }
.ba-tag--after  { bottom: .6rem; }

/* De la 600px placa e mai lată; putem răsufla puțin cu marginile și cu textul. */
@media (min-width: 600px) {
  .ba-tag { left: .85rem; padding: .28rem .72rem; font-size: .6rem; letter-spacing: .16em; }
  .ba-tag--before { top: .85rem; }
  .ba-tag--after  { bottom: .85rem; }
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36, 31, 26, .65), transparent 45%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 2.6rem; z-index: 2;
  padding-inline: .9rem;
  color: var(--ivory);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.07); }
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; }
.gallery-item:hover .gallery-cap, .gallery-item:focus-visible .gallery-cap { opacity: 1; transform: translateY(0); }
.gallery-item.is-hidden { display: none; }

/* ---------- Mozaic — galeria clinicii ----------
   De la 768px grila are patru coloane: o placă lată (2 coloane, 3/2) plus două înguste
   (1 coloană, 3/4) umplu exact un rând, iar acolo unde nu există înguste rândul e închis
   de două late. Patru coloane, nu trei: placa lată iese pe jumătate din lățimea grilei
   (~590px la 1200px de container, față de ~800px pe trei coloane), deci secțiunea se
   parcurge din două-trei ecrane, nu din șapte. Înălțimea rândului o dă mereu placa lată —
   fiecare rând are cel puțin una — iar cele înguste o umplu prin `align-self: stretch`.
   Sub prag rămân 2 coloane: placa lată ia rândul întreg, iar cele înguste, venind în HTML
   două câte două, se așază una lângă alta. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}
.mosaic .gallery-item { aspect-ratio: 3 / 4; }
.mosaic .mosaic-wide  { aspect-ratio: 3 / 2; grid-column: span 2; }
/* aici nu există eticheta „După” sub legendă, deci o coborâm la baza plăcii; plăcile fiind
   mai mici decât în galeria de rezultate, legenda scade și ea cu o idee, ca titlurile lungi
   („Terapie PRP · pregătirea plasmei”) să nu ocupe trei rânduri pe o placă îngustă */
.mosaic .gallery-cap { bottom: 1.5rem; font-size: .66rem; letter-spacing: .12em; }

@media (min-width: 768px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  /* `aspect-ratio` nu știe de gap: placa lată ocupă `2c + gap`, deci iese cu ~0.67·gap mai
     înaltă decât cea îngustă, iar rândul s-ar termina în trepte. Așa că înălțimea rândului o
     dă placa lată, iar cea îngustă rămâne pe înălțime automată și o umple prin
     `align-self: stretch` (implicit la grilă). Nu scoate raportul și de pe cea lată —
     atunci n-ar mai avea rândul cine să-l dea. */
  .mosaic .gallery-item { aspect-ratio: auto; }
  .mosaic .mosaic-wide  { aspect-ratio: 3 / 2; }
}

/* Galeria are 13 poze; deschise toate deodată, secțiunea cere câteva ecrane de derulat doar
   ca să treci de ea. Rămân vizibile primele șase — două rânduri pline și pe patru, și pe
   două coloane — iar butonul le deschide pe restul. Clasa o pune main.js, care ascunde
   plăcile una câte una: `.is-hidden` le scoate și din navigarea cu săgeți din lightbox. */
.mosaic-more { display: flex; justify-content: center; margin-top: 1.6rem; }
.mosaic-more[hidden] { display: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 22, 18, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s var(--ease);
}
/* `display:flex` de mai sus bate regula UA pentru [hidden], așa că o restabilim explicit.
   Fără asta lightbox-ul rămâne un strat fixed, invizibil, care înghite toate click-urile paginii. */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lb-figure { margin: 0; max-width: min(90vw, 620px); text-align: center; }
.lb-figure img {
  width: 100%; max-height: 78vh; max-height: 78svh; object-fit: contain;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  transform: scale(.96); transition: transform .4s var(--ease);
}
.lightbox.is-open .lb-figure img { transform: scale(1); }
.lb-figure figcaption {
  color: var(--gold-light); margin-top: 1.1rem;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
.lb-close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 46px; height: 46px; line-height: 1;
  font-size: 1.9rem;
  background: none; border: 1px solid rgba(227, 200, 138, .3); border-radius: 50%;
  color: var(--cream); cursor: pointer;
  transition: background-color .3s, transform .3s;
}
.lb-close:hover { background: rgba(227, 200, 138, .16); transform: rotate(90deg); }
.lb-nav {
  width: 52px; height: 52px; flex: none;
  background: none; border: 1px solid rgba(227, 200, 138, .3); border-radius: 50%;
  color: var(--cream); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .3s, border-color .3s;
}
.lb-nav svg { width: 22px; height: 22px; }
.lb-nav:hover { background: rgba(227, 200, 138, .16); border-color: var(--gold-light); }
.lb-prev { margin-right: clamp(.5rem, 2vw, 1.5rem); }
.lb-next { margin-left: clamp(.5rem, 2vw, 1.5rem); }

/* ---------- Păreri ---------- */
/* Grilă în locul caruselului: toate recenziile se citesc dintr-o privire, iar una nouă
   înseamnă doar încă un <article> — nu mai există indice curent, autoplay, buline sau
   swipe de ținut sincronizate. */
.reviews {
  display: grid; grid-template-columns: 1fr; gap: 1.4rem;
  /* `start`, nu întinderea implicită: altfel toate cardurile de pe un rând iau înălțimea
     celui mai lung, iar recenziile scurte rămân cu un gol de câteva rânduri sub text. */
  align-items: start;
  max-width: 1080px; margin-inline: auto;
}
@media (min-width: 680px)  { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--ivory);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  /* Fără ridicare din `transform` la hover: `.reveal.is-visible { transform: none }` are
     aceeași specificitate și vine mai jos în fișier, deci ar anula-o. Adâncimea o dau
     umbra și chenarul. */
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.review:hover { box-shadow: var(--shadow-md); border-color: var(--gold-soft); }

.review-top { display: flex; align-items: center; gap: .85rem; }
.review-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--cream), var(--cream-2));
  border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  letter-spacing: .04em; color: var(--gold-deep);
}
/* `min-width: 0` lasă numele lungi să rupă rândul; fără el coloana s-ar întinde cât textul
   și ar împinge marginea cardului. */
.review-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.review-name { font-size: .95rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.review-stars { font-size: .78rem; letter-spacing: .14em; line-height: 1; color: var(--gold); }
.review-text { margin: 0; font-size: .92rem; line-height: 1.72; color: var(--ink-soft); }

/* Pe o singură coloană, toate recenziile una sub alta înseamnă câteva ecrane de derulat
   până la secțiunea următoare. Sub pragul de două coloane rămân vizibile primele trei, iar
   butonul le deschide pe restul. De la 680px în sus grila are loc, deci nici restrângerea,
   nici butonul nu se mai aplică — clasa poate rămâne pusă fără efect. */
@media (max-width: 679.98px) {
  .reviews.is-collapsed .review:nth-child(n+4) { display: none; }
  .reviews-more:not([hidden]) { display: flex; }
}
.reviews-more { display: none; justify-content: center; margin-top: 1.6rem; }


/* ---------- Accordion ---------- */
.accordion { display: grid; gap: .85rem; }
.acc-item {
  background: var(--ivory);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .35s, box-shadow .35s;
}
.acc-item.is-open { border-color: rgba(166, 124, 46, .42); box-shadow: var(--shadow-sm); }
.acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.15rem;
  transition: color .3s;
}
.acc-head:hover { color: var(--gold-deep); }
.acc-icon { position: relative; width: 16px; height: 16px; flex: none; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--gold-deep); border-radius: 2px;
  transition: transform .4s var(--ease);
}
.acc-icon::after { transform: rotate(90deg); }
.acc-item.is-open .acc-icon::after,
.svc-group.is-open .acc-icon::after { transform: rotate(0); }
.acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > p {
  overflow: hidden; margin: 0;
  padding: 0 1.6rem;
  font-size: .96rem;
  transition: padding .45s var(--ease);
}
.acc-item.is-open .acc-panel > p { padding: 0 1.6rem 1.6rem; }

/* ---------- Fereastra de programare ----------
   Clinica nu are rezervare online: butoanele „Programează-te” deschid fereastra asta,
   de unde pacienta alege canalul, iar recepția face programarea. Fundalul și blocarea
   scroll-ului funcționează ca la lightbox (`main.js`, lockScroll), doar că fereastra e
   un card crem, nu o fotografie pe negru.
   Canalele au eticheta scrisă lângă iconiță: în linie subțire bulele de WhatsApp și
   Viber se confundă între ele, iar cuvântul lămurește care e care. */
.modal {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 22, 18, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s var(--ease);
}
/* `display:flex` bate regula UA pentru [hidden] — fără asta ar rămâne un strat fixed,
   invizibil, care înghite toate click-urile paginii (aceeași capcană ca la lightbox). */
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal-card {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100vh - 2rem); max-height: calc(100svh - 2rem);
  /* Cardul se derulează doar pe verticală, însă `overflow-y: auto` singur nu lasă cealaltă
     axă `visible`: ea se calculează tot `auto`, deci cardul devine și scroller orizontal.
     Iar ×-ul de închidere se rotește cu 90° la hover împreună cu zona lui de atins (44px,
     dusă acolo cu `::after`), iar la 45° pătratul acela stă pe diagonală — 44·√2 ≈ 62px,
     cu ~2px peste marginea cardului. Cât ținea rotirea, apărea o bară de derulare
     orizontală sub butonul Messenger. `hidden` taie exact colțul acela transparent —
     ×-ul și pastilele rămân întregi — și lasă derularea doar pe verticală. */
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, var(--ivory), var(--cream));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  /* sus lăsăm loc cât butonul de închidere, altfel pe ecran îngust eticheta „Programare”
     trecea pe sub × */
  padding: 3rem clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 5vw, 2.75rem);
  display: grid; justify-items: center; gap: .35rem;
  text-align: center;
  transform: translateY(14px) scale(.98);
  transition: transform .4s var(--ease);
}
.modal.is-open .modal-card { transform: none; }
.modal-card h2 { margin: .2rem 0 0; font-size: clamp(1.6rem, 4vw, 2.1rem); }
.modal-sub { margin: .5rem 0 1.2rem; font-size: .95rem; color: var(--ink-soft); max-width: 34ch; }
/* Butonul e desenat la 30px, ca să nu domine cardul pe telefon, dar zona de atins e dusă
   la 44px cu `::after` — același tipar ca la linkurile din subsol. */
.modal-close {
  position: absolute; top: .8rem; right: .9rem;
  width: 30px; height: 30px; line-height: 1;
  display: grid; place-items: center;
  font-size: 1.6rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-soft);
  transition: color .3s, transform .3s;
}
.modal-close::after { content: ''; position: absolute; inset: -7px; }
.modal-close:hover { color: var(--gold-deep); transform: rotate(90deg); }

.booking-phone {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.4rem); line-height: 1.15;
  letter-spacing: .02em;
  transition: color .3s;
}
.booking-phone:hover { color: var(--gold-deep); }
/* Numărul e scris cu font de titlu, dar linia lui are ~35px — sub minimul de atins
   (44px iOS / 48dp Android), iar pe telefon el e chiar butonul principal. Extindem zona
   de atins cu un pseudo-element, ca la linkurile din subsol: aspectul rămâne identic. */
@media (hover: none) and (pointer: coarse) {
  .booking-phone { position: relative; display: inline-block; }
  .booking-phone::after { content: ''; position: absolute; inset: -9px -12px; }
}
.booking-hint { font-size: .88rem; color: var(--ink-soft); }

/* Canalele în grilă de două coloane, nu în `flex-wrap`: pastilele au lățimi diferite
   („Viber” e cât jumătate din „Instagram”), iar rândurile ieșeau nealiniate. Aici toate
   au aceeași lățime, iar a cincea, rămasă fără pereche, ia rândul întreg. */
.booking-channels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
  width: 100%; max-width: 430px; margin: 1.4rem auto 0;
}
.booking-channels > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Pastila are 44px înălțime din construcție (minimul de atins pe iOS / 48dp Android),
   deci aici nu mai e nevoie de extinderea zonei cu `::after` ca la linkurile din subsol. */
.channel {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--ivory);
  font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .35s, background-color .35s, color .3s, transform .4s var(--ease);
}
.channel:hover {
  border-color: var(--gold);
  background: rgba(198, 161, 91, .10);
  color: var(--gold-deep);
  transform: translateY(-2px);
}
/* `flex: none` e obligatoriu: fără el, pe ecranele mici (iPhone SE) pastila nu mai avea
   loc pentru iconiță + cuvânt, iar flex-ul strângea iconița până rămânea un punct.
   Textul e `nowrap`, deci el nu cedează — cedează exact ce nu trebuie. */
.channel-icon { display: grid; place-items: center; flex: none; color: var(--gold-deep); }
.channel-icon svg { width: 19px; height: 19px; stroke-linecap: round; stroke-linejoin: round; }

/* Sub 400px („WhatsApp”, „Instagram” lângă iconiță, într-o pastilă de ~119px) scriem mai
   strâns, în loc să trecem pe o coloană: cinci rânduri ar face cardul mai înalt decât
   ecranul unui iPhone SE. Regula stă DUPĂ cele de bază — au aceeași specificitate, deci
   câștigă ultima din fișier. */
@media (max-width: 400px) {
  .channel { font-size: .66rem; letter-spacing: .03em; padding: .5rem .6rem; gap: .35rem; }
  .channel-icon svg { width: 16px; height: 16px; }
}

/* ---------- Social (în footer) ---------- */
.socials { display: flex; gap: .75rem; margin-top: 1.5rem; }
.socials a {
  width: 44px; height: 44px;   /* minimul de atins pe iOS (44px) și Android (48dp) */
  display: grid; place-items: center;
  border: 1px solid rgba(227, 200, 138, .28); border-radius: 50%;
  color: rgba(250, 243, 233, .7);
  transition: all .35s var(--ease);
}
.socials svg { width: 19px; height: 19px; stroke-linecap: round; stroke-linejoin: round; }
.socials a:hover {
  background: var(--gold-deep); border-color: var(--gold-deep);
  color: var(--ivory); transform: translateY(-3px);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: rgba(250, 243, 233, .78); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; }
.footer-inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.footer-contact address { font-style: normal; }
.footer-info p { display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1rem; }
.footer-brand img { width: 130px; height: auto; border-radius: var(--radius); margin-bottom: 1.25rem; }
.footer-brand p { color: rgba(250, 243, 233, .6); font-size: .94rem; max-width: 34ch; }
.footer-nav { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.footer-nav h3, .footer-contact h3 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light);
  margin-bottom: 1.1rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }

/* Coloana de contact din subsol */
.footer-info p {
  font-size: .92rem; line-height: 1.6;
  color: rgba(250, 243, 233, .72);
}
.footer-icon {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(227, 200, 138, .24); border-radius: 50%;
  color: var(--gold-light);
  margin-top: .1rem;
}
.footer-icon svg { width: 15px; height: 15px; stroke-linecap: round; stroke-linejoin: round; }
.footer-label {
  display: block;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-light); opacity: .8;
}
/* „și pe WhatsApp, Viber, Telegram” — stă sub număr, nu lângă el: pe telefon rândul
   s-ar rupe oricum, iar aici se citește ca precizare, nu ca al doilea link. */
.footer-sub { display: block; font-size: .82rem; color: rgba(250, 243, 233, .55); }
.footer-info a { color: rgba(250, 243, 233, .85); transition: color .3s; }
.footer-info a:hover { color: var(--gold-light); }

/* Numărul de telefon și linkul de Messenger sunt cele mai apăsate lucruri de pe telefon,
   dar textul lor are 16px înălțime — sub minimul de 44px (iOS) / 48dp (Android).
   Extindem zona de atins cu un pseudo-element, ca la meniu și la linkurile din echipă:
   aspectul rămâne identic, doar degetul are unde nimeri. Cei 10px pe verticală sunt
   aleși ca să nu se suprapună zonele a două rânduri vecine (între ele sunt 23px). */
@media (hover: none) and (pointer: coarse) {
  .footer-info a { position: relative; display: inline-block; }
  .footer-info a::after { content: ''; position: absolute; inset: -10px 0; }
}
.footer-nav li { font-size: .92rem; color: rgba(250, 243, 233, .6); }
.footer-nav a { transition: color .3s; }
/* Linkurile din subsol au 16px înălțime; pe touch le extindem zona de atins la ~30px —
   mai mult n-am putea, fără ca zonele a două linkuri vecine să se suprapună. */
@media (hover: none) and (pointer: coarse) {
  .footer-nav ul { gap: 1rem; }
  .footer-nav a { position: relative; display: inline-block; }
  .footer-nav a::after { content: ''; position: absolute; inset: -7px 0; }
}
.footer-nav a:hover { color: var(--gold-light); }

.footer-bottom {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(227, 200, 138, .14);
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .8rem; color: rgba(250, 243, 233, .45);
}
.footer-bottom p { margin: 0; color: inherit; }

/* ---------- FAB ---------- */
.fab {
  position: fixed; z-index: 80;
  right: 1.1rem; bottom: 1.1rem;
  /* Azi viewport-ul e „auto”, deci iOS ține deja pagina în afara zonei de gesturi și
     insets-urile sunt 0. Rândurile de mai jos sunt plasa de siguranță dacă cineva
     adaugă mai târziu viewport-fit=cover; browserele fără env() le ignoră și rămân
     pe valorile de deasupra. */
  right: calc(1.1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold));
  color: var(--ivory);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(166, 124, 46, .35);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .3s;
}
.fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fab:hover { box-shadow: 0 16px 38px rgba(166, 124, 46, .45); }
.fab svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.fab span { display: none; }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 600px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .fab span { display: inline; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (min-width: 768px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }

  /* Pe ecrane mari: două coloane de carduri compacte, fiecare cu acordeonul lui.
     `align-items: start` ca un card deschis să nu întindă vecinul din rând. */
  .svc-groups { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; align-items: start; }

  /* Categoria deschisă trece pe tot rândul, iar procedurile ei se așază pe două coloane.
     Închisă într-o singură coloană, lista de 6–8 proceduri creștea pe verticală și lăsa
     lângă ea un gol cât ea de mare — jumătate de ecran alb în dreapta.
     Grilă, nu `columns`: aici rândurile se aliniază, deci liniile despărțitoare dintre
     proceduri se continuă dintr-o coloană în alta ca într-o listă de prețuri tipărită. */
  .svc-group.is-open { grid-column: 1 / -1; }
  .svc-group.is-open .svc-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .svc-group.is-open .svc-list li:nth-child(2n) { border-left: 1px solid var(--line); }
  /* la un număr impar de proceduri, ultima ar rămâne singură pe rând, cu jumătate de rând
     gol lângă ea — o lățim pe tot rândul */
  .svc-group.is-open .svc-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Cele patru rezultate încap pe un singur rând — fără rând orfan */
  .gallery { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .footer-inner { grid-template-columns: 1.2fr 1.4fr 1fr; gap: 3rem; }
  .scroll-hint { display: block; }
}

@media (min-width: 992px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* Meniu mobil */
@media (max-width: 991px) {
  /* Trebuie să rămână deasupra panoului de meniu (z-index 95), altfel nu se mai poate închide */
  .burger { display: block; position: relative; z-index: 96; }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 95;
    width: min(82vw, 360px);   /* lasă o fâșie din overlay vizibilă, ca tap-ul în afară să închidă */
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 2.5rem;
    padding: 5rem 2.5rem;
    /* idem: contează doar cu viewport-fit=cover, altfel insets = 0 */
    padding-right: calc(2.5rem + env(safe-area-inset-right, 0px));
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(160deg, var(--ivory), var(--cream-2));
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    /* pe ecran scund panoul se derulează; `contain` oprește derularea din a trece la pagina
       de dedesubt când ajungi la capăt (chaining) */
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { transform: translateX(0); }
  /* Telefonul ținut orizontal: panoul e mai scund decât conținutul lui. Fără `flex: none`
     linkurile și butonul se turteau (butonul ajungea la 24px), iar cu `justify-content: center`
     primele linkuri ieșeau deasupra zonei derulabile și nu mai puteau fi atinse. Marginile
     auto centrează grupul cât timp e loc și se anulează singure când nu mai e. */
  .nav > * { flex: none; }
  .nav ul { margin-top: auto; }
  .nav-cta { margin-bottom: auto; }

  .nav ul { flex-direction: column; gap: .75rem; width: 100%; }
  /* linkul avea 19px înălțime — sub minimul de atins; padding-ul îl duce la ~44px, iar gap-ul
     coborât de la 1.5rem ține lista la aceeași înălțime totală */
  .nav ul a { display: block; padding: .72rem 0; }
  .nav ul a { font-size: 1.05rem; font-family: var(--font-display); letter-spacing: .06em; text-transform: none; }
  .nav-cta { width: 100%; }
  .hero-badge { left: auto; right: 4px; bottom: 10px; padding: .8rem 1rem; }
}

/* Telefon ținut orizontal (sau ecran scund): meniul are 6 linkuri + buton pe ~375px înălțime,
   deci strângem paddingul și distanțele, ca tot panoul să încapă fără derulare. */
@media (max-width: 991px) and (max-height: 520px) {
  .nav { padding: 4.5rem 2rem 1.5rem; gap: 1.25rem; }
  .nav ul { gap: .15rem; }
  .nav ul a { padding: .5rem 0; }
}

@media (max-width: 480px) {
  /* Buget strâmt pe telefoanele de 320px: siglă + RO/RU + burger nu încap cu gap de 1.5rem */
  .header-inner { gap: .7rem; }
  .brand { gap: .55rem; }
  .lang-switch button { padding: .38rem .55rem; }

  .btn { padding: .85rem 1.5rem; font-size: .74rem; }
  .lb-prev, .lb-next { position: absolute; bottom: 1.5rem; margin: 0; }
  .lb-prev { left: 25%; }
  .lb-next { right: 25%; }
}

/* Accesibilitate: mișcare redusă */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .fab, .lightbox, .modal, .marquee, .reviews-more, .mosaic-more, .burger { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
  /* La tipar nu există buton de desfășurat: acordeoanele ies deschise */
  .svc-group-body, .acc-panel { grid-template-rows: 1fr; }
}