/* ============================================================
   CONTACTS.CSS — Страница «Контакты»
   Театр на Таганке

   Подключение:
     fonts → tokens → style → page → menu → search-desktop
     → contacts.css

   Страница собрана из стандартных текстовых блоков .page__*
   (columns/section/contact/article), описанных в общем ките.
   Здесь — только специфика страницы «Контакты»:
     — сдвиг текста у разделителей (правая колонка + секционная линия слева)
     — выравнивание первого блока обеих колонок по одной линии
     — групповой разрыв внутри блока «Касса»
     — выделение весом 500 (адрес кассы, ФИО дирекции)
     — десктопные размеры шрифтов (заголовок 28 / подзаголовок 22 / текст 20)
     — разделитель 2/3 ширины в левой колонке

   Всё scoped к .page--contacts или к локальным классам .contacts__*,
   чтобы не задеть общие .page__* на других страницах.
   ============================================================ */


/* ══════════════════════════════════════════════════
   ОТСТУПЫ И РАЗДЕЛИТЕЛИ БЛОКОВ
   .page__contact по умолчанию — padding: 20px 0 (см. page.css).
   Здесь мобильный базовый зазор правой колонки увеличен до 48px,
   а на десктопе отступы становятся асимметричными для ОБЕИХ
   колонок (см. блок ДЕСКТОП ниже). Тонкая линия-разделитель
   между блоками — только в правой колонке (список «Дирекция»).
   ══════════════════════════════════════════════════ */
.contacts__directory .page__contact {
  padding: 48px 0;
}

/* Первый блок секции выравниваем по верхней границе: padding-top
   20px (базовый для .page__contact в page.css), а не увеличенный.
   Так «Москва» слева и «Директор» справа стоят на одной линии.
   ВАЖНО: :first-child здесь НЕ работает — первым ребёнком секции
   идёт заголовок (<h2>), а .page__contact только второй. Поэтому
   целимся через смежник после заголовка. Правило общее для обеих
   колонок (левая «Касса», правая «Дирекция и отделы»). */
.page--contacts .page__section-title + .page__contact {
  padding-top: 20px;
}

.contacts__directory .page__contact + .page__contact {
  border-top: 1px solid var(--color-black-soft-25);
}


/* ══════════════════════════════════════════════════
   ГРУППОВОЙ РАЗРЫВ В БЛОКЕ «КАССА»
   Внутри .page__contact-lines строки идут с gap: 4px.
   Здесь адрес + «Показать на карте» — одна смысловая группа,
   телефон + почта — другая. Отбиваем группы отступом
   после ссылки на карту.
   ══════════════════════════════════════════════════ */
.contacts__casse-break {
  margin-bottom: var(--space-m);
}


/* ══════════════════════════════════════════════════
   ВЫДЕЛЕНИЕ ВЕСОМ (medium, 500)
   Слева — строка адреса кассы. Справа — ФИО в списке
   «Дирекция и отделы» (это .page__contact-sub; в правой
   колонке sub всегда содержит имя, поэтому целимся по
   .contacts__directory без отдельного класса).
   ══════════════════════════════════════════════════ */
.contacts__casse-address,
.contacts__directory .page__contact-sub {
  font-weight: var(--font-weight-medium);
}


/* ══════════════════════════════════════════════════
   КНОПКА «СХЕМЫ И ЗАЛЫ» (.page__action)
   Базовый page.css даёт 14px (мобилка) / 15px (десктоп).
   На странице Билеты кнопки крупнее — 16px / 18px. Повторяем
   тот же размер, чтобы «Схемы и залы» совпадала с «Перейти
   к афише». Мобильный размер — базовым правилом, десктопный
   18px — в медиазапросе ниже.
   ══════════════════════════════════════════════════ */
.page--contacts .page__action {
  font-size: 16px;
}


/* ══════════════════════════════════════════════════
   ВЫРАВНИВАНИЕ ТЕКСТА ПО ЛЕВОМУ КРАЮ ПОДЗАГОЛОВКА
   Под подзаголовком с квадратиком-буллетом (.page__contact-title)
   текст блока (.page__contact-sub, .page__contact-lines) сдвигаем
   вправо на ширину буллета + gap (8px + 10px), чтобы его левый
   край совпадал с текстом подзаголовка, а не с краем блока.
   Блоки без подзаголовка (напр. «Касса») не трогаем — там буллета
   нет, сиблинг-селектор не срабатывает. Одинаково на всех
   брейкпоинтах: буллет 8px и gap 10px на десктопе не меняются.
   ══════════════════════════════════════════════════ */
.page--contacts .page__contact-title ~ .page__contact-sub,
.page--contacts .page__contact-title ~ .page__contact-lines {
  padding-left: calc(8px + 10px);
}


/* ══════════════════════════════════════════════════
   ДЕСКТОП
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Крупный заголовок — «Касса», «Дирекция и отделы».
     Размер 28px (базовый 24px из page.css) и отступ до контента
     60px (базовый 70px). Красный «Сцены и адреса» — это
     .page__article-title (h3), правила его не затрагивают. */
  .page--contacts .page__section-title {
    font-size: 28px;
    margin-bottom: 60px;
  }

  /* Подзаголовок — названия блоков («Директор», «Режим работы»,
     «Основная и Малая сцены» и т.д.) */
  .page--contacts .page__contact-title {
    font-size: 22px;
  }

  /* Текст — описания, адреса, телефоны, почта, доб. */
  .page--contacts .page__contact-sub,
  .page--contacts .page__contact-line,
  .page--contacts .page__contact-phone,
  .page--contacts .page__contact-email,
  .page--contacts .page__contact-hours {
    font-size: 20px;
  }

  /* Кнопка «Схемы и залы» на десктопе — 18px (как «Перейти к
     афише» на странице Билеты; базовый page.css даёт 15px). */
  .page--contacts .page__action {
    font-size: 18px;
  }

  /* ── Сдвиг текста относительно РАЗДЕЛИТЕЛЕЙ ──
     Меняем только зазоры, примыкающие к линии-разделителю:
     текст ПОД разделителем ближе к нему (меньше padding-top),
     текст НАД разделителем дальше от него (больше padding-bottom).
     Блоки без разделителя (внутри «Кассы», между сценами) не трогаем.
     --shift = 12px = 25% от базового зазора. Для подбора величины
     меняем только это число. */
  .page--contacts {
    --shift: 12px;
  }

  /* Правая колонка — разделитель между каждой парой блоков.
     Блок ПОД разделителем несёт border-top → уменьшаем верхний зазор. */
  .contacts__directory .page__contact + .page__contact {
    padding-top: calc(48px - var(--shift));
  }

  /* Блок НАД разделителем (за ним следует ещё блок) → увеличиваем нижний зазор.
     Последний блок (без следующего) не трогаем — под ним нет разделителя. */
  .contacts__directory .page__contact:has(+ .page__contact) {
    padding-bottom: calc(48px + var(--shift));
  }

  /* Левая колонка — единственный разделитель это секционная линия 2/3
     между «Касса» и «Сцены и адреса». Тот же принцип, но на секциях
     (базовый зазор секции — 40px из page.css). Секция НАД разделителем
     («Касса») получает больший нижний зазор; секция ПОД разделителем
     («Сцены») — меньший верхний (см. правило 2/3 ниже).
     Отступ над разделителем удвоен (× 2) — по правке задачи. */
  .page--contacts .page__column--secondary .page__section:has(+ .page__section) {
    padding-bottom: calc((40px + var(--shift)) * 2);
  }

  /* Разделитель между «Касса» и «Сцены и адреса» в ЛЕВОЙ колонке —
     на 2/3 ширины. border-top всегда во всю ширину бокса, поэтому
     линию рисуем псевдоэлементом. Базовый full-width border от
     .page__section + .page__section (page.css) снимаем.
     Правая колонка (список «Дирекция и отделы») остаётся с
     обычными полноширинными разделителями между блоками. */
  .page--contacts .page__column--secondary .page__section + .page__section {
    border-top: none;
    position: relative;
    padding-top: calc(40px - var(--shift));
  }

  .page--contacts .page__column--secondary .page__section + .page__section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 66.6667%;
    border-top: 1px solid var(--color-black-soft);
  }
}