/* ===== v3 HERO ===== */

/* ---------- NAV ---------- */
.nav {
  position: relative;     /* чтобы seal мог «свешиваться» вниз, не сдвигая hero */
  max-width: 1054px;      /* синхронно с .section (v4 scale ×0.85) */
  margin: 0 auto;
  padding: 19px clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto;  /* меню слева, печать «5 лет» справа */
  align-items: center;
  gap: 34px;
  z-index: 5;
}
.nav__menu {
  justify-self: start;
  display: inline-flex;
  gap: 27px;
  align-items: center;
}

/* «5 лет клубу» seal в правом верхнем углу nav.
   Свешивается чуть вниз, симметричный (без поворота).
   Размер подобран так, чтобы геометрический центр венка совпадал
   с вертикальным центром строки меню — обе колонки на одной оси. */
.nav__years {
  width: 94px;
  height: 94px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -14px -7px -31px 0;   /* лёгкий overhang сверху и снизу nav */
  pointer-events: none;
}
.nav__years img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 7px 14px rgba(155, 95, 223, 0.18));
}
.nav__menu a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color .2s;
  position: relative;
}
.nav__menu a + a::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--g2);
  opacity: .55;
}
.nav__menu a:hover { color: var(--ink); }

/* ---------- HERO LAYOUT ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
  padding-top: clamp(17px, 3vh, 37px);
  padding-bottom: clamp(34px, 6vh, 68px);
  overflow: hidden;       /* обрезает фигуру Алины по нижнему краю секции —
                             ниже начинается секция .about с тёплой подложкой,
                             в которую Алина «упирается». */
}

/* hero gradient blobs — full viewport width */
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background:
    radial-gradient(720px 460px at 80% 18%, rgba(155, 95, 223, 0.32), transparent 65%),
    radial-gradient(620px 420px at 16% 75%, rgba(255, 122, 69, 0.26), transparent 65%);
  pointer-events: none;
}

/* ---------- LEFT ---------- */
.hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.hero__title {
  /* headline уменьшен — чтобы «Алины Гесс» не разваливалось на две строки */
  font-size: clamp(30px, 3.9vw, 56px);
  margin-bottom: 20px;
}
.hero__lead { margin-bottom: 27px; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 10px 17px 10px 14px;
  /* мягкая лавандовая подложка — единая стилистика с .chip--season */
  background: rgba(155, 95, 223, 0.10);
  border-radius: var(--radius-pill);
  border: none;
  box-shadow: none;
  font-weight: 500;
}
/* акцент «до 31 мая» — фирменный градиент через background-clip */
.hero__badge b {
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.hero__badge::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  /* иконка календаря в фирменном фиолетовом — единая с chip__icon */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239b5fdf' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2' y='3.5' width='12' height='10' rx='1.5'/%3E%3Cpath d='M5 2v3M11 2v3M2 7h12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hero__stats {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  padding-top: 17px;
  border-top: 1px solid var(--hairline);
  margin-top: 17px;
}
.hero__stats > div { display: flex; flex-direction: column; gap: 4px; }
.hero__stats b {
  font-size: clamp(24px, 3.4vw, 37px);
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__stats span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---------- RIGHT ---------- */
.hero__right {
  position: relative;
  min-height: 527px;
  display: block;
}

/* Алина-cutout — крупная фигура: голова почти под навигацией, низ упирается
   в цветную «подножку» (.hero::after), создаётся осознанный обрез.
   Новое фото — портрет 2:3 (848×1264), поэтому width поменьше, чем у
   старого 1:1 cutout, иначе фигура слишком сильно вытягивалась вниз. */
.hero__alina {
  position: absolute;
  top: -140px;   /* подняли вверх — голова чуть выше заголовка слева,
                    низ фигуры перестаёт уходить в следующую секцию */
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 158%;   /* +20% от 132% — фигура крупнее и выше */
  max-width: none;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* widgets — плавают абсолютно вокруг фигуры */
.hero__widget {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 15px;
  box-shadow: var(--card-shadow);
  z-index: 2;
}

/* role-pill — правее середины, на уровне плеч */
.hero__widget--role {
  top: 46%;
  right: -4%;
  padding: 10px 19px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color: #fff;
  transform: rotate(-2deg);
  border: none;
}

/* members card — внизу справа, на уровне бёдер */
.hero__widget--members {
  top: 64%;
  right: -8%;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 10px;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
}
.hero__members-num {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero__members-label {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hero__avatars { display: flex; align-items: center; }
.hero__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-right: -7px;
  object-fit: cover;
  background: linear-gradient(135deg, #ffd0b0, #f9a4c1); /* fallback пока картинка грузится */
  box-shadow: 0 1px 2px rgba(28, 34, 54, 0.10);
}

/* ---------- MOBILE / TABLET ---------- */
@media (max-width: 1000px) {
  .nav__menu { display: none; }
  .nav {
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 12px 16px;
  }
  .nav__years {
    width: 70px;
    height: 70px;
    margin: -8px -4px -8px 0;
  }

  /* Hero — Алина «вписана» в правый верхний угол, headline уживается слева
     благодаря padding-right. Lead/badge/stats ниже занимают полную ширину. */
  .hero {
    grid-template-columns: 1fr;
    position: relative;
    padding-top: 20px;
    padding-bottom: 0;        /* stats-карточка прижата к низу hero,
                                  ниже сразу начинается секция .about */
  }
  .hero__right {
    position: absolute;
    top: 0;
    bottom: 0;            /* тянемся до самой нижней границы hero —
                             там Алина «упирается» в подложку about-секции */
    right: -20px;
    width: 56%;
    min-height: 0;
    height: auto;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
  }
  .hero__alina {
    position: absolute;
    top: -110px;          /* поднимаем ещё (на ~1.5cm) — голова заметно выше
                             chip'а «Летний сезон», лицо ровно на его уровне */
    left: 38%;            /* сдвиг влево (было 50%) — Алина уходит от правого
                             края, не цепляет nav-печать */
    transform: translateX(-50%);
    width: 260%;
    max-width: none;
    max-height: none;
    height: auto;
  }

  /* Виджеты-pill'ы в мобильной версии прячем — на узком viewport
     они либо налезают на лицо, либо ломают композицию. */
  .hero__widget--role,
  .hero__widget--members {
    display: none;
  }

  /* В верхней части резервируем место справа под фигуру Алины —
     chip, headline и lead обтекают её слева, образуя «магазинный спред».
     CTA-блок и stats — полной ширины ниже. */
  .hero__chips,
  .hero__title,
  .hero__lead {
    padding-right: 52%;
  }
  .hero__title {
    font-size: clamp(28px, 7.5vw, 40px);
  }
  .hero__lead {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 24px;
  }
  .hero__cta,
  .hero__stats {
    padding-right: 0;
  }

  /* Badge — «до 31 мая» на следующей строке, выровнено по началу текста
     «Двери клуба открыты». Строки прижаты друг к другу — блок воспринимается
     как единое целое, без «разваленного» промежутка. */
  .hero__badge {
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.25;
    row-gap: 0;                /* убираем 9px gap между обёрнутыми строками */
    padding: 12px 17px;        /* чуть больше вертикального паддинга,
                                  чтобы текст не прилипал к краям */
  }
  .hero__badge b {
    flex-basis: 100%;
    padding-left: 23px;        /* выравниваем под текст, не под иконку */
    margin-top: 0;             /* убираем лишний верхний отступ */
  }

  /* Stats — «полка» под Алину, прижатая к низу hero. Скруглённые ВЕРХНИЕ
     углы — низ заподлицо с границей секции about, без зазора. */
  .hero__stats {
    position: relative;
    z-index: 5;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-bottom: none;        /* нижняя кромка совпадает с переходом
                                    к секции about */
    border-radius: 16px 16px 0 0;
    padding: 16px 14px;
    margin: 64px 0 0 0;         /* опустили на ~1см ниже —
                                    приоткрывается пояс Алины над карточкой */
    gap: 14px;
    box-shadow: 0 -14px 30px -18px rgba(28, 34, 54, 0.10);
  }
}