/* ============================================================
   Rezultate: hub cu trei carduri late, poza si textul fata in fata
   ============================================================
   Alt design decat coloana cu progres din /ghid-pacient/ (cerinta client):
   fiecare sectiune e un card alb lat, cu fotografia pe o jumatate si textul
   pe cealalta, iar pozele alterneaza stanga / dreapta. Tot cardul e link.

   Pozele: doua sunt cadre din clipurile YouTube ale clinicii, care au
   subtitrari arse in imagine pe la ~62% din inaltime. De asta panoul foto e
   lat (landscape): decupajul `cover` arata doar banda cu chipul, iar
   subtitrarea ramane in afara cadrului. Reglajul fin e per poza, prin
   variabila `--pos` (object-position), setata inline in HTML. Daca schimbi
   o poza sau proportia panoului, verifica sa nu intre textul ars in cadru. */

.rzsec { overflow: clip; }

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

/* ---------- lista de carduri ---------- */
.rzlist {
  display: grid;
  row-gap: clamp(1.1rem, 2.4vw, 2rem);
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
}

.rzcard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: clamp(18px, 2.2vw, 28px);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* cardurile pare au poza pe dreapta */
.rzcard--rev .rzcard__media { order: 2; }

/* ---------- panoul foto ---------- */
.rzcard__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(240px, 30vw, 420px);
}
.rzcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform .6s var(--ease);
}
/* bulina cu sageata, peste poza; la hover se face albastra (regula clientului) */
.rzcard__badge {
  position: absolute;
  top: clamp(12px, 1.6vw, 20px);
  right: clamp(12px, 1.6vw, 20px);
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink, #101820);
  box-shadow: 0 6px 18px rgba(16, 24, 32, .18);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.rzcard__badge svg { width: 44%; height: 44%; }

/* ---------- panoul de text ---------- */
.rzcard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .85rem;
  padding: clamp(1.6rem, 4vw, 3.6rem);
}
.rzcard__num {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--green);
}
.rzcard__t {
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0;
  transition: color .3s var(--ease);
}
.rzcard__meta {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-60, rgba(16, 24, 32, .62));
}
.rzcard__d {
  max-width: 48ch;
  color: var(--ink-60, rgba(16, 24, 32, .62));
  font-size: clamp(.95rem, 1.05vw, 1.02rem);
  line-height: 1.6;
  margin: 0;
}
.rzcard__go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .3rem;
  font-weight: 700;
  color: var(--blue);
}

@media (hover: hover) and (pointer: fine) {
  .rzcard:hover { transform: translateY(-3px); }
  .rzcard:hover .rzcard__media img { transform: scale(1.045); }
  .rzcard:hover .rzcard__t { color: var(--blue-deep, var(--blue)); }
  .rzcard:hover .rzcard__badge { background: var(--blue); color: #fff; transform: rotate(45deg); }
}
.rzcard:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rzcard, .rzcard__media img, .rzcard__badge { transition: none; }
}

/* ---------- sub 860px: poza sus, textul jos ---------- */
@media (max-width: 860px) {
  .rzcard,
  .rzcard--rev { grid-template-columns: 1fr; }
  /* poza ramane mereu prima, indiferent de alternare */
  .rzcard--rev .rzcard__media { order: 0; }
  .rzcard__media { min-height: 0; aspect-ratio: 16 / 9; }
  .rzcard__body { padding: 1.4rem 1.3rem 1.6rem; gap: .7rem; }
  .rzcard__num { font-size: 1.7rem; }
  .rzcard__t { font-size: clamp(1.35rem, 5.4vw, 1.7rem); }
  .rzcard__meta { font-size: .74rem; }
}