/**
 * Hero: флагман ДЭНАС-ПКМ Про. Макет Figma «ДЭНАС — Hero ПКМ Про», узел 11:2.
 *
 * Правая половина — фотография комнаты, обрезанная дугой; аппарат стоит
 * на деревянном столе внутри неё. Левая половина остаётся белой: на ней
 * живёт текст, и подкладывать под него фотографию нельзя — читаемость
 * упадёт на первом же ярком кадре.
 *
 * Цвета сведены к токенам. Локальными остались только границы и подложка
 * карточек — полупрозрачное белое поверх фотографии, такого в теме нет.
 */

.hero-pkm {
  --hp-border: #dfe8ea;
  --hp-divider: #e6edee;
  --hp-card: rgb(255 255 255 / 0.92);

  /* Докуда снизу доходит фотография. Полоса доверия под ней должна лежать
     на белом: на дереве её полупрозрачная подложка мутнеет и читается хуже */
  --hp-scene-bottom: 9rem;

  position: relative;
  overflow: hidden;
  padding-block: var(--space-12) var(--space-10);
  background: var(--color-surface);
}

/* ── Комната за дугой ──────────────────────────────── */

/*
 * Кадр владельца: дуга, белое поле слева и круглый стол уже нарисованы
 * внутри картинки, поэтому маска здесь не нужна — она бы резала дугу
 * второй раз. Растягиваем на весь первый экран и держим низ кадра:
 * на нём столешница, а на ней стоит аппарат.
 */
.hero-pkm__scene {
  position: absolute;
  z-index: 0;
  /* Снизу кадр обрезан: полоса доверия должна лежать на белом, а не на
     столешнице — на дереве её полупрозрачная подложка мутнеет */
  inset: 0 0 var(--hp-scene-bottom) 0;
  pointer-events: none;
}

/* picture — строчный элемент, и height:100% на картинке внутри него
   не с чем было считать: кадр вставал натуральной высотой и столешница
   уезжала выше корпуса. Тянем обёртку, а уже от неё считается картинка. */
.hero-pkm__scene picture {
  display: block;
  height: 100%;
}

.hero-pkm__scene-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Низ кадра — столешница, на которой стоит аппарат: её и держим в виду */
  object-position: center bottom;
}

/* ── Раскладка ─────────────────────────────────────── */

/* Телефон: заголовок слева, устройство справа, кнопки во всю ширину снизу —
   так первый экран целиком влезает в телефон и до кнопок не надо скроллить.
   Десктоп: текст и кнопки в левой колонке, устройство справа во всю высоту. */
.hero-pkm__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  grid-template-areas:
    'head  media'
    'chips media'
    'buy   buy';
  gap: var(--space-6) var(--space-4);
  align-items: center;
}

.hero-pkm__head { grid-area: head; }
.hero-pkm__features { grid-area: chips; }
.hero-pkm__buy { grid-area: buy; }
.hero-pkm__media { grid-area: media; }

@media (min-width: 62rem) {
  .hero-pkm__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas:
      'head  media'
      'chips media'
      'buy   media';
    gap: var(--space-6) var(--space-12);
    align-content: center;
  }
}

/* ── Оффер ─────────────────────────────────────────── */

.hero-pkm__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);

  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}

/* Кегль подобран так, чтобы «ДЭНАС-ПКМ Про» вставало в одну строку
   в левой колонке на всех десктопных ширинах — от 1024 до предела контейнера */
.hero-pkm__title {
  margin-bottom: var(--space-5);
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Номер регистрационного удостоверения.
   Строка служебная и стоит сразу под заголовком, поэтому кегль мелкий, цвет
   приглушённый, а маркером служит тонкая линейка слева: без неё номер читался
   как обрывок подзаголовка. Цифры табличные — «№ РЗН 2021/13307» не должен
   плясать по ширине при смене шрифтового набора. */
.hero-pkm__reg {
  margin-bottom: var(--space-6);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-primary-light);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

/* ── Чипы характеристик ────────────────────────────── */

/* Подпись над чипами: сами по себе «Конструктор» и «Избранное» ничего не
   говорят человеку, который эти функции видит впервые — заголовок объясняет,
   зачем они тут стоят. */
.hero-pkm__chips-title {
  margin-bottom: var(--space-3);
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-pkm__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  list-style: none;
}

.hero-pkm__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding-inline: var(--space-5);
  background: rgb(255 255 255 / 0.85);
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  box-shadow: 0 5px 16px rgb(22 34 56 / 0.05);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.hero-pkm__chip-icon {
  display: grid;
  place-items: center;
  color: var(--color-primary);
}

.hero-pkm__chip-icon svg {
  width: 1.3125rem;
  height: 1.3125rem;
}

/* ── Кнопки ────────────────────────────────────────── */

/*
 * Цена, старая цена и плашка экономии сняты 23.09.2026 по решению владельца:
 * цифра на первом экране отсекала посетителя раньше, чем он успевал понять
 * разницу между моделями. Правила .hero-pkm__price* удалены вместе с
 * разметкой — вернуть можно из копии hero-pkm.css.bak-20260923.
 */

.hero-pkm__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* .btn отдаёт наружу --btn-*, поэтому размеры правим без дублирования базы */
.hero-pkm__btn {
  min-height: 3.5rem;
  padding-inline: var(--space-8);
  border-radius: 0.75rem;
  font-size: var(--fs-lg);
  box-shadow: 0 12px 15px rgb(20 131 127 / 0.22);
}

.hero-pkm__btn--ghost {
  --btn-bg: rgb(255 255 255 / 0.55);
  border-width: 2px;
  box-shadow: none;
}

.hero-pkm__btn--ghost:hover {
  --btn-bg: var(--color-surface);
}

/* ── Устройство ────────────────────────────────────── */

.hero-pkm__media {
  position: relative;
  display: grid;
  justify-items: center;
}

/* Высоту всего блока задаёт именно аппарат: пропорция 466×1170 при 17rem
   давала 683 px и выносила первый экран за пределы ноутбука. */
.hero-pkm__device {
  position: relative;
  width: 100%;
  max-width: 12.5rem;

  /* Сдвинут вниз: низ корпуса должен попасть на линию столешницы в кадре,
     иначе аппарат висит над столом */
  transform: translateY(2%);
}

.hero-pkm__device-img {
  display: block;
  width: 100%;
  height: auto;
  /* Мягкая тень корпуса короткая и почти под ним: длинная и размытая
     отрывала аппарат от стола */
  filter: drop-shadow(0 0.5rem 0.75rem rgb(15 53 71 / 0.18));
}

/* Пятно касания: плотное, узкое и прямо под основанием — так глаз
   читает «стоит на столе». Широкое бледное пятно ниже корпуса читалось
   как тень от предмета, висящего над поверхностью. */
.hero-pkm__device-shadow {
  position: absolute;
  z-index: -1;
  bottom: -0.35rem;
  left: 50%;
  width: 78%;
  height: 1rem;
  background: rgb(40 28 16 / 0.42);
  border-radius: 50%;
  filter: blur(6px);
  transform: translateX(-50%);
}

/* ── Спец-карточки ─────────────────────────────────── */

.hero-pkm__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  list-style: none;
}

.hero-pkm__spec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding-inline: var(--space-4);
  background: var(--hp-card);
  border: 1px solid rgb(255 255 255 / 0.95);
  border-radius: 1rem;
  box-shadow: 0 15px 34px rgb(28 82 97 / 0.11);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.hero-pkm__spec-icon {
  display: grid;
  place-items: center;
}

.hero-pkm__spec-icon svg {
  width: 1.6875rem;
  height: 1.6875rem;
}

/* На широком экране карточки уходят колонкой к правому краю, как в макете */
@media (min-width: 62rem) {
  .hero-pkm__media {
    justify-items: end;
    padding-right: 10rem;
  }

  .hero-pkm__specs {
    position: absolute;
    top: 50%;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    transform: translateY(-50%);
  }

  .hero-pkm__spec {
    min-width: 9.5rem;
    min-height: 3.75rem;
  }
}

/* ── Полоса доверия ────────────────────────────────── */

.hero-pkm__trust {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  margin-top: var(--space-10);
  padding: var(--space-4) var(--space-2);
  background: var(--hp-card);
  border: 1px solid rgb(255 255 255 / 0.96);
  border-radius: 1.25rem;
  box-shadow: 0 12px 36px rgb(22 34 56 / 0.09);
  list-style: none;
}

@media (min-width: 62rem) {
  .hero-pkm__trust { margin-top: var(--space-8); }
}

@media (min-width: 40rem) {
  .hero-pkm__trust { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
  .hero-pkm__trust { grid-template-columns: repeat(4, 1fr); }
}

.hero-pkm__trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: left;
}

/* Разделители только между соседями в одном ряду */
@media (min-width: 40rem) {
  .hero-pkm__trust-item:not(:nth-child(2n)) {
    border-right: 1px solid var(--hp-divider);
  }
}

@media (min-width: 62rem) {
  .hero-pkm__trust-item:not(:nth-child(2n)) { border-right: 0; }
  .hero-pkm__trust-item:not(:last-child) {
    border-right: 1px solid var(--hp-divider);
  }
}

.hero-pkm__trust-icon {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-primary);
}

.hero-pkm__trust-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ── Узкий экран: декор мешает, убираем ────────────── */

/* Телефон: задача — весь оффер (заголовок → функции → кнопки) на первом экране.
   Текст прижат к верху, а не отцентрован против высокого устройства,
   отступы ужаты, чипы в один ряд. */
@media (max-width: 61.9375rem) {
  .hero-pkm { padding-block: var(--space-6); }

  /* На телефоне кадр вытянут по вертикали, и в него попадает либо пустое
     белое поле слева, либо комната. Держим правую часть, где стол и диван,
     и обрезаем по высоте: столешница должна оказаться под аппаратом,
     а не под ценой. */
  /* Фото кончается сразу под аппаратом: ниже идут кнопки, и на дереве
     под ними столешница читалась как пол, а аппарат — висящим (23.09.2026) */
  .hero-pkm__scene {
    inset: 0 0 auto 0;
    height: 20.5rem;
  }

  .hero-pkm__scene-img {
    object-position: 74% 100%;
  }

  /* Слева кадр гасим в белое: на телефоне текст идёт поверх комнаты, и без
     подложки заголовок с подписью ложатся прямо на диван */
  .hero-pkm__scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--color-surface) 16%, rgb(255 255 255 / 0) 62%);
  }

  .hero-pkm__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
    gap: var(--space-4);
    align-items: start;
  }

  /* Заголовок делит строку с устройством, поэтому крупный кегль тут не влезает */
  .hero-pkm__title {
    font-size: clamp(1.6rem, 7.5vw, 2.5rem);
    margin-bottom: var(--space-3);
  }

  .hero-pkm__eyebrow {
    margin-bottom: var(--space-2);
    font-size: var(--fs-xs);
  }

  .hero-pkm__reg {
    margin-bottom: 0;
    padding-left: var(--space-2);
    font-size: var(--fs-xs);
  }

  /*
   * Чипы столбиком в левой колонке: рядом с высоким аппаратом там всё равно
   * пустое место, а строкой во всю ширину они занимали отдельный этаж и
   * ужимались до нечитаемого кегля.
   */
  .hero-pkm__chips {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: 0;
  }

  /* Подпись над чипами на телефоне ужимаем: она делит узкую колонку
     с высоким аппаратом справа и в два слова не всегда влезает в строку */
  .hero-pkm__chips-title {
    margin-bottom: var(--space-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.03em;
  }

  .hero-pkm__chip {
    min-height: 2.25rem;
    padding-inline: var(--space-3);
    font-size: var(--fs-sm);
    gap: var(--space-2);
  }

  .hero-pkm__chip-icon svg { width: 1.125rem; height: 1.125rem; }

  /* Кнопки в столбик и во всю ширину — так их проще нажать пальцем */
  .hero-pkm__cta { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .hero-pkm__btn { min-height: 3.25rem; }

  /* Спец-карточки — декор вокруг устройства на широком экране. В узкой
     колонке телефона они не помещаются и вдобавок дублируют чипы
     («26 программ» есть и там, и там). Полные характеристики — в карточке товара. */
  .hero-pkm__specs { display: none; }

  /* Раньше корпус тянулся на всю колонку и рос с шириной экрана, а высота
     фото на телефоне постоянная: на iPhone 430 px основание вставало на
     обрез кадра. Фиксированный размер держит его на столешнице на любой ширине. */
  .hero-pkm__device { max-width: 7rem; transform: translateY(-0.5rem); }
  .hero-pkm__device-shadow { bottom: -0.75rem; }

  .hero-pkm__trust { margin-top: var(--space-6); }
}

/* ── Карточки характеристик сняты (10.09.2026) ─────── */

/*
 * По просьбе владельца — «пока скрой». Поверх фотографии они закрывали
 * половину комнаты и спорили с чипами слева, где те же факты уже названы.
 * Разметка осталась на месте: вернуть — удалить эти два правила.
 */
.hero-pkm__specs {
  display: none;
}

/*
 * Аппарат стоит на столе, а стол — часть фотографии во всю ширину экрана.
 * Поэтому его положение считается от окна, а не от контейнера: иначе на
 * 1440 он стоял правее середины стола, а на 2000 — левее, потому что
 * контейнер упирается в 80rem, а фотография продолжает растягиваться.
 *
 * 75vw — середина видимой части столешницы (в кадре она занимает от 50%
 * ширины и уходит за правый край). Дальше простая арифметика: от правого
 * края контейнера до этой точки и минус половина корпуса.
 */
@media (min-width: 62rem) {
  .hero-pkm__media {
    padding-right: 0;
  }

  /* Аппарат стоит на середине столешницы, а не на нижнем обрезе кадра.
     Раньше низ корпуса совпадал с краем фотографии, и тень падала на белое
     под ней — аппарат висел в воздухе (замечание владельца 23.09.2026).
     Корпус чуть меньше и поднят: до обреза остаётся ~4rem дерева, на них
     и ложится пятно касания. */
  .hero-pkm__device {
    max-width: 11.5rem;
    transform: translateY(-3rem);
  }

  .hero-pkm__device {
    /* Последним вычитается внутренний отступ контейнера: колонка кончается
       не на его краю, а на 24 px раньше */
    margin-right: calc(min(40rem, 50vw - var(--container-pad)) - 25vw - 6.25rem - var(--container-pad));
  }
}