/* ==================================================================
   Vezetőség — rétegzett szerkesztőségi folyam
   ------------------------------------------------------------------
   Hét vezető, nulla rács: minden személy egy teljes szélességű,
   váltakozó kéthangú sor (a kereskedelem-oldal márkablokk-nyelvtana),
   és a szervezeti rangsort a SŰRŰSÉG rajzolja — az ügyvezetés tágas
   fokon vászonra, az öt igazgató feszesebb fokon storm mezőre kerül.
   A -flip osztályt a markup hordozza, a CSS nem számol (nincs
   nth-child — sablon-szabály). Brief: context/pages/vezetoseg.md.
   ================================================================== */

/* ---------- 01 · Mottó ---------- */

/* Alul 0: a következő szekció is vászon, és a határon pontosan egy
   --section-space állhat (a _STILUS térköz-térképe). */
.vz-quote-section > .content-container {
  padding-block: var(--section-space) 0;
}

.vz-quote {
  margin: 0;
}

.vz-quote-text {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-brand-secondary);
  /* Az .activities-statement mértéke — a statement-fok közös sorhossza. */
  max-width: 46ch;
  text-wrap: pretty;
}

.vz-quote-cite {
  display: block;
  margin-top: var(--spacing-2xl);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- 02 · Vezetőség — lista + sticky bio-panel ----------
   Megrendelői újratervezés (2026-08-17, qount.io/about referencia).

   ALAPÁLLAPOT (mobil, reduced-motion, JS nélkül): hagyományos folyam —
   minden sor a saját bio-jával, panel nincs. A réteges módot a
   js/team-highlight.js kapcsolja (`is-layered` a [data-team] gyökéren)
   900px felett: a sorok bio-ja a panelbe költözik, a kijelölést a
   görgetés viszi. Állapottükrözés, nem tween — az átmenet itt, CSS-ben.
   ------------------------------------------------------------------ */

.vz-team > .content-container {
  padding-block: var(--section-space);
}

.vz-team-split.is-layered {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--spacing-4xl), 6vw, var(--spacing-10xl));
  align-items: start;
}

.vz-team-list {
  display: grid;
  row-gap: clamp(var(--spacing-4xl), 4vw, var(--spacing-6xl));
}

/* Egy sor: kis hexagon, mellette pozíció + név. Alapállapotban a bio
   is a sorban folyik, a rács harmadik sorában. */
.vz-team-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(var(--spacing-xl), 2.5vw, var(--spacing-3xl));
  row-gap: var(--spacing-xl);
  align-items: center;
}

/* A kijelölés-váltás: a nem aktív sor 0.6 (kép ÉS pozíció+név —
   megrendelői érték, 2026-08-17). Csak réteges módban halkul: az
   alapfolyamban nincs kijelölés, tehát nincs dim. A sor kattintással
   is kijelölhető (a modul köti), ezért mutató-kurzort visel, hoverre
   és billentyű-fókuszra pedig teljes opacityre vált. */
.is-layered .vz-team-row {
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 360ms var(--ease-out);
}

.is-layered .vz-team-row:hover,
.is-layered .vz-team-row:focus-visible,
.is-layered .vz-team-row.is-active {
  opacity: 1;
}

/* Hexagon-portré a sorban. A 4pt-rámpa 11_5xl fokán (144px): a kért
   +20% a 112-ről 134,4 volna, ami nincs a rampon — a két szomszéd fok
   közül a felső, mert a visszajelzés kétszer volt „még kicsi". */
.vz-team-media {
  margin: 0;
  width: var(--spacing-11-5xl);
  aspect-ratio: 356 / 411;
  clip-path: var(--hex-clip);
  background: var(--bg-secondary);
}

.vz-team-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vz-team-role {
  margin: 0 0 var(--spacing-xs);
  text-transform: uppercase;
  color: var(--text-brand-tertiary);
}

.vz-team-name {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-brand-secondary);
  text-wrap: balance;
}

/* Alapfolyamban a bio a teljes sor-szélességen fut a fej alatt. */
.vz-team-bio {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-tertiary);
  max-width: 62ch;
  text-wrap: pretty;
}

/* Réteges módban a bio a panelben él — a sorban rejtve. A panel
   másolata hordozza a hozzáférhetőségi fában is. */
.is-layered .vz-team-row .vz-team-bio {
  display: none;
}

/* ---------- A sticky bio-panel — mély márkakék mező ----------
   A rendszer sötét márkafelülete (--bg-brand-section a brand-rampára
   kötve, teljes _on-brand szövegkészlet — a .service szekció
   szín-szerződése). Sticky: a fejléc alatt ragad, amíg a lista fut. */

.vz-team-panel {
  display: none;
}

.is-layered .vz-team-panel {
  --bg-brand-section: var(--primary-800);
  position: sticky;
  top: calc(var(--layout-header-height) + var(--spacing-2xl));
  background: var(--bg-brand-section);
  color: var(--text-primary_on-brand);
  border-radius: var(--border-radius-2xl);
  /* A .brand-card padding-ja — a kártya-szerződés közös fluid foka. */
  padding: clamp(var(--spacing-2-5xl), 3vw, var(--spacing-4xl));
  /* A tételek rács-stackben: a doboz a legmagasabb bio-hoz méretezik,
     tehát váltáskor nem ugrik a magasság. */
  display: grid;
}

.team-panel-item {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  /* A tételek egymásra rakva állnak: a láthatatlan (inaktív) tétel ne nyelje el
     a kattintást az aktív tétel linkje elől (LinkedIn, 2026-10-16). */
  pointer-events: none;
}

.team-panel-item.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* A panel-kép: a sor portréjának másolata, de itt NEM hexagon — 1:1
   arányú médiadoboz, a panel tartalmi szélességének felén. A rádiusz
   a beágyazott médiadoboz `xl` foka (a _STILUS felületlépcsője: egy
   fokkal a panel 2xl-je alatt — a .service-page-media mintája). */
.team-panel-item .vz-team-media {
  width: 50%;
  aspect-ratio: 1 / 1;
  clip-path: none;
  border-radius: var(--border-radius-xl);
  overflow: clip;
  margin: 0 0 var(--spacing-2xl);
}

/* A panel-másolat tipográfiája: a pozíció és a név a sor fokait viseli
   (a klón hozza az osztályokat), csak a tinta vált az _on-brand
   készletre. A bio a 0.85-ös másodlagos fehér. */
.team-panel-item .vz-team-role {
  color: var(--text-tertiary_on-brand);
}

.team-panel-item .vz-team-name {
  margin: 0 0 var(--spacing-xl);
  color: var(--text-primary_on-brand);
}

.team-panel-item .vz-team-bio {
  display: block;
  grid-column: auto;
  margin: 0;
  color: var(--text-secondary_on-brand);
  max-width: 52ch;
}

/* ---------- Mobil ---------- */

@media (max-width: 899.98px) {
  /* Alapfolyam — a modul nem kapcsol réteges módot 900 alatt, tehát
     itt csak a sáv és a sorköz igazodik. */
  .vz-team-list {
    row-gap: var(--spacing-6xl);
  }
}

/* ---------------------------------------------------------------
   A személy horgonya (#varga-botond): az AI-oldal vezető-sora ide visz.
   A ragadós fejléc alá ne bújjon a név.
   --------------------------------------------------------------- */
.vz-team-row {
  scroll-margin-top: calc(var(--site-header-height, 0px) + var(--spacing-xl));
}

/* A LinkedIn-profil linkje a bio alatt (csak ha a CMS-ben meg van adva).
   A bio része, ezért a ragadós panel másolatában is ott van. */
.vz-team-link {
  display: block;
  margin-top: var(--spacing-md);
}

/* A LinkedIn-link a sötét kártyán: az on-brand tinta, mint a kártya többi
   szövege (a .text-cta alapszíne a világos felületre való sötétkék). */
.team-panel-item .vz-team-link .text-cta {
  color: var(--text-secondary_on-brand);
}

.team-panel-item .vz-team-link .text-cta:hover,
.team-panel-item .vz-team-link .text-cta:focus-visible {
  color: var(--text-primary_on-brand);
}