/* ============================================================
   PAGE.CSS — Общий слой внутренних страниц
   Театр на Таганке

   Подключается на КАЖДОЙ внутренней странице между tokens.css/style.css
   и стилями конкретной страницы. На главной (index.html) НЕ нужен —
   она использует абсолютную шапку поверх hero и собственный layout.

   Подключение в HTML:
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="components/page/page.css">          ← здесь
     <link rel="stylesheet" href="components/afisha/afisha.css">      ← страница

   Что содержит:
     — .header--page                 фиксированная шапка внутренней страницы
     — .page                         корневой класс <main> (фон + padding-top)
     — .page--afisha / .page--repertoire / .page--historical   модификаторы
     — .page__intro / .page__intro-* интро-блок: заголовок + описание
     — .page__bar                    бар: табы + опциональные правые контролы
     — .page__divider                разделитель под баром, full-width
     — .page__empty / .page__empty-* пустое состояние при нулевой выдаче
     — .page__grid                   универсальная сетка карточек
                                     (CSS-переменные --grid-cols/-gap/-pad-x)

   Что НЕ содержит (живёт в страницах или в filter-kit):
     — карточки (специфика страницы)
     — фильтры, дропдауны, панели, чекбоксы, календарь (filter-kit)
     — алфавитный список репертуара (специфика репертуара)
     — sticky day header афиши (специфика афиши)
   ============================================================ */


/* ══════════════════════════════════════════════════
   ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
   Светлая, скроллится со страницей, тёмные иконки.
   Переопределяет .header из style.css (где position: absolute
   и тёмный фон под hero).
   ══════════════════════════════════════════════════ */
.header--page {
  position: absolute; /* скроллится вместе со страницей */
  background-color: var(--color-bg-warm);
  border-bottom: none;
  z-index: var(--z-header);
}

.header--page .header__item,
.header--page .header__menu        { color: var(--color-black-soft); }
.header--page .header__burger span { background-color: var(--color-black-soft); }

.header--page .header__brand-block {
  width: 120px;
  height: 120px;
}


/* ══════════════════════════════════════════════════
   КОРНЕВОЙ КЛАСС СТРАНИЦЫ
   Применяется на <main>:
     <main class="page page--afisha">
     <main class="page page--repertoire">
     <main class="page page--historical">
   padding-top компенсирует высоту фиксированной шапки.
   ══════════════════════════════════════════════════ */
.page {
  background-color: var(--color-bg-warm);
  padding-top: 120px; /* высота шапки на мобилке/планшете */
}

/* Базовое body в style.css имеет flex column + justify-content: center.
   Это нужно главной странице, где hero на 100dvh + остальной контент
   всегда даёт высоту больше viewport — центрирование там безвредно.
   На внутренних страницах когда фильтр оставляет одну карточку,
   высота body становится ≈ min-height: 100dvh, и центрирование
   распределяет лишнее пространство поровну сверху и снизу — весь
   контент сдвигается вниз на ~14px. Прижимаем к верху. */
body.page--light {
  justify-content: flex-start;
}


/* ══════════════════════════════════════════════════
   ИНТРО-БЛОК
   Заголовок + описание над баром.
   Figma 3053:3424: padding 0 10px, gap 16px внутри heading,
   gap 80px до бара (реализуется через margin-top на .page__bar).
   ══════════════════════════════════════════════════ */
.page__intro {
  padding: 64px 10px 0;
  background: var(--color-bg-warm);
}

.page__intro-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Заголовок: Pragmatica Extended Black 32px (мобилка),
   40px (десктоп ≥1024), 48px (широкий десктоп ≥1440).         */
.page__intro-title {
  font-family: var(--font-accent);
  font-size: 32px;
  font-weight: var(--font-weight-black); /* 900 */
  line-height: .95;
  letter-spacing: -0.035em;
  color: var(--color-black-soft);
}

/* Описание: Pragmatica Medium 18px на мобилке, 20px на десктопе. */
.page__intro-desc {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.25;
  /* letter-spacing: -0.005em; base value из токенов, но на десктопе визуально не хватает плотности, поэтому убираем */
  color: var(--color-black-soft);
}


.page__bar {
  display: flex;
  align-items: baseline;
  padding: 0 10px;
  margin-top: 80px;
  gap: 24px;
  background: var(--color-bg-warm);
}

/* Когда внутри бара живут горизонтально прокручивающиеся табы
   (.section-tabs--scrollable), бар сбрасывает свой боковой padding
   на мобилке и планшете — отступы крайних табов задаёт сама утилита
   через margin на :first-child / :last-child (см. style.css).
   Если бар держит свой padding и табы добавляют сверху свой margin,
   получается двойной отступ слева и обрезанный последний таб справа.
   На десктопе (≥1024) бар возвращает padding из --inner-pad-x,
   а utility сама обнуляет margin'ы крайних табов — конфликта нет. */
@media (max-width: 1023.98px) {
  .page__bar:has(.section-tabs--scrollable) {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1024px) {

  .page__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    column-gap: var(--inner-col-gap);
    padding: 0 var(--inner-pad-x);
    margin-top: 80px;
  }

}

/* ══════════════════════════════════════════════════
   РАЗДЕЛИТЕЛЬ ПОД БАРОМ
   Полная ширина, 1px чёрный, 24px сверху от бара.
   Светлая версия .divider (которая в style.css — тёмная).
   ══════════════════════════════════════════════════ */
.page__divider {
  width: 100%;
  height: 1px;
  /* Сброс UA-стиля <hr> — в браузерах это border: 1px inset gray.
     При box-sizing: border-box рамки съедают всю высоту: content-box
     схлопывается в 0, background не рисуется вообще, а видимой линией
     становится серая inset-фаска (тёмная сверху, светлая снизу) —
     на зуме читается как объёмная канавка. */
  border: none;
  background: var(--color-black-soft);
  margin: 24px 0 0;
}


/* ══════════════════════════════════════════════════
   ПУСТОЕ СОСТОЯНИЕ
   Видно, когда фильтры/табы дают нулевую выдачу.
   Текст + кнопка «Сбросить фильтры».
   JS управляет атрибутом hidden — display:flex выше
   перебивает браузерное [hidden]{display:none},
   поэтому явно возвращаем скрытие.
   ══════════════════════════════════════════════════ */
.page__empty {
  padding: 80px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.page__empty[hidden] {
  display: none;
}

.page__empty-text {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: var(--font-weight-body);
  color: var(--color-black-soft-40);
  line-height: 1.4;
}

.page__empty-reset {
  height: 56px;
  padding: 0 32px;
  background: var(--color-black-soft);
  color: var(--color-white);
  border: none;
  border-radius: var(--card-radius);
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity var(--duration-fast) ease;
}
.page__empty-reset:hover { opacity: 0.7; }


/* ══════════════════════════════════════════════════
   УНИВЕРСАЛЬНАЯ СЕТКА КАРТОЧЕК
   Используется на любой странице со списком карточек:
     — репертуар:           1 → 2 → 3 → 4 колонки
     — исторические:        1 → 2 → 3 колонки
     — будущие списочные страницы

   Точки кастомизации — CSS-переменные, переопределяются
   на корне сетки или на странице. Базовые значения (мобилка)
   заданы здесь, остальные брейкпоинты ниже.

   minmax(0, 1fr) вместо просто 1fr — чтобы uppercase-заголовки
   карточек не распирали колонку до своего min-content.
   ══════════════════════════════════════════════════ */
.page__grid {
  /* ── База: мобилка до 767px ── */
  --grid-cols:    1;
  --grid-col-gap: 0;
  --grid-row-gap: 80px;
  --grid-pad-x:   10px;

  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-col-gap);
  row-gap:    var(--grid-row-gap);
  padding:    64px var(--grid-pad-x) 80px;
  margin: 0;
}

/* display:grid выше перебивает [hidden]{display:none} —
   возвращаем скрытие явно. JS прячет всю сетку, когда нет
   видимых карточек, чтобы empty-state не оказался под пустым
   padding'ом сетки. */
.page__grid[hidden] {
  display: none;
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px) — 2 колонки по умолчанию
   Страница может переопределить --grid-cols у себя.
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page__intro { padding: 60px 16px 0; }
  .page__bar   { padding: 0 16px; }
  .page__divider {
    width: calc(100% - 32px);
    margin-left: 16px;
  }

  .page__grid {
    --grid-cols:    2;
    --grid-col-gap: 48px;
    --grid-row-gap: 80px;
    --grid-pad-x:   16px;

    padding-top: 60px;
    padding-bottom: 100px;
  }
}


/* ══════════════════════════════════════════════════
   НОУТБУК + ДЕСКТОП (≥1024px) — 3 колонки по умолчанию
   Все горизонтальные/вертикальные величины — из токенов
   --inner-* (scale-1680 формулы), задокументированы в tokens.css.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Шапка: brand-block 160×160, padding-top страницы синхронизирован */
  .header--page .header__brand-block { width: 160px; height: 160px; }
  .page { padding-top: 160px; }

  /* Заголовок интро укрупняется */
  .page__intro-title { font-size: 40px; }
  .page__intro-desc  { font-size: 20px; }

  /* Интро: двухколоночная сетка, gap из --inner-col-gap.
     Правая колонка пустая для интро, но левая граница совпадает
     с правой колонкой бара/сетки — единый вертикальный ритм. */
  .page__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--inner-col-gap);
    padding: 64px var(--inner-pad-x) 0;
  }
  .page__intro-heading {
    align-items: flex-start;
    gap: 24px;
  }

  /* Бар: та же двухколоночная сетка что у интро.
     Слева табы, справа фильтры/контролы (или пусто). */
  .page__bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    column-gap: var(--inner-col-gap);
    padding: 0 var(--inner-pad-x);
    margin-top: 80px;
  }

  .page__divider {
    width: 100%;
    margin-left: 0;
    margin-top: 24px;
  }

  /* Сетка карточек: 3 колонки, gap из --inner-* токенов.
     Страница может задать --grid-cols: 4 для широких десктопов. */
  .page__grid {
    --grid-cols:    3;
    --grid-col-gap: var(--inner-col-gap);
    --grid-row-gap: var(--inner-row-gap);
    --grid-pad-x:   var(--inner-pad-x);

    padding-top:    var(--inner-pad-top);
    padding-bottom: var(--inner-pad-bottom);
  }

  .page__empty { padding: 80px 16px; }
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1440px)
   Заголовок интро и шапка достигают финальных размеров.
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .page__intro-title { font-size: 48px; }

  .header--page { height: 180px; }
  .header--page .header__brand-block { width: 180px; height: 180px; }
  .page { padding-top: 180px; }

  .page__empty { padding: 100px 16px; }
}

/* ============================================================
   ═══════════════════════════════════════════════════════════
   ОБЩИЕ ТЕКСТОВЫЕ БЛОКИ ДЛЯ ВНУТРЕННИХ СТРАНИЦ
   ═══════════════════════════════════════════════════════════
   Унифицированные классы для CMS-страниц, собираемых из готовых
   блоков (правила посещения, доступная среда, кафе, магазин,
   FAQ, схемы залов, материалы для скачивания, 404, как добраться,
   билеты и т.п.).

   Эти классы живут параллельно со старыми страничными
   (.visits__*, .cafe__*, .htg__*, .faq__*, .tickets__*, .dl__*,
    .halls__*, .shop__*, .not-found__*).
   Старые остаются рабочими — миграция страниц на общие классы
   делается по одной, чтобы не сломать существующую вёрстку.

   Префикс — .page__* (общий слой внутренних страниц).
   Все размеры/брейкпоинты согласованы с уже существующими
   .page__intro / .page__bar / .page__divider.
   ============================================================ */


/* ══════════════════════════════════════════════════
   НАВИГАЦИЯ «← РАЗДЕЛ»
   Узкая ссылка-стрелка над заголовком страницы:
   возврат в родительский раздел («Посетителям», «О театре»).

   Использование:
     <nav class="page__back" aria-label="Навигация по разделу">
       <a href="/visitors" class="page__back-link">
         <svg class="page__back-arrow" ...>...</svg>
         Посетителям
       </a>
     </nav>

   Размещается ПЕРЕД .page__intro. Селектор-смежник снизу
   уменьшает верхний padding интро (с 64px до 24px), чтобы
   расстояние до заголовка осталось правильным.
   ══════════════════════════════════════════════════ */
.page__back {
  padding: 32px 10px 0;
}

.page__back-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-black-soft-40);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.page__back-link:hover { color: var(--color-black-soft); }
.page__back-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.page__back-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}

/* Уменьшаем верхний padding интро, когда перед ним есть back-навигация */
.page__back + .page__intro {
  padding-top: 24px;
}


/* ══════════════════════════════════════════════════
   ДВУХКОЛОНОЧНЫЙ LAYOUT
   Контейнер для двух равных колонок с контентом. На мобилке —
   одна под другой. На десктопе — рядом, gap из --inner-col-gap.

   Использование:
     <div class="page__columns">
       <div class="page__column">…первая колонка…</div>
       <div class="page__column">…вторая колонка…</div>
     </div>

   Модификатор .page__column--secondary ставит колонке order:-1
   на десктопе — она уходит влево независимо от позиции в HTML.
   Поведение на мобилке зависит от того, где колонка стоит в HTML:

     1) Если secondary стоит ПОСЛЕ основной (FAQ-кейс — основной
        контент сверху, контакты как fallback внизу), на мобилке
        она получает разделительную линию сверху и большой отступ
        margin-top: 48px — между смысловыми блоками воздух.

     2) Если secondary стоит ПЕРЕД основной в HTML (accessibility-
        кейс — вступление/контекст идёт сверху, основной контент
        снизу), линия и margin не нужны, потому что выше неё ничего
        нет. Селектор :first-child обнуляет эти свойства.

   На десктопе order: -1 срабатывает в обоих случаях одинаково.
   ══════════════════════════════════════════════════ */
.page__columns {
  padding: 0 10px 60px;
}

/* Большой отступ между основным разделителем и контентом
   двухколоночного layout. Срабатывает только когда
   .page__columns идёт ПРЯМО после .page__divider — не
   ломает страницы где между ними стоят промежуточные блоки
   (как .cms-group в дизайн-ките или .tickets__navigator
   на мобилке Билетов). */
.page__divider + .page__columns {
  padding-top: 64px;
}

/* Mobile: вторичная колонка отделяется тонкой линией сверху,
   и значимым отступом — между двумя смысловыми блоками
   (вопросы + контакты, контент + документы) должен быть воздух. */
.page__column--secondary {
  border-top: 1px solid var(--color-black-soft-25);
  margin-top: 48px;
  padding-top: 8px;
}

/* Если secondary стоит ПЕРВОЙ в HTML (мобильный сценарий
   «вступление сверху, основной контент снизу»), линия и
   верхние отступы не нужны — над колонкой ничего нет. */
.page__column--secondary:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Mobile: основная колонка, идущая после secondary-первой,
   получает значимый верхний margin — между двумя смысловыми
   блоками страницы должен быть воздух. На десктопе ниже
   margin сбрасывается (там колонки идут рядом по горизонтали). */
.page__column--secondary:first-child + .page__column {
  margin-top: 64px;
}


/* ══════════════════════════════════════════════════
   СЕКЦИЯ КОНТЕНТА
   Группа однотипных блоков (правил, венью, FAQ-вопросов,
   ссылок-документов) с общим заголовком.

   Использование:
     <section class="page__section">
       <h2 class="page__section-title">Заголовок</h2>
       …контент секции…
     </section>
   ══════════════════════════════════════════════════ */
.page__section {
  padding-top: 28px;
  padding-bottom: 40px;
}

/* Между смежными секциями — тонкая линия и увеличенный
   отступ. Линия маркирует переход между смысловыми группами
   (тематические разделы FAQ, разделы PDF на Materials,
   подразделы магазина и т.п.). */
.page__section + .page__section {
  border-top: 1px solid var(--color-black-soft-25);
  padding-top: 40px;
}

.page__section-title {
  font-family: var(--font-accent);
  font-size: 24px;
  font-weight: var(--font-weight-black);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  /* Мобилка: компактный отступ под заголовком — 32px.
     Десктоп ниже переопределяет на 60px (там воздуха больше). */
  margin-bottom: 32px;
  font-feature-settings: 'lnum' 1, 'pnum' 1;
}


/* ══════════════════════════════════════════════════
   ЗАГОЛОВОК С МАРКЕРОМ-КВАДРАТИКОМ
   Модификатор .page__section-title--marker превращает
   обычный H2 в крупный заголовок-якорь с чёрным
   квадратиком слева. Используется для заголовков
   площадок/зданий внутри двухколоночного layout
   («Историческое здание на Земляном Валу»,
   «Сцена на Факельном»).

   Размеры: 28px на мобилке → 30px на планшете
   → 32px на десктопе → 34px на широком десктопе.
   Квадратик 24×24 на мобилке/планшете, 20×20 на
   десктопе — компенсирует увеличение line-height
   глифов при росте font-size.

   После заголовка часто идут:
     — .page__section-subtitle  (выцветший подзаголовок)
     — .page__section-address   (обычный адрес)
     — .page__action            (кнопка «Открыть на карте»)
     — .page__accordion         (стопка раскрывашек)
   Все потомки сдвигаются на 36px влево (24px квадрат + 12px gap),
   чтобы текст начинался от первой буквы заголовка.

   Использование:
     <h2 class="page__section-title page__section-title--marker">
       Историческое здание на Земляном Валу
     </h2>
     <p class="page__section-subtitle">Основная, Новая и Малая сцены</p>
     <p class="page__section-address">ул. Земляной Вал, 76/21, Москва</p>
     <a class="page__action" href="…">Открыть на карте<svg…/></a>
   ══════════════════════════════════════════════════ */
.page__section-title--marker {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 28px;
  font-weight: var(--font-weight-black);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.page__section-title--marker::before {
  content: '';
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: var(--color-black-soft);
  /* Центр первой строки: (28px × 0.9) / 2 − 12px ≈ 0.6px */
  margin-top: 1px;
}

/* Текстовые компаньоны под заголовком-маркером.
   Сдвигаются на 36px (24px квадрат + 12px gap),
   чтобы выровняться по первой букве заголовка. */
.page__section-subtitle {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft-40);
  padding-left: 36px;
  margin-top: 12px;
}

.page__section-address {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
  padding-left: 36px;
  margin-top: 16px;
}

/* Кнопка-карта, идущая сразу после заголовка-маркера,
   получает то же горизонтальное смещение чтобы выровняться
   по первой букве. На десктопе margin наследуется из
   стандартного правила .page__action (margin-top: 32px). */
.page__section-title--marker ~ .page__action {
  margin-left: 36px;
}


/* ══════════════════════════════════════════════════
   СТАТЬЯ (ПРАВИЛО / ВЕНЬЮ)
   Блок «заголовок H3 + (опционально подзаголовок-адрес) +
   текст в несколько параграфов». Внутри секции идут друг
   за другом, разделённые тонкими линиями.

   Использование:
     <div class="page__article">
       <h3 class="page__article-title">
         Основная и Малая сцены
         <span class="page__article-subtitle">Земляной Вал, 76/21</span>
       </h3>
       <p class="page__article-intro">Краткое предложение-вводка.</p>
       <div class="page__article-text">
         <p>Параграф один.</p>
         <p>Параграф два.</p>
       </div>
     </div>

   Заметка о подзаголовке: рендерится с новой строки через
   display: block, чтобы конструкция работала и без <br> внутри.
   Если в макете нужен адрес/подпись отдельной строкой — можно
   класть в один <h3>, обернув подзаголовок в <span>.
   ══════════════════════════════════════════════════ */
.page__article {
  border-top: 1px solid var(--color-black-soft-25);
  padding-top: 28px;
  padding-bottom: 64px;
}

/* Первая статья сразу после заголовка секции — без верхней линии */
.page__section-title + .page__article {
  border-top: none;
  padding-top: 0;
}

.page__article:last-child {
  padding-bottom: 0;
}

.page__article-title {
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-black-soft);
  margin-bottom: 24px;
}

/* Модификатор: H3 с маркером-квадратиком 8×8 слева.
   В отличие от .page__section-title--marker (крупный H2 с
   квадратиком 24×24 для заголовков площадок) — это меньший
   маркер для заголовков подгрупп внутри секции:
   контактная группа в FAQ, блоки «На сайте/В кассе» в Билетах,
   подзаголовки в любом тексте.

   Использование:
     <h3 class="page__article-title page__article-title--marker">
       Касса театра
     </h3>
     <p class="page__article-sub">По вопросам покупки билетов</p>

   gap 10px, маркер выровнен по первой строке заголовка
   (margin-top подбирался под line-height: 1.15 × 20px). */
.page__article-title--marker {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.page__article-title--marker::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--color-black-soft);
  margin-top: 0.4em;
}

.page__article-subtitle {
  display: block;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: -0.005em;
  /* Брендовый красный — адрес/подпись заметна в потоке текста,
     визуально перекликается с акцентами логотипа и брендблока. */
  color: var(--color-brand);
  margin-top: 8px;
}

/* Краткая вводка перед основным текстом статьи */
.page__article-intro {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
  margin-bottom: 16px;
}

.page__article-text {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
}

.page__article-text p + p {
  margin-top: 16px;
}

/* Inline-выделения внутри текстов статьи — medium-вес вместо
   браузерного 700. Используется для лейблов вроде «В меню:»,
   «Режим работы:», «Важно:» внутри сплошных параграфов. */
.page__article-text strong,
.page__article-intro strong {
  font-weight: var(--font-weight-medium);
}


/* ══════════════════════════════════════════════════
   СПИСОК С МАРКЕРОМ-КВАДРАТИКОМ
   Параграфы или короткие пункты с чёрным квадратиком 8×8
   слева. Используется внутри .page__article-text и в
   самостоятельных блоках.

   Использование (предпочтительно — семантический <ul>):
     <ul class="page__bullet-list">
       <li>Пункт первый</li>
       <li>Пункт второй с <strong>выделением</strong></li>
     </ul>

   Альтернатива (для блоков из присланной разметки):
     <div class="page__article-text page__article-text--bulleted">
       <p>Параграф с маркером…</p>
       <p>И ещё параграф…</p>
     </div>
   ══════════════════════════════════════════════════ */
.page__bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
}

.page__bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.page__bullet-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--color-black-soft);
  margin-top: 0.4em;
}

.page__bullet-list li + li {
  margin-top: 16px;
}

/* Альтернативная подача через параграфы в .page__article-text */
.page__article-text--bulleted p {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.page__article-text--bulleted p::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--color-black-soft);
  margin-top: 0.4em;
}


/* ══════════════════════════════════════════════════
   НУМЕРОВАННЫЙ СПИСОК
   Используется для пошаговых инструкций (как в кафе:
   «1. Перейдите по ссылке. 2. Выберите дату»).

   Использование:
     <ol class="page__numbered-list">
       <li>Перейдите по ссылке</li>
       <li>Выберите дату спектакля</li>
       <li>Сформируйте заказ</li>
     </ol>

   Перед списком часто идёт короткая вводная фраза
   («Чтобы забронировать столик:»). Для неё используется
   .page__hint — параграф меньшим размером, согласованным
   со списком.
   ══════════════════════════════════════════════════ */
.page__numbered-list {
  list-style: none;
  padding: 0;
  /* margin-bottom отделяет список от следующего блока
     (текста, кнопки, доков). Сверху отступ задаётся через
     margin-bottom предыдущего блока (как у .page__hint),
     или через явные правила-смежники если нужно. */
  margin: 0 0 24px;
  counter-reset: page-list;
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
}

/* Цифра позиционируется absolute, а сам <li> — relative с
   padding-left под цифру + gap. Это позволяет тексту внутри
   <li> сохранять обычный inline-поток с переносами и
   inline-ссылками (display:flex на <li> разрывал бы текст
   и ссылку на разные flex-items с gap'ом между ними). */
.page__numbered-list li {
  position: relative;
  padding-left: 20px;
  counter-increment: page-list;
}

/* Цифра с точкой («1.») в том же шрифте что и текст,
   medium-вес для визуального якоря. */
.page__numbered-list li::before {
  content: counter(page-list) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-main);
  font-weight: var(--font-weight-medium);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  color: var(--color-black-soft);
  /* Выравнивание по baseline первой строки текста */
  line-height: var(--line-height-body);
}

.page__numbered-list li + li {
  margin-top: 16px;
}


/* Модификатор: цифры в чёрных квадратиках 24×24 вместо «1.».
   Более «акцентный» вариант для CTA-блоков (например, шаги
   бронирования столика — каждый шаг визуально якорит внимание).
   Использование:
     <ol class="page__numbered-list page__numbered-list--badges">
       <li>Перейдите по ссылке</li>
       …
     </ol>
   Точку у цифры убираем, цифра bold-белая в чёрной плашке.
   Padding-left увеличиваем до 38px (24px квадрат + 14px отступ). */
.page__numbered-list--badges li {
  padding-left: 38px;
  /* Большие плашки требуют чуть больший вертикальный ритм */
  min-height: 24px;
}

.page__numbered-list--badges li + li {
  margin-top: 20px;
}

.page__numbered-list--badges li::before {
  content: counter(page-list);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black-soft);
  color: var(--color-white);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  /* Выравнивание плашки по центру первой строки.
     При font-size 17-18px и line-height 1.4 центр первой
     строки ≈ 12-13px от верха, плашка 24px тоже центрируется
     по 12. Лёгкий margin-top компенсирует визуальное
     ощущение «нависания» плашки над текстом. */
  margin-top: 0.15em;
}


/* ══════════════════════════════════════════════════
   КОМПАКТНАЯ ВВОДНАЯ ФРАЗА
   Маленький параграф-introducer перед нумерованным
   списком, info-блоком, doc-блоком. Размер согласован
   с этими блоками (17px → 18px на десктопе).

   Отличается от .page__article-intro тем, что не
   укрупняется до 20px на ≥1440 — это вспомогательный
   текст, а не основной интро статьи.

   Использование:
     <p class="page__hint">Чтобы забронировать столик:</p>
     <ol class="page__numbered-list">…</ol>
   ══════════════════════════════════════════════════ */
.page__hint {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
  margin-bottom: 16px;
}


/* ══════════════════════════════════════════════════
   АККОРДЕОН
   Раскрывающийся блок на <details>/<summary>: вопрос/ответ
   в FAQ, «как добраться» в htg, «Суини Тодд» в halls.

   Использование:
     <details class="page__accordion">
       <summary class="page__accordion-summary">
         <span class="page__accordion-title">Заголовок</span>
         <svg class="page__accordion-chevron" viewBox="0 0 24 24"
              fill="none" stroke="currentColor" stroke-width="1.5"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <path d="M6 9l6 6 6-6"/>
         </svg>
       </summary>
       <div class="page__accordion-body">
         <p>Содержимое аккордеона.</p>
       </div>
     </details>

   Линия-разделитель сверху ставится автоматически. Группа
   аккордеонов выглядит как стопка с тонкими линиями между.

   Модификатор .page__accordion--compact уменьшает заголовок
   и используется для вложенных аккордеонов (как htg__entrance
   внутри htg__sub).
   ══════════════════════════════════════════════════ */
.page__accordion {
  border-top: 1px solid var(--color-black-soft-25);
}

.page__accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  color: var(--color-black-soft);
  text-align: left;
}

.page__accordion-summary::-webkit-details-marker { display: none; }
.page__accordion-summary::marker { content: ''; }

.page__accordion-summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

.page__accordion-title {
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  /* Чуть менее «сжатый» tracking, чем у других заголовков
     (-0.03em → -0.015em) — у заголовков-вопросов нужна более
     спокойная читаемость, а не плотная композиция. */
  letter-spacing: -0.015em;
}

.page__accordion-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-black-soft-40);
  transition: transform var(--duration-base) var(--ease-out-smooth);
}

.page__accordion[open] .page__accordion-chevron {
  transform: rotate(180deg);
}

.page__accordion-body {
  padding: 0 0 24px;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
}

.page__accordion-body p + p {
  margin-top: 12px;
}

.page__accordion-body ul {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page__accordion-body li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.page__accordion-body li::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--color-black-soft);
  margin-top: 0.5em;
}

/* Компактный вариант для вложенных аккордеонов (3-й уровень).
   Заголовок поменьше, тонкая верхняя линия. */
.page__accordion--compact {
  border-top: 1px solid var(--color-black-soft-10);
}

.page__accordion--compact > .page__accordion-summary {
  padding: 14px 0;
}

.page__accordion--compact .page__accordion-title {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
}

.page__accordion--compact .page__accordion-chevron {
  width: 18px;
  height: 18px;
}

/* Отступ между параграфом/списком и вложенным compact-аккордеоном.
   Срабатывает когда в .page__accordion-body после текста идёт
   вложенный compact-аккордеон (как в FAQ-вопросе с под-вопросами). */
.page__accordion-body > .page__accordion--compact {
  margin-top: 20px;
}

/* Если после первого вложенного compact идёт второй — между ними
   достаточно их собственной верхней линии (border-top), но
   убираем удвоение margin: соседние compact-аккордеоны не должны
   получать дополнительный отступ. */
.page__accordion--compact + .page__accordion--compact {
  margin-top: 0;
}


/* Обёртка для группы аккордеонов идущей после заголовка-карточки
   (.page__section-title--marker + subtitle/address/action).
   Большой отступ сверху отделяет «шапку» площадки от деталей. */
.page__accordions {
  margin-top: 64px;
}


/* ══════════════════════════════════════════════════
   ССЫЛКА-ДОКУМЕНТ С PDF-БЕЙДЖЕМ
   Подчёркнутая пунктиром ссылка на скачивание файла
   с уголком «PDF» в конце.

   Использование:
     <a class="page__doc-link" href="/documents/file.pdf"
        target="_blank" rel="noopener">
       Название документа
       <span class="page__doc-badge">PDF</span>
     </a>

   Группа ссылок-документов:
     <div class="page__docs">
       <a class="page__doc-link" …>Документ 1<span class="page__doc-badge">PDF</span></a>
       <a class="page__doc-link" …>Документ 2<span class="page__doc-badge">PDF</span></a>
     </div>
   ══════════════════════════════════════════════════ */
.page__docs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page__doc-link {
  display: inline;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: auto;
  transition: opacity var(--duration-fast) ease;
}

.page__doc-link:hover { opacity: 0.6; }
.page__doc-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.page__doc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--color-black-soft);
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
}


/* ══════════════════════════════════════════════════
   INLINE-ССЫЛКА В ТЕКСТЕ
   Пунктирное подчёркивание, наследует цвет родителя.
   Используется внутри параграфов для телефонов, email,
   внешних ссылок.

   Использование:
     <p>Свяжитесь с кассой по телефону
        <a href="tel:+74959151217" class="page__inline-link">+7 495 915-12-17</a>.
     </p>
   ══════════════════════════════════════════════════ */
.page__inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity var(--duration-fast) ease;
}

.page__inline-link:hover { opacity: 0.6; }
.page__inline-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════
   INLINE-ССЫЛКА-СНОСКА ПОД ТЕКСТОМ
   Сплошное подчёркивание + маленькая стрелка вправо.
   Ставится под параграфом или под телом аккордеона как
   переход к подробной странице («Как оформить возврат →»,
   «Все вопросы о билетах →»).

   В отличие от .page__inline-link — это самостоятельный
   блочный элемент с собственным отступом сверху, не вшитый
   в текст параграфа.

   Использование:
     <a href="/tickets#returns" class="page__action-inline">
       Как оформить возврат
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round" aria-hidden="true">
         <path d="M5 12h14M12 5l7 7-7 7"/>
       </svg>
     </a>
   ══════════════════════════════════════════════════ */
.page__action-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--color-black-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--color-black-soft);
  padding-bottom: 2px;
  transition: color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}

.page__action-inline svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out-smooth);
}

.page__action-inline:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.page__action-inline:hover svg {
  transform: translateX(3px);
}

.page__action-inline:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}


/* ══════════════════════════════════════════════════
   КНОПКА-ССЫЛКА (ACTION-LINK)
   Прямоугольная плашка с текстом и стрелкой. По умолчанию
   тёмная (чёрный фон, белый текст). Модификатор --light
   делает её светлой (белый фон, тёмный текст, тонкая граница).

   Использование (тёмная — основная CTA):
     <a href="/somewhere" class="page__action">
       Текст кнопки
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round" aria-hidden="true">
         <path d="M5 12h14M12 5l7 7-7 7"/>
       </svg>
     </a>

   Светлая (вторичная):
     <a href="/somewhere" class="page__action page__action--light">
       Текст кнопки <svg …>…</svg>
     </a>

   Полная ширина в колонке:
     <a href="…" class="page__action page__action--block">…</a>
   ══════════════════════════════════════════════════ */
.page__action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  background: var(--color-black-soft);
  color: var(--color-white);
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none!important;
  margin-top: 32px;
  transition: opacity var(--duration-fast) ease;
}

.page__action svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out-smooth);
}

.page__action:hover { opacity: 0.85; }
.page__action:hover svg { transform: translateX(4px); }

.page__action:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

/* Светлая модификация: белый фон + чёрный текст + тонкая граница */
.page__action--light {
  background: transparent;
  color: var(--color-black-soft);
  border: 1px solid var(--color-black-soft-25);
}

.page__action--light:hover {
  opacity: 1;
  background: var(--color-black-soft-04);
  border-color: var(--color-black-soft);
}

/* Растянутая на всю ширину контейнера. Двойной класс — чтобы
   специфичность была выше .page__action в @media (≥768/≥1024),
   где базовый класс получает width: 50%. */
.page__action.page__action--block {
  display: flex;
  width: 100%;
  min-width: 0;
}


/* ══════════════════════════════════════════════════
   ФОТО 4:3
   Стандартное фото блока «информация о сцене / здании /
   магазине» с радиусом и crop'ом.

   Использование:
     <img class="page__photo"
          src="/assets/images/example.jpg"
          alt="Описание" loading="lazy">

   В составе галереи с табами:
     <div class="page__photos">
       <img class="page__photo" data-view="1" src="…" alt="…">
       <img class="page__photo" data-view="2" hidden src="…" alt="…">
       <div class="page__photo-tabs">
         <button class="page__photo-tab is-active" data-target="1">Фото зала</button>
         <button class="page__photo-tab" data-target="2">Схема зала</button>
       </div>
     </div>
   ══════════════════════════════════════════════════ */
.page__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--card-radius);
  display: block;
}

.page__photo[hidden] {
  display: none;
}

.page__photos {
  /* контейнер для фото + табов; самостоятельных стилей не имеет */
}


/* ══════════════════════════════════════════════════
   ТАБЫ ПЕРЕКЛЮЧЕНИЯ ФОТО
   Горизонтальная панель с равными по ширине кнопками,
   соединёнными общими границами. Активная заливается серым.

   Использование: см. .page__photos выше.

   JS-логика: переключает [hidden] на .page__photo и
   .is-active на .page__photo-tab по data-target/data-view.
   ══════════════════════════════════════════════════ */
.page__photo-tabs {
  display: flex;
  margin-top: 12px;
}

.page__photo-tab {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
  color: var(--color-black-soft);
  background: none;
  border: 1px solid #DFDFDF;
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.page__photo-tab:not(:first-child) {
  border-left: none;
}

.page__photo-tab.is-active {
  background: #DFDFDF;
}

.page__photo-tab:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════
   ИНФОРМАЦИОННЫЙ БЛОК (АДРЕС/РЕЖИМ/ТЕЛЕФОН)
   Стопка пар «лейбл → значение» в стиле <dl>.

   Использование:
     <dl class="page__info">
       <div class="page__info-row">
         <dt class="page__info-label">Адрес:</dt>
         <dd class="page__info-value">Москва, Земляной Вал, 76/21</dd>
       </div>
       <div class="page__info-row">
         <dt class="page__info-label">Телефон:</dt>
         <dd class="page__info-value">
           <a href="tel:…" class="page__inline-link">+7 495 915-12-17</a>
         </dd>
       </div>
     </dl>
   ══════════════════════════════════════════════════ */
.page__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

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

.page__info-label {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  line-height: 1.45;
  color: var(--color-black-soft);
  margin: 0;
}

.page__info-value {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: var(--font-weight-body);
  line-height: 1.45;
  color: var(--color-black-soft);
  margin: 0;
}


/* ══════════════════════════════════════════════════
   КОНТАКТНАЯ ГРУППА
   Карточка с заголовком-маркером, поясняющей надписью
   и стопкой строк с телефонами/email/часами работы.
   Несколько таких групп идут друг за другом, отделённые
   только padding'ами (без линий-разделителей).

   Используется на странице FAQ (правая колонка контактов),
   на странице «Контакты» (когда появится), в страничном
   контактном блоке любого раздела.

   Использование:
     <div class="page__contact">
       <p class="page__contact-title">Касса театра</p>
       <p class="page__contact-sub">По вопросам покупки билетов</p>
       <div class="page__contact-lines">
         <div class="page__contact-line">
           <a href="tel:+74959151217" class="page__contact-phone">+7 495 915-12-17</a>
         </div>
         <div class="page__contact-line">
           <span class="page__contact-hours">Ежедневно с 11:00 до 20:00</span>
         </div>
       </div>
     </div>
   ══════════════════════════════════════════════════ */
.page__contact {
  padding: 20px 0;
}

.page__contact:last-child {
  padding-bottom: 0;
}

/* Заголовок группы — H3 с маркером-квадратиком 8×8.
   Структурно идентичен .page__article-title--marker, но
   с другим bottom-отступом (16px вместо 24px) и
   чуть более плотным line-height — карточка контактов
   компактнее статьи. */
.page__contact-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-accent);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.015em;
  color: var(--color-black-soft);
  margin-bottom: 16px;
}

.page__contact-title::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--color-black-soft);
  margin-top: 0.35em;
}

/* Поясняющая надпись под заголовком — «По вопросам
   покупки билетов, возвратов и репертуара». */
.page__contact-sub {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-black-soft);
  margin-bottom: 4px;
}

.page__contact-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page__contact-line {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  line-height: 1.3;
  color: var(--color-black-soft);
}

/* Телефон — крупнее обычного текста (medium-вес).
   В отличие от .page__inline-link не имеет пунктирного
   подчёркивания: для контактов выглядит чище. */
.page__contact-phone {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  color: var(--color-black-soft);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.page__contact-phone:hover {
  color: var(--color-brand);
}

.page__contact-phone:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Email — пунктирное подчёркивание как у inline-link */
.page__contact-email {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  color: var(--color-black-soft);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) ease;
}

.page__contact-email:hover {
  color: var(--color-brand);
}

.page__contact-email:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Доп.информация рядом с телефоном или отдельной строкой —
   часы работы, добавочный номер, заметка. Чуть мельче и
   выцветший. */
.page__contact-hours {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: var(--font-weight-body);
  color: var(--color-black-soft);
}


/* ══════════════════════════════════════════════════
   ПРЕДУПРЕЖДЕНИЕ
   Параграф в тонкой серой рамке. Используется для
   важных предупреждений, оговорок, замечаний.

   Использование:
     <div class="page__notice" role="note">
       Партнёры могут взимать комиссию за реализацию билетов.
     </div>

   С выделением «Важно:» в начале:
     <div class="page__notice" role="note">
       <strong>Важно:</strong> Здание историческое, лифты отсутствуют.
     </div>
   ══════════════════════════════════════════════════ */
.page__notice {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--color-black-soft-25);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: var(--font-weight-body);
  line-height: 1.35;
  color: var(--color-black-soft);
}

/* Между двумя смежными notice-блоками — половинный отступ.
   Используется когда подряд идут предупреждение + предупреждение
   (как «Онлайн у партнёров»: блок про комиссию + блок про
   неаккредитованных агентов). */
.page__notice + .page__notice {
  margin-top: 14px;
}

.page__notice strong {
  font-weight: var(--font-weight-medium);
}


/* ══════════════════════════════════════════════════
   ТОНКИЙ РАЗДЕЛИТЕЛЬ ВНУТРИ КОЛОНКИ
   В отличие от .page__divider (полная ширина под баром,
   1px чёрный), этот — для разделения блоков внутри секции.
   Тонкая 15%-полупрозрачная линия.

   По умолчанию имеет симметричный воздух 32px сверху/снизу —
   чтобы сразу выглядел как полноценный визуальный разделитель,
   независимо от того, какие блоки идут до и после. Если в каком-то
   месте нужны другие отступы — задавайте margin на ближайшем
   родителе/смежнике, а не на самом rule.

   Использование:
     <hr class="page__rule" aria-hidden="true">
   ══════════════════════════════════════════════════ */
.page__rule {
  width: 100%;
  height: 1px;
  background: var(--color-black-soft-15);
  border: none;
  margin: 32px 0;
}


/* ══════════════════════════════════════════════════
   ПЛАНШЕТ (768–1023.98px) — общие текстовые блоки
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page__back {
    padding: 40px 16px 0;
  }

  .page__columns {
    padding: 0 16px 80px;
  }

  /* Большой отступ от divider до контента — на планшете 80px */
  .page__divider + .page__columns {
    padding-top: 80px;
  }

  /* Кнопка-ссылка на планшете и шире — 1/2 ширины колонки контейнера.
     display:flex + width:50% даёт половину ширины родительской колонки,
     stretching на стрелочку и текст слева. Модификатор --block по-прежнему
     перебивает это правило (width:100%). */
  .page__action {
    display: flex;
    width: 50%;
  }

  /* Заголовок с маркером — 30px на планшете */
  .page__section-title--marker {
    font-size: 30px;
  }
}


/* ══════════════════════════════════════════════════
   ДЕСКТОП (≥1024px) — общие текстовые блоки
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .page__back {
    padding: 48px var(--inner-pad-x) 0;
  }

  .page__back-link {
    font-size: 18px;
  }

  .page__back + .page__intro {
    padding-top: 32px;
  }

  /* Двухколоночный layout: flex с gap из --inner-col-gap */
  .page__columns {
    display: flex;
    align-items: flex-start;
    gap: var(--inner-col-gap);
    padding: 0 var(--inner-pad-x) var(--inner-pad-bottom);
  }

  /* Большой отступ от divider до контента — на десктопе 96px */
  .page__divider + .page__columns {
    padding-top: 96px;
  }

  .page__column {
    flex: 1;
    min-width: 0;
  }

  /* Вторичная колонка уходит влево, и теряет верхнюю линию.
     Сбрасываем margin-top из мобильного правила — на десктопе
     колонка стоит рядом с основной, отступ сверху не нужен. */
  .page__column--secondary {
    order: -1;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }

  /* На десктопе основная колонка после secondary-first тоже
     теряет мобильный margin-top — колонки стоят рядом
     по горизонтали через flex+gap. */
  .page__column--secondary:first-child + .page__column {
    margin-top: 0;
  }

  /* Если используется одна колонка с .page__column--single,
     ограничиваем её ширину половиной (как было в not-found). */
  .page__column--single {
    flex: 0 1 calc(50% - var(--inner-col-gap) / 2);
    min-width: 0;
  }

  /* Заголовки секций крупнее */
  .page__section-title {
    font-size: 24px;
    margin-bottom: 60px;
  }

  /* Заголовок с маркером — 32px и квадратик уменьшается до 20×20.
     При увеличении font-size глифы становятся крупнее, и квадратик
     24×24 начинает выглядеть массивнее, чем нужно. 20×20 балансирует. */
  .page__section-title--marker {
    font-size: 32px;
    gap: 16px;
  }

  .page__section-title--marker::before {
    width: 20px;
    height: 20px;
    margin-top: 5px;
  }

  /* Подзаголовок и адрес — 19px на десктопе */
  .page__section-subtitle,
  .page__section-address {
    font-size: 19px;
  }

  .page__article-title {
    font-size: 22px;
  }

  /* Текст внутри статей укрупняется */
  .page__article-intro,
  .page__article-text,
  .page__bullet-list,
  .page__numbered-list,
  .page__hint {
    font-size: 18px;
  }

  /* Аккордеон: больше воздуха */
  .page__accordion-summary {
    padding: 20px 0;
  }

  /* Заголовок аккордеона остаётся 20px на всех брейкпоинтах —
     достаточный размер для вопросов в FAQ и подзаголовков
     в htg/halls, не требует масштабирования. */

  .page__accordion-body {
    font-size: 17px;
  }

  /* Группа аккордеонов после заголовка-карточки — больше отступа */
  .page__accordions {
    margin-top: 96px;
  }

  /* Action-link чуть выше и крупнее. На десктопе — 1/2 ширины
     родительской колонки (для двухколоночного .page__columns
     это даёт ~1/4 ширины страницы). */
  .page__action {
    display: flex;
    width: 50%;
    font-size: 15px;
    height: 54px;
    padding: 0 22px;
  }

  /* Info-блок укрупняется */
  .page__info-label,
  .page__info-value {
    font-size: 18px;
  }
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1280px) — текст 18-19px
   ══════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .page__article-text,
  .page__article-intro,
  .page__doc-link,
  .page__bullet-list,
  .page__numbered-list {
    font-size: 18px;
  }
}


/* ══════════════════════════════════════════════════
   ШИРОКИЙ ДЕСКТОП (≥1440px) — финальные размеры
   ══════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .page__section-title {
    font-size: 32px;
  }

  /* Заголовок с маркером — финальные 34px, margin квадратика +1px */
  .page__section-title--marker {
    font-size: 34px;
  }

  .page__section-title--marker::before {
    margin-top: 6px;
  }

  .page__section-subtitle,
  .page__section-address {
    font-size: 20px;
  }

  .page__article-text,
  .page__article-intro,
  .page__article-subtitle,
  .page__doc-link,
  .page__action-inline,
  .page__bullet-list {
    font-size: 20px;
  }

  .page__action-inline svg {
    width: 20px;
    height: 20px;
  }
}