/* ==========================================================================
   Card persoană
   Patru mărimi și două comportamente. Varianta simplă stă direct pe canvas
   și nu duce nicăieri; varianta clickabilă are propria suprafață, se ridică
   la hover și deschide pagina persoanei.
   ========================================================================== */

.person { position: relative; text-align: left; }

.person__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--liniste);
  margin-bottom: var(--sp-4);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }

.person__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--profunzime);
  margin: 0 0 var(--sp-1);
}
.person__role { font-size: var(--fs-sm); color: var(--reflectie); margin: 0; }

/* --- Mărimi ---------------------------------------------------------------- */
.person--sm .person__photo { margin-bottom: var(--sp-3); }
.person--sm .person__name { font-size: var(--fs-body); }
.person--sm .person__role { font-size: var(--fs-xs); }

/* Rând compact: avatar plus text pe orizontală. Pentru liste lungi de
   oameni, unde fotografia e reper, nu subiect. */
.person--row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
}
.person--row .person__photo {
  width: 56px;
  flex: none;
  margin-bottom: 0;
  border-radius: var(--r-full);
}
.person--row .person__name { font-size: var(--fs-sm); margin-bottom: 0; }
.person--row .person__role { font-size: var(--fs-xs); }

.person--xs .person__photo { width: 40px; }
.person--xs .person__name { font-size: var(--fs-xs); }
.person--xs .person__role { font-size: var(--fs-xs); }

/* --- Variantă pe suprafață proprie ----------------------------------------
   Fotografie rotundă, centrată, cu inel Impuls — formatul folosit în
   paginile de echipă. */
.person--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.person--card .person__photo {
  width: 104px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-full);
  padding: 3px;
  background: var(--gradient-impuls);
  margin-bottom: var(--sp-4);
}
.person--card .person__photo img,
.person--card .person__photo .media__initial {
  border-radius: var(--r-full);
}
.person--card.person--sm .person__photo { width: 76px; }
.person--card.person--xs .person__photo { width: 56px; }

/* --- Clickabil -------------------------------------------------------------
   Un singur link în ordinea de tabulare: numele. Pseudo-elementul lui
   acoperă cardul, deci toată suprafața răspunde la click. */
.person--interactive { cursor: pointer; }
.person--interactive:hover,
.person--interactive:focus-within {
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-card-hover);
}
.person--interactive:focus-within { outline: 2px solid var(--impuls); outline-offset: 3px; }

.person__link { color: inherit; text-decoration: none; }
.person__link::after { content: ""; position: absolute; inset: 0; }
.person__link:focus-visible { outline: none; }

/* Butoanele din interiorul unui card care se ridică rămân pe loc. */
.person--interactive:hover .btn,
.person--interactive:hover .btn-icon { transform: none; }

/* --- Link pe canvas (2026-09-29, decizia clientului) -----------------------
   Varianta de pe canvas poate duce la profil fără să capete suprafață:
   fotografia și numele sunt linkul, prin același pseudo-element, cu un
   singur tab stop. Fără ridicare; fotografia crește ușor, numele se aprinde. */
.person--linked .person__photo img { transition: transform var(--t-card) var(--ease); }
.person--linked:hover .person__photo img { transform: scale(1.04); }
.person--linked .person__name { transition: color var(--t-btn) var(--ease); }
.person--linked:hover .person__name { color: var(--impuls-text); }
.person--linked:focus-within {
  outline: 2px solid var(--impuls);
  outline-offset: 3px;
  border-radius: var(--r-md);
}

/* --- Pe orizontală (2026-09-30, decizia clientului) ------------------------
   Fotografia pătrată în stânga, textul în dreapta, pe canvas, ca varianta
   simplă: pentru o singură persoană într-o secțiune („Autorul cursului”),
   unde cardul vertical lăsa două treimi din rând goale. Poate purta linkul
   (.person--linked) și începutul biografiei (.person__bio). Sub 768px e
   varianta simplă, una sub alta. */
@media (min-width: 768px) {
  .person--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .person--wide .person__photo { margin-bottom: 0; }
  .person--wide .person__name { font-size: var(--fs-h3); }
  .person--wide.person--sm .person__name { font-size: var(--fs-h4); }
}
@media (min-width: 1200px) {
  .person--wide { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-7); }
}

/* --- Detalii ----------------------------------------------------------------
   Acreditări, specializări și o descriere scurtă. Textul lung rămâne în
   pagina persoanei; din biografie intră doar începutul (.person__bio). */
.person__detail {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--reflectie);
  line-height: 1.55;
}
.person--card .person__detail { max-width: 34ch; }

/* Începutul biografiei (2026-09-30, decizia clientului): textul din pagina
   persoanei, tăiat la patru rânduri, cu „…” pus de browser. Restul se
   citește pe profil. */
.person__bio {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-body);
  color: var(--profunzime);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.person--card .person__bio { max-width: 34ch; font-size: var(--fs-sm); }

.person__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  justify-content: inherit;
}
.person--card .person__tags { justify-content: center; }

.person__more {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--impuls-text);
}
.person__more i { font-size: 16px; line-height: 0; transition: transform var(--t-btn) var(--ease); }
.person--interactive:hover .person__more i { transform: translateX(4px); }

/* Legături către profiluri. Sunt linkuri reale, deci stau deasupra
   suprafeței clickabile a cardului. */
.person__links {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  justify-content: inherit;
}
.person--card .person__links { justify-content: center; }
.person__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  color: var(--reflectie);
  transition: color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.person__links a:hover { color: var(--impuls-text); background: var(--impuls-wash); }
.person__links a i { font-size: 18px; line-height: 0; }

/* --- Grupuri de echipă ------------------------------------------------------ */
.team-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  margin: 0 0 var(--sp-2);
}
.team-group__rule {
  width: 72px;
  height: 3px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--gradient-impuls);
  margin: 0 0 var(--sp-6);
}
.team-group__list { display: grid; gap: var(--sp-4); }

/* --- Grila de persoane pe telefon (2026-09-30, decizia clientului) ----------
   Sub 768px o persoană pe rând era prea mare: grila de persoane ține două
   pe rând, cu numele și rolul o treaptă mai mici. De la 768px rămâne
   numărul de coloane al grilei. */
@media (max-width: 767px) {
  .grid.grid--people { --cols: 2; gap: var(--sp-5) var(--sp-4); }
  .grid--people .person__photo { margin-bottom: var(--sp-3); }
  .grid--people .person__name { font-size: var(--fs-body); }
  .grid--people .person__role { font-size: var(--fs-xs); }
  .grid--people .person--card { padding: var(--sp-5) var(--sp-3); }
  .grid--people .person--card .person__photo { width: 76px; }
}