/* ============================================================
   Эмоции Landing Page — Styles
   Imports shared styles; page-specific near-white monochrome theme.
   Все переопределения — только для этого лендинга.
   ============================================================ */

@import url('../../../shared/css/shared.css');

/* --- Токены палитры ---
   Базовые токены приходят из темы через shared/css/shared.css →
   assets/css/design-system.css. Локальное переопределение одно — плотность
   белой «вуали» поверх паттернов: на этой странице все оверлеи белые на 95%
   (в теме muted-вариант — 84%). Стили лендинга подключаются после темы,
   поэтому :root ниже перекрывает токен именно здесь. */
:root {
  --pattern-veil-muted: rgba(255, 255, 255, 0.95);
}

/* Старые оверлеи-дивы больше не нужны: подложка рисуется фоном самого блока
   (фон всегда под контентом — текст и фото не перекрываются). */
.hero__overlay,
.for-whom__overlay,
.instructor-card__overlay,
.price-card__overlay,
.cta__overlay,
.logos-eros__overlay,
.video-section__overlay {
  display: none;
}

/* Общая геометрия слоёв подложки: [белый оверлей, паттерн] */
.hero,
.for-whom__column--men,
.for-whom__column--women,
.video-section,
.price-card,
.cta {
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-blend-mode: normal, saturation;
}

/* ============================================================
   HERO — крупное название курса + тег под ним, без разделения
   ============================================================ */
.hero {
  display: block;
  height: auto;
  /* Hero — чистый белый без подложки: паттерн переехал на полосу с кнопкой
     «Записаться в группу» (.join-panel). */
  background: var(--color-background);
  padding: 128px 40px 104px;
  text-align: center;
}

.hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(96px, 15vw, 240px);
  font-weight: 700;
  line-height: 0.9;
  color: var(--color-foreground);
}

.hero__tagline {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-foreground-muted);
  max-width: 860px;
}

/* ============================================================
   JOIN PANEL — полоса с кнопкой «Записаться в группу»
   Фон перенесён с hero: оверлей 0.975 белым → серый слой в режиме
   saturation (alpha 0.5 = обесцвечивание наполовину) → pattern-dark.
   Прозрачность задана явно, а не токеном темы: на проде
   --pattern-veil может быть ещё 0.84. */
.join-panel {
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  /* Полоса отделена линиями с двух сторон: соседние секции белые,
     без нижней линии подложка обрывалась «в воздухе». */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.join-panel__cta:hover {
  background: var(--color-foreground);
  color: var(--color-foreground-light);
}

/* ============================================================
   FOR WHOM — светлые колонки вместо цветных
   ============================================================ */
.for-whom__column--men {
  background-color: var(--color-background);
  background-image: linear-gradient(var(--pattern-veil), var(--pattern-veil)), url('../../../shared/images/pattern-teal.webp');
  border-right: 1px solid var(--color-border);
}

.for-whom__column--women {
  background-color: var(--color-background-muted);
  background-image: linear-gradient(var(--pattern-veil-muted), var(--pattern-veil-muted)), url('../../../shared/images/pattern-warm.webp');
}

.for-whom__icon,
.for-whom__column--men .for-whom__icon {
  color: var(--color-primary);
}

.for-whom__column-title {
  color: var(--color-foreground);
}

.for-whom__description {
  color: var(--color-foreground-muted);
}

.for-whom__card-title {
  color: var(--color-foreground);
}

/* ============================================================
   VIDEO — светлая секция
   ============================================================ */
.video-section {
  background-color: var(--color-background-muted);
  background-image: linear-gradient(var(--pattern-veil-muted), var(--pattern-veil-muted)), url('../../../shared/images/pattern-video.webp');
}

.video-slider__dot {
  background: rgba(35, 32, 39, 0.15);
}

/* ============================================================
   AUTHORS / PROGRAM / RESULTS — светлые карточки с рамкой
   ============================================================ */
.author-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

/* ============================================================
   INSTRUCTORS — две белые колонки без подложек
   Паттерны сняты: секция стоит между белыми «Почему наш курс?» и
   «Отзывы», фактуры здесь только дробили ряд (§8 — подложки для крупных
   блоков, не для карточек-колонок). Колонки разделяет шов 1px.
   ============================================================ */
.instructor-card--oleg {
  background-color: var(--color-background);
  background-image: none;
  border-right: 1px solid var(--color-border);
}

.instructor-card--katya {
  background-color: var(--color-background);
  background-image: none;
}

/* ============================================================
   REVIEWS — равная сетка 2×3 (все ячейки одного размера) + кнопка
   ============================================================ */
.reviews__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
  align-items: stretch;
}

.reviews__actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.review-card {
  /* На треть светлее базового muted: color-mix берёт 2/3 #F7F6F5 и
     1/3 белого → #FAF9F8. Карточка остаётся отличимой от белой страницы,
     но перестаёт читаться серой плашкой. */
  background: color-mix(in srgb, var(--color-background-muted) 67%, #ffffff);
  border: 1px solid var(--color-border);
}

.review-card__title {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-foreground);
}

/* Автор прижат к низу ячейки, рядом — аватар */
.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  /* Ч/б аватар: цветные снимки выбивались из монохромной гаммы */
  filter: grayscale(1);
}

.reviews-group__button {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.reviews-group__button:hover {
  background: var(--color-primary);
  color: var(--color-foreground-light);
}

.price-card {
  /* Фон как у «Эмоциональное развитие» (CTA): оверлей 0.975 белым →
     серый слой в режиме saturation (alpha 0.5 = обесцвечивание наполовину)
     → pattern-dark. Раньше был veil из токена темы (на проде может быть 0.84). */
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  border: 1px solid var(--color-border);
}

.price-card__tier {
  color: var(--color-foreground);
}

.price-card__description {
  color: var(--color-foreground-muted);
}

.price-card__button {
  background: var(--color-primary);
  color: var(--color-foreground-light);
}

.price-card__button:hover {
  background: var(--color-primary-hover);
}

.price-card__contact {
  color: var(--color-foreground-muted);
}

/* ============================================================
   CTA — светлая полоса
   ============================================================ */
.cta {
  /* Фон как у «Почему наш курс?»: оверлей 0.975 белым → серый слой
     в режиме saturation (alpha 0.5 = обесцвечивание наполовину) →
     pattern-dark. Раньше здесь был muted-фон с тёплым pattern-warm. */
  background-color: var(--color-background);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   LESSONS — список уроков аккордеоном (динамика: курс на сайте)
   Секция повторяет рецепт FAQ дизайн-системы (§9.10):
   монохромная почти белая гамма, компонент .accordion-item.
   Содержимое собирает плагин satway-club из md-файлов урока —
   тот же алгоритм, что и дерево на /courses/{slug}/lessons/.
   ============================================================ */
.lessons {
  /* Белый фон: секция идёт между «Содержание курса» и «Почему наш курс?»,
     которые тоже белые, — серый островок в середине рвал страницу.
     Карточка тем (.lessons__topics) белая с рамкой 1px, поэтому на белом
     фоне не теряется; бейдж номера остаётся на muted — это рецепт
     бейджа (§9.8). Верхний паддинг меньше базовых 80px: обе секции
     белые, границы между ними нет, и 80+80 давали лишние 160px пустоты. */
  background: var(--color-background);
  padding: 48px 80px 80px;
  text-align: center;
}

.lessons__title {
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 700;
  color: var(--color-foreground);
}

.lessons__subtitle {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-foreground-muted);
  margin-top: 16px;
}

.lessons__list {
  max-width: 672px;
  margin: 48px auto 0;
  text-align: left;
}

/* Название урока — тот же кегль и вес, что у названий пунктов в колонках
   «Содержание курса» (Yanone 24px/400). Селектор ограничен .lessons__list:
   аккордеон FAQ остаётся на базовых 22px из shared.css. */
.lessons__list .accordion-item__question {
  font-size: 24px;
  font-weight: 400;
}

/* Строка урока: тоггл аккордеона + плашка «Пробный урок» справа. */
.lessons__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lessons__head .accordion-item__header {
  flex: 1 1 auto;
  min-width: 0;
}

/* Плашка-кнопка пробного урока: ведёт на страницу урока (/lessons/{N}/),
   поэтому это ссылка, а не элемент аккордеона. Зелёная — это «доступно». */
.lessons__trial {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-success, #23803f);
  background: var(--color-success, #23803f);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-foreground-light);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.lessons__trial:hover {
  color: var(--color-foreground-light);
  background: var(--color-success-hover, #1c6a33);
  border-color: var(--color-success-hover, #1c6a33);
}

/* Темы урока — одна колонка: белая карточка, строки с номером-маркером
   и тонкими разделителями 1px (дизайн-система §9.5, §6). */
.lessons__outline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lessons__section-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-foreground-muted);
  margin: 0 0 8px;
}

.lessons__topics {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

.lessons__topic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.lessons__topic + .lessons__topic {
  border-top: 1px solid var(--color-border-light);
}

.lessons__topic-index {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-foreground-muted);
  background: var(--color-background-muted);
  border: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

.lessons__topic-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-foreground-alpha);
}

/* Урок без материалов (нет секций/подзаголовков): статичная строка
   вместо аккордеона — раскрывать нечего. */
.lessons__static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.lessons__list .lessons__static .accordion-item__question {
  font-size: 24px;
  font-weight: 400;
}

/* ============================================================
   FOOTER — светлый
   ============================================================ */
.footer {
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1300px) {
  .hero {
    padding: 96px 32px 80px;
  }

  .hero__tagline {
    font-size: 26px;
  }

  .lessons {
    padding: 40px 48px 64px;
  }

  .lessons__title {
    font-size: 40px;
  }
}

@media (max-width: 960px) {
  .hero {
    padding: 64px 24px 56px;
  }

  .hero__inner {
    gap: 20px;
  }

  .hero__eyebrow {
    font-size: 15px;
    letter-spacing: 0.18em;
  }

  .hero__title {
    font-size: clamp(72px, 22vw, 140px);
  }

  .hero__tagline {
    font-size: 21px;
  }

  .for-whom__column--men {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .instructor-card--oleg {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .reviews__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
  }

  .lessons {
    padding: 32px 24px 48px;
  }

  .lessons__title {
    font-size: 36px;
  }

  .lessons__subtitle {
    font-size: 18px;
  }

  .lessons__list {
    margin-top: 32px;
  }
}

/* ============================================================
   ABOUT (О чём?) — текстовый блок
   Секция белая (осознанное отклонение от серого фона .authors-word
   в shared.css): блок идёт сразу после hero и читается как разворот,
   а не как ещё одна карточная секция. Текст — столбец 672px по
   центру (§9.4), лид — Yanone 30 muted (§4), абзацы — Roboto 16/1.7.
   ============================================================ */
.authors-word {
  background: var(--color-background);
}

.about-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 672px;
  margin: 48px auto 0;
  text-align: left;
}

.about-text__lead {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-foreground-muted);
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-body p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-foreground-alpha);
}

@media (max-width: 960px) {
  .about-block {
    margin-top: 32px;
  }

  .about-text__lead {
    font-size: 21px;
  }
}

/* ============================================================
   PROGRAM (Содержание курса) — раскладка как у «Узнаёте себя?»
   Две колонки не шире 500px (сетка 1000px по центру), равные ряды
   через subgrid, центрированный текст, тонкие разделители 1px,
   без карточек и значков. Отличие одно: фон белый, без паттерна.
   ============================================================ */
.program {
  background: var(--color-background);
  /* Full-bleed как у реестра «Узнаёте себя?»: без боковых паддингов, чтобы
     сетка колонок могла дойти до 1000px на планшете (в shared.css 80px
     со всех сторон). */
  padding: 80px 0;
}

.program__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Три ряда пунктов: заголовки «Теория»/«Практика» и блок-примечание убраны. */
  grid-template-rows: repeat(3, auto);
  row-gap: 0;
  /* Базовый column-gap: 24px из shared.css снимаем: разделяет шов 1px,
     как в реестре «Узнаёте себя?» — колонки ровно по 500px. */
  column-gap: 0;
  max-width: 1000px;
  margin: 48px auto 0;
}

/* Колонка = три ряда пунктов; subgrid держит равные высоты слева и справа,
   как в реестре «Узнаёте себя?». */
.program-block {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  background: none;
  background-image: none;
  padding: 0 48px;
  gap: 0;
  text-align: center;
  border: none;
}

.program-block:first-child {
  border-right: 1px solid var(--color-border);
}

/* Первый ряд колонок открывает шов под заголовком секции */
.program-card:first-child {
  border-top: none;
}

.program-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-light);
}

.program-card__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-foreground);
}

.program-card__description {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-foreground-alpha);
}

@media (max-width: 1300px) {
  .program {
    padding: 64px 0;
  }

  .program-block {
    padding: 0 32px;
  }
}

@media (max-width: 960px) {
  .program {
    padding: 48px 0;
  }

  .program__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 0;
    margin-top: 32px;
  }

  .program-block {
    /* В стопке общие треки не нужны — колонки идут одна под другой. */
    grid-template-rows: none;
    grid-row: auto;
    padding: 0 24px;
  }

  .program-block:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* --- «Почему наш курс?» — фон как у «Узнаёте себя?» ---
   Тот же приём: белый veil (§8) + серый слой в режиме saturation,
   картинка обесцвечена. Отличие от соседей: pattern-video (на странице
   он лежит только в видео-секции, на сером фоне и с muted-veil),
   поэтому рядом с «Содержанием курса» фактура читается иначе.
   Правка в CSS лендинга: .results общий, в shared.css трогать нельзя. */
.results {
  background-color: var(--color-background);
  /* Фон тот же, что у полосы с кнопкой «Записаться в группу»: оверлей
     0.975 белым → серый слой в режиме saturation (alpha 0.5 = обесцвечивание
     наполовину) → pattern-dark. Значения заданы явно, а не токеном темы
     (на проде --pattern-veil может быть ещё 0.84). */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../../../shared/images/pattern-dark.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  /* Линии сверху и снизу — как у других полос с подложкой (§6). */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   FOR-WHOM (Узнаёте себя?) — две центрированные колонки
   Пункты разделены тонкими линиями, без карточек и нумерации, текст
   по центру в обеих колонках. Подложка — паттерн под veil, как у hero
   (§8); выбран pattern-coral: pattern-dark занят hero, teal/warm —
   колонками этого блока в базовой вёрстке, pattern-video — видео-секцией.
   ============================================================ */
.for-whom--registry {
  background-color: var(--color-background);
  /* Третий слой — серый в режиме saturation: он забирает насыщенность
     у паттерна, оставляя его яркость, поэтому картинка читается ч/б.
     Прозрачность оверлея задана явно (0.975), а не токеном темы:
     на проде --pattern-veil может быть ещё 0.84. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)),
    linear-gradient(var(--color-foreground-muted), var(--color-foreground-muted)),
    url('../../../shared/images/pattern-coral.webp');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-blend-mode: normal, saturation;
  /* Линии сверху и снизу: подложка — полоса на белой странице,
     без них она обрывалась «в воздухе» (как у .join-panel). */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 80px 0;
}

/* Сетка строк общая для двух колонок (subgrid): три ряда пунктов.
   Один трек = один ряд слева и справа, поэтому высоты ячеек слева
   и справа совпадают, а разделительные линии идут по одной оси. */
.for-whom--registry .for-whom__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  row-gap: 0;
  /* Пара колонок — максимум 1000px, то есть не шире 500px каждая;
     блок центрируется, подложка секции остаётся во всю ширину. */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  /* Базовый margin-top: 48px из shared.css задавал воздух под подзаголовком;
     здесь он сохраняется явно, а вертикальные паддинги колонок убраны —
     иначе воздух дублировался и сверху, и снизу. */
  margin-top: 48px;
}

/* Колонки прозрачные: подложка секции видна целиком, как в hero */
.for-whom--registry .for-whom__column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  background: none;
  background-image: none;
  /* Вертикальных паддингов нет: воздух даёт margin-top сетки (сверху)
     и padding-bottom секции (снизу). */
  padding: 0 48px;
  gap: 0;
  text-align: center;
}

.for-whom--registry .for-whom__column--men {
  border-right: 1px solid var(--color-border);
}

/* Первый ряд колонок открывает шов под заголовком секции */
.for-whom--registry .for-whom__card:first-child {
  border-top: none;
}

.for-whom--registry .for-whom__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-light);
}

.for-whom--registry .for-whom__card-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-foreground);
}

.for-whom--registry .for-whom__card-text {
  font-size: 15px;
  line-height: 1.6;
  /* На подложке — графит с alpha, а не muted: veil добавляет ~10 единиц
     тёплого тона, и приглушённый серый на нём теряет контраст (§3). */
  color: var(--color-foreground-alpha);
}

@media (max-width: 1300px) {
  .for-whom--registry .for-whom__column {
    padding: 0 32px;
  }
}

@media (max-width: 960px) {
  .for-whom--registry {
    padding: 48px 0;
  }

  .for-whom--registry .for-whom__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-top: 32px;
  }

  .for-whom--registry .for-whom__column {
    /* В стопке общие треки не нужны — колонки идут одна под другой. */
    grid-template-rows: none;
    grid-row: auto;
    padding: 0 24px;
  }
  .for-whom--registry .for-whom__column--men {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}