/* ============================================================
   RESPONSIVE — адаптив поверх десктопа (≥1216px).
   Брейкпоинты:
     • Планшет        768–1215  (этот файл, ниже)
     • Мобилка широкая 480–767  (добавим следующим шагом)
     • Мобилка узкая   <480     (добавим следующим шагом)
   ============================================================ */

/* Hero-теги — стиль как у чипов (обычный PT Sans, без капса, белый фон).
   Применяется на планшете и ниже — до самых узких разрешений. */
@media (max-width: 1215px) {
  .alp_tag {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    background: var(--color-white);
  }
}

/* ===================== ПЛАНШЕТ 768–1215 ===================== */
@media (max-width: 1215px) and (min-width: 768px) {
  /* Сетка из дизайн-системы: 12 кол × 44 + 11 гаттеров × 16 = 704px, по центру */
  .alp_container { width: min(704px, 100% - 32px); }

  /* Заголовки масштабируем через переменные (каскадом на .alp_h1/.alp_h2/.alp_h3) */
  :root {
    --fs-h1: 44px; --lh-h1: 48px;
    --fs-h2: 40px; --lh-h2: 44px;
    --fs-h3: 30px; --lh-h3: 34px;
  }

  /* Hero: текст фикс. колонкой, фото крупное с выносом до правого края вьюпорта.
     Высота sticky-области = высоте текстовой колонки (stretch), JS её не трогает →
     отступ до карточек задаётся явно через padding-bottom (контролируемо). */
  .alp_intro { padding-bottom: 80px; }
  .alp_intro__col { flex: 0 0 440px; }
  .alp_intro__aside { flex: 1 1 auto; align-self: stretch; }
  .alp_intro__photo {
    width: 396px;                     /* постоянный размер на всём брейкпоинте (как на ~1000px) */
    margin-left: calc(50vw - 500px);  /* правый край у края вьюпорта; ≥1000px текст не перекрывает */
    margin-top: -28px;                /* компенсируем прозрачный отступ над головой → голова у верха H1 */
    margin-bottom: 0;                 /* низ открепляется у низа кнопки (без раннего отлипания) */
    top: 36px;                        /* порог прилипания синхронно (64 − 28) */
  }
  .alp_intro__marker { display: none; } /* стрелку-маркер прячем на планшете */

  /* «Знакомься»: меньше воздуха сверху (≈1,5× меньше, значение из шкалы ДС),
     заголовок → «Мария Райдер» 80px */
  .alp_meet { margin-top: 112px; }
  .alp_meet__title { max-width: none; margin-bottom: 80px; }
  .alp_featured { margin-left: 0; max-width: 380px; } /* уже, чтобы фото Марии не наезжало на текст */

  /* «Что отличает»: заголовок → первый блок 48px */
  .alp_features .alp_section__title { margin-bottom: 48px; }

  /* достижения: слайдер имеет верхний паддинг 28px (под тени), компенсируем его,
     чтобы отступ заголовок → карточки был как у других секций (≈48px) */
  .alp_achievements .alp_section__title { margin-bottom: 20px; }

  /* «Что отличает»: картинки 5 колонок, текст 7; вертикальный отступ 48 */
  .alp_feature__text { grid-column: 1 / span 7; }
  .alp_feature__img { grid-column: 8 / span 5; }
  .alp_feature--reverse .alp_feature__img { grid-column: 1 / span 5; }
  .alp_feature--reverse .alp_feature__text { grid-column: 6 / span 7; }
  .alp_features__list { gap: 80px; }
  .alp_features__cta { margin-top: 80px; } /* такой же отступ перед блоком CTA */

  /* Сетки ужимаются до 2 колонок */
  .alp_amb-grid { grid-template-columns: repeat(2, 1fr); }
  .alp_collab__grid { grid-template-columns: repeat(2, 1fr); }

  /* Карусель: карточки строго в пределах контента (без выноса), тени сверху/снизу
     через вертикальный паддинг; стрелки не наползают на карточки */
  .alp_carousel__viewport {
    overflow: hidden;
    padding: 28px 0;
  }
  .alp_carousel__arrow--prev { left: -32px; }
  .alp_carousel__arrow--next { right: -32px; }
  /* число видимых карточек + торчащий фрагмент считает JS (calcVisible) */

  /* Попап во всю ширину контент-зоны планшета (704px) */
  .alp_modal__dialog { max-width: 704px; }
}

/* ===================== МОБАЙЛ ≤767 (общие правила) ===================== */
@media (max-width: 767px) {
  /* Типографика — мобильная шкала ДС */
  :root {
    --fs-h1: 36px; --lh-h1: 40px;
    --fs-h2: 28px; --lh-h2: 32px;
  }
  /* H3/H4 на мобилке по ДС — PT Sans Caption, КАПС */
  .alp_h3 {
    font-family: var(--font-caption);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }
  .alp_h4 {
    font-family: var(--font-caption);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
  }


  /* Кнопки на мобилке (ДС 9.5): все Size 48, PT Sans Regular 18, без капса, во всю ширину */
  .alp_btn {
    width: 100%;
    height: var(--btn-h-48);
    padding: 12px 24px;
    gap: 12px;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
  }

  /* Интро в одну колонку с ручным порядком блоков.
     Разворачиваем вложенность через display:contents, чтобы заголовок, визуал
     Марии и «Кто они?» стали соседями и их можно было упорядочить order-ом:
       1) заголовок → 2) фото Марии + завиток + подпись → 3) «Кто они?» →
       4) кнопка → 5) «Знакомься» */
  .alp_intro__grid { display: flex; flex-direction: column; align-items: stretch; }
  .alp_intro__col { display: contents; }
  .alp_hero__content { display: contents; }

  /* Порядок как в эталоне: заголовок → Мария → КНОПКА под Марией → «Кто они?» → «Знакомься» */
  .alp_hero__title { order: 1; white-space: normal; }
  .alp_hero__dynamic { white-space: normal; }
  /* Мария крупная, воздуха сверху/снизу — минимум */
  .alp_intro__visual { order: 2; display: block; position: relative; margin-top: var(--space-xs); }
  .alp_hero__cta { order: 3; margin-top: var(--space-xs); margin-bottom: 0; } /* кнопка вплотную под Райдер */
  .alp_hero__who { order: 4; margin-top: var(--space-3xl); }
  .alp_meet { order: 5; margin-top: var(--space-2xl); } /* убрали пропасть перед «Знакомься» */

  /* Фото Марии — справа, крупная; sticky отключаем */
  .alp_intro__aside {
    display: block;
    position: static;
    flex: none;
    width: 88%;
    margin-left: auto; /* прижимаем к правому краю */
  }
  .alp_intro__photo {
    position: static;
    width: 100%;
    margin: 0;
  }
  /* Маркер тянется на всю высоту визуала — тогда проценты подписи считаются
     от высоты блока (а не от крошечной высоты стрелки) */
  .alp_intro__marker {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 46%;
    pointer-events: none;
  }
  .alp_intro__marker-arrow {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-top: 4%;          /* небольшой отступ от верха */
    margin-left: auto;       /* стрелка ближе к Марии */
    margin-right: -32px;     /* сдвиг вправо на 32px */
    transform: scaleX(-1);   /* остриё вправо — указывает на Марию */
  }
  .alp_intro__marker-label {
    position: absolute;
    top: calc(30% - 32px);   /* уровень головы Марии, сдвиг вверх на 32px */
    left: 32px;              /* сдвиг вправо на 32px */
    transform: none;         /* сброс десктопного сдвига */
    white-space: nowrap;
    color: #000;
  }

  .alp_meet__title { max-width: none; margin-bottom: var(--space-m); }
  .alp_featured { margin-left: 0; max-width: none; }
  /* Внизу — карточка card-rider (а не большой эскиз); повторяет карточки амбассадоров */
  .alp_featured__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 368 / 240;
    object-fit: cover;
    border-radius: var(--radius-m);
    margin-bottom: var(--space-s);
  }

  /* Секции компактнее, всё в одну колонку */
  .alp_section { padding-block: var(--space-3xl); }
  .alp_amb-grid,
  .alp_testimonials__grid { grid-template-columns: 1fr; }

  /* «Как сотрудничаем» — 2 колонки, картинка над текстом */
  .alp_collab__grid { grid-template-columns: 1fr 1fr; }
  .alp_collab__item { flex-direction: column; align-items: center; text-align: center; }
  .alp_collab__item .alp_text { max-width: none; }

  /* «Что отличает» и CTA — стопкой: картинка над текстом.
     Reverse-селекторы обязательны: иначе десктопные правила
     .alp_feature--reverse .alp_feature__img (grid-column 1/span5) перебьют мобильные. */
  .alp_feature,
  .alp_features__cta { grid-template-columns: 1fr; }
  .alp_feature__img,
  .alp_feature--reverse .alp_feature__img,
  .alp_features__cta-img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .alp_feature__text,
  .alp_feature--reverse .alp_feature__text,
  .alp_features__cta-text { grid-column: 1; grid-row: 2; }
  .alp_features__list { gap: var(--space-3xl); }
  .alp_features__cta { margin-top: var(--space-3xl); }
  .alp_features .alp_section__title { margin-bottom: var(--space-m); }

  /* Финал: чеклист в одну колонку, декор-стрелки прячем */
  .alp_checklist { flex-direction: column; gap: var(--space-l); }
  .alp_checklist__group--narrow { flex: 0 0 auto; }
  .alp_join__arrow { display: none; }
  .alp_join__cta-slot { align-self: stretch; }

  /* Отступ заголовка достижений → карточки: компенсируем верхний паддинг слайдера (28px) */
  .alp_achievements .alp_section__title { margin-bottom: 20px; }

  /* Карусель: круглые белые стрелки 48×48, чеврон внутри 8×16 stroke 1.1,
     наезжают на карточки на 16px */
  .alp_carousel__viewport { overflow: hidden; padding: 28px 0; }
  .alp_carousel__arrow {
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border-radius: var(--radius-pill);
    filter: drop-shadow(0 4px 16px rgba(70, 84, 91, 0.1));
    color: var(--color-border-grey); /* Able */
    transition: background-color 50ms ease, color 50ms ease; /* нажатие за 50мс */
  }
  .alp_carousel__arrow svg { width: 8px; height: 16px; } /* габариты чеврона 8×16 */
  /* viewBox 16×32 → при показе 8×16 масштаб 0.5, поэтому для реальных 1.1px ставим 2.2 */
  .alp_carousel__arrow path { stroke-width: 2.2; }
  .alp_carousel__arrow:active {
    background: var(--color-brand); /* Pressed: оранжевый фон, белая стрелка */
    color: var(--color-white);
  }
  .alp_carousel__arrow--prev { left: -32px; right: auto; }  /* 48 − 16 наезда = 32 наружу */
  .alp_carousel__arrow--next { right: -32px; left: auto; }

  /* Попап во всю ширину */
  .alp_modal__dialog { max-width: none; padding: 24px; }
  .alp_modal__header { gap: var(--space-s); }
}

/* ===================== Mobile Wide 480–767: контент 448 (фикс, по центру) ===== */
@media (max-width: 767px) and (min-width: 480px) {
  .alp_container { width: min(448px, 100% - 32px); }
  /* попап = ширина контент-зоны */
  .alp_modal__dialog { max-width: 448px; }

  /* Райдер поменьше (≈80% от прежнего 88%) */
  .alp_intro__aside { width: 70%; }
  /* Убираем нижний отступ H1 на широкой мобилке — заголовок ближе к Марии */
  .alp_hero__title { margin-bottom: 0; }

  /* Стрелки слайдера не должны обрезаться на узких разрешениях широкой мобилки.
     Выносим кругляш наружу на 32px (наезд 16px), НО не дальше края экрана:
     боковое поле контейнера = (100vw − 448)/2; берём min → на узких упираемся в край. */
  .alp_carousel__arrow--prev { left: calc(min(32px, (100vw - 448px) / 2) * -1); right: auto; }
  .alp_carousel__arrow--next { right: calc(min(32px, (100vw - 448px) / 2) * -1); left: auto; }
}

/* ===================== Mobile Narrow <480 ===================== */
@media (max-width: 479.98px) {
  /* Воздух над hero — меньше (32px) */
  .alp_intro { padding-top: var(--space-l); }

  /* Стрелку-завиток и подпись на узкой мобилке прячем */
  .alp_intro__marker { display: none; }

  /* H1 не скачет от длины печатающейся фразы: резервируем под неё 2 строки */
  .alp_hero__dynamic { display: block; min-height: calc(2 * var(--lh-h1)); }

  /* Чипы/теги: текст 14/20, паддинги 4/8 (ДС) */
  .alp_tag,
  .alp_chip {
    font-size: 14px;
    line-height: 20px;
    padding: 4px 8px;
  }

  /* Попап на весь экран, белым фоном.
     Шапка с крестиком — position: fixed (удобно закрывать при длинном скролле),
     снизу отбита дивайдером #DFE3E5 1px во всю ширину минус 16px слева/справа. */
  .alp_modal__dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    padding: 80px 16px 24px; /* сверху — место под фикс-шапку (+16px отступ контента) */
  }
  .alp_modal__topbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--color-white);
    z-index: 2;
  }
  .alp_modal__topbar::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: #dfe3e5;
  }
  .alp_modal__close {
    top: 12px;
    right: 16px;
  }

  /* H1 на обычной мобилке = по стилям как H2 (размер/интерлиньяж) */
  :root {
    --fs-h1: var(--fs-h2);
    --lh-h1: var(--lh-h2);
  }

  /* Отступ заголовков секций → контент на 16px меньше (48 → 32) */
  .alp_section__title { margin-bottom: var(--space-l); }
  /* Достижения: у слайдера внутренний верхний паддинг 28px, поэтому у заголовка
     оставляем 4px, чтобы визуальный отступ (4+28=32) совпал с остальными секциями */
  .alp_achievements .alp_section__title { margin-bottom: 4px; }

  /* Убираем отступ между H1 и Райдер (фото едет вплотную под заголовок) */
  .alp_intro__visual { margin-top: 0; }

  /* Слайдер: на обычной мобилке оставляем только правую стрелку, левую прячем.
     Боковое поле контейнера всегда 16px → выносим ровно на 16px, кругляш
     упирается в край экрана и наезжает на карточку. */
  .alp_carousel__arrow--prev { display: none; }
  .alp_carousel__arrow--next { right: -16px; left: auto; }

  /* Нижний отступ H1 убираем */
  .alp_hero__title { margin-bottom: 0; }
}