/* ============================================================
   ECHIPA, carduri de medic.
   Card alb: panou foto verde-mentă sus (aceleași decupaje ca banda
   de pe homepage), apoi nume mare, specialități, rând de contact
   și buton de programare pe toată lățimea.
   ============================================================ */

/* ---------- antetul paginii: text peste fotografia de echipa ----------
   Foloseste componenta `.phero` din style.css (card rotunjit + poza pe fundal
   + scrim in degrade). Doua abateri, amandoua din cauza ca e poza de GRUP:

   1. Caseta pastreaza proportia fotografiei (1361x767) in loc de inaltimea fixa
      a lui `.phero`, iar cand se loveste de plafon decupeaza de JOS
      (`object-position: center top`). Masurat pe poza: fetele stau intre 8% si
      42% din inaltime, iar in ultimii 17% sunt doar mainile. Decupajul din
      centru, cel implicit, ar fi taiat exact linia fetelor de sus.
   2. Textul sta peste jumatatea de jos, unde poza e deja inchisa
      (luminanta medie 95 din 255) si unde nu e nicio fata, doar uniformele.
   ---------- */
.phero--echipa {
  height: auto;
  aspect-ratio: 1361 / 767;
  max-height: min(74svh, 640px);
}
.phero--echipa .phero__img { object-position: center top; }
/* scrim mai inalt decat cel implicit: blocul de text are trei randuri de lead */
.phero--echipa::after {
  background: linear-gradient(to top,
    rgba(8, 10, 12, .90) 0%,
    rgba(8, 10, 12, .68) 32%,
    rgba(8, 10, 12, .30) 62%,
    rgba(8, 10, 12, .04) 88%);
}

/* Pe telefon un decupaj pe verticala ar taia jumatate din echipa (fetele sunt
   raspandite pe toata latimea), deci poza ramane intreaga sus si textul coboara
   sub ea, in acelasi card. Fundalul cardului e deja aproape negru, deci acolo
   scrim-ul nu mai are ce face. */
@media (max-width: 760px) {
  .phero--echipa {
    display: block;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
  }
  .phero--echipa .phero__img {
    position: static;
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1361 / 767;
  }
  .phero--echipa::after { display: none; }
  .phero--echipa .phero__inner {
    max-width: none;
    padding: 1.3rem 1.3rem 1.7rem;
  }
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.5vw, 1.8rem);
}
@media (max-width: 1024px) { .dgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .dgrid { grid-template-columns: 1fr; } }

.dcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: clamp(20px, 1.8vw, 28px);
  padding: clamp(10px, .85vw, 14px);
  box-shadow: var(--card-shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .dcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
}

/* ---- panoul foto ---- */
.dcard__media {
  display: block;
  border-radius: clamp(14px, 1.3vw, 20px);
  overflow: hidden;
  background: #EAF1E7;          /* aceeași mentă ca fundalul decupajelor */
  aspect-ratio: 4 / 4.6;        /* proporția reglată pe banda de medici */
}
.dcard__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* --op vine din HTML, per medic: fiecare portret e fotografiat la altă
     înălțime, iar valoarea aduce toate capetele la aceeași linie. */
  object-position: center var(--op, 12%);
  transition: transform .7s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .dcard:hover .dcard__media img { transform: scale(1.04); }
}

/* ---- corpul alb ---- */
.dcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 1.5vw, 1.5rem) clamp(.55rem, .8vw, .9rem) clamp(.35rem, .5vw, .55rem);
}
.dcard__name {
  margin: 0;
  font-size: clamp(1.38rem, 1.85vw, 1.78rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--ink);
}
.dcard__role {
  margin: .55rem 0 0;
  font-size: clamp(.85rem, .95vw, .95rem);
  line-height: 1.45;
  color: var(--ink-60);
  text-wrap: pretty;
}

/* ---- rândul de contact, lipit de baza cardului ---- */
.dcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: clamp(.9rem, 1.3vw, 1.25rem);
}
.dcard__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(.88rem, .95vw, .96rem);
  font-weight: 600;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.dcard__tel svg { width: 18px; height: 18px; flex: none; color: var(--ink-40); }
.dcard__soc { display: inline-flex; gap: .3rem; }
.dcard__soc a {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--ink-40);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.dcard__soc svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .dcard__tel:hover { color: var(--blue); }
  .dcard__soc a:hover { color: var(--blue); background: rgba(27, 111, 183, .09); }
}

/* ---- butonul de programare ---- */
.dcard__cta {
  display: block;
  margin-top: clamp(.9rem, 1.3vw, 1.25rem);
  padding: clamp(.85rem, 1.05vw, 1.05rem) 1.1rem;
  border-radius: var(--r-pill);
  background: var(--green);
  color: #fff;
  text-align: center;
  font-size: clamp(.9rem, .98vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .dcard__cta:hover { background: var(--blue); transform: translateY(-2px); }
}
.dcard__cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* pe ecran îngust cardul e mai lat, deci numele poate crește puțin */
@media (max-width: 620px) {
  .dcard__name { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .dcard__role { font-size: .95rem; }
}

/* ============================================================
   Stiva de carduri: aceeasi distanta intre TOATE blocurile paginii
   ============================================================
   Inainte, fiecare gol venea din alta parte: inseratul inline al sectiunii cu
   medici (61px), `var(--section)` de doua ori intre grila si "In memoriam"
   (259px), inca o data pana la CTA (130px) si `--card-gap` pana la footer
   (14px). Acum distanta vine dintr-un singur loc, exact ca stiva de pe
   homepage: sectiunile nu mai poarta inserat pe verticala, iar fiecare bloc
   de nivel inalt primeste `--card-gap` deasupra.

   `.cta` e exceptata de la zerorizare fiindca acolo inseratul e chiar
   interiorul cardului verde, nu distanta dintre carduri. */
.page-echipa > .section:not(.cta) { padding-block: 0; }
.page-echipa > .phero,
.page-echipa > .section,
.page-echipa > .fx { margin-top: var(--card-gap); }