/* ============================================================
   PAGES — template-uri pentru conținutul migrat de pe
   implantodent.ro (WordPress): hub de cluster + articol +
   cazuistică. Construite pe tokenii din style.css.
   ============================================================ */

/* ---------- breadcrumbs (SEO: pereche cu BreadcrumbList JSON-LD) ---------- */
.pbread {
  width: var(--shell);
  margin: var(--card-gap) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  font-size: .84rem;
  color: var(--ink-40);
}
.pbread a { color: var(--ink-60); }
.pbread a:hover { color: var(--blue); }
.pbread span[aria-current] { color: var(--ink); font-weight: 600; }
.pbread .sep { opacity: .5; }

/* ---------- article shell ---------- */
.acard {
  width: var(--shell);
  margin: var(--card-gap) auto 0;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  padding: clamp(1.8rem, 4vw, 3.6rem);
  scroll-margin-top: calc(var(--header-h) + 14px);
}

/* article header */
.ahead { max-width: 54rem; }
.ahead h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.ahead__lead {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-60);
}
.ahead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-top: 1.2rem;
  font-size: .84rem;
  color: var(--ink-40);
}
.ahead__meta .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(27, 111, 183, .08);
  color: var(--blue);
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 100px;
}

/* two-column article body: content + sticky aside */
.awrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 24%, 300px);
  gap: clamp(1.8rem, 3.6vw, 3.2rem);
  align-items: start;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.awrap--wide { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 940px) {
  .awrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- prose: long-form typography ---------- */
.prose { max-width: 68ch; color: var(--ink); }
.prose > * + * { margin-top: 1.05rem; }
.prose p { font-size: 1.02rem; line-height: 1.72; color: var(--ink-60); }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 700; }
.prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.prose h2 + p, .prose h3 + p { margin-top: .7rem; }
.prose h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-top: clamp(1.6rem, 2.6vw, 2.1rem);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.prose h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 1.4rem; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: .6rem; }
.prose ul li, .prose ol li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-60);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.prose ol { counter-reset: pl; }
.prose ol li { counter-increment: pl; }
.prose ol li::before {
  content: counter(pl);
  position: absolute;
  left: 0;
  top: .1em;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(27, 111, 183, .1);
  color: var(--blue);
  font-size: .74rem;
  font-weight: 800;
}
.prose a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--green); }
.prose img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
  margin-top: 1.6rem;
}
.prose figure { margin-top: 1.6rem; }
.prose figcaption { margin-top: .6rem; font-size: .84rem; color: var(--ink-40); line-height: 1.5; }
.prose blockquote {
  margin-top: 1.6rem;
  padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--green);
  background: var(--paper);
  border-radius: 0 16px 16px 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}
.prose hr { border: 0; border-top: 1px solid rgba(16, 24, 32, .1); margin-top: 2rem; }
/* highlighted note box inside prose */
.prose .pnote {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: #E3F0DC;
  border-radius: 16px;
  padding: 1rem 1.3rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
  margin-top: 1.6rem;
}
.prose .pnote svg { flex: none; width: 20px; height: 20px; color: var(--green); margin-top: .15rem; }
/* responsive table */
.prose .ptable-wrap { overflow-x: auto; margin-top: 1.6rem; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.prose th, .prose td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid rgba(16, 24, 32, .1); }
.prose th { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-40); }
.prose td { color: var(--ink-60); line-height: 1.55; }
.prose tr:last-child td { border-bottom: 0; }

/* ---------- sticky aside: table of contents + CTA ---------- */
.aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 1rem; }
@media (max-width: 940px) { .aside { position: static; } }
.atoc {
  background: var(--paper);
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: 20px;
  padding: 1.2rem 1.3rem;
}
.atoc__t {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-40);
}
.atoc ul { list-style: none; display: grid; gap: .5rem; margin-top: .9rem; }
.atoc a {
  display: block;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--ink-60);
  padding-left: .8rem;
  border-left: 2px solid rgba(16, 24, 32, .12);
}
.atoc a:hover { color: var(--blue); border-left-color: var(--blue); }
.atoc a.is-active { color: var(--ink); font-weight: 700; border-left-color: var(--green); }

/* aside CTA box */
.abox {
  background: linear-gradient(158deg, #37991f 0%, #2a7d1a 100%);
  color: #fff;
  border-radius: 20px;
  padding: 1.4rem 1.4rem 1.5rem;
}
.abox b { display: block; font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.25; }
.abox p { margin-top: .5rem; font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.abox .btn { margin-top: 1.1rem; width: 100%; justify-content: center; white-space: normal; }
.abox__phone {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
}
.abox__phone svg { width: 16px; height: 16px; }

/* ---------- cluster hub: card grid to sub-pages ---------- */
.hgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
@media (max-width: 900px) { .hgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hgrid { grid-template-columns: 1fr; } }
.hcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: 20px;
  box-shadow: 0 14px 32px -20px rgba(16, 24, 32, .22);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(16, 24, 32, .34); }
.hcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--paper); overflow: hidden; }
.hcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.hcard:hover .hcard__media img { transform: scale(1.045); }
/* dega­jare fină în partea de jos a imaginii, ca titlul să nu se lipească de ea */
.hcard__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, rgba(16, 24, 32, .16), transparent);
  pointer-events: none;
}
/* miniatură pe rândurile de cazuri reale */
.hrow__media {
  flex: none; width: 74px; aspect-ratio: 4 / 3; border-radius: 12px;
  overflow: hidden; background: var(--paper);
}
.hrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) { .hrow__media { width: 58px; } }
.hcard__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.hcard__idx { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.hcard h3 { font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.25; margin-top: .4rem; }
.hcard p { margin-top: .5rem; font-size: .92rem; line-height: 1.55; color: var(--ink-60); }
.hcard__go {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--green);
}
.hcard__go svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.hcard:hover .hcard__go svg { transform: translateX(4px); }
/* whole card clickable */
.hcard { position: relative; }
.hcard__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.hcard__link:focus-visible { outline: 3px solid var(--blue-sky); outline-offset: 3px; }

/* compact variant — text-only list of sibling articles */
.hgrid--compact { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (max-width: 700px) { .hgrid--compact { grid-template-columns: 1fr; } }
.hrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--paper);
  border: 1px solid rgba(16, 24, 32, .05);
  border-radius: 16px;
  padding: .95rem 1.15rem;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.hrow:hover { background: #fff; transform: translateX(3px); box-shadow: 0 12px 26px -18px rgba(16, 24, 32, .3); }
.hrow__t { flex: 1; min-width: 0; font-size: .98rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.hrow__go { flex: none; color: var(--green); display: grid; place-items: center; }
.hrow__go svg { width: 17px; height: 17px; }
.hrow__link { position: absolute; inset: 0; border-radius: inherit; }

/* ---------- section head inside article/hub cards ---------- */
.phead { max-width: 52rem; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
.phead h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.025em; line-height: 1.12; }
.phead p { margin-top: .8rem; color: var(--ink-60); font-size: 1.02rem; line-height: 1.6; }

/* ---------- FAQ (reuse of the offer-page pattern, page-scoped) ---------- */
.pfaq-list { display: grid; gap: .8rem; }
.pfaq {
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  box-shadow: 0 8px 20px -14px rgba(16, 24, 32, .16);
  border-radius: 18px;
  overflow: hidden;
}
.pfaq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq__ic {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(62, 168, 44, .12);
  color: var(--green);
  transition: transform .3s var(--ease), background .3s;
}
.pfaq__ic svg { width: 16px; height: 16px; }
.pfaq[open] .pfaq__ic { transform: rotate(45deg); background: var(--green); color: #fff; }
.pfaq__a { padding: 0 1.4rem 1.25rem; color: var(--ink-60); font-size: .98rem; line-height: 1.65; max-width: 62ch; }
.pfaq__a > * + * { margin-top: .8rem; }

/* ---------- medical disclaimer ---------- */
.pmed {
  width: var(--shell);
  margin: var(--card-gap) auto 0;
  font-size: .8rem;
  color: var(--ink-40);
  line-height: 1.55;
  max-width: min(var(--shell), 70rem);
}

/* ---------- page hero for hubs (image/solid variant) ---------- */
.phero--doc { min-height: min(52svh, 460px); }
.phero--doc .phero__inner { max-width: 46rem; }

/* ---------- cazuistică (case study) ---------- */
.ccase-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid rgba(16, 24, 32, .1);
}
.ccase-meta div span {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-40);
}
.ccase-meta div b { display: block; margin-top: .3rem; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.ccase-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--card-gap); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.ccase-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; }

/* ---------- butoane: textul lung se rupe, nu iese din ecran ---------- */
.acard .btn, .abox .btn, .pfaq .btn { white-space: normal; text-align: center; }

/* ---------- tiny-device safety ---------- */
@media (max-width: 359px) { html, body { overflow-x: hidden; } }

/* ---------- video în .prose (animații 3D pe paginile de tratament; adăugat pentru /totalfix) ---------- */
.prose figure video { width: 100%; height: auto; border-radius: 18px; display: block; }

/* ============================================================
   ADĂUGAT pentru /programeaza-te (T6) — două clase noi, ca pagina
   să NU depindă de css/contact2.css sau css/oferta.css.
   Restul formularului refolosește .form-card/.form-grid/.field/
   .form-success din style.css + handler-ul demo din js/main.js.
   ============================================================ */

/* rândul de consimțământ GDPR de sub formular
   (echivalentul .cx-check din contact2.css) */
.pform-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.1rem;
  font-size: .86rem;
  color: var(--ink-60);
  line-height: 1.45;
  cursor: pointer;
}
.pform-check input {
  flex: none;
  margin-top: .2rem;
  width: 17px;
  height: 17px;
  accent-color: var(--green);
}
.pform-check a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.pform-check a:hover { color: var(--green); }

/* NAP (nume-adresă-telefon) în cardurile de clinică: dl cu etichetă + valoare */
.pnap { display: grid; gap: .5rem; margin-top: .8rem; }
.pnap > div { display: flex; gap: .6rem; align-items: baseline; }
.pnap dt {
  flex: none;
  width: 4.9rem;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-40);
}
.pnap dd { min-width: 0; font-size: .92rem; line-height: 1.5; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pnap dd a { color: var(--ink); text-decoration: underline; text-underline-offset: .15em; text-decoration-color: rgba(16, 24, 32, .25); }
.pnap dd a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* ============================================================
   ADĂUGAT pentru studiile de caz din /cauzistica (T3) — un singur
   modificator pentru .ccase-gallery. Imaginile clinice reale
   (radiografii panoramice, secțiuni de tomografie, grupaje
   „înainte/după") au rapoarte de 3:1 – 6:1; decupate la 4/3 de
   `.ccase-gallery img { aspect-ratio: 4/3; object-fit: cover }`
   ar rămâne din ele doar o fâșie centrală, ilizibilă medical.
   Modificatorul le afișează integral, pe lățimea cardului.
   ============================================================ */
.ccase-gallery--doc { grid-template-columns: minmax(0, 1fr); gap: clamp(1.3rem, 2.6vw, 2rem); }
.ccase-gallery--doc img { aspect-ratio: auto; height: auto; object-fit: contain; }

@media (max-width: 420px) {
  .pnap > div { flex-direction: column; gap: .1rem; }
  .pnap dt { width: auto; }
}

/* ============================================================
   ADĂUGAT pentru paginile de MEDIA (T5): /video și /testimonial.
   „Facade" video: în HTML există doar thumbnail-ul static (bun pentru
   SEO și pentru viteză), iar iframe-ul YouTube e injectat la click.
   Două clase noi, scopate pe cardurile video — nu ating .hcard clasic.
   ============================================================ */
.hcard--video .hcard__media { aspect-ratio: 16 / 9; background: #0d1117; }
.hcard--video .hcard__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(246, 243, 238, .92);
  display: grid;
  place-items: center;
  color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(10, 12, 14, .55);
  transition: transform .35s var(--ease), background .35s var(--ease);
  pointer-events: none;
}
.hcard__play svg { width: 18px; height: 18px; margin-left: 3px; }
.hcard--video:hover .hcard__play { transform: scale(1.08); background: #fff; }

/* ============================================================
   ADĂUGAT pentru studiile de caz (T3) — galeria clinică.
   .ccase-gallery clasic decupează la 4/3 (object-fit: cover), ceea ce
   distruge radiografiile panoramice, secțiunile de tomografie și planșele
   tip triptic din cazuistică. Varianta --fit păstrează proporțiile reale,
   iar .ccase-gallery figure/figcaption permite legenda reală a fiecărei
   imagini clinice. .ccase-gh = titlul de grup (h3) din galerie.
   ============================================================ */
.ccase-gallery--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.ccase-gallery--fit img { aspect-ratio: auto; height: auto; object-fit: contain; background: rgba(16, 24, 32, .04); }
.ccase-gallery figure { margin: 0; }
.ccase-gallery figcaption { margin-top: .6rem; font-size: .84rem; color: var(--ink-40); line-height: 1.5; }
.ccase-gh { margin-top: clamp(2rem, 3.4vw, 2.8rem); font-size: 1.14rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.ccase-gh:first-of-type { margin-top: 0; }

/* Cazuistică — variantă pe o singură coloană, folosită împreună cu
   .ccase-gallery--fit pentru planșele panoramice (radiografii 2D, secțiuni CBCT,
   planse compozite "inainte-dupa" cu raport 3:1-5:1): pe grila auto-fit acestea ar fi
   redate la ~350px lățime, ilizibil clinic. Adăugat de agentul T3 (studii de caz). */
.ccase-gallery--solo { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   ARTICOL PE CARDURI (redesign)
   Înainte: un singur card imens, cu textul lipit în stânga și
   spațiu mort în dreapta. Acum: card de intro cu fotografie reală,
   apoi câte un card per secțiune H2, coloană centrată + cuprins.
   ============================================================ */

/* containerul articolului nu mai are fundal — cardurile îl au */
.apage { display: block; }

/* ---------- card de intro, cu media reală ---------- */
.ahero {
  width: var(--shell);
  margin: var(--card-gap) auto 0;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ahero--media { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
.ahero__body {
  align-self: center;
  padding: clamp(1.7rem, 4vw, 3.6rem);
  max-width: 60rem;
}
.ahero__media {
  position: relative;
  min-height: clamp(230px, 34vw, 460px);
  background: var(--paper-2);
  overflow: hidden;
}
.ahero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease);
}
.ahero.visible .ahero__media img { transform: scale(1); }
@media (max-width: 900px) {
  .ahero--media { grid-template-columns: minmax(0, 1fr); }
  .ahero__media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- coloana de conținut, centrată (fără spațiu mort) ---------- */
.awrap--cards {
  grid-template-columns: minmax(0, 74ch) clamp(240px, 24%, 320px);
  justify-content: center;
  gap: var(--card-gap);
  margin-top: var(--card-gap);
}
@media (max-width: 1040px) {
  .awrap--cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- un card per secțiune ---------- */
.pstack { display: grid; gap: var(--card-gap); align-content: start; }
.pblock {
  position: relative;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  padding: clamp(1.4rem, 3vw, 2.5rem) clamp(1.4rem, 3vw, 2.7rem);
  scroll-margin-top: calc(var(--header-h) + 14px);
  transition: box-shadow .55s var(--ease), transform .55s var(--ease),
              opacity .8s var(--ease);
}
@media (hover: hover) {
  .pblock:hover { transform: translateY(-2px); box-shadow: 0 28px 58px -28px rgba(16, 24, 32, .3); }
}
/* în card, coloana de text nu mai are nevoie de limită proprie */
.pblock .prose { max-width: none; }
.pblock .prose > :first-child { margin-top: 0; }
.pblock .prose h2 { margin-top: 0; }

/* numărul secțiunii, discret, în colțul cardului */
.pblock__n {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .55rem;
}

/* imaginile din carduri intră cu o mișcare fină */
.pblock img { transition: transform 1.1s var(--ease), opacity .9s var(--ease); }
.pblock.reveal:not(.visible) img { transform: scale(1.03); opacity: .55; }

/* cuprinsul rămâne lipit sus, ca înainte */
.awrap--cards .aside { position: sticky; top: calc(var(--header-h) + var(--card-gap)); }
@media (max-width: 1040px) { .awrap--cards .aside { position: static; } }

/* ---------- bară de progres la citire ---------- */
.rprog {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 150;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .rprog { display: none; }
  .ahero__media img, .pblock img { transition: none; transform: none; }
  .pblock:hover { transform: none; }
}

/* legenda figurii mutate în cardul de intro — textul nu se pierde */
.ahero__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 2.6rem 1.1rem .9rem;
  font-size: .8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .94);
  background: linear-gradient(to top, rgba(10, 12, 14, .88), rgba(10, 12, 14, .6) 45%, transparent);
}
@media (max-width: 900px) { .ahero__cap { font-size: .76rem; padding-top: 2.2rem; } }

/* ============================================================
   IERARHIE DE SECȚIUNE (v2)
   H2 = bandă pe fundal, cu numărul secțiunii — dă ritm și te
   orientează în pagină. H3 = card propriu. Ilustrațiile nu mai
   sunt umflate la lățimea coloanei: păstrează dimensiunea lor
   naturală, cu o limită de înălțime, ca pagina să nu devină
   un teanc de poze.
   ============================================================ */

.psec { display: grid; gap: var(--card-gap); }
.psec + .psec { margin-top: clamp(1.5rem, 3.2vw, 2.8rem); }

.psec__head {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .2rem .4rem .1rem;
}
.psec__n {
  flex: none;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  padding-top: .35em;
}
.psec__head h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.14;
  scroll-margin-top: calc(var(--header-h) + 22px);
}

/* cardul de subtitlu: H3 cu marcaj verde, ca să se vadă că e o temă nouă */
.pblock--sub .prose > h3:first-child {
  position: relative;
  margin-top: 0;
  padding-left: .95rem;
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
}
.pblock--sub .prose > h3:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 3px;
  border-radius: 3px;
  background: var(--green);
}
.pblock--sub { padding-top: clamp(1.2rem, 2.4vw, 1.9rem); padding-bottom: clamp(1.2rem, 2.4vw, 1.9rem); }

/* ---------- ilustrații: dimensiune naturală, nu lățime plină ---------- */
.prose figure {
  display: grid;
  justify-items: center;
  gap: .55rem;
  margin-top: 1.5rem;
  /* fără fundal: majoritatea planșelor au deja fond alb, iar un al doilea
     cadru în interiorul cardului ar arăta ca o ramă în ramă */
}
.prose figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 320px;          /* limita care oprește pagina-teanc-de-poze */
  margin-top: 0;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 32, .09);
}
.prose figcaption { margin-top: 0; text-align: center; max-width: 56ch; }
/* fotografiile de clinică merită mai mult spațiu decât schemele */
.prose figure--photo img { max-height: 460px; }
/* imaginile scăpate în afara unei figuri */
.prose > img { width: auto; max-width: 100%; max-height: 320px; margin-left: auto; margin-right: auto; }

@media (max-width: 640px) {
  .prose figure img { max-height: 260px; }
  .prose figure--photo img { max-height: 320px; }
}

/* ============================================================
   MOBIL — corecții măsurate (audit august 2026)
   ============================================================ */

/* Cardurile de articol se lipeau de marginea ecranului (left 0, right 0), în
   timp ce breadcrumb-ul și cardul de intro respectau gutter-ul. .apage nu are
   lățime proprie, deci .awrap se întindea pe tot ecranul. */
.awrap--cards { width: var(--shell); margin-inline: auto; }

/* Un element de grid nu coboară sub dimensiunea minimă a conținutului său.
   Un <video> cu lățime nativă mare împingea coloana la 567px într-un ecran
   de 390px — pagina se derula lateral. */
.awrap > *, .pstack, .pstack > *, .psec, .psec > *,
.pblock, .pblock > .prose { min-width: 0; }
.prose video, .prose iframe { max-width: 100%; width: 100%; height: auto; }
.prose figure, .prose figure > * { max-width: 100%; }

@media (max-width: 700px) {
  /* Aveam 18px — prea puțin, textul se lipea de marginea cardului.
     24px lateral și 26px vertical: la fel ca restul cardurilor din site. */
  .pblock { padding: 1.6rem 1.5rem; }
  .pblock--sub { padding-top: 1.5rem; padding-bottom: 1.5rem; }

  /* Numărul secțiunii stătea lângă titlu și îl împingea cu 27px spre dreapta,
     față de textul cardului de dedesubt. Pe ecran mic trece deasupra, ca
     titlul de secțiune să înceapă exact de unde începe textul cardurilor. */
  .psec__head { display: block; padding-left: 1.5rem; padding-right: 1.5rem; }
  .psec__n { display: block; padding-top: 0; margin-bottom: .25rem; }

  .pblock__n, .psec__n { font-size: 12px; }
  /* aceeași respirație și în cardurile din aside și în cardurile de ghid */
  .atoc, .abox { padding: 1.4rem 1.5rem; }
  .hcard__body { padding: 1.4rem 1.5rem 1.5rem; }
}