/* ============================================================================
   Hero section — первый экран с фулфилментом и декоративными карточками
   ============================================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: min(1824px, 100% - 2 * var(--hero-gutter));
  max-width: 1824px;
  height: 1052px;
  margin-inline: auto;
  background: var(--bg-dark-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Фоновое изображение */
.hero__background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  display: block;
}


/* Содержимое слева */
.hero__content {
  position: absolute;
  top: 309px;
  left: 92px;
  width: 1042px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  color: var(--text-constant-light);
  z-index: 2;
}

/* Бейдж в hero */
.hero__badge {
  align-self: flex-start;
  font-size: var(--scale-05);
  /* В макете плашка ровно 38px: 24px * 1.1 + паддинги 6+6. */
  line-height: 1.1;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-constant-light);
  padding: 6px 9px;
  border-radius: 3px;
  width: fit-content;
  letter-spacing: -0.01em;
}

/* Заголовок.
   Макет: hero-content — колонка с gap 24, но бейдж и заголовок внутри неё
   собраны в группу с gap 16. Разметка плоская — компенсируем разницу. */
.hero__title {
  color: var(--text-constant-light);
  line-height: 1.1;
  margin: -8px 0 0;
  letter-spacing: -0.01em;
}

/* Описание */
.hero__description {
  margin: 0;
  max-width: 940px;
}

/* Кнопки */
.hero__buttons {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-top: var(--space-m);
}

.hero__buttons .btn {
  flex: 0 0 auto;
  width: 423px;
  height: 61px;
  font-size: var(--scale-05);
  padding: var(--space-m) var(--space-xl);
  border-radius: var(--radius-m);
  white-space: nowrap;
}

.hero__buttons .btn:nth-child(2) {
  width: 255px;
  padding: var(--space-m) var(--space-xl);
  white-space: nowrap;
}

/* Контейнер карточек (декоративный коллаж) */
.hero__cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

/* Коллаж карточек — часть десктопной раскладки; на промежуточных ширинах
   он масштабируется вместе с секцией (доли ниже), поэтому показываем его
   везде, где действует десктопная раскладка. */
@media (min-width: 1200px) {
  .hero__cards {
    display: block;
  }
}

/* Рейтинг в макете нарисован только у передней карточки. Разметка одинакова
   у всех трёх (любая по очереди выходит вперёд), поэтому у боковых он просто
   погашен и проявляется, когда карточка выходит вперёд. */
.hero-card__rating {
  transition: opacity 0.4s ease;
}

.hero-card:not(.hero-card--main) .hero-card__rating {
  opacity: 0;
}

/* Карточки меняются местами раз в 5 секунд — initHeroCards в main.js.
   Едут left/top/opacity; transform в переходе НЕ участвует, он отдан
   параллаксу, иначе прокрутка дёргалась бы на каждом кадре. */
.hero-card {
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s ease;
}

/* Карточка, перескакивающая с правого края на левый: на время прыжка она
   невидима, иначе заметно проезжает через весь коллаж. Заодно этот же
   transition отменяет анимацию left/top — прыжок происходит мгновенно. */
.hero-card.is-jumping {
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-card {
    transition: none;
  }
}

/* Карточка базовые стили.
   Филлы узла: [#000/0.20, #ffffff] — верхний непрозрачный белый перекрывает
   всё, т.е. карточка СПЛОШНАЯ БЕЛАЯ; боковые приглушает opacity:0.4 узла. */
.hero-card {
  position: absolute;
  width: 351px;
  height: 352px;
  border-radius: 20px; /* узел r:20 */
  /* Все три карточки в макете сплошные белые (филлы [#000/0.20, #fff],
     верхний непрозрачный). Стекло НЕ включаем: Chrome через backdrop-filter
     выдаёт серый, а призрачность боковых карточек делает opacity: 0.4. */
  background: #ffffff;
  border: 1px solid var(--border-main-quarteary);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-xxs);
}

/* Позиционирование карточек — в процентах от .hero (1824px = 100%) */
.hero-card--right {
  top: 341px;
  left: 86.18%; /* 1572/1824 */
  width: 351px;
  opacity: 0.4;
  z-index: 3;
}

.hero-card--center {
  top: 341px;
  left: 59.32%; /* 1082/1824 */
  width: 351px;
  opacity: 0.4;
  z-index: 4;
}

.hero-card--main {
  top: 405px;
  left: 72.74%; /* 1327/1824 */
  width: 351px;
  opacity: 1;
  z-index: 5;
}

/* На узких десктопных экранах (1025–1799) карточки и контент сжимаются */
@media (min-width: 1200px) and (max-width: 1799px) {
  .hero-card--right {
    left: min(86.18%, calc(100% - 351px));
  }

  .hero-card--center {
    left: min(59.32%, calc(100% - 351px));
  }

  .hero-card--main {
    left: min(72.74%, calc(100% - 351px));
  }

  /* Сжать контент и кнопки на узких экранах */
  .hero__content {
    max-width: calc(100vw - 200px);
  }

  .hero__buttons .btn,
  .hero__buttons .btn:nth-child(2) {
    width: clamp(100px, 20vw, 423px);
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Изображение в карточке */
.hero-card__image {
  width: 100%;
  height: 223px;
  object-fit: cover;
  border-radius: var(--radius-s);
  display: block;
}

/* Разделитель */
.hero-card__divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-card__divider svg {
  width: 100%;
  height: auto;
}

/* Информация о карточке */
.hero-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxxs);
}

.hero-card__info--with-rating {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
}

.hero-card__name {
  font-size: var(--scale-01);
  font-weight: var(--weight-500);
  color: var(--text-constant-dark);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero-card__city {
  font-size: var(--scale-00);
  font-weight: var(--weight-400);
  color: var(--text-constant-dark);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Рейтинг */
.hero-card__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.hero-card__star {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hero-card__rating-value {
  font-size: var(--scale-01);
  font-weight: var(--weight-500);
  color: var(--text-constant-dark);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Метрики */
.hero-card__metrics {
  display: flex;
  gap: var(--space-xxs);
}

.hero-card__metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border: 1px solid var(--border-main-quarteary);
  border-radius: var(--radius-s);
  padding: 0 var(--space-s);
  min-height: 56px;
  justify-content: center;
}

.hero-card__metric-label {
  font-size: var(--scale-00);
  font-weight: var(--weight-400);
  color: var(--text-constant-dark);
  letter-spacing: 0.01em;
}

.hero-card__metric-value {
  font-size: var(--scale-01);
  font-weight: var(--weight-500);
  color: var(--text-constant-dark);
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.hero-card__metric-value sup {
  font-size: 9px;
  line-height: 1.1;
}

/* Иконки маркетплейсов */
.hero-card__marketplace-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}

.hero-card__marketplace-icons img {
  width: 16px;
  height: 16px;
  display: block;
}

/* ============================================================================
   Адаптив
   ============================================================================ */

/* Планшет 1440px и выше */
@media (max-width: 1440px) {
  .hero {
    height: auto;
    min-height: clamp(600px, 54.8958vw, 1052px);
  }
}

/* Промежуточные ширины: раскладка остаётся десктопной (текст слева, коллаж
   справа), но всё считается от ширины секции — карточки уменьшаются вместе
   с ней и не налезают на текст. */
@media (min-width: 1200px) and (max-width: 1919px) {
  .hero {
    height: auto;
    min-height: min(1052px, 57.7vw);
  }

  .hero__content {
    top: 29.4%;            /* 309/1052 */
    left: 5.04%;           /* 92/1824 */
    width: 57.1%;          /* 1042/1824 */
    max-width: 1042px;
  }

  .hero__title {
    font-size: clamp(40px, 4.7vw, 90px);
  }

  .hero__description {
    font-size: clamp(15px, 1.25vw, 24px);
    /* В макете подзаголовок 940 при колонке контента 1042 — это 90%.
       Было 100%, и на узких десктопах строка растягивалась во всю колонку. */
    max-width: 90.2%;
  }

  .hero__buttons .btn {
    width: clamp(200px, 22vw, 423px);
    height: clamp(48px, 3.2vw, 61px);
    font-size: clamp(14px, 1.25vw, 24px);
  }

  .hero__buttons .btn:nth-child(2) {
    width: clamp(150px, 13.3vw, 255px);
  }

  /* Карточки коллажа: позиции и размеры в долях секции (макет 1824x1052) */
  .hero-card {
    width: 19.25%;         /* 351/1824 */
    height: auto;
    aspect-ratio: 351 / 352;
  }

  .hero-card--right  { top: 32.4%; left: 86.2%; }
  .hero-card--center { top: 32.4%; left: 59.3%; }
  .hero-card--main   { top: 38.5%; left: 72.8%; }

  .hero-card__image { height: 63.4%; }

  .hero-card__name,
  .hero-card__rating-value,
  .hero-card__metric-value { font-size: clamp(11px, 0.78vw, 14px); }

  .hero-card__city,
  .hero-card__metric-label { font-size: clamp(9px, 0.66vw, 12px); }
}

/* Мобильный вариант переносов заголовка вне мобилы скрыт */
.hero__title-mobile { display: none; }

/* ============================================================================
   Планшет (≤1024) — узел 505:1868: карточка 720x863 (поле 24), контент 672,
   заголовок 48, кнопки 44, три карточки 443x323 с обрезкой краёв.
   ============================================================================ */

@media (max-width: 1199px) {
  .hero {
    /* На десктопе .hero — flex для absolute-контента; на планшете контент
       в потоке, флекс уложил бы контент и карточки в один ряд. */
    display: block;
    max-width: calc(100% - 48px);
    height: 863px;
    min-height: 0;
    border-radius: 24px;
  }

  /* В макете фон карточки 40%, в PNG запечено 60% → 0.4/0.6 */
  .hero__background img { opacity: 0.667; }

  .hero__content {
    /* relative, не static: фон — absolute, и статичный контент красился бы
       ПОД его полупрозрачной картинкой (порядок отрисовки CSS) */
    position: relative;
    inset: auto; /* сбрасываем десктопные top/left — у relative они тоже смещают */
    z-index: 2;
    /* 24 паддинг карточки + 60 навбар (fixed, вне потока) + 40 зазор */
    margin: 124px 24px 0;
    width: auto;
    max-width: none;
    padding: 0;
    gap: 24px;
  }

  .hero__badge {
    font-size: 16px;
  }

  .hero__title {
    font-size: 48px;
  }

  .hero__description {
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8); /* на планшете лид 80% (узел 510:2140) */
    max-width: none;
  }

  .hero__buttons {
    gap: 24px;
    margin-top: 0;
    flex-wrap: nowrap;
  }

  .hero__buttons .btn,
  .hero__buttons .btn:nth-child(2) {
    flex: 1 1 0;
    width: auto;
    height: 44px;
    padding: 8px 24px;
    border-radius: var(--radius-s);
    font-size: 14px;
    font-weight: var(--weight-400);
    letter-spacing: 0.01em;
  }

  /* Коллаж: контейнер 672x363, карточки в процентах от него */
  .hero__cards {
    display: block;
    position: relative;
    z-index: 2;
    inset: auto;
    height: 363px;
    margin: 40px 24px 0;
    pointer-events: none;
  }

  .hero-card {
    width: 443px;
    height: 323px;
    border-radius: 20px;
  }

  /* Коллаж центрируем относительно контейнера: в макете (672) центр главной
     карточки совпадает с центром блока, боковые разнесены на ±245.
     Проценты от ширины давали смещение влево на широких планшетах. */
  .hero-card--right  { top: 0;    left: 50%; margin-left: 23px; }
  .hero-card--center { top: 0;    left: 50%; margin-left: -467px; }
  .hero-card--main   { top: 40px; left: 50%; margin-left: -221.5px; }

  .hero-card__image {
    height: 194px;
    border-radius: var(--radius-s);
  }

  .hero-card__name,
  .hero-card__rating-value,
  .hero-card__metric-value { font-size: 14px; }

  .hero-card__city,
  .hero-card__metric-label { font-size: 12px; }
}

/* ============================================================================
   Мобиль (≤767) — узел 529:3842: карточка 351x608 (поле 12), контент 319,
   навбар fixed 319x60, заголовок 32, кнопки 44, два ряда.
   ============================================================================ */

@media (max-width: 767px) {
  .hero {
    display: block;
    max-width: calc(100% - 24px); /* поле 12: карточка 351 на холсте 375 */
    height: 608px;
    min-height: 0;
    border-radius: 20px;
    margin: 0 auto;
  }

  .hero__background img {
    opacity: 0.4;
  }

  .hero__content {
    position: relative;
    inset: auto;
    z-index: 2;
    margin: 157px 16px 0; /* контент в макете на y157 карточки */
    width: auto;
    max-width: none;
    padding: 0;
    gap: 24px;
  }

  .hero__badge {
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .hero__title {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .hero__title-desktop { display: none; }
  .hero__title-mobile { display: inline; }

  .hero__description {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    max-width: none;
    letter-spacing: 0;
  }

  .hero__buttons {
    gap: 16px;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 0;
  }

  .hero__buttons .btn,
  .hero__buttons .btn:nth-child(2) {
    flex: 1 1 auto;
    width: 100%;
    height: 44px;
    padding: 8px 24px;
    border-radius: var(--radius-s);
    font-size: 14px;
    font-weight: var(--weight-400);
    letter-spacing: 0.01em;
    line-height: 1.2;
  }

  .hero__cards {
    display: none;
  }
}