/* ============================================================
   Ghid pacient — coloana verticala cu progres („bara")
   ============================================================
   Referinta: „Ghid Pacienti.mp4" (5,4s), masurat cadru cu cadru, nu din ochi.
   Ce am scos din inregistrare:
   - o linie verticala pe MIJLOCUL sectiunii, in doua straturi: un traseu
     palid pe toata inaltimea si, peste el, umplerea verde care creste de sus
     in jos pe masura ce derulezi;
   - in capul verdelui, un punct plin (~12px) cu un halou discret;
   - elementele stau alternativ stanga / dreapta, aliniate SPRE linie;
   - cele prin care a trecut punctul sunt la opacitate plina, cele de sub el
     sunt stinse si se aprind pe rand.
   Diferenta fata de referinta, ceruta de client: in locul bulinei cu iconita,
   fiecare pas are fotografia lui.

   Fara JS totul e vizibil si linia e verde pe toata inaltimea (vezi valorile
   implicite ale `--gs-p` si starea `.gspine` fara `.is-live`), deci pagina nu
   depinde de script ca sa fie citibila. */

.gsec { overflow: clip; }

/* ---------- antetul centrat ---------- */
.gsec .section-head {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.gsec .section-head .eyebrow { justify-content: center; }

/* ---------- coloana ---------- */
.gspine {
  --gs-line: 2px;
  --gs-p: 100%;                 /* progresul; JS il rescrie la fiecare cadru */
  --gs-track: rgba(16, 24, 32, .12);
  position: relative;
  list-style: none;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
  display: grid;
  row-gap: clamp(3.5rem, 8vw, 8rem);
}

/* traseul palid, pe toata inaltimea */
.gspine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--gs-line);
  margin-left: calc(var(--gs-line) / -2);
  background: var(--gs-track);
  border-radius: var(--gs-line);
}
/* umplerea verde + punctul din capat */
.gspine__fill,
.gspine__dot { position: absolute; left: 50%; pointer-events: none; }
.gspine__fill {
  top: 0;
  width: var(--gs-line);
  margin-left: calc(var(--gs-line) / -2);
  height: var(--gs-p);
  background: var(--green);
  border-radius: var(--gs-line);
  box-shadow: 0 0 10px 1px rgba(62, 168, 44, .45);
}
.gspine__dot {
  top: var(--gs-p);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(62, 168, 44, .16), 0 0 14px 3px rgba(62, 168, 44, .5);
}

/* ---------- un pas ---------- */
.gstep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(3rem, 12vw, 12rem);
}
.gstep__card {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  color: inherit;
  /* Opacitatea e proprietatea animata; `transform` se ocupa doar de hover.
     Fara `.is-live` pe lista, pasii raman la 1, deci fara JS nu se stinge
     nimic. */
  transition: opacity .55s var(--ease), transform .35s var(--ease);
}
.gstep--l .gstep__card { grid-column: 1; align-items: flex-end; text-align: right; }
.gstep--r .gstep__card { grid-column: 2; align-items: flex-start; text-align: left; }

.gstep__media {
  display: block;
  width: min(100%, clamp(210px, 27vw, 330px));
  aspect-ratio: 16 / 10;
  border-radius: clamp(14px, 1.4vw, 20px);
  overflow: hidden;
  background: var(--paper-2, #efece6);
  box-shadow: var(--card-shadow);
}
.gstep__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.gstep__num {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.gstep__t {
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
}
.gstep__d {
  max-width: 34ch;
  color: var(--ink-60, rgba(16, 24, 32, .62));
  font-size: clamp(.95rem, 1.05vw, 1.02rem);
  line-height: 1.6;
  margin: 0;
}
.gstep__go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .2rem;
  font-weight: 700;
  color: var(--blue);
}

@media (hover: hover) and (pointer: fine) {
  .gstep__card:hover { transform: translateY(-3px); }
  .gstep__card:hover .gstep__media img { transform: scale(1.045); }
  .gstep__card:hover .gstep__t { color: var(--blue-deep, var(--blue)); }
}
.gstep__card:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 14px; }

/* Starea stinsa exista DOAR cand JS-ul a preluat lista. Asa, daca scriptul nu
   ruleaza, nimeni nu ramane cu o pagina pe jumatate transparenta. */
.gspine.is-live .gstep:not(.is-on) .gstep__card { opacity: .34; }
@media (prefers-reduced-motion: reduce) {
  .gspine.is-live .gstep .gstep__card { opacity: 1; }
  .gstep__card, .gstep__media img { transition: none; }
}

/* ---------- sub 860px: linia ramane pe CENTRU (cerinta client, 27.08.2026) ----------
   Prima varianta muta linia la stanga pe telefon; clientul o vrea centrata la
   orice latime, ca in referinta. Pasii raman alternati stanga / dreapta, doar
   ca golul dintre coloane se strange (la 390px fiecare jumatate are ~155px)
   si literele coboara o treapta ca sa incapa. Pozele pastreaza proportia
   16 / 10 si latimea intreaga a jumatatii lor. */
@media (max-width: 860px) {
  .gspine { row-gap: clamp(2.4rem, 7vw, 3.2rem); }
  .gstep { column-gap: clamp(1.75rem, 9vw, 3.5rem); }
  .gstep__num { font-size: .72rem; }
  .gstep__t { font-size: clamp(1.1rem, 4.6vw, 1.45rem); }
  .gstep__d { font-size: .88rem; line-height: 1.55; }
  .gstep__go { font-size: .9rem; }
}