/* Стили лендинга. Структура и значения — из
 * prototype/Ноготочки - Лендинг.dc.html.
 * Общая база и шапка — в base.css, он подключается раньше.
 *
 * Цвета, шрифты, размеры текста, отступы и скругления берутся только из
 * tokens.css. Литералами оставлены те значения прототипа, которых в
 * tokens.css нет: высоты блоков под фотографии, высота героя, ширины
 * колонок текста и несколько разовых отступов. Они помечены комментарием
 * «из прототипа» — это перенос, а не подбор по аналогии.
 *
 * Адаптива здесь нет намеренно: отдельный этап.
 */

.section-head {
  text-align: center;
  margin-bottom: var(--space-8xl);
}

.section-head__eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 18px; /* из прототипа */
}

.section-head__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-3xl);
  margin: 0;
}

/* Карточка-скелетон витрины услуг */
.skeleton-card {
  padding: var(--padding-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ==========================================================================
 * Герой
 * ======================================================================= */

.hero {
  position: relative;
  height: 680px; /* из прототипа */
  display: flex;
  align-items: center;
}

/* В прототипе здесь фотография с затемняющим градиентом. Фотографии нет,
 * градиент в tokens.css не вынесен, поэтому под текст положена тёмная
 * поверхность из токенов — на ней светлый текст читается. */
.hero__photo {
  position: absolute;
  inset: 0;
  background: var(--color-surface-inverse);
}

.hero__content {
  position: relative;
  padding: 0 var(--layout-gutter);
  max-width: 620px; /* из прототипа */
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-hero);
  line-height: var(--line-height-heading);
  color: var(--color-text-on-accent);
  margin: 0 0 var(--space-3xl);
}

.hero__lead {
  font-size: var(--text-xl);
  line-height: var(--line-height-body);
  color: var(--color-text-on-photo);
  margin: 0 0 36px; /* из прототипа */
  max-width: 480px; /* из прототипа */
}

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

.services {
  padding: var(--layout-section-y) var(--layout-gutter);
}

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

.service {
  padding: var(--padding-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.service__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-sm);
  margin: 0;
}

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

.service__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}

.service__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-size: var(--text-lg);
}

.service__button {
  padding: var(--space-md);
}

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

.masters {
  padding: 100px var(--layout-gutter) var(--layout-section-y-lg); /* 100px из прототипа */
  background: var(--color-surface);
}

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

.master {
  text-align: center;
}

.master__photo {
  width: 100%;
  height: 340px; /* из прототипа */
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2xl);
  box-sizing: border-box;
}

.master__name {
  font-family: var(--font-heading);
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-2xs);
}

.master__role {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

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

.gallery {
  padding: var(--layout-section-y) var(--layout-gutter);
}

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

.gallery__item {
  width: 100%;
  height: 320px; /* из прототипа */
  box-sizing: border-box;
}

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

.contacts {
  padding: 100px var(--layout-gutter) var(--layout-section-y-lg); /* 100px из прототипа */
  background: var(--color-surface);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9xl);
}

.contacts__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-3xl);
  margin: 0 0 var(--space-6xl);
}

.contacts__list {
  display: flex;
  flex-direction: column;
  gap: 26px; /* из прототипа */
  font-size: var(--text-lg);
  line-height: var(--line-height-loose);
}

.contacts__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2xs);
}

.contacts__socials {
  display: flex;
  gap: var(--space-xl);
}

.contacts__social {
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-border);
}

.contacts__map {
  width: 100%;
  height: 420px; /* из прототипа */
  box-sizing: border-box;
}

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

.cta {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding: var(--layout-section-y-lg) var(--layout-gutter);
  text-align: center;
}

.cta__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-4xl);
  margin: 0 0 var(--space-6xl);
}

.cta__button {
  padding: 17px 44px; /* из прототипа */
  font-size: var(--text-lg);
}

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

.footer {
  padding: var(--space-8xl);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid var(--color-border);
}

.footer__logo {
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  margin-bottom: var(--space-lg);
}

.footer__about {
  font-size: var(--text-base);
  line-height: var(--line-height-loose);
  color: var(--color-text-muted);
  max-width: 320px; /* из прототипа */
  margin: 0;
}

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}