/* Сторінка «Герої» — розкладка поверх EVA UI Kit.
   Компоненти (eva-text, eva-button, eva-list-item, eva-divider, eva-breadcrumbs, eva-surface, eva-image)
   стилізуються самим кітом (eva-ui-kit.css). Тут лише сітки й відступи — тільки через токени --eva-*.
   Кастомізація компонентів — лише через їхні змінні (--eva-button-*, --eva-list-item-* …), як радить кіт. */

/* Proxima Nova Medium не віддається з eva.ua — 500 падає на Semibold (як на BF-лендингу) */
@font-face {
  font-family: ProximaNova;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ProximaNova-Semibold.woff2") format("woff2");
}

:root {
  /* Фон банера кампанії (радіальний градієнт з макета). У Foundation таких кольорів немає — це частина креативу. */
  --heroes-banner-from: #8345db;
  --heroes-banner-to: #32117f;
  --heroes-banner-bg: radial-gradient(72.7% 72.7% at 72.7% 50%, var(--heroes-banner-from) 0%, var(--heroes-banner-to) 100%);
  --heroes-banner-bg-mobile: radial-gradient(219% 92.6% at 55.3% 92.6%, var(--heroes-banner-from) 0%, var(--heroes-banner-to) 100%);
}

html { scroll-behavior: smooth; }
body { background: var(--eva-color-bg-default); -webkit-font-smoothing: antialiased; }

.heroes :is(h1, h2, h3, p) { margin: 0; }

.heroes {
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 var(--eva-spacing-8) var(--eva-spacing-16);
  display: flex;
  flex-direction: column;
  gap: var(--eva-spacing-16);
}

.heroes__crumbs { padding-block: var(--eva-spacing-3); margin-bottom: 0; }
.heroes__crumbs .eva-breadcrumbs-link { color: inherit; text-decoration: none; }

/* ---------- Банер ---------- */
.heroes-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eva-spacing-8);
  padding: var(--eva-spacing-6) var(--eva-spacing-8);
  border-radius: var(--eva-radius-xl);
  background: var(--heroes-banner-bg);
  overflow: hidden;
}
.heroes-banner__title { flex: 0 1 492px; color: var(--eva-color-white); }
.heroes-banner__img { display: block; flex: 0 1 660px; min-width: 0; }
.heroes-banner__img img { display: block; width: 100%; height: auto; aspect-ratio: 660 / 163; object-fit: cover; }

/* ---------- Секція ---------- */
.heroes-section { display: flex; flex-direction: column; gap: var(--eva-spacing-6); }

/* ---------- Картки героїв (eva-surface + eva-image + eva-text + eva-button) ---------- */
.heroes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--eva-spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-card {
  --eva-surface-shadow: inset 0 0 0 1px var(--eva-color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--eva-spacing-3);
  height: 100%;
  padding: var(--eva-spacing-3);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--eva-motion-duration-quick, .15s) ease;
}
.hero-card:hover { --eva-surface-shadow: inset 0 0 0 1px var(--eva-color-border-default), var(--eva-shadow-surface); }
.hero-card:focus-visible { outline: 2px solid var(--eva-color-border-focus, #212121); outline-offset: 2px; }
.hero-card .eva-image {
  --eva-image-height: 220px;
  --eva-image-background: var(--eva-color-bg-default);
  --eva-image-img-object-fit: contain;
  --eva-image-border-radius: var(--eva-radius-lg);
}
.hero-card__titles { display: flex; flex-direction: column; gap: var(--eva-spacing-1); flex-grow: 1; }
.hero-card__en { color: var(--eva-color-text-muted); }
.hero-card .eva-button { width: 100%; }

/* ---------- Алфавіт (індекс) ---------- */
.heroes-index { display: flex; flex-wrap: wrap; gap: var(--eva-spacing-4); margin: 0; padding: 0; list-style: none; }
.heroes-index a { color: var(--eva-color-text-primary); text-decoration: none; }
.heroes-index a:hover { color: var(--eva-color-brand-primary, #f58220); }

/* ---------- Алфавітний список (eva-divider + eva-text + eva-list-item) ---------- */
.heroes-list { display: flex; flex-direction: column; gap: var(--eva-spacing-6); }
.heroes-group { display: flex; flex-direction: column; gap: var(--eva-spacing-2); }
.heroes-group__head { display: flex; flex-direction: column; gap: var(--eva-spacing-4); }
.heroes-group__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--eva-spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.heroes-group .eva-list-item {
  --eva-list-item-padding: 0;
  --eva-list-item-padding-block: var(--eva-spacing-4);
}

/* ---------- Стани при скролі ----------
   --heroes-hdr      — низ видимого хедера сайту (рахує heroes.js)
   --heroes-qn       — висота алфавіту-смуги, коли вона показана (стан «скрол вгору»), інакше 0 */
:root { --heroes-hdr: 0px; --heroes-qn: 0px; }

/* Стан «скрол вниз»: літера групи прилипає на підкладці й тримається до наступної літери */
.heroes-group__head {
  position: sticky;
  top: calc(var(--heroes-hdr) + var(--heroes-qn));
  z-index: 2;
  background: var(--eva-color-bg-default);
  transition: top var(--eva-motion-duration-base, .2s) ease, box-shadow var(--eva-motion-duration-quick, .15s) ease;
}
/* Підкладка розширюється тінню (без зміни висоти — контент не стрибає) */
.heroes-group__head.is-stuck {
  box-shadow: 0 var(--eva-spacing-3) 0 var(--eva-color-bg-default), 0 calc(var(--eva-spacing-3) + 1px) 0 var(--eva-color-border-subtle);
}
.heroes-group__head.is-stuck .eva-divider { visibility: hidden; }
.heroes-group { scroll-margin-top: calc(var(--heroes-hdr) + var(--eva-spacing-2)); }

/* Стан «скрол вгору»: над літерою виїжджає алфавіт в один рядок з горизонтальним скролом */
.heroes-quicknav {
  position: fixed;
  top: var(--heroes-hdr);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--eva-color-bg-default);
  box-shadow: 0 1px 0 var(--eva-color-border-subtle);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--eva-motion-duration-base, .2s) ease, opacity var(--eva-motion-duration-base, .2s) ease, visibility 0s linear var(--eva-motion-duration-base, .2s);
}
.heroes-quicknav.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.heroes-quicknav__list {
  display: flex;
  gap: var(--eva-spacing-1);
  max-width: 1312px;
  margin: 0 auto;
  padding: var(--eva-spacing-2) var(--eva-spacing-8);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.heroes-quicknav__list::-webkit-scrollbar { display: none; }
.heroes-quicknav__list li { flex: none; scroll-snap-align: center; }
.heroes-quicknav__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--eva-radius-full);
  color: var(--eva-color-text-primary);
  text-decoration: none;
}
.heroes-quicknav__letter:hover { background: var(--eva-color-bg-subtle); }
.heroes-quicknav__letter[aria-current="true"] { background: var(--eva-color-bg-primary); color: var(--eva-color-white); }

/* ---------- Мобайл ---------- */
@media (max-width: 1023px) {
  .heroes { padding: 0 var(--eva-spacing-4) var(--eva-spacing-8); gap: var(--eva-spacing-10); }
  .heroes-section { gap: var(--eva-spacing-4); }

  /* Мобільні крихти як на eva.ua: «‹ EVA.UA» */
  .heroes__crumbs { padding-block: var(--eva-spacing-2); margin-bottom: calc(var(--eva-spacing-4) - var(--eva-spacing-10)); }
  .heroes__crumbs .eva-breadcrumbs-item._current { display: none; }
  .heroes__crumbs .eva-breadcrumbs-item:first-child { color: var(--eva-color-text-primary); }
  .heroes__crumbs .eva-breadcrumbs-item:first-child::before {
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 var(--eva-spacing-1) 0 var(--eva-spacing-1);
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .heroes-banner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--eva-spacing-4);
    padding: var(--eva-spacing-6) var(--eva-spacing-5) var(--eva-spacing-5);
    background: var(--heroes-banner-bg-mobile);
  }
  /* У макеті Display/MD 32, але у браузері «Обирай улюблений» при 32px = 300px > 288px і ламається на 3 рядки.
     Беремо найближчий токен, з яким заголовок, як у макеті, лишається у 2 рядки. */
  .heroes-banner__title {
    flex: none;
    --eva-typography-display-lg-font-size: var(--eva-font-size-28);
    --eva-typography-display-lg-line-height: 36px;
  }
  .heroes-banner__img { flex: none; width: 100%; }
  .heroes-banner__img img { aspect-ratio: 288 / 82; }

  .heroes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eva-spacing-2); }
  .hero-card { padding: var(--eva-spacing-2); gap: var(--eva-spacing-2); }
  .hero-card .eva-image { --eva-image-height: 120px; }
  .hero-card__ua {
    --eva-typography-title-md-font-size: var(--eva-font-size-14);
    --eva-typography-title-md-line-height: 20px;
  }
  .hero-card .eva-button {
    --eva-button-min-height: 32px;
    --eva-button-font-size: var(--eva-font-size-13);
    --eva-button-padding: 0 var(--eva-spacing-3);
  }

  .heroes-index { display: grid; grid-template-columns: repeat(9, auto); justify-content: space-between; gap: var(--eva-spacing-3) 0; }

  .heroes-list { gap: var(--eva-spacing-4); }
  .heroes-quicknav__list { padding-inline: var(--eva-spacing-4); }
  .heroes-group__items { grid-template-columns: 1fr; }
}