/*
  Лендинг (Landing 01). Порядок блоков и все размеры — из прототипа
  «Прототип/Roxy-repetitor Landing.dc.html».
*/

/* --- Хиро с фирменным градиентом ------------------------------------------ */

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-gradient-from) 0%, var(--color-gradient-to) 100%);
}

/*
  Круги и кольца торчат далеко за правый край, и обрезать их нужно.
  Но overflow на самом .hero сломал бы прилипание шапки, которая внутри него:
  sticky не работает, если у предка есть overflow. Поэтому обрезаем не хиро,
  а отдельный слой с декором — он лежит под содержимым и ни на что не влияет.
*/
.hero__decor-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Три декоративных круга из прототипа: блик и два кольца справа. */
.hero__decor { position: absolute; border-radius: var(--radius-circle); }
.hero__decor--glow {
  top: -120px; right: -80px; width: 520px; height: 520px;
  background: rgba(255, 255, 255, 0.16);
  filter: blur(10px);
}
.hero__decor--ring-outer {
  top: 40px; right: -140px; width: 760px; height: 260px;
  border: 26px solid rgba(191, 228, 245, 0.3);
  transform: rotate(-18deg);
}
.hero__decor--ring-inner {
  top: 160px; right: -200px; width: 820px; height: 220px;
  border: 14px solid rgba(51, 181, 234, 0.35);
  transform: rotate(-14deg);
}

.hero__body {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.hero__text { flex: 1 1 460px; min-width: 320px; padding: 36px 0 60px; }

.hero__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  margin: 0 0 20px;
  max-width: 520px;
}

.hero__lead {
  color: var(--color-text-inverse-secondary);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin: 0 0 28px;
  max-width: 460px;
}

.hero__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.hero__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-inverse);
  font-size: var(--font-size-body-lg);
}

.hero__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-circle);
  background: var(--color-surface-accent);
  flex-shrink: 0;
}

.hero__art {
  flex: 1 1 420px;
  min-width: 300px;
  position: relative;
  min-height: 460px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Блок «Записаться сейчас» поверх границы хиро ------------------------- */

.cta-panel {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  transform: translateY(60px);
}

.cta-panel__tab {
  height: 52px;
  width: 220px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
}

.cta-panel__card {
  background: var(--color-surface-inverse);
  border-radius: 0 var(--radius-block) var(--radius-block) var(--radius-block);
  padding: 48px;
  box-shadow: 0 8px 32px rgba(12, 34, 51, 0.16);
}

.cta-panel__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0 0 32px;
  max-width: 640px;
}

.cta-panel__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
}

.cta-panel__points p {
  color: var(--color-surface-accent);
  font-size: var(--font-size-body-lg);
  line-height: 1.55;
  margin: 0;
}

.cta-panel__actions { display: flex; justify-content: center; }

.cta-panel__button {
  width: 100%;
  max-width: 460px;
  height: 56px;
  font-size: var(--font-size-body-lg);
}
.cta-panel__button:hover { transform: translateY(-2px); }

.hero__tail { height: 110px; }

/* --- Общее для секций ----------------------------------------------------- */

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 0;
}

.section__title {
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  margin: 0 0 48px;
}

.grid { display: grid; gap: 24px; }
.grid--languages { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--formats { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--teachers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--plans { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --- Языки ---------------------------------------------------------------- */

.language-card {
  background: var(--color-surface);
  border-radius: var(--radius-block);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(12, 34, 51, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.language-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(12, 34, 51, 0.12);
}

/*
  На месте флага в прототипе стоял image-slot с картинкой. В базе у языка
  поле flag_url пустое, поэтому в кружке того же размера стоит код языка.
*/
.language-card__flag {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: var(--radius-circle);
  background: var(--color-surface-accent);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.language-card__name {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 8px;
}

.language-card__subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

.language-card__levels { font-size: var(--font-size-small); color: var(--color-link); }

/* --- Форматы занятий (услуги) --------------------------------------------- */

.format-card {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-block);
  padding: 32px;
}

/* Квадрат из прототипа: там была римская цифра, здесь — длительность из API. */
.format-card__badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card);
  background: var(--color-surface-accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface-inverse);
}

.format-card__name {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 12px;
}

.format-card__desc {
  font-size: var(--font-size-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 16px;
}

.format-card__price {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 12px;
}

.format-card__more { font-size: var(--font-size-body); }

/* --- Как проходят занятия ------------------------------------------------- */

.steps {
  background: var(--color-surface-brand);
  margin-top: 100px;
  padding: 100px 24px;
}

.steps__inner { max-width: 1200px; margin: 0 auto; }

.steps__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  margin: 0 0 56px;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.steps__num {
  font-size: var(--font-size-step-num);
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 12px;
}

.steps__text {
  color: var(--color-text-inverse);
  font-size: var(--font-size-body-lg);
  line-height: 1.5;
  margin: 0;
  max-width: 220px;
}

/* --- Репетиторы -------------------------------------------------------- */

.teacher-card {
  background: var(--color-surface);
  border-radius: var(--radius-block);
  padding: 28px;
  box-shadow: 0 8px 32px rgba(12, 34, 51, 0.08);
}

.teacher-card__photo {
  width: 88px;
  height: 88px;
  margin-bottom: 16px;
  border-radius: var(--radius-circle);
  background: var(--color-surface-accent);
  color: var(--color-text-primary);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.teacher-card__name {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 4px;
}

.teacher-card__info { font-size: var(--font-size-body); color: var(--color-text-secondary); margin: 0 0 14px; }

.teacher-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  background: var(--color-surface-subtle);
  color: var(--color-surface-inverse);
  font-size: var(--font-size-tag);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.teacher-card__more {
  font-size: var(--font-size-body);
  margin-top: 14px;
  display: inline-block;
  color: var(--color-link);
}

.teacher-card__bio {
  margin: 14px 0 0;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.teacher-card__bio[hidden] { display: none; }

/* --- Стоимость ------------------------------------------------------------ */

.plan-card {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  border-radius: var(--radius-block);
  padding: 36px;
  position: relative;
  box-shadow: 0 8px 32px rgba(12, 34, 51, 0.08);
}

/* Популярный тариф в прототипе — тёмная карточка с фиолетовой кнопкой. */
.plan-card--popular {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.plan-card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--color-button);
  color: var(--color-button-text);
  font-size: var(--font-size-tag);
  font-weight: var(--font-weight-semibold);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.plan-card__name {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 20px;
}

.plan-card__price {
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  margin-bottom: 4px;
}

.plan-card__term { font-size: var(--font-size-body); opacity: 0.7; margin-bottom: 24px; }

.plan-card__features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card__features li { display: flex; gap: 10px; font-size: var(--font-size-body); line-height: 1.5; }

.plan-card__button { width: 100%; height: 52px; }

/* --- Отзывы --------------------------------------------------------------- */

.reviews__viewport { overflow-x: hidden; overflow-y: visible; padding: 20px 0; }

.reviews__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: reviewsScroll 30s linear infinite;
}
.reviews__track:hover { animation-play-state: paused; }

@keyframes reviewsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.review-card {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-block);
  padding: 32px;
  flex: 0 0 340px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.review-card:hover {
  transform: scale(1.08);
  box-shadow: 0 20px 48px rgba(12, 34, 51, 0.18);
  background: var(--color-surface);
  position: relative;
  z-index: 2;
}

.review-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.review-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  background: var(--color-surface-accent);
  color: var(--color-text-primary);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-card__name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-button); }
.review-card__meta { font-size: var(--font-size-small); color: var(--color-text-secondary); }

.review-card__text {
  font-size: var(--font-size-body);
  color: var(--color-surface-inverse);
  line-height: 1.6;
  margin: 0 0 14px;
}

.review-card__stars { color: var(--color-button); font-size: var(--font-size-button); }

/* --- Частые вопросы ------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 2px; }

.faq__item {
  background: var(--color-surface-subtle);

  border-radius: var(--radius-card-lg);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq__question {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  text-align: left;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-surface-inverse);
}

.faq__icon { font-size: var(--font-size-lead); color: var(--color-text-secondary); flex-shrink: 0; }

.faq__answer {
  padding: 0 24px 22px;
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.faq__answer[hidden] { display: none; }

/* --- Нижний призыв ------------------------------------------------------- */

.closing { background: var(--color-surface); padding: 100px 24px; }

.closing__card {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--color-surface-inverse);
  border-radius: var(--radius-block);
  padding: 56px;
  position: relative;
  overflow: hidden;
}

.closing__decor {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: var(--radius-circle);
  background: rgba(51, 181, 234, 0.12);
}

.closing__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  margin: 0 0 32px;
  position: relative;
  max-width: 620px;
}

.closing__button { position: relative; height: 56px; padding: 0 32px; font-size: var(--font-size-body-lg); }

/* --- Заглушки под карточки ------------------------------------------------ */

.skeleton-card { border-radius: var(--radius-block); }
.skeleton-card--language { height: 208px; }
.skeleton-card--format { height: 260px; }
.skeleton-card--teacher { height: 246px; }
.skeleton-card--plan { height: 388px; }

@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none; }
  .reviews__viewport { overflow-x: auto; }
}

/* --- Узкий экран ---------------------------------------------------------- */

/*
  Порог тот же, что в base.css, — 768px. Настольная версия не меняется.
*/

@media (max-width: 767px) {
  /* --- Хиро --------------------------------------------------------------- */

  .hero__body { padding: 16px 16px 0; gap: 16px; }
  .hero__text { padding: 24px 0 40px; min-width: 0; }

  /*
    Заголовок в 60px не помещается: слово «иностранных» само по себе шире
    экрана, и страница получала 41px прокрутки вбок. Кегль взят из токенов —
    тот, которым набраны заголовки разделов.
  */
  .hero__title { font-size: var(--font-size-section-title); }

  /*
    Картинка хиро на телефоне не нужна ростом в 460px: она отодвигает вниз
    всё остальное. Блок остаётся на месте, уменьшается только его высота.
  */
  .hero__art { min-width: 0; min-height: 260px; }

  /* --- Блок «Записаться сейчас» ------------------------------------------- */

  .cta-panel { padding: 0 16px; transform: translateY(40px); }
  .cta-panel__card { padding: 24px; }
  .cta-panel__title { font-size: var(--font-size-subhead); margin-bottom: 24px; }
  .cta-panel__points { gap: 16px; margin-bottom: 24px; }
  .cta-panel__tab { width: auto; max-width: 100%; padding: 0 20px; }
  .hero__tail { height: 70px; }

  /* --- Секции ------------------------------------------------------------- */

  .section { padding: 56px 16px 0; }
  .section__title { font-size: var(--font-size-subhead); margin-bottom: 28px; }
  .grid { gap: 16px; }

  /*
    Карточки перестраиваются в одну колонку сами — minmax(280px, 1fr) шире
    экрана за вычетом полей. Правило нужно для 320px, где иначе колонка
    остаётся шире экрана.
  */
  .grid--languages,
  .grid--formats,
  .grid--teachers,
  .grid--plans { grid-template-columns: 1fr; }

  .language-card,
  .format-card { padding: 24px; }

  .plan-card { padding: 28px; }
  .plan-card__price { font-size: var(--font-size-page-title); }

  .steps { margin-top: 56px; padding: 56px 16px; }
  .steps__title { font-size: var(--font-size-subhead); margin-bottom: 32px; }
  .steps__grid { grid-template-columns: 1fr; gap: 24px; }
  .steps__text { max-width: none; }

  /*
    Ссылки «Подробнее» были высотой 20–22px: в такую цель пальцем попадают
    через раз. Высота доведена до 44px — это размер кнопок в той же шапке.
  */
  .format-card__more,
  .teacher-card__more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Лента отзывов: карточка шириной 340px шире экрана. */
  .review-card { flex-basis: 280px; padding: 24px; }

  .faq__question { padding: 18px 16px; gap: 12px; }
  .faq__answer { padding: 0 16px 18px; }

  .closing { padding: 56px 16px; }
  .closing__card { padding: 28px; }
  .closing__title { font-size: var(--font-size-subhead); margin-bottom: 24px; }
  .closing__button { width: 100%; padding: 0 20px; }
}

/* Плашка учебного режима */
.demo-notice {
  padding: 8px 16px;
  background: var(--color-neutral-900);
  color: var(--color-neutral-0);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}