/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   Подключается вторым, после css/style.css.
   Здесь только то, чего нет в основном файле: шапка внутренней
   страницы, хлебные крошки, таблица характеристик и типографика
   юридических документов. Всё остальное — компоненты главной.
   ============================================================ */

/* Пункт «Главная» в меню. На десктопе его роль играет логотип, а на
   1024–1279px седьмой пункт выдавливает телефон с CTA в перенос —
   шапка рассчитана ровно на шесть. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__home { display: none; }
}

/* CTA внутренних страниц длиннее главной («Запросить материалы» против
   «Записаться на замер») и на 1200–1279px выходит за вьюпорт на 8px.
   Поджимаем шаг меню — так же, как это сделано для 1024–1199px в style.css. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .nav__list { gap: var(--space-4); }
}

/* ------------------------------------------------------------
   ХЛЕБНЫЕ КРОШКИ
   ------------------------------------------------------------ */
.crumbs {
  padding-top: var(--space-5);
  background: var(--color-canvas);
}
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.crumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.crumbs__list li + li::before {
  content: "·";
  color: var(--color-border-interactive);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  /* тач-цель по DESIGN.md р. 7 — не меньше 48px */
  min-height: 48px;
  color: var(--color-link);
  font-weight: 500;
}

/* ------------------------------------------------------------
   ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
   ------------------------------------------------------------ */
.page-hero {
  position: relative;
  padding-block: var(--space-6) var(--section-pad-md);
  background: var(--color-canvas);
  color: var(--color-ink);
}
.page-hero__inner { display: grid; gap: var(--space-6); }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  /* Страховка от узких экранов: длинное слово в дисплейном кегле
     иначе выдавливает страницу в горизонтальный скролл. */
  overflow-wrap: break-word;
}
.page-hero__eyebrow { margin-bottom: var(--space-4); }
.page-hero__lead {
  margin-top: var(--space-5);
  max-width: 62ch;
  font-size: var(--fs-body-lg);
  color: var(--color-ink-muted);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.page-hero__actions .btn { flex: 1 1 100%; }
.page-hero__figure {
  margin: 0;
  border-radius: var(--radius-soft);
  overflow: hidden;
}
.page-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 480px) {
  .page-hero__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .page-hero__inner {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--gutter);
  }
}

/* ------------------------------------------------------------
   ХАРАКТЕРИСТИКИ — пары «параметр / значение»
   ------------------------------------------------------------ */
.specs { margin: var(--space-6) 0 0; }
.specs__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}
.specs__row:last-child { border-bottom: 1px solid var(--color-border-subtle); }
.specs__key {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body);
}
.specs__val {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
@media (min-width: 768px) {
  .specs__row {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: baseline;
  }
}

/* ------------------------------------------------------------
   ЮРИДИЧЕСКИЕ ДОКУМЕНТЫ
   ------------------------------------------------------------ */
.legal { max-width: 76ch; }

/* Заголовок документа мельче витринного: в названиях юридических текстов
   попадаются длинные слова («персональных»), и на 320px крупный дисплейный
   кегль выдавливает страницу в горизонтальный скролл. */
.legal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  overflow-wrap: break-word;
  hyphens: auto;
}
.legal__meta {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.legal__meta p { margin: 0; }
.legal__meta p + p { margin-top: var(--space-2); }

.legal h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
}
.legal h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--fs-h4);
}
.legal p { margin-top: var(--space-4); }
.legal ol,
.legal ul {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-left: 1.4em;
}
.legal ol { list-style: decimal; }
.legal ul { list-style: disc; }
.legal li::marker { color: var(--color-ink-muted); }
.legal a { color: var(--color-link); font-weight: 500; }

/* Незаполненные реквизиты оператора видно с первого взгляда —
   документ нельзя публиковать, пока в нём остаются эти метки. */
.fill {
  display: inline;
  padding: 1px 6px;
  border: 1px dashed var(--color-border-interactive);
  border-radius: var(--radius-sharp);
  background: rgba(81, 10, 39, .07);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95em;
  color: var(--color-accent);
}