/* ============================================================
   STYLES — секции лендинга «Амбассадоры Ridero»
   Десктоп ≥1216px (источник: Figma node 156:1589).
   Сетка: 12 колонок × 80px + 11 гаттеров × 16px = 1136px.
   ============================================================ */

/* --- Контейнер --- */
.alp_container {
  width: min(var(--content-width), 100% - 32px);
  margin-inline: auto;
}

/* --- Вертикальный ритм секций --- */
.alp_section {
  padding-block: var(--space-5xl); /* 96px */
}
.alp_section + .alp_section {
  padding-top: 0;
}
.alp_section__title {
  margin-bottom: var(--space-2xl); /* 48px по умолчанию */
}

/* --- Контейнеры тегов и чипов --- */
.alp_tags,
.alp_chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs); /* 8px */
}

/* ============================================================
   INTRO: HERO + ЗНАКОМСТВО (общий блок, фото Марии — sticky)
   ============================================================ */
.alp_intro {
  padding-top: var(--space-3xl);  /* 64px */
  padding-bottom: 0;              /* приземлившееся фото вплотную к карточкам (0px) */
}
.alp_intro__grid {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--grid-gutter);
}
.alp_intro__col {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 2;            /* текст ВСЕГДА поверх фото */
}
/* Обёртка визуала: на десктопе прозрачна — aside и marker ведут себя как раньше */
.alp_intro__visual { display: contents; }
.alp_intro__aside {
  flex: 0 0 480px;
  min-width: 0;          /* не даём фото распирать колонку текста */
  align-self: flex-start;/* высоту sticky-области задаёт JS (остановка по заголовку) */
  position: relative;
  z-index: 1;            /* фото под текстом */
}
/* Фото крупное, бледит ВЛЕВО под текст (не вправо, чтобы не было гор. скролла);
   текст рендерится поверх благодаря z-index. Залипает с верха секции. */
.alp_intro__photo {
  position: sticky;
  top: var(--space-3xl); /* 64px = padding-top секции → пин с нуля */
  width: 540px;
  margin-left: -60px;    /* 540 − 480 = выступ влево, правый край у границы контейнера */
  /* открепляется на 112px раньше нижней границы блока — карточки не двигаются */
  margin-bottom: 112px;
}
.alp_intro__photo img {
  width: 100%;
  height: auto;
}
/* Маркер «Мария Райдер» с завитком-стрелкой — не sticky, поверх всего */
.alp_intro__marker {
  position: absolute;
  top: 16px;          /* на 16px ниже верха фото */
  right: -24px;       /* стрелка выходит на 24px за правый край фото */
  z-index: 10;        /* выше всего остального */
  pointer-events: none;
}
.alp_intro__marker-arrow {
  display: block;
  width: 214px;       /* 428/2 (@2x) */
  height: auto;
}
.alp_intro__marker-label {
  position: absolute;
  top: calc(100% + 16px);  /* на 16px ниже низа стрелки */
  left: -144px;            /* базовая левая граница: на 144px левее левого края стрелки */
  transform: translateX(150%); /* сдвиг вправо на 1,5 ширины самого слова */
  white-space: nowrap;
  font-family: var(--font-caption);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #000;
}

/* --- Hero-контент --- */
.alp_hero__content {
  max-width: 660px;
}
.alp_hero__title {
  margin-bottom: var(--space-l); /* 32px */
  white-space: nowrap; /* держим заголовок в 2 строки (перенос только по <br>) */
}
.alp_hero__dynamic {
  white-space: nowrap;
}
/* Выделенное слово — болд + курсив, цвет задаётся inline (свой на каждую фразу) */
.alp_hero__dynamic .alp_accent-typed {
  font-weight: 700;
  font-style: italic;
}
/* Каретка: статичная, не мигает (по требованию) */
.alp_hero__caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 3px;
  background: var(--color-accent-magenta);
  vertical-align: -0.06em;
}
.alp_hero__cta {
  margin-bottom: var(--space-3xl); /* 64px */
}
.alp_hero__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 24px */
}
.alp_hero__who-text {
  max-width: 560px;
}

/* --- Знакомься: заголовок колонки 1–7, контент ниже колонки 2–6 --- */
.alp_meet {
  margin-top: var(--space-7xl); /* 160px воздуха от hero */
}
.alp_meet__title {
  margin-bottom: var(--space-6xl); /* 112px до «Мария Райдер» */
  max-width: 656px;                /* колонки 1–7 */
}
.alp_featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  text-align: left;
  margin-left: 96px; /* колонка 1 + гаттер */
  max-width: 464px;  /* колонки 2–6 */
}
.alp_featured__photo {
  display: none; /* показывается только на мобилке (sticky-фото там отключено) */
}
.alp_featured__name {
  margin-bottom: var(--space-xs);
}
.alp_featured__cta {
  align-self: flex-start;
  margin-top: var(--space-s);
}

/* ============================================================
   КАРТОЧКИ АМБАССАДОРОВ
   ============================================================ */
.alp_amb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--grid-gutter); /* 16px */
  row-gap: var(--space-2xl);      /* 48px */
  margin-bottom: var(--space-2xl);/* 48px до кнопки «Стать частью проекта» */
}
.alp_amb-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
.alp_amb-card__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 368 / 240;
  object-fit: cover;
  border-radius: var(--radius-m);
  margin-bottom: var(--space-s);
}
/* Имя — PT Sans Caption, КАПС, БЕЗ болда */
.alp_amb-card__name {
  font-family: var(--font-caption);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: var(--space-xs); /* 8px */
}
/* Описание — PT Sans Regular 18px, серый #7F939C */
.alp_amb-card__desc {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--color-medium-grey);
  margin-bottom: var(--space-s);
  flex: 1 1 auto;
}
.alp_amb-card__cta {
  margin-top: auto;
}
.alp_ambassadors {
  padding-bottom: var(--space-7xl); /* 160px до следующей секции */
}
.alp_ambassadors__cta {
  display: inline-flex;
  margin-top: 0;
}

/* ============================================================
   ЧТО ОТЛИЧАЕТ (12-колоночная сетка)
   ============================================================ */
/* «Что отличает»: заголовок → контент 8px */
.alp_features .alp_section__title {
  margin-bottom: var(--space-xs); /* 8px */
}
/* Межрядье 8px: в Figma 160 — это текст-в-текст, картинки (368) выше и
   добирают визуальный воздух сами, поэтому реальный gap небольшой. */
.alp_features__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* 8px */
}
.alp_feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
  align-items: center;
}
/* Текст слева (1–8), картинка справа (9–12).
   grid-row: 1 на обоих — иначе sparse-автораскладка уносит картинку
   в реверс-блоках во второй (лишний) ряд. */
.alp_feature__text {
  grid-row: 1;
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 16px заголовок→текст */
}
.alp_feature__text .alp_chips {
  margin-top: var(--space-s); /* +16 = 32px до чипов */
}
.alp_feature__img {
  grid-row: 1;
  grid-column: 9 / span 4;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* Текст справа (6–12), картинка слева (1–4) — одна колонка зазора */
.alp_feature--reverse .alp_feature__img {
  grid-column: 1 / span 4;
}
.alp_feature--reverse .alp_feature__text {
  grid-column: 6 / span 7;
}

/* Акцентные слова в заголовках — Bold Italic + цвет, без рамки */
.alp_accent {
  font-style: italic;
}
.alp_accent--magenta { color: var(--color-accent-magenta); }
.alp_accent--pink    { color: var(--color-accent-pink); }
.alp_accent--cyan    { color: var(--color-accent-cyan); }
.alp_accent--blue    { color: var(--color-accent-blue); }

/* Призыв «Хочешь стать амбассадором?» — текст слева, «?» справа */
.alp_features__cta {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
  align-items: center;
  margin-top: var(--space-xs); /* 8px, как межрядье */
}
.alp_features__cta-text {
  grid-row: 1;
  grid-column: 1 / span 5; /* колонки 1–5 (правило только для этого блока) */
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.alp_features__cta-btn {
  align-self: flex-start;
}
.alp_features__cta-img {
  grid-row: 1;
  grid-column: 6 / span 4; /* следующие 4 колонки */
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ============================================================
   КАК СОТРУДНИЧАЕМ (3×2, иконка слева + текст справа)
   ============================================================ */
.alp_collab__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--grid-gutter); /* 48 / 16 */
}
.alp_collab__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s); /* 16px */
  text-align: left;
}
.alp_collab__icon {
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
  object-fit: contain;
}
.alp_collab__item .alp_text {
  max-width: 180px;
}

/* ============================================================
   СЛОВО АВТОРАМ (видео)
   ============================================================ */
.alp_testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.alp_video-card {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--color-placeholder-grey);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-l);
  overflow: hidden;
  cursor: pointer;
}
.alp_video-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.alp_video-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.2);
  transition: background-color var(--transition);
}
.alp_video-card__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--color-white);
}
.alp_video-card:hover .alp_video-card__play {
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   ЧЕГО ДОСТИГЛИ (flip-карусель: 4 карточки целиком)
   ============================================================ */
.alp_carousel {
  position: relative;
}
/* Вьюпорт показывает ровно 4 карточки (4×272 + 3×16 = 1136).
   Паддинг даёт тени место (вертикально 28 > 24-радиус), margin компенсирует
   горизонталь, чтобы карточки вставали по краям контейнера. overflow прячет
   остальные карточки и обеспечивает бесконечную прокрутку. */
/* overflow: clip + clip-margin показывает тени карточек (28 > 24-радиус)
   за пределами вьюпорта, при этом прячет дальние карточки. */
.alp_carousel__viewport {
  overflow: clip;
  overflow-clip-margin: 28px;
}
.alp_carousel__track {
  display: flex;
  gap: var(--grid-gutter);
  will-change: transform;
}
.alp_carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-border-grey);
  transition: color var(--transition);
  z-index: 2;
}
.alp_carousel__arrow--prev { left: -44px; }
.alp_carousel__arrow--next { right: -44px; }
.alp_carousel__arrow:hover { color: var(--color-medium-grey); }
.alp_carousel__arrow:active { color: var(--color-brand); }
.alp_carousel__arrow:disabled { opacity: 0.4; cursor: not-allowed; }

.alp_flip-card {
  width: 272px;
  height: 360px;
  perspective: 1200px;
  border-radius: var(--radius-l);
  cursor: pointer;
  flex: 0 0 272px;
}
.alp_flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms ease;
  transform-style: preserve-3d;
}
.alp_flip-card:hover .alp_flip-card__inner,
.alp_flip-card:focus-visible .alp_flip-card__inner,
.alp_flip-card.alp_is-flipped .alp_flip-card__inner {
  transform: rotateY(180deg);
}
.alp_flip-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* Лицевая сторона */
.alp_flip-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Тексты прямо на картинке, без белой подложки.
   Снизу: подсказка 18/24 с отступом 16 от низа; имя 12/16 на 28px выше неё. */
.alp_flip-card__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  padding: 0 16px 16px;
  text-align: center;
}
.alp_flip-card__name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xsmall); /* 12px / 16 */
  line-height: var(--lh-xsmall);
  color: var(--color-black);
  margin-bottom: 28px; /* имя на 28px выше подсказки */
}
.alp_flip-card__hint {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-text); /* 18px */
  line-height: var(--lh-text);
  color: var(--color-black);
}
/* Оборот */
/* Оборот: 24px сверху → болд-заголовок 18/24 → 8px → текст-содержимое */
.alp_flip-card__back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px;
  text-align: left;
}
.alp_flip-card__ach-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-text); /* 18/24 */
  line-height: var(--lh-text);
  color: var(--color-black);
}
.alp_flip-card__ach {
  margin-top: var(--space-xs); /* 8px */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--color-black);
}
/* Автор внутри карточки: аватар 64 + имя-фамилия курсивом, отступ текста 16 */
.alp_flip-card__author-row {
  display: flex;
  align-items: center;
  gap: var(--space-s); /* 16px */
  margin-top: auto; /* прижать к низу */
}
.alp_flip-card__avatar {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
}
.alp_flip-card__author-name {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-text); /* 18/24 */
  line-height: var(--lh-text);
  color: var(--color-black);
}

/* ============================================================
   СТАНЬ АМБАССАДОРОМ (чеклист в 2 колонки + кнопка)
   ============================================================ */
.alp_join__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 32px между блоками */
}
.alp_join__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 16px заголовок→подзаголовок */
}
.alp_join__subtitle {
  margin: 0;
}
/* Чеклист — две колонки рядом */
.alp_checklist {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-s); /* 16px */
}
.alp_checklist__group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 24px заголовок→список */
}
.alp_checklist__group--narrow {
  flex: 0 0 368px;
}
.alp_checklist__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 16px между пунктами */
}
.alp_join__cta {
  align-self: flex-start;
  margin-top: var(--space-s); /* +16 = 48px от чеклиста до кнопки */
  position: relative;
  z-index: 1;                 /* кнопка выше стрелок */
}
/* Стрелки у кнопки — ПОД контентом (кнопка/чеклист их перекрывают) */
.alp_join__cta-slot {
  position: relative;
  align-self: flex-start;
}
.alp_join__arrow {
  position: absolute;
  width: 168px;               /* ×1,5 от прежних 110 → 165, округлено до кратного 8 */
  height: auto;
  pointer-events: none;
  z-index: 0;                 /* ниже кнопки и текста чеклиста */
}
.alp_join__arrow--left {
  /* остриё (правый-центр) ставим в левый-верхний угол кнопки и крутим вокруг него.
     top = −width/2, чтобы правый-центр (нос) остался на уровне верха кнопки. */
  right: 100%;
  top: -84px;
  transform-origin: right center;
  transform: rotate(42deg);   /* остриё смотрит вниз-вправо — в угол кнопки */
}
.alp_join__arrow--right {
  /* offset'ы пересчитаны под ширину 168, чтобы нос остался на прежнем месте */
  top: calc(50% + 46px);
  left: calc(100% + 13px);
  transform: translateY(-50%) rotate(208deg);
}
/* чеклист выше стрелок */
.alp_checklist {
  position: relative;
  z-index: 1;
}
.alp_checklist__item {
  position: relative;
  padding-left: calc(24px + var(--space-s));
  min-height: 24px;
  display: flex;
  align-items: center;
}
.alp_checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background-color: var(--color-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12.5 10 16.5 18 7.5' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================================
   ПОПАП АМБАССАДОРА (шаблон-заглушка; финальные стили — из Figma)
   ============================================================ */
.alp_modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alp_modal[hidden] {
  display: none;
}
.alp_modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.alp_modal__dialog {
  position: relative;
  width: calc(100% - 32px);
  max-width: 558px; /* 6 колонок десктопной сетки (6×80 + 5×16 ≈ 558) */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 40px;
  background: var(--color-white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-m); /* 24px между шапкой и контентом */
}
/* Обёртка крестика: по умолчанию прозрачна (крестик абсолютом в диалоге, как было).
   На узкой мобилке становится фиксированной шапкой с дивайдером. */
.alp_modal__topbar { display: contents; }
.alp_modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border-grey); /* Able по ДS */
  transition: color var(--transition);
  z-index: 1;
}
.alp_modal__close:hover {
  color: var(--color-medium-grey); /* Hover по ДS */
}
.alp_modal__close:active {
  color: var(--color-brand); /* Pressed по ДS */
}
/* Шапка попапа: фото + имя + регалии */
.alp_modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}
.alp_modal__photo {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--radius-pill); /* абсолютное скругление — круг */
}
.alp_modal__head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* 8px имя → регалии */
}
.alp_modal__name { margin: 0; }
.alp_modal__regalia {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-medium-grey);
}
/* Контент: абзацы с отступом 16px */
.alp_modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 16px между абзацами */
}
.alp_modal__body p {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--color-black);
}

/* ============================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ (fade-up на скролле) — ДОБАВЛЕНО, легко откатить:
   удалить этот блок + вызов initReveal() в main.js → вернётся как было.
   Класс .alp_reveal вешает JS, поэтому без JS всё видно сразу (не залипает).
   ============================================================ */
.alp_reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.alp_reveal.alp_is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .alp_reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}