/*
 * Лендинг — экран «Landing - TopBro» из папки «Прототип».
 *
 * Ни одного значения «на глаз»: каждый цвет, кегль, отступ, радиус и толщина
 * границы берутся из tokens.css. Там, где в прототипе стояло значение вне
 * шкалы (76px, 44px, 19px, 120px), взята ближайшая ступень токенов —
 * расхождения перечислены в README.
 *
 * Размеры, которых в дизайн-системе нет и быть не может — доли контейнера
 * (1fr, %, vh) и пропорции картинок (aspect-ratio). Из-за этого высоты фото
 * заданы пропорцией, а не пикселями.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body-medium);
  line-height: var(--line-height-body-medium);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* --- Контейнер ---------------------------------------------------------------
   Сетка дизайн-системы: 1200px и поля по брейкпоинтам. В прототипе секции идут
   во всю ширину окна с полями 64px — здесь ширина ограничена контейнером. */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-padding-desktop);
}

/* Секции — цель для якорей меню, отступ сверху под липкую шапку */
section { scroll-margin-top: var(--space-96); }

.section { padding-block: var(--space-96); }
.section-inverse { background: var(--color-surface-inverse); color: var(--color-text-on-inverse); }

.section-title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}
.section-inverse .section-title { color: var(--color-text-on-inverse); }

.stack { display: flex; flex-direction: column; gap: var(--space-48); }

/* --- Кнопки ------------------------------------------------------------------
   На тёмном фоне основная кнопка инвертируется: подложка — текст на тёмном,
   текст — сама тёмная поверхность. Обе величины есть в токенах. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--button-padding-medium);
  font-family: var(--font-family-base);
  font-size: var(--button-font-size-medium);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  cursor: pointer;
}

.btn-lg { padding: var(--button-padding-large); font-size: var(--button-font-size-large); }
.btn-sm { padding: var(--button-padding-small); font-size: var(--button-font-size-small); }

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

/* Инверсия primary — для тёмных секций (шапка, hero, финальный призыв) */
.btn-inverse {
  background: var(--color-text-inverse);
  color: var(--color-surface-inverse);
}
.btn-inverse:hover { background: var(--color-text-secondary-on-inverse); }

.btn-outline-inverse {
  background: transparent;
  color: var(--color-text-on-inverse);
  border-color: var(--color-text-on-inverse);
}
.btn-outline-inverse:hover { border-color: var(--color-text-secondary-on-inverse); color: var(--color-text-secondary-on-inverse); }

.btn:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.link-underline {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}
.link-underline:hover { color: var(--color-text-secondary); }

/* --- Шапка -------------------------------------------------------------------
   Липкая, тёмная. Высота в прототипе 84px — здесь её задают вертикальные
   отступы шкалы, поэтому получается на пару пикселей ниже. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-24);
}

.logo {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-on-inverse);
}

.site-nav { display: flex; gap: var(--space-32); }

.site-nav a {
  color: var(--color-text-on-inverse);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
}
.site-nav a:hover { color: var(--color-text-secondary-on-inverse); }

/* --- Бургер ---------------------------------------------------------------------
 * На широком экране меню помещается в строку, и кнопка не нужна — она
 * появляется только на узком (правило внизу файла). Три полосы нарисованы
 * границами: иконок в дизайн-системе нет, а лишний файл ради трёх линий
 * заводить незачем. Толщина — ступень шкалы границ, ширина — ступень отступов.
 */

.burger {
  display: none;
  width: var(--space-48);
  height: var(--space-48);
  flex-shrink: 0;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.burger-bars,
.burger-bars::before,
.burger-bars::after {
  display: block;
  width: var(--space-24);
  height: var(--border-width-focus);
  background: var(--color-text-on-inverse);
}

.burger-bars { position: relative; }

.burger-bars::before,
.burger-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.burger-bars::before { top: calc(-1 * var(--space-8)); }
.burger-bars::after { top: var(--space-8); }

/* Открытый бургер — крестик: те же две полосы, средняя гаснет */
.burger[aria-expanded='true'] .burger-bars { background: transparent; }
.burger[aria-expanded='true'] .burger-bars::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded='true'] .burger-bars::after { top: 0; transform: rotate(-45deg); }

.header-actions { display: flex; align-items: center; gap: var(--space-16); }

.header-actions .login {
  color: var(--color-text-secondary-on-inverse);
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
}
.header-actions .login:hover { color: var(--color-text-on-inverse); }

/* --- Ошибка загрузки ---------------------------------------------------------
   Правило 7: ответ сервера человек читает на странице, а не в консоли. */

.load-error {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border-bottom: var(--border-width-hairline) solid var(--color-danger);
}
.load-error .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-16);
  font-size: var(--font-size-body-small);
}
.load-error .btn {
  border-color: var(--color-button-danger-border);
  color: var(--color-button-danger-text-outline);
  background: transparent;
}
.load-error .btn:hover {
  background: var(--color-button-danger-background);
  color: var(--color-button-danger-text);
}

/* Короткая пометка на месте самих данных */
.data-note {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-small);
}
.section-inverse .data-note { color: var(--color-text-secondary-on-inverse); }

/* --- Заглушки на время загрузки ----------------------------------------------
   Пустого места на месте данных не остаётся: до ответа API стоят блоки
   той же формы. Мигания у них нет — шкалы длительностей в системе не объявлено. */

.skeleton {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  color: transparent;
}
.skeleton-line { height: var(--space-16); }
.skeleton-line-lg { height: var(--space-32); }
.section-inverse .skeleton { background: var(--color-border-on-inverse); }

/* --- Заглушка фотографии -----------------------------------------------------
   Снимков в API нет — ни для hero, ни для галереи, ни для карты. Вместо картинки
   стоит подпись из прототипа: что здесь будет. */

.photo-slot {
  display: grid;
  place-items: center;
  padding: var(--space-24);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-small);
  text-align: center;
}

/* --- Hero --------------------------------------------------------------------
   Затемнение поверх фотографии собрано из тёмной поверхности токенов
   через color-mix: степени прозрачности взяты из прототипа. */

/*
 * Содержимое прижато к низу через margin-top: auto, а не align-items: flex-end.
 * Разница видна на невысоком окне: при flex-end то, что не поместилось в 85vh,
 * вылезает за верхний край блока и уходит под липкую шапку, а автоматический
 * отступ в такой ситуации просто обнуляется.
 */
/*
 * isolation: isolate замыкает z-index содержимого внутри самого блока.
 * Без этого z-index:1 у текста поверх фотографии спорил с z-index:1 у липкой
 * шапки, и при равных значениях побеждал тот, кто ниже в разметке, — заголовок
 * рисовался поверх меню, стоило странице прокрутиться. Со своим контекстом
 * наложения весь hero остаётся под шапкой, а внутри него порядок прежний.
 */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
}

.hero .photo-slot { position: absolute; inset: 0; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--color-surface-inverse) 85%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-inverse) 55%, transparent) 45%,
    color-mix(in srgb, var(--color-surface-inverse) 25%, transparent) 100%
  );
}

.hero .container {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-block: var(--space-96);
}

.hero-content { display: flex; flex-direction: column; gap: var(--space-24); max-width: 65%; }

.hero-title {
  margin: 0;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-on-inverse);
}

.hero-subtitle {
  margin: 0;
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  color: var(--color-text-secondary-on-inverse);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-8); }

/* --- Блок доверия ------------------------------------------------------------ */

.trust { background: var(--color-surface-inverse); }
.trust .container { padding-block: var(--space-48); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

.trust-item { display: flex; flex-direction: column; gap: var(--space-4); text-align: center; }

.trust-value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-on-inverse);
}

.trust-label {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary-on-inverse);
}

/* --- Как это работает --------------------------------------------------------- */

.steps-title { text-align: center; }

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

.step { display: flex; flex-direction: column; gap: var(--space-12); }

.step-num {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-border);
}

.step-title {
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
}

.step-desc,
.steps-note {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.steps-note { text-align: center; }

/* --- Услуги ------------------------------------------------------------------- */

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

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}
.service-card:hover { border-color: var(--color-text-primary); }

.service-name {
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
}

.service-desc {
  margin: 0;
  flex-grow: 1;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.service-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }

.service-duration { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

.service-price {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

/* --- Мастера ------------------------------------------------------------------ */

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

.master-card {
  display: flex;
  flex-direction: column;
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.master-card:hover { border-color: var(--color-text-primary); }

.master-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Фотографии у мастера может не быть — тогда на её месте инициалы */
.master-initials {
  display: grid;
  place-items: center;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-h1);
}

.master-body { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); }

.master-name {
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
}

.master-spec,
.master-exp { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

.master-card .btn { margin-top: var(--space-8); }

/* --- Галерея ------------------------------------------------------------------ */

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }

.gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; }

.gallery-item .photo-slot { aspect-ratio: 3 / 4; }

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  padding: var(--space-16);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
}

/* --- Отзывы -------------------------------------------------------------------
   В прототипе карточка отзыва залита #1C1C1C. Заливки «приподнятой поверхности
   на тёмном» в токенах нет, поэтому карточка обведена границей на тёмном. */

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  border: var(--border-width-hairline) solid var(--color-border-on-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}

.review-quote {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  color: var(--color-border-on-inverse);
}

.review-text {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary-on-inverse);
}

.review-author { display: flex; gap: var(--space-12); align-items: center; margin-top: auto; }

.review-avatar {
  width: var(--space-32);
  height: var(--space-32);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border-on-inverse);
}

.review-name {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-on-inverse);
}

.review-master { font-size: var(--font-size-caption); color: var(--color-text-secondary-on-inverse); }

/* --- Контакты ------------------------------------------------------------------ */

.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48); }

.contacts-col { display: flex; flex-direction: column; gap: var(--space-32); }

.contact-block { display: flex; flex-direction: column; gap: var(--space-8); }

.contact-label {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-bold);
}

.contact-value { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: 50%;
  padding-block: var(--space-4);
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary);
}
.hours-row .hours-time { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }

.socials { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.socials span,
.socials a {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

.map-slot { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }

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

/* Ширина колонки вопросов ограничена, как в прототипе, — не вся секция */
.faq .stack { max-width: 75%; }

.faq-list { display: flex; flex-direction: column; }

.faq-item { border-bottom: var(--border-width-hairline) solid var(--color-border); }

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: var(--font-size-h4);
  color: var(--color-text-secondary);
}
.faq-item[open] summary::after { content: '−'; }

.faq-answer {
  margin: 0;
  padding-bottom: var(--space-24);
  max-width: 75%;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

/* --- Финальный призыв ----------------------------------------------------------- */

.cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-24);
}

.cta-title {
  margin: 0;
  max-width: 60%;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  color: var(--color-text-on-inverse);
}

.cta-subtitle {
  margin: 0;
  font-size: var(--font-size-body-medium);
  color: var(--color-text-secondary-on-inverse);
}

/* --- Подвал ---------------------------------------------------------------------- */

.site-footer { background: var(--color-surface-inverse); color: var(--color-text-on-inverse); }
.site-footer .container { padding-block: var(--space-64) var(--space-32); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-32);
  padding-bottom: var(--space-48);
}

.footer-about { display: flex; flex-direction: column; gap: var(--space-12); }

.footer-about p {
  margin: 0;
  max-width: 75%;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary-on-inverse);
}

.footer-socials { display: flex; gap: var(--space-12); margin-top: var(--space-4); }

.footer-socials span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--space-8);
  border: var(--border-width-hairline) solid var(--color-border-on-inverse);
  border-radius: var(--radius-pill);
  color: var(--color-text-on-inverse);
  font-size: var(--font-size-caption);
}

.footer-col { display: flex; flex-direction: column; gap: var(--space-12); }

.footer-col-title {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text-secondary-on-inverse);
}

.footer-col a,
.footer-col span {
  font-size: var(--font-size-body-small);
  color: var(--color-text-on-inverse);
}
.footer-col a:hover { color: var(--color-text-secondary-on-inverse); }

/* Пункты, за которыми ещё нет страницы, — текстом, а не ссылкой в никуда */
.footer-col span.pending,
.footer-bottom span.pending { color: var(--color-text-secondary-on-inverse); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-32);
  border-top: var(--border-width-hairline) solid var(--color-border-on-inverse);
  font-size: var(--font-size-body-small);
  color: var(--color-text-secondary-on-inverse);
}

/* --- Планшет: 768–1199px ---------------------------------------------------------- */

@media (max-width: 1199px) {
  .container { padding-inline: var(--container-padding-tablet); }

  .trust-grid,
  .steps-grid,
  .masters-grid { grid-template-columns: repeat(2, 1fr); }

  .services-grid,
  .gallery-grid,
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-content,
  .faq .stack,
  .cta-title,
  .footer-about p { max-width: 100%; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Мобильный: до 767px ---------------------------------------------------------- */

@media (max-width: 767px) {
  .container { padding-inline: var(--container-padding-mobile); }

  /*
   * Шапка на узком экране: логотип, «Войти» и «Записаться» остаются в строке,
   * разделы сворачиваются в бургер. Свёрнуто — не спрятано: меню открывается
   * кнопкой и содержит ровно те же пять пунктов, что и на широком экране.
   *
   * Раскрытое меню — не наложение поверх страницы, а строка под шапкой:
   * шапка липкая, и накрывать ею содержимое незачем.
   */
  .site-header .container { flex-wrap: wrap; gap: var(--space-8); padding-block: var(--space-16); }
  .header-actions { gap: var(--space-8); }

  /* «Записаться» переходит на малый размер кнопки — ступень шкалы, а не
     подобранное значение. Так логотип, «Войти», кнопка и бургер встают
     в одну строку даже на 360px, и уводить из шапки ничего не нужно */
  .header-actions .btn {
    padding: var(--button-padding-small);
    font-size: var(--button-font-size-small);
  }

  .burger { display: grid; }

  .site-nav {
    order: 3;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    padding-top: var(--space-8);
    border-top: var(--border-width-hairline) solid var(--color-border-on-inverse);
  }
  .site-nav.is-open { display: flex; }

  /* Пункт во всю ширину строки: попасть пальцем проще, чем по слову */
  .site-nav a {
    padding-block: var(--space-12);
    font-size: var(--font-size-body-medium);
  }

  .section { padding-block: var(--space-48); }
  .hero .container { padding-block: var(--space-48); }

  .hero-title { font-size: var(--font-size-h1); letter-spacing: var(--letter-spacing-h1); }
  .cta-title { font-size: var(--font-size-h2); letter-spacing: var(--letter-spacing-h2); }
  .section-title { font-size: var(--font-size-h3); letter-spacing: var(--letter-spacing-h3); }

  .trust-grid,
  .steps-grid,
  .services-grid,
  .masters-grid,
  .gallery-grid,
  .reviews-grid,
  .contacts-grid,
  .footer-grid { grid-template-columns: 1fr; }

  .hours-row { max-width: 100%; }
}