/*
 * Стили лендинга (экран Л-1). Подключается после base.css и дополняет его:
 * сброс, контейнер, логотип, кнопки и блок ошибки общие у всех чистовых
 * страниц и лежат там.
 *
 * Отдельный файл, а не дописка в styles.css: там стили черновика, и правило 4
 * из docs/frontend-rules.md разводит их намеренно — чтобы черновик продолжал
 * работать, пока чистовые страницы делаются по одной.
 *
 * ЦВЕТА, ШРИФТЫ И РАЗМЕРЫ — ТОЛЬКО ИЗ tokens.css. Ни одного hex-кода,
 * ни одного font-family и ни одного кегля мимо переменных.
 *
 * Прототип нарисован не по шкале: у него h1 68px, h2 44px, заголовки карточек
 * 19–22px, подписи 12 и 15px, кнопки 17px. В typeScale таких ступеней нет,
 * поэтому каждое такое место взято ближайшей ступенью шкалы. Отступы так же:
 * шаги 26, 28, 36, 40, 44, 56 и 88px в spacing не объявлены и сведены
 * к ближайшим --space-*. Подбирать «похожее» значение мимо токенов нельзя —
 * сверить его потом не с чем (tokens.css, список пропусков в конце файла).
 *
 * Размеры блоков — ширина контейнера, ширина строки, высота фотографий,
 * диаметр плавающей кнопки, толщина линий — дизайн-система не объявляла.
 * Раньше они стояли здесь числами; теперь собраны в tokens.css, в разделе
 * «РАЗМЕРЫ РАСКЛАДКИ», с пометкой, что источник у них прототип, а не система.
 *
 * Числами в этом файле остаются только брейкпоинты: пользовательские свойства
 * в media-запросах не работают — это ограничение CSS, а не пробел в токенах.
 */

html { scroll-behavior: smooth; }

/*
 * Шапка липкая, поэтому у якорей верхнего меню есть запас: без него блок
 * приезжает под шапку и его заголовок не виден.
 */
html { scroll-padding-top: var(--space-24); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================ ОБЩЕЕ ДЛЯ СЕКЦИЙ */

.section {
  padding: var(--space-24) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.section__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h2-weight);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  text-transform: uppercase;
  margin: 0 0 var(--space-12);
}

.section__title--flush { margin-bottom: 0; }

.accent { color: var(--color-accent); }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.section__lead {
  margin: 0;
  max-width: var(--measure-sm);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ============================================================ HERO */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-24) 0;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h1-weight);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
  text-transform: uppercase;
  margin: var(--space-6) 0 0;
  text-wrap: pretty;
}

.hero__lead {
  margin: var(--space-8) 0 0;
  max-width: var(--measure-lg);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-text-body);
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-8);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
}

.stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.stat__label {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
}

.hero__media { min-width: 0; }

/*
 * Место под фото. В прототипе это компонент image-slot с подписью-плейсхолдером
 * и без привязанного изображения; своих файлов у проекта нет, поэтому здесь
 * та же рамка с той же подписью.
 */
.photo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-neutral-25);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

/* Высоты фотоблоков — из прототипа, через --media-height-*. */
.photo--hero { height: var(--media-height-xl); }

/* ============================================================ КАК ЭТО РАБОТАЕТ */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.step {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-6);
}

.step__n {
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-accent);
}

.step__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  margin: var(--space-3) 0 var(--space-2);
}

.step__body {
  margin: 0;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
}

/* ============================================================ УСЛУГИ */

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-12);
}

.service {
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.service__name {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  margin: 0;
}

.service__price {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-link);
  white-space: nowrap;
}

.service__body {
  margin: 0;
  flex: 1;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
}

.service__meta {
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-text-subtle);
}

.service__button {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* ============================================================ МАСТЕРА */

.masters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.master {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.master__photo {
  height: var(--media-height-md);
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  background: var(--color-neutral-25);
  display: block;
}

/* Аватара у мастера может не быть — avatar_url приходит пустым. */
.master__photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width) dashed var(--color-border-strong);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.master__name {
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  margin: 0;
}

.master__role {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.master__services {
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--color-text-subtle);
  margin-top: var(--space-2);
}

/* ============================================================ ПРЕИМУЩЕСТВА */

.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-16);
}

.benefit {
  display: grid;
  grid-template-columns: var(--column-sm) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-8) 0;
}

.benefit__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h3-weight);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h3-tracking);
  color: var(--color-accent);
  margin: 0;
}

.benefit__body {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-body);
}

/* ============================================================ О САЛОНЕ */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}

.about__media {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4);
  height: var(--media-height-lg);
  min-width: 0;
}

.photo--about { height: 100%; }

.about__lead {
  margin: var(--space-6) 0 0;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-text-body);
}

.about__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-muted);
}

/* ============================================================ FAQ */

.faq {
  display: grid;
  grid-template-columns: var(--column-md) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.faq__item {
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-6) 0;
}

.faq__question {
  width: 100%;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: baseline;
  font-family: var(--font-heading);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-text-body);
}

.faq__question[aria-expanded="true"] { color: var(--color-text); }

.faq__sign {
  font-family: var(--font-mono);
  font-size: var(--text-time-size);
  line-height: var(--text-time-line);
  font-weight: var(--font-weight-regular);
  color: var(--color-accent);
}

.faq__answer {
  margin: var(--space-3) 0 0;
  max-width: var(--measure-xl);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text-muted);
}

/* ============================================================ CTA-БАННЕР */

.cta {
  margin: var(--space-12) 0 var(--space-24);
  background: var(--color-accent);
  border-radius: var(--radius-xl);
  padding: var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.cta__text { flex: 1 1 var(--measure-lg); }

/*
 * В прототипе заголовок баннера крупнее секционных (48 против 44). Ступени 48
 * в шкале нет, поэтому баннер взят ступенью h1, а секции остались на h2 —
 * так сохраняется хотя бы порядок величин.
 */
.cta__title {
  font-family: var(--font-heading);
  font-weight: var(--text-h1-weight);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
  text-transform: uppercase;
  color: var(--color-text-on-accent);
  margin: 0;
}

.cta__title-accent { color: var(--color-primary-100); }

/*
 * Абзац в прототипе — белый с прозрачностью 0.85. Полупрозрачного белого
 * в токенах нет, взят светлый оттенок акцентной шкалы: он же стоит во второй
 * строке заголовка этого же баннера.
 */
.cta__lead {
  margin: var(--space-6) 0 0;
  max-width: var(--measure-md);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--color-primary-100);
}

/* ============================================================ ФУТЕР */

.footer {
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

.footer__inner { padding-top: var(--space-16); padding-bottom: var(--space-12); }

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
}

.footer__about {
  margin: var(--space-3) 0 0;
  max-width: var(--measure-xs);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-neutral-500);
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.footer__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-body);
}

.footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--color-text-subtle);
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.footer__legal a { color: var(--color-neutral-500); }
.footer__legal a:hover { color: var(--color-link); }

/* ============================================================ ПЛАВАЮЩАЯ КНОПКА */

/*
 * В прототипе у кнопки тень rgba(78,147,165,0.38). Токена тени в системе нет
 * (tokens.css, пункт 5 списка пропусков), и раздел «Сетка» разрешает тени
 * только модалкам и тосту — поэтому здесь её нет.
 */
.floating {
  position: fixed;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: 40;
  width: var(--size-floating);
  height: var(--size-floating);
  border-radius: var(--radius-full);
  background: var(--color-button);
  color: var(--color-button-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.floating:hover {
  background: var(--color-button-hover);
  color: var(--color-button-text);
}

/* ============================================================ ЗАГЛУШКИ И ОШИБКИ */

/*
 * Заглушка на время загрузки: пока идут GET /api/services и GET /api/masters,
 * на месте карточек стоят серые полосы, а не пустота.
 */
.skeleton {
  display: block;
  background: var(--color-neutral-100);
  border-radius: var(--radius-xs);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

.skeleton--title { height: var(--space-6); width: 60%; }
.skeleton--line { height: var(--space-4); width: 100%; }
.skeleton--short { width: 75%; }
.skeleton--meta { height: var(--space-3); width: 45%; }
/* Ширины заглушек — доли колонки, а не размеры: они лишь занимают место
   до ответа сервера, и подгонять их под кегль текста незачем. */
.skeleton--button { height: var(--space-12); width: 50%; border-radius: var(--radius-md); }
.skeleton--photo { height: var(--media-height-md); width: 100%; border-radius: var(--radius-xl); }

.skeleton--stat {
  height: var(--space-6);
  width: var(--space-12);
  border-radius: var(--radius-xs);
}

/* ============================================================ АДАПТИВ */

/*
 * Брейкпоинты дизайн-системы: sm ≥390px, md ≥768px, lg ≥1280px. Токенами их
 * сделать нельзя — пользовательские свойства в media-запросах не работают
 * (tokens.css, пункт 6 списка пропусков), поэтому значения стоят числами.
 */

@media (max-width: 1279px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /*
   * Заголовки на узком экране спускаются на ступень вниз по той же шкале:
   * капсом в 56px слово «ЗАПИШИТЕСЬ» шире экрана и уезжает за край.
   * Ступень берётся из typeScale, а не подбирается процентами.
   */
  .hero__title,
  .cta__title {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line);
    letter-spacing: var(--text-h2-tracking);
  }

  .section__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line);
    letter-spacing: var(--text-h3-tracking);
  }

  .hero,
  .about,
  .faq {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .services,
  .masters,
  .steps { grid-template-columns: minmax(0, 1fr); }

  .section { padding: var(--space-12) 0; }
  .hero { padding: var(--space-12) 0; }

  .section__head { flex-direction: column; align-items: flex-start; }

  .benefit { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

  .photo--hero { height: var(--media-height-md); }
  .about__media { height: var(--media-height-sm); }

  .cta { padding: var(--space-8); }

  .footer__cols { grid-template-columns: minmax(0, 1fr); }

  /* На узком экране плавающая кнопка перекрывает контент — она лишняя. */
  .floating { display: none; }
}