/* Block: How to get DNA test results
   Две принципиально разные раскладки:
   ≤1099 — баннер с градиентным фоном, заголовок + 3 шага горизонтально (скролл),
           отдельная кнопка «Как сдать тест» под баннером.
   ≥1100 — заголовок + две колонки: видео слева, список тезисов справа;
           кнопка вшита в 1-й тезис. */

.how-to {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block-start: var(--spacing-40);
  padding-block-end: var(--spacing-48);
  padding-inline: 0;
}

/* ============================================ */
/* Heading — общий стиль                          */
/* ============================================ */
.how-to__heading {
  margin: 0;
  font-size: var(--font-headline-s-size);
  font-weight: 600;
  line-height: var(--font-headline-s-line);
  letter-spacing: -0.4px;
  color: var(--color-on-surface);
  text-align: center;
}

/* Заголовок поверх split-раскладки — скрыт на ≤1099 */
.how-to__heading--split {
  display: none;
}

/* ============================================ */
/* Banner (≤1099)                                 */
/* ============================================ */
.how-to__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-20);
  width: 100%;
  padding: var(--spacing-20);
  border-radius: var(--radius-32);
  background: var(--gradient-how-to-banner);
  overflow: hidden;
}

/* Steps row — горизонтальный скролл на ≤1099.
   Edge-bleed: scroll-обёртка «вытекает» за padding баннера
   (margin-inline:-20), а внутренний padding-inline:20 возвращает
   первый шаг на ту же визуальную позицию. */
.how-to__steps-scroll {
  width: auto;
  margin-inline: calc(var(--spacing-20) * -1);
  padding-inline: var(--spacing-20);
  /* Буфер для тени step-card сверху/снизу */
  padding-block: 12px;
  margin-block: -12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.how-to__steps-scroll::-webkit-scrollbar {
  display: none;
}

.how-to__steps {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-8);
  width: max-content;
  /* margin-inline: auto центрирует список, когда он целиком влезает
     в .how-to__steps-scroll. При переполнении auto-маргины свернутся
     в 0, и сработает горизонтальный скролл родителя (overflow-x: auto). */
  margin-block: 0;
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

/* Step — это grid-ячейка с двумя элементами в одной клетке:
   номер сверху-слева (overlap) и карточка ниже на 16px. */
.how-to__step {
  position: relative;
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
}

.how-to__step-num {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
  margin-left: 19.31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--color-step-badge);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2px;
  color: var(--color-on-surface);
  z-index: 1;
}

.how-to__step-card {
  grid-column: 1;
  grid-row: 1;
  margin-top: 16px;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 72px;
  padding: var(--spacing-20);
  border-radius: 18px;
  background: var(--color-surface-bright);
  box-shadow: var(--shadow-card-xs);
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.how-to__step-card p {
  margin: 0;
}

.how-to__step-card strong {
  font-weight: 600;
  color: var(--color-on-surface);
}

/* ============================================ */
/* CTA button (общий)                             */
/* ============================================ */
.how-to__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-bright);
  box-shadow: var(--shadow-cta);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-on-surface);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.how-to__cta:hover {
  filter: brightness(0.98);
}

.how-to__cta:focus-visible {
  outline: 2px solid var(--color-primary-2);
  outline-offset: 2px;
}

.how-to__cta-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.how-to__cta-icon img,
.how-to__cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Standalone CTA — под баннером на ≤1099 */
.how-to__cta--standalone {
  margin-top: var(--spacing-24);
}

/* Inline CTA — внутри тезиса (≥1100).
   Свой hover: только меняем непрозрачность тени 8% → 15%, без
   brightness-фильтра, который наследовался бы от .how-to__cta. */
.how-to__cta--inline {
  align-self: flex-start;
  /* Базовая тень совпадает с --shadow-cta (8%); задаём её
     явно, чтобы плавно анимировать в 15% по hover. */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.how-to__cta--inline:hover {
  filter: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================ */
/* Split layout (≥1100) — скрыт на ≤1099          */
/* ============================================ */
.how-to__split {
  display: none;
}

/* ============================================ */
/* ≥576 — больше нижний padding                   */
/* ============================================ */
@media (min-width: 576px) {
  .how-to {
    padding-block-end: var(--spacing-64);
  }
}

/* ============================================ */
/* ≥768 — крупный заголовок Headline L,           */
/* увеличен gap title↔steps                       */
/* ============================================ */
@media (min-width: 768px) {
  .how-to {
    padding-block-end: var(--spacing-80);
  }

  .how-to__heading {
    font-size: var(--font-headline-l-size);
    line-height: var(--font-headline-l-line);
    letter-spacing: var(--font-headline-l-tracking);
  }

  .how-to__banner {
    gap: var(--spacing-40);
  }
}

/* ============================================ */
/* ≥1100 — split-раскладка (видео + тезисы)       */
/* ============================================ */
@media (min-width: 1100px) {
  .how-to {
    padding-block-start: var(--spacing-80);
    padding-block-end: 0;
    padding-inline: var(--spacing-20);
    gap: 30px;
  }

  .how-to__banner,
  .how-to__cta--standalone {
    display: none;
  }

  .how-to__heading--split {
    display: block;
  }

  .how-to__split {
    display: flex;
    align-items: center;
    gap: var(--spacing-24);
    width: 100%;
    max-width: var(--how-to-content-max);
  }

  .how-to__video {
    position: relative;
    flex-shrink: 0;
    width: 615px;
    height: 440px;
    border-radius: var(--radius-32);
    overflow: hidden;
  }

  .how-to__video-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .how-to__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .how-to__play:hover {
    /* Сохраняем translate центрирования и докручиваем небольшое scale */
    transform: translate(-50%, -50%) scale(0.9);
  }

  .how-to__play:focus-visible {
    outline: 3px solid var(--color-primary-2);
    outline-offset: 4px;
    border-radius: 50%;
  }

  .how-to__play img,
  .how-to__play svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
  }

  .how-to__theses {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    max-width: 420px;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .how-to__thesis {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-16);
    width: 100%;
  }

  .how-to__thesis-num {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-surface-bright);
    box-shadow: var(--shadow-cta);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-on-surface);
  }

  .how-to__thesis > p {
    flex: 1 1 0;
    margin: 0;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-on-surface);
  }

  .how-to__thesis-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    min-width: 0;
  }

  .how-to__thesis-content p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-on-surface);
  }
}

/* ============================================ */
/* ≥1440 — резиновая раскладка, шире padding,     */
/* видео 648, gap 32                              */
/* ============================================ */
@media (min-width: 1440px) {
  .how-to {
    padding-inline: max(
      var(--spacing-64),
      calc((100% - var(--how-to-content-max)) / 2)
    );
  }

  .how-to__split {
    gap: var(--spacing-32);
    max-width: none;
  }

  .how-to__video {
    width: 648px;
  }
}