/* =============================================================================
   Gorilla - Solid header on inner pages + Personality detail (iOS26 / Liquid Glass)
   Brand tokens: var(--g-color-navy) (=black), var(--g-color-green) (=#84c003)
   ========================================================================== */

/* ---- Inner-page header: solid dark glass instead of transparent gradient ---- */
/* Внутренние страницы: шапка ВСЕГДА чёрная и непрозрачная (v1.9.9) -
   полупрозрачное стекло оставлено только главной, где шапка лежит поверх
   баннера. Заодно это чинит вложенный backdrop-filter дропдаунов. */
#header-sticky-wrapper.is-inner-header #main-header.header-solid,
#main-header.header-solid {
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
/* keep white glyphs/logo readable on the dark glass */
#header-sticky-wrapper.is-inner-header .site-logo { filter: none; }

/* =========================== Personality detail ============================ */
.persona-detail {
  overflow-x: clip;               /* kill any legacy negative-margin bleed */
  background:
    radial-gradient(1200px 480px at 12% -8%, rgba(var(--g-green-rgb) / 0.10), transparent 60%),
    #ffffff;
}
.persona-detail *,
.persona-detail *::before,
.persona-detail *::after { box-sizing: border-box; }

.persona-detail__inner {
  max-width: var(--g-container-max, 1440px);
  margin: 0 auto;
  /* clear the sticky header with breathing room (v1.2.3: прехидер теперь в
     потоке страницы и сам сдвигает контент на 40px - отступ уменьшен) */
  padding: clamp(110px, 13vw, 144px) var(--g-container-pad, clamp(19px, 4vw, 48px)) clamp(48px, 8vw, 88px);
}

/* ---- hero grid ---- */
.persona-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 5vw, 44px);
  align-items: start;
}
@media (min-width: 900px) {
  .persona-detail__grid { grid-template-columns: 1.05fr 1fr; }
}

/* ---- 3D photo stack (replaces the single static cover figure) ----
   Cards are absolutely positioned and stacked via a --stack-offset custom
   property the JS sets per card (0 = front, 1/2 = peeking behind, 3+ =
   hidden entirely to cap paint cost). Swipe/drag advances the front card to
   the back - a circular deck, nothing ever "leaves" - see
   assets/js/gorilla-persona-stack.js. */
.persona-stack {
  position: relative;
  margin: 0;
  min-width: 0;
  aspect-ratio: 4 / 5;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* contain the stack's own z-index scale (cards/nav/zoom go up to 210) so it
     never competes with the fixed header (#header-sticky-wrapper, z-index:50)
     in the root stacking context once the page is scrolled. z-index:10 lifts
     the whole (now-isolated) component above the text column - needed while
     dragging: the active card's inline translateX can swing it visually into
     .persona-detail__content's box, and without an explicit level here it
     painted underneath that in-flow sibling. Stays well under the header's 50. */
  isolation: isolate;
  z-index: 10;
}
@media (min-width: 900px) {
  .persona-stack {
    aspect-ratio: 3 / 4;
    /* Sticky photo column, pinned a comfortable gap below the fixed header
       while .persona-detail__content scrolls past. Needs .persona-stack-sticky
       (below) as an align-self:stretch wrapper: a grid item's OWN box - not
       its grid area/row track - is what browsers use as the containing block
       for position:sticky, so without a taller ancestor to travel within, the
       stack would have zero room to stay pinned and unstick almost instantly. */
    position: sticky;
    top: clamp(102px, 12vw, 136px);
  }
}
/* stretch wrapper - gives .persona-stack room to travel while staying pinned;
   see the position:sticky comment above. Plain block on mobile (no stretch
   needed, nothing to stick). */
@media (min-width: 900px) {
  .persona-stack-sticky { align-self: stretch; min-width: 0; }
}
.persona-stack__card {
  position: absolute;
  inset: 0;
  border-radius: clamp(20px, 5vw, 32px);
  overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45),
              0 4px 14px rgba(0, 0, 0, 0.12);
  background: #e9ebee;
  cursor: grab;
  opacity: 1;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  /* Mobile stacks in a single column (photo directly above the text, see
     .persona-detail__grid) - a wide peek here has nowhere to go but into the
     bio text below, since .persona-stack itself isn't clipped (the peek is
     meant to spill past its own edges). Keep the mobile peek modest; the
     bigger, more visibly "fanned" version below is desktop-only, where the
     photo and text sit in separate columns and can't collide. */
  transform:
    translateY(calc(var(--stack-offset, 0) * 12px))
    scale(calc(1 - var(--stack-offset, 0) * 0.06))
    rotate(calc(var(--stack-offset, 0) * var(--stack-dir, 1) * 2.4deg));
  z-index: calc(100 - var(--stack-offset, 0));
}
/* До инициализации JS у всех карточек --stack-offset = 0 и одинаковый z-index -
   побеждала ПОСЛЕДНЯЯ в DOM (v2.3.0: заметно на PDP, где скрипты отложены
   delay-js). Первой карточке - верх; после init inline-z-index от JS сильнее. */
.persona-stack__card:first-child { z-index: 101; }
@media (min-width: 900px) {
  .persona-stack__card {
    transform:
      translate(calc(var(--stack-offset, 0) * var(--stack-dir, 1) * 14px), calc(var(--stack-offset, 0) * 24px))
      scale(calc(1 - var(--stack-offset, 0) * 0.05))
      rotate(calc(var(--stack-offset, 0) * var(--stack-dir, 1) * 2.2deg));
  }
}
.persona-stack__card[data-stack-hidden] { opacity: 0; pointer-events: none; }
.persona-stack__card:active { cursor: grabbing; }
.persona-stack__card.is-dragging { transition: none; }
.persona-stack__img {
  display: block;
  /* v2.3.0: у img из wp_get_attachment_image есть width/height-атрибуты и
     srcset - глобальный сброс height:auto растягивал картинку выше карточки
     (обрезка через overflow). Габариты жёстко. */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  pointer-events: none; /* the card wrapper handles drag, not the <img> itself */
}
/* prev/next - only shown once JS confirms there's more than one card */
.persona-stack__nav { position: absolute; left: 16px; bottom: 16px; z-index: 200; gap: 8px; display: none; }
.persona-stack.has-multiple .persona-stack__nav { display: flex; }
.persona-stack__nav button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 10, 10, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.persona-stack__nav button:hover { background: rgb(var(--g-green-rgb)); color: #0a0a0a; }
.persona-stack__nav button svg { width: 18px; height: 18px; }

/* "+" zoom badge - visual recipe shared with .persona-card::after (see that
   rule for the combined selector), just with its own glyph/position in the
   stacking context, so the two badges can't drift apart visually. */
.persona-stack__zoom { z-index: 210; text-decoration: none; cursor: pointer; }

/* ---- content column ---- */
.persona-detail__content { min-width: 0; }

.persona-detail__eyebrow {
  /* plain uppercase text link - matches .persona-card__discipline on /lichnosti/ */
  display: inline-block;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  text-decoration: none;
  margin-bottom: 16px;
  transition: color 0.2s ease;
}
a.persona-detail__eyebrow:hover,
a.persona-detail__eyebrow:focus-visible {
  color: rgb(var(--g-green-rgb));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.persona-detail__title {
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  color: var(--g-color-navy);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: clamp(34px, 8vw, 58px);
  margin: 0 0 12px;
}

.persona-detail__lead {
  color: var(--g-color-navy);
  font-weight: 700;
  font-size: clamp(15px, 3.4vw, 19px);
  line-height: 1.35;
  margin: 0 0 18px;
  opacity: 0.9;
}

/* ---- socials as round glass buttons ---- */
.persona-detail__socials {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 22px;
}
.persona-detail__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--g-color-navy);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.persona-detail__social:hover {
  color: #fff;
  background: rgb(var(--g-green-rgb));
  transform: translateY(-2px);
}
.persona-detail__social svg { width: 20px; height: 20px; }

/* ---- body copy ---- */
.persona-detail__body {
  color: #24262b;
  font-size: clamp(14px, 2.6vw, 16px);
  line-height: 1.7;
  max-width: 62ch;
}
.persona-detail__body p { margin: 0 0 1em; }
.persona-detail__body p:last-child { margin-bottom: 0; }
.persona-detail__body strong { color: var(--g-color-navy); }

/* ============================ Related block ================================
   Replaces the old flat photo gallery: "Амбассадоры" on persona posts,
   "Платформы" on platform posts. Server renders every eligible candidate per
   taxonomy term; client JS (gorilla-persona-stack.js) keeps 2 random per term
   (cache-safe under full-page caching) before Slick initialises. Cells hold
   the same .persona-card component used on /lichnosti/ and /platformy/. */
/* Rendered outside post_content (query-driven, see gorilla_related_persona_block()),
   so - unlike the old .persona-gallery, which inherited .persona-detail__inner's
   width/padding by nesting inside it - this needs its own matching container. */
/* Full-bleed black band: spans the whole page width so the grey page wrapper
   (header.php global bg) never shows around it; inner content stays centred at
   ~1200px via calc side-padding, so card proportions are unchanged. No rounded
   corners / outer margin - a rounded or inset block would let the grey peek. */
.persona-related {
  max-width: none;
  margin: 0;
  /* The black band itself stays full-bleed (spans the whole page width so the
     grey page wrapper never peeks around it) - only VERTICAL padding here. The
     inner content (head + card row) is tucked into the SAME 1400px container as
     the header menu and footer via .persona-related__head/__viewport below. */
  padding: clamp(36px, 6vw, 56px) 0 clamp(44px, 7vw, 64px);
  background: var(--g-color-navy);
  border-radius: 0;
}

/* Content container - the same .g-container box as the header menu, footer and
   the /lichnosti/ grid (gorilla-layout.css tokens). The card row lines up with
   everything else; the arrows are free to sit OUTSIDE this box in the black
   gutter (see the min-width rule on .persona-related__arrow). */
.persona-related__head,
.persona-related__viewport {
  max-width: var(--g-container-max, 1440px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--g-container-pad, clamp(19px, 4vw, 48px));
  padding-right: var(--g-container-pad, clamp(19px, 4vw, 48px));
}

.persona-related__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(16px, 3vw, 24px);
}
/* crown icon (shared recipe, see gorilla-type-scale.css) - this block sits on
   a black background, so both glyph and title override the shared navy tone
   with white. Higher specificity than the shared rule so load order between
   the two stylesheets can't flip which one wins. */
.persona-related .persona-related__title::before {
  background-color: #ffffff;
}
.persona-related__title {
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 900;
  /* v2.8.5: единый масштаб заголовков секций (--g-fs-h1) - на PDP блок стоит
     рядом с «Частые вопросы» и меньший кегль выбивался из ритма */
  font-size: var(--g-fs-h1, clamp(32px, 5vw, 48px));
  margin: 0;
}

/* position:relative anchors the prev/next arrows. Overflow is left visible so
   the arrows can sit *outside* the card row (in the black gutter) on wide
   screens - the .persona-related__track below is the real scroll clip. */
.persona-related__viewport { position: relative; }

/* --- custom carousel nav: prev/next arrows + green dots (replaces slick's) --- */
.persona-related__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0a0a0a;
  background: rgb(var(--g-green-rgb));
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.persona-related__arrow svg { width: 20px; height: 20px; display: block; }
/* Base: sit inside the container's own side padding (48px desktop), just to the
   left/right of the card row - always on-screen, never clipped. */
.persona-related__arrow--prev { left: 2px; }
.persona-related__arrow--next { right: 2px; }
.persona-related__arrow--next svg { transform: scaleX(-1); }
.persona-related__arrow:hover { transform: translateY(-50%) scale(1.08); }
.persona-related__arrow:active { transform: translateY(-50%) scale(0.96); }
.persona-related__arrow:disabled { opacity: 0; pointer-events: none; }
/* Once the viewport is wide enough that the 1440px container has a real gutter
   on each side (from 1560px up: (1560-1440)/2 = 60px), lift the arrows OUT of
   the container into that black gutter - outside the box, as requested, with no
   clipping at the screen edge. */
@media (min-width: 1560px) {
  .persona-related__arrow--prev { left: -56px; }
  .persona-related__arrow--next { right: -56px; }
}
@media (max-width: 767px) {
  .persona-related__arrow { width: 36px; height: 36px; }
  .persona-related__arrow svg { width: 16px; height: 16px; }
  .persona-related__arrow--prev { left: 2px; }
  .persona-related__arrow--next { right: 2px; }
}

.persona-related__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 0;
}
.persona-related__dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  /* inactive dots on the black block need a light tone to stay visible */
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.persona-related__dot:hover { background: rgba(255, 255, 255, 0.5); }
.persona-related__dot.is-active {
  background: rgb(var(--g-green-rgb));
  transform: scale(1.35);
}

/* Graceful fallback: before/without slick, render a native scroll-snap carousel
   that already peeks the next slide (so the block is never empty). Slick, once
   initialised, sets its own slide widths and takes over. */
.persona-related__track:not(.slick-initialized) {
  display: flex;
  gap: 0;
  overflow-x: auto;
  /* No scroll-snap: proximity snapping kept re-catching the nearest card
     mid-momentum, which read as jerky "one-position" jumps. Free scroll is
     the smoothest and can't fight the pointer/trackpad. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.persona-related__track:not(.slick-initialized)::-webkit-scrollbar { display: none; }
/* while a mouse drag is in progress: grabbing cursor, no text selection, and
   snapping off so it can't fight the pointer (see enableDragScroll in
   gorilla-persona-stack.js) */
.persona-related__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.persona-related__track.is-dragging img { pointer-events: none; }
/* Cell widths mirror the /lichnosti/ listing grid EXACTLY (1 / 2 / 3 per row
   at the same breakpoints, same container, same gutter) - a card in this
   carousel is pixel-identical to a card in the index grid. The negative
   margins below cancel the outer half-gutters so the row's edges line up
   with the container, just like the grid's own edges. */
.persona-related__track:not(.slick-initialized) {
  margin-inline: calc(-1 * var(--g-grid-gap-half, 14px));
}
.persona-related__track:not(.slick-initialized) .persona-related__cell {
  flex: 0 0 100%;
}
@media (min-width: 640px) {
  .persona-related__track:not(.slick-initialized) .persona-related__cell { flex-basis: 50%; }
}
@media (min-width: 1024px) {
  .persona-related__track:not(.slick-initialized) .persona-related__cell { flex-basis: 33.3333%; }
}

.persona-related__cell { padding: 0 var(--g-grid-gap-half, 14px); }
.persona-related__cell .persona-card { box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.5); }
/* .persona-card__media's default fallback (#e9ebee, a light neutral so a
   photo that doesn't fully cover never shows a dark bar) reads as a stray
   grey hole on this block's black card while the browser is still fetching
   the image - swap it for a dark tone here so any brief loading flash blends
   in instead of standing out. */
.persona-related__cell .persona-card__media { background: #1a1a1a; }

/* ==================== Светлый товарный вариант блока =======================
   «Попробуй Gorilla» (gorilla_related_products_block) - та же карусель и тот
   же JS, но белая сцена: navy-заголовок с navy-короной, тёмные неактивные
   точки, компактные карточки товаров (их больше в ряд, чем персон). */
.persona-related--light {
  background:
    radial-gradient(1200px 480px at 88% -8%, rgba(var(--g-green-rgb) / 0.10), transparent 60%),
    #ffffff;
}
.persona-related--light .persona-related__title { color: var(--g-color-navy); }
.persona-related--light .persona-related__title::before { background-color: var(--g-color-navy); }

/* короткий маркетинговый подзаголовок под заголовком блока */
.persona-related__lead {
  margin: 0;
  text-align: center;
  color: #6b7080;
  font-size: var(--g-fs-lead, 15px);
  line-height: 1.5;
  max-width: 56ch;
}
.persona-related--light .persona-related__lead { color: #6b7080; }

/* точки на белом фоне - тёмные неактивные, зелёная активная (как на главной) */
.persona-related--light .persona-related__dot { background: rgb(var(--g-navy-rgb) / 0.18); }
.persona-related--light .persona-related__dot:hover { background: rgb(var(--g-navy-rgb) / 0.35); }
.persona-related--light .persona-related__dot.is-active { background: rgb(var(--g-green-rgb)); }
.persona-related--light .persona-related__arrow { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35); }

/* карточки товаров компактнее персон: 2 / 3 / 4 в ряд на тех же брейкпоинтах */
.persona-related__track:not(.slick-initialized) .persona-related__cell--product { flex-basis: 50%; }
@media (min-width: 640px) {
  .persona-related__track:not(.slick-initialized) .persona-related__cell--product { flex-basis: 33.3333%; }
}
@media (min-width: 1024px) {
  .persona-related__track:not(.slick-initialized) .persona-related__cell--product { flex-basis: 25%; }
}
.persona-related__cell--product .product-card { width: 100%; }

/* кнопка «Весь каталог» под каруселью */
.persona-related__more { text-align: center; margin-top: clamp(20px, 3vw, 28px); }

/* slick dots - brand green */
.persona-related .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.persona-related .slick-dots li { width: auto; height: auto; }
.persona-related .slick-dots li button {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  font-size: 0; line-height: 0;
  /* .persona-related is a black card (see above) - a dark dot on it would be
     invisible, so this needs its own (lighter) inactive tone instead of the
     rgba(0,0,0,..) used for dots on light backgrounds elsewhere on the site. */
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.persona-related .slick-dots li button:before { display: none; }
.persona-related .slick-dots li.slick-active button {
  background: rgb(var(--g-green-rgb));
  transform: scale(1.35);
}

/* =========================================================
   Personalities listing (/personalities/) - cards in the same
   visual language as the detail page: rounded cover w/ deep
   shadow, green discipline chip, Jawbreak name.
   ========================================================= */
.persona-list {
  overflow-x: clip;
  background:
    radial-gradient(1200px 480px at 12% -8%, rgba(var(--g-green-rgb) / 0.10), transparent 60%),
    #ffffff;
}
.persona-list *,
.persona-list *::before,
.persona-list *::after { box-sizing: border-box; }

.persona-list__inner {
  max-width: var(--g-container-max, 1440px);
  margin: 0 auto;
  /* clear the sticky header with breathing room (v1.2.3: прехидер в потоке) */
  padding: clamp(110px, 13vw, 144px) var(--g-container-pad, clamp(19px, 4vw, 48px)) clamp(48px, 7vw, 88px);
}

.persona-list__title {
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  color: var(--g-color-navy);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: var(--g-fs-h1, clamp(32px, 5vw, 48px));
  margin: 0 0 clamp(16px, 2vw, 20px);
}

/* Minimal breadcrumb trail - sits under the H1, left-aligned in the container.
   Small, quiet, uppercase-free (unlike the chunky Jawbreak headings) so it
   reads as wayfinding, not another heading. Reused on /lichnosti/ and its
   discipline archives. */
.gorilla-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 clamp(18px, 2.5vw, 24px);
  font-size: 13px;
  font-weight: 500;
  color: #8a8f9c;
}
.gorilla-breadcrumbs a {
  color: #8a8f9c;
  text-decoration: none;
  transition: color 0.2s ease;
}
.gorilla-breadcrumbs a:hover,
.gorilla-breadcrumbs a:focus-visible {
  color: rgb(var(--g-green-rgb));
}
.gorilla-breadcrumbs__sep {
  color: #d3d5dc;
}
.gorilla-breadcrumbs__current {
  color: var(--g-color-navy);
  font-weight: 700;
}

/* Optional term description (SEO copy) under the H1 on a discipline archive. */
.persona-list__desc {
  max-width: 60ch;
  color: #4a4f5c;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

/* Discipline chip nav - reuses .gorilla-cat-chip (gorilla-collection.css); this
   just sets the vertical rhythm between H1/desc, nav and the card grid. */
.persona-list__nav {
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 0 0 clamp(20px, 3vw, 28px);
  border-bottom: 1px solid #ececf1;
}

.persona-list__empty {
  color: #6b7080;
  font-size: 15px;
}

.persona-list__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* v2.3.2: компактно, как блок товаров на главной (жёлоб 12–16px),
     а не разреженные 40px */
  gap: clamp(12px, 1.5vw, 16px);
}
@media (min-width: 640px)  { .persona-list__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .persona-list__grid { grid-template-columns: repeat(3, 1fr); } }

/* Overlay-style cards - unified with homepage .g-persona:
   image fills the card, caption sits on top over a navy→green veil. */
.persona-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: clamp(20px, 3vw, 28px);
  /* soft neutral lift on the light page - no heavy black halo that reads
     as dark bars along the rounded corners */
  box-shadow: 0 18px 40px -22px rgba(20, 22, 26, 0.28),
              0 2px 8px rgba(20, 22, 26, 0.06),
              0 0 0 1px rgba(20, 22, 26, 0.04);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* Full-bleed link to the persona itself. Sits above the photo but below the
   meta block/discipline caption, so it catches every click except the
   discipline link's own footprint (see .persona-card__discipline). */
.persona-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.persona-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  /* light neutral base - if the image ever fails to fully cover, a corner
     shows light grey, never a black bar. Photo stays true to colour, no
     dark vignette, matching the reference card. */
  background: #e9ebee;
  z-index: 0;
}
.persona-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}
.persona-card:hover .persona-card__img,
.persona-card:focus-within .persona-card__img { transform: scale(1.06); }

/* bottom caption = long, smooth dark scrim (no hard blur cut-off - the
   masked frosted-glass panel used to create a visible seam across busy
   photos). The scrim spans well over half the card so the fade reads as
   gradual, not a stuck-on block. White text sits on the scrim; the glass
   language lives in the eyebrow chip and arrow button instead. */
.persona-card__meta {
  position: absolute;
  inset: 32% 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
  padding: 22px;
  color: #ffffff;
  background: linear-gradient(180deg,
              rgba(6, 9, 14, 0) 0%,
              rgba(6, 9, 14, 0.02) 24%,
              rgba(6, 9, 14, 0.12) 44%,
              rgba(6, 9, 14, 0.30) 62%,
              rgba(6, 9, 14, 0.52) 80%,
              rgba(6, 9, 14, 0.72) 100%);
  /* transparent to clicks by default so .persona-card__link underneath
     still catches them - only .persona-card__discipline opts back in */
  pointer-events: none;
}
/* circular badge recipe - shared by the arrow on .persona-card (::after,
   "go to profile") and the magnifying-glass zoom link on .persona-stack
   (photo lightbox), see .persona-stack__zoom. One visual source of truth,
   two glyphs (arrow = CSS content, zoom = inline SVG icon in the markup). */
.persona-card::after,
.persona-stack__zoom {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid rgb(var(--g-green-rgb));
  color: rgb(var(--g-green-rgb));
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  transition: transform 0.35s ease, background 0.35s ease;
}
.persona-card::after { content: "→"; z-index: 3; pointer-events: none; }
.persona-stack__zoom svg { width: 19px; height: 19px; }

.persona-card:hover::after,
.persona-card:focus-within::after,
.persona-stack__card:hover .persona-stack__zoom,
.persona-stack__zoom:focus-visible {
  background: rgb(var(--g-green-rgb));
  color: #0a0a0a;
  transform: translateX(3px);
}
/* eyebrow → white liquid-glass droplet chip (matches the .g-glass light
   scene): bright frosted-white fill + a soft diagonal sheen highlight, like
   a bead of glass rather than a flat grey tag. Dark navy text for contrast
   against the white glass (the scrim behind is dark, so the text is never
   competing with the photo directly - only with the white pill). */
.persona-card .persona-detail__eyebrow {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  overflow: hidden;
  color: var(--g-color-navy, #0a0e14);
  opacity: 1;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  /* bright frosted-white glass - opaque enough to read as white over any
     photo, blur+saturate so it still feels like glass, not a flat sticker */
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
/* droplet sheen - a soft diagonal highlight like light bending through a
   bead of liquid glass, sitting on top of the white fill */
.persona-card .persona-detail__eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 55%);
}
/* Fallback: no backdrop-filter → make the fill solid enough to read as a pill. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .persona-card .persona-detail__eyebrow {
    background: rgba(255, 255, 255, 0.94);
  }
}
.persona-card__name {
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  color: #ffffff;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: clamp(17px, 2vw, 22px);
  margin: 0;
  /* dark drop-shadow keeps the white name crisp over any photo, light or dark */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: color 0.25s ease;
  /* keep the name clear of the circular arrow at bottom-right */
  padding-right: 58px;
  /* don't break names mid-word - wrap at spaces so each line fits */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.persona-card:hover .persona-card__name,
.persona-card:focus-within .persona-card__name { color: rgb(var(--g-green-rgb)); }

/* Category caption under the name - same idea as .g-world__sub on the
   platforms section, but clickable: opts back into pointer-events so it
   works as its own link to the discipline/category archive, layered above
   the full-card .persona-card__link. */
.persona-card__discipline {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}
.persona-card__discipline:hover,
.persona-card__discipline:focus-visible {
  color: rgb(var(--g-green-rgb));
  text-decoration: underline;
  text-underline-offset: 3px;
}