/* Start:/local/templates/main/styles.css?178380757925998*/
/* Стили содержимого страниц (их видит визуальный редактор Битрикса).
   Каркас/секции шаблона — template_styles.css, токены и шрифты — css/tokens.css. */

/* ============================================================
   Задача 10: раздел «Жизнь прихода» (/news/).
   Лента в стиле списка .ann-item главной, панель фильтров,
   выделенный блок важной новости, постраничная навигация
   (+ бесконечная подгрузка в main.js), статья и врезка
   фотоальбома (задача 24 — интерфейс album.embedded из
   sdamp-synlink). Всё на токенах css/tokens.css, брейкпоинты —
   как у главной (1020px / 860px в template_styles.css).
   ============================================================ */

/* --- Заголовок раздела (H1 в .section-head вместо H2 главной) ---
   Вдвое крупнее секционных заголовков главной (правка заказчика 2026-07-11);
   на ≤620px — умеренно меньше (см. медиаблок внизу), но заметно крупнее
   прежнего var(--h2). */
.news-title {
  font-family: var(--font-display);
  font-size: calc(var(--h2) * 2);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
}

/* Шапка раздела: h1 и переключатель «Фотоплёнка» на одной линии
   (базовый .section-head — flex + space-between в template_styles.css;
   baseline с гигантским display-заголовком опускает кнопку — центрируем).
   Двойной класс — специфичность 0,2,0: Битрикс склеивает CSS шаблона в
   порядке styles.css → template_styles.css, и одиночный .section-head--news
   (0,1,0) проиграл бы более позднему .section-head { align-items: baseline } */
.section-head.section-head--news { align-items: center; }

/* --- Панель фильтров: категории + «только с фото» ---
   Кнопки — родня чипсам лавки и месяцам расписания (.sched-months button) */
.news-filter {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}
.news-filter__cats { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.news-filter__btn, .news-filter__toggle {
  display: inline-block;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 14px;
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.02em;
  color: var(--ink); background: none;
  transition: background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.news-filter__btn:hover, .news-filter__toggle:hover {
  background: var(--accent-wash); color: var(--accent-ink); border-color: var(--accent-wash);
}
.news-filter__btn.is-active, .news-filter__toggle.is-active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}

/* --- Лента: список в стиле .ann-item главной (не карточки) --- */
.news-feed { display: flex; flex-direction: column; }
.news-item {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-4); padding-block: var(--s-4); align-items: center;
}
.news-item + .news-item { border-top: 1px solid var(--line); }
.news-item--noimg { grid-template-columns: 1fr; }
.news-item__media { display: block; overflow: hidden; border-radius: var(--radius); }
.news-item__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.news-item__media:hover img { transform: scale(1.04); }
.news-item__meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px var(--s-3); margin: 0 0 2px; max-width: none;
}
.news-item__date { font: 700 var(--text-caption)/1.5 var(--font-serif); color: var(--accent-ink); }
.news-item__cat {
  font: 600 0.75rem/1.5 var(--font-sans);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.news-item__photos {
  display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 2px 9px; font: 600 0.6875rem/1.4 var(--font-sans);
  color: var(--ink-faint); white-space: nowrap;
}
/* Тег — h2 (порядок заголовков после h1 «Жизнь прихода»), вид — как у
   .ann-item h3 главной: гасим тайповое правило h2 из template_styles.css
   (font-display + letter-spacing 0.01em) */
.news-item__title {
  font-family: var(--font-serif); letter-spacing: normal;
  font-size: var(--h3); margin: 2px 0 6px;
}
.news-item__title a { color: var(--ink); transition: color var(--t-fast) var(--ease); }
.news-item__title a:hover { color: var(--accent-ink); }
.news-item__text { font-size: var(--text-caption); color: var(--ink-soft); margin: 0; }
.news-empty { padding: var(--s-5) 0; font-size: var(--text-caption); color: var(--ink-faint); }

/* --- Важная новость: акцентный блок над лентой (плашка «Важное» — --accent) ---
   Правка заказчика 2026-07-11: фото вплотную к краям карточки (слева/сверху/
   снизу; скругление сохраняет overflow:hidden самой карточки), карточка
   компактнее по вертикали — паддинги только у текстовой колонки, высоту
   диктует текст: картинка абсолютом заполняет свою колонку (object-fit:cover)
   и высоту не раздувает. */
.news-featured {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-5); align-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong); border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0; margin-bottom: var(--s-5);
}
.news-featured--noimg { grid-template-columns: 1fr; }
.news-featured__media {
  align-self: stretch; position: relative;
  display: block; overflow: hidden;
  min-height: 240px; /* короткий текст не схлопывает медиа-колонку */
}
.news-featured__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.news-featured:hover .news-featured__media img { transform: scale(1.02); }
.news-featured__body { padding: var(--s-4) var(--s-5) var(--s-4) 0; }
.news-featured--noimg .news-featured__body { padding: var(--s-4) var(--s-5); }
.news-featured__flag {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border-radius: 999px; padding: 5px 12px;
  font: 700 0.6875rem/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.news-featured__title {
  /* тег — h2, но НЕ display-шрифт (правка заказчика): гасим тайповое
     правило h2 из template_styles.css, как у .news-item__title */
  font-family: var(--font-serif); letter-spacing: normal;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 700; margin: 2px 0 var(--s-2);
}
.news-featured__title a { color: var(--ink); transition: color var(--t-fast) var(--ease); }
.news-featured__title a:hover { color: var(--accent-ink); }
.news-featured__text { font-size: var(--text-caption); color: var(--ink-soft); margin: 0 0 var(--s-3); }

/* --- Постраничная навигация (bitrix:main.pagenavigation '.default') ---
   Разметка стока: .bx-pagination > .bx-pagination-container > ul > li
   (.bx-active, .bx-pag-prev/next/all). Компонент сам подключает свой
   style.css, поэтому селекторы здесь — ПОЛНОЙ стоковой цепочкой: короткие
   (.news-pager .bx-pagination li span) проигрывают стоку по специфичности,
   и остаются серые пилюли 32px с синей #0083d1 активной страницей.
   При работающей бесконечной подгрузке JS скрывает блок классом is-js-hidden;
   при ошибке fetch класс снимается — навигация возвращается. */
.news-pager { display: flex; justify-content: center; margin-top: var(--s-5); }
.news-pager.is-js-hidden { display: none; }
.news-pager .bx-pagination { margin: 0; }
.news-pager .bx-pagination .bx-pagination-container ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  list-style: none; margin: 0; padding: 0;
}
.news-pager .bx-pagination .bx-pagination-container ul li { display: block; margin: 0; }
.news-pager .bx-pagination .bx-pagination-container ul li span {
  display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: 600 var(--text-caption)/1 var(--font-sans); color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.news-pager .bx-pagination .bx-pagination-container ul li a {
  display: block; height: auto; min-width: 0; line-height: normal;
  border-radius: var(--radius); text-decoration: none;
}
.news-pager .bx-pagination .bx-pagination-container ul li a:hover span {
  background: var(--accent-wash); color: var(--accent-ink);
}
.news-pager .bx-pagination .bx-pagination-container ul li.bx-active span {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
/* «Всё»/«Назад»/«Вперёд»: сток красит их отдельно (белые пилюли, рамка 2px
   #eff0f1, line-height 28px, padding 0 18px) — приводим к общему виду кнопок.
   Как и в стоке: правило без <a> матчит оба состояния (задаёт приглушённый
   цвет отключённого на крайних страницах), правило с <a> возвращает
   активной ссылке основной цвет. */
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-all span,
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-prev span,
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-next span {
  background: none; border: 1px solid var(--line-strong);
  line-height: 1; padding: 0 14px; color: var(--ink-faint);
}
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-all a span,
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-prev a span,
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-next a span {
  background: none; border: 1px solid var(--line-strong);
  line-height: 1; padding: 0 14px; color: var(--ink);
}
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-all a:hover span,
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-prev a:hover span,
.news-pager .bx-pagination .bx-pagination-container ul li.bx-pag-next a:hover span {
  background: var(--accent-wash); border-color: var(--line-strong); color: var(--accent-ink);
}

/* Sentinel бесконечной подгрузки (создаёт JS) + индикатор загрузки
   (в режиме Фотоплёнки контейнер ленты — .news-albums) */
.news-feed__sentinel { min-height: 1px; }
.news-feed.is-loading ~ .news-feed__sentinel,
.news-albums.is-loading ~ .news-feed__sentinel {
  padding: var(--s-3) 0; text-align: center;
  font: 500 var(--text-caption)/1 var(--font-sans); color: var(--ink-faint);
}
.news-feed.is-loading ~ .news-feed__sentinel::after,
.news-albums.is-loading ~ .news-feed__sentinel::after { content: "Загружаем…"; }

/* --- Фотоплёнка: сетка фотоальбомов (/news/?photos=1) ---
   3 колонки → 2 на ≤1020px → 1 на ≤620px (медиаблоки внизу файла).
   Обложка 4:3 — как .news-item__media img (aspect-ratio + object-fit),
   бейдж «N фото» — родня .news-item__photos, но на тёмной подложке
   поверх фото (как .date-badge главной); заголовок — serif, как у ленты. */
.news-albums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  padding-top: var(--s-3);
}
.news-album { min-width: 0; }
.news-album__cover {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); margin-bottom: var(--s-3);
}
.news-album__cover img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.news-album__cover:hover img,
.news-album__cover:focus-visible img { transform: scale(1.04); }
.news-album__count {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-block; border-radius: 999px;
  padding: 3px 10px; font: 600 0.6875rem/1.4 var(--font-sans);
  background: rgba(16, 14, 10, 0.55); color: #FFFDF8;
  white-space: nowrap;
}
.news-album__title {
  font-family: var(--font-serif); letter-spacing: normal;
  font-size: var(--h3); margin: 2px 0 0;
}
.news-album__title a { color: var(--ink); transition: color var(--t-fast) var(--ease); }
.news-album__title a:hover { color: var(--accent-ink); }

/* --- Статья (деталь новости) --- */
.news-article { max-width: 860px; }
.news-article__meta { margin-bottom: var(--s-2); }
.news-article__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 700; line-height: 1.12; letter-spacing: 0.01em;
  text-wrap: balance; margin: 0 0 var(--s-4);
}
.news-article__pic {
  width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  margin: 0 0 var(--s-4);
}
.news-article__text { margin-bottom: var(--s-4); }
/* clearfix: обтекаемое фото не должно вылезать из текста под врезку альбома */
.news-article__text::after { content: ""; display: block; clear: both; }
/* Фото в тексте новости — контракт с импортом (задача 24, бэкенд-ветка):
   классы img-block / img-float-right / img-float-left / news-lead
   проставляет импортёр, имена — ровно такие. Дефолт — блочное фото
   по центру; img-block — его явный синоним (валидный no-op). */
.news-article__text img {
  display: block; margin: var(--s-4) auto;
  max-width: 100%; height: auto; border-radius: 3px;
}
.news-article__text img.img-block {
  float: none; display: block; margin: var(--s-4) auto; max-width: 100%;
}
.news-article__text img.img-float-right {
  float: right; max-width: 40%; margin: 4px 0 var(--s-3) var(--s-4);
}
.news-article__text img.img-float-left {
  float: left; max-width: 40%; margin: 4px var(--s-4) var(--s-3) 0;
}
.news-article__text p.news-lead { font-style: italic; }
.news-article__back { margin-top: var(--s-6); max-width: none; }

/* --- Врезка фотоальбома (деталь) — задача 24, шаг 5а ---
   Интерфейс album.embedded из sdamp-synlink, адаптированный под
   дизайн-систему сайта (токены css/tokens.css, чужие цвета не копируем).
   Без JS виден fallback-список .news-album__fallback со всеми фото;
   main.js прячет его и снимает hidden со сцены [data-album-stage].
   Состояния: IDLE (плашка и мини-плёнка видны) ↔ ACTIVE (только фото). */
.news-album-embed { margin-top: var(--s-6); }

/* Fallback-список (прогрессивное улучшение). Автор задаёт display —
   поэтому контракт hidden защищаем явным правилом (UA-стиль
   [hidden]{display:none} перебивается любым авторским display). */
.news-album__fallback {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
}
.news-album__fallback[hidden] { display: none; }
.news-album__fallback li { margin: 0; }
.news-album__fallback img {
  width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}

/* Сцена: обложка 16:10 (display не задаём — hidden до инициализации JS
   работает UA-правилом) */
.news-album-embed__stage {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--card-dark);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.news-album-embed__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; cursor: zoom-in;
}

/* Плашка-подпись (низ-лево): фон как у карточек сайта.
   pointer-events: none — клик проходит к обложке (открытие вьюера). */
.news-album-embed__overlay {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: 8px 14px;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease);
}
.news-album-embed__label { font: 600 0.8125rem/1.4 var(--font-sans); color: var(--ink); }
.news-album-embed__count {
  font: 600 0.75rem/1.4 var(--font-sans); color: var(--ink-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Стрелки ‹ › и fullscreen: полупрозрачный тёмный тон от --ink
   (токен --ink-scrim), текст — тон карточек --bg-raised;
   hover/focus — акцент */
.news-album-embed__nav,
.news-album-embed__fullscreen {
  position: absolute; display: grid; place-items: center;
  padding: 0; border: 0; cursor: pointer;
  background: var(--ink-scrim); color: var(--bg-raised);
  transition: background-color var(--t-fast) var(--ease);
}
.news-album-embed__nav:hover,
.news-album-embed__nav:focus-visible,
.news-album-embed__fullscreen:hover,
.news-album-embed__fullscreen:focus-visible { background: var(--accent); }
.news-album-embed__nav:focus-visible,
.news-album-embed__fullscreen:focus-visible {
  outline: 2px solid var(--bg-raised); outline-offset: 2px;
}
.news-album-embed__nav {
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
}
.news-album-embed__nav--prev { left: var(--s-3); }
.news-album-embed__nav--next { right: var(--s-3); }
.news-album-embed__fullscreen {
  top: var(--s-3); right: var(--s-3);
  width: 40px; height: 40px; border-radius: var(--radius);
}
.news-album-embed__nav svg,
.news-album-embed__fullscreen svg { display: block; }

/* Мини-плёнка: следующие 3 кадра (низ-право). Декоративна (aria-hidden),
   поэтому pointer-events: none всегда — иначе в IDLE клик по превью
   кадра n+1 всплывал бы до сцены и открывал вьюер на текущем кадре n
   (обманчивая интерактивная зона); теперь клик проходит к обложке. */
.news-album-embed__filmstrip {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  display: flex; gap: var(--s-2);
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.news-album-embed__filmstrip li {
  width: 88px; aspect-ratio: 16 / 10; overflow: hidden; margin: 0;
  border-radius: 3px; box-shadow: var(--shadow-card);
  background: var(--card-dark-raised);
}
.news-album-embed__filmstrip img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ACTIVE (после клика по стрелке): остаётся только фото;
   через 5 с бездействия main.js возвращает IDLE */
.news-album-embed__stage.is-active .news-album-embed__overlay { opacity: 0; }
.news-album-embed__stage.is-active .news-album-embed__filmstrip {
  opacity: 0; transform: translateY(8px);
}

/* --- Адаптив (брейкпоинты главной + 1020/620 для сетки Фотоплёнки) --- */
@media (max-width: 1020px) {
  .news-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .news-item { grid-template-columns: 108px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
  /* колонки складываются — фото важной новости в край сверху/слева/справа,
     высоту ему задаёт aspect-ratio самой медиа-колонки */
  .news-featured { grid-template-columns: 1fr; gap: var(--s-3); padding: 0; }
  .news-featured__media { min-height: 0; aspect-ratio: 16 / 9; }
  .news-featured__body { padding: 0 var(--s-4) var(--s-4); }
  .news-featured--noimg .news-featured__body { padding: var(--s-4); }
  .news-filter { justify-content: flex-start; }
  /* врезка альбома: на узких экранах мини-плёнку скрываем */
  .news-album-embed__filmstrip { display: none; }
}
@media (max-width: 620px) {
  /* умеренно меньше двойного кегля, но заметно крупнее прежнего var(--h2) */
  .news-title { font-size: calc(var(--h2) * 1.5); }
  .news-albums { grid-template-columns: 1fr; }
  /* обтекаемые фото в тексте новости — на всю ширину */
  .news-article__text img.img-float-right,
  .news-article__text img.img-float-left {
    float: none; max-width: 100%; margin: var(--s-4) auto;
  }
  /* врезка альбома: кнопки компактнее */
  .news-album-embed__nav { width: 36px; height: 36px; }
  .news-album-embed__fullscreen { width: 34px; height: 34px; }
}

/* ============================================================
   Задача 13: страница «О храме» (/about/).
   Табы .tabs — реюз из template_styles.css (как в «Лавке»),
   контент панелей — реюз .about-in/.about-hist/.person-* главной.
   ============================================================ */

/* Заголовок страницы — тот же рецепт, что .news-title (/news/);
   .lavka-title — страница «Лавка» (задача 14),
   .contacts-title — страница «Адрес и контакты» (задача 15) */
.about-title,
.lavka-title,
.contacts-title {
  font-family: var(--font-display);
  font-size: calc(var(--h2) * 2);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
}

/* Контейнер табов внутренних страниц (/about/, /lavka/) — точка входа
   общего JS-модуля в main.js */
[data-page-tabs] { margin-top: var(--s-4); }

/* Защита контракта hidden: UA-правило [hidden]{display:none} перебивается
   любым авторским display — селектор (0,2,0) гарантирует скрытие
   панели независимо от порядка склейки бандла (см. .lavka-pane[hidden]) */
[data-page-tabs] [role="tabpanel"][hidden] { display: none; }

/* Панель — «голый» контейнер без display (контракт с hidden);
   без JS все панели видимы подряд — раздёргиваем их отступами */
.about-pane { padding-top: var(--s-5); }
.about-pane + .about-pane { border-top: 1px solid var(--line); margin-top: var(--s-5); }
/* с JS видима одна панель — разделитель не нужен (hidden-соседи схлопываются
   через display:none, но правило + сработает и по невидимым — глушим точечно) */
.about-pane[hidden] + .about-pane { border-top: none; margin-top: 0; }

/* Заголовок панели — классовый эквивалент inline-стиля h2 главной */
.about-pane-h { font-size: var(--h2); margin-bottom: var(--s-4); }

/* Длинные тексты панелей: подзаголовки и списки */
.about-pane h3 { font-size: var(--h3); margin: var(--s-5) 0 var(--s-3); }
.about-pane ol, .about-pane ul { padding-left: 1.4em; display: grid; gap: 6px; }

/* Развёрнутый блок биографии священника: карточка по мотивам
   .modal-card--person, внутренности — реюз .person-head/.person-bio/.person-facts */
.person-block {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  max-width: 760px;
}
.person-block + .person-block { margin-top: var(--s-4); }

@media (max-width: 860px) {
  .person-block { padding: var(--s-4); }
}
@media (max-width: 620px) {
  .about-title,
  .lavka-title,
  .contacts-title { font-size: calc(var(--h2) * 1.5); }
}

/* End */


/* Start:/local/templates/main/template_styles.css?178655637799621*/
/* ============================================================
   Шаблон main — стили каркаса и секций, перенесены из
   одобренного макета задачи 07
   (docs/design-handoff/pages/01-home.html, <style>-блок).
   Исключены: стили служебного стенда макета (.stend).
   Токены (:root с палитрой) и @font-face — в css/tokens.css,
   подключается в header.php до этого файла.
   ============================================================ */

/* ============ База ============ */
:root {
  --header-h: 78px;                          /* фиксированная высота шапки */
  --strip-h: calc(var(--header-h) * 2);      /* широкий разделитель = две шапки */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
p { margin: 0 0 var(--s-3); max-width: var(--measure); }
h1, h2, h3 { font-family: var(--font-serif); line-height: var(--leading-heads); margin: 0; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 2px; }
/* a11y: на тёмных поверхностях акцентная обводка фокуса неразличима (1.05–2.97:1) —
   внутри тёмных блоков рамка берёт цвет текста элемента */
.afisha-box :focus-visible, .modal-card :focus-visible, .lightbox :focus-visible, .sched-bar :focus-visible { outline-color: currentColor; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: -9999px; top: var(--s-2); z-index: 100;
  background: var(--ink); color: var(--bg); padding: var(--s-2) var(--s-3); border-radius: var(--radius);
}
.skip-link:focus { left: var(--s-2); }

/* Ссылки в тексте: спокойное подчёркивание, охра на hover */
.link {
  color: var(--accent-ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.link:hover { color: var(--accent-bright, var(--accent-ink)); text-decoration-color: var(--accent-bright, var(--accent)); }
.link--arrow::after { content: " →"; }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: 600 0.9375rem/1 var(--font-sans);
  padding: 14px 22px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { box-shadow: var(--shadow-lift); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--accent-wash); }
.btn--on-dark { background: var(--accent-on-dark); color: #1A1305; }

/* Рубрика раздела: охра = «красная строка» */
.rubric {
  font: 600 0.8125rem/1 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: var(--s-3);
}
.section { padding-block: var(--s-7); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.section-head h2 { font-size: var(--h2); font-weight: 700; }
/* Подзаголовки секций под полосами-заголовками (2026-08-12): полоса несёт
   h2 раздела, внутренние заголовки понижены до h3 семантически, но кегль
   сохраняют прежний (замечание Александра: размер не уменьшать) */
.section-head h3 { font-family: var(--font-display); font-size: var(--h2); font-weight: 700; letter-spacing: 0.01em; }
.history-h { font-family: var(--font-display); font-size: var(--h2); font-weight: 700; margin-bottom: var(--s-4); }

/* ============ Шапка ============ */
.header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: var(--bg); }
.header-in { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
/* margin-left -3px: рисунок в SVG начинается не с нулевого x (stroke по x=4),
   компенсация ставит левый край креста точно на линию набора */
.brand-cross { color: var(--accent); flex: none; margin-left: -3px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: 0.01em; }
.brand-name small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: var(--text-small); color: var(--ink-soft); }
/* Заголовок раздела в мобильной шапке внутренних страниц (header--page):
   на десктопе всегда бренд, переключает мобильный медиаблок ниже */
.brand-page { display: none; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--ink); font-weight: 500; font-size: 0.9375rem;
  text-decoration: none; padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.header-contacts { display: flex; align-items: center; gap: var(--s-3); }
.header-phone { font-weight: 600; font-size: 0.9375rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.socials { display: flex; gap: var(--s-2); }
.socials a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: var(--ink-soft); border: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.socials a:hover { color: var(--accent-ink); border-color: var(--line-strong); transform: translateY(-1px); }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; color: var(--ink); }

/* ============ Hero: фото во весь первый экран ============ */
.hero { position: relative; color: var(--on-dark); overflow: hidden; }
/* 28% по вертикали: срезает лишнее небо над крестом, показывая больше
   нижней части кадра (правка Александра 2026-08-12; center top прятал
   весь низ фотографии) */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero-scrim {
  position: absolute; inset: 0;
  /* Радиальный скрим (правка Александра 2026-08-12): тёмное ядро — эллипс
     над текстовой колонкой слева, мягкое затухание по окружности к краям;
     линейный градиент читался как «светлеет слева направо». Вторым слоем —
     нижняя виньетка: тёмный низ, светлеющий кверху, граница — дуга
     (эллипс с центром ниже кромки, смещён влево: слева дуга выше, к
     центру-праву ниже — красная кривая макета Александра). Панель
     расписания несёт собственный фон (.hero-sched), ей скрим не нужен. */
  background:
    radial-gradient(ellipse 135% 95% at 36% 152%,
      rgba(15, 20, 27, 0.55) 38%,
      rgba(15, 20, 27, 0.30) 60%,
      rgba(15, 20, 27, 0) 80%),
    radial-gradient(ellipse 115% 150% at 20% 42%,
      rgba(15, 20, 27, 0.66) 0%,
      rgba(15, 20, 27, 0.40) 38%,
      rgba(15, 20, 27, 0.14) 66%,
      rgba(15, 20, 27, 0) 100%);
}
.hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--s-7); align-items: center;
  /* шапка + hero + ПОЛОВИНА полосы = ровно первый экран: на открытии
     верх и низ симметричны, при прокрутке полоса оказывается вдвое шире */
  min-height: calc(100vh - var(--header-h) - 1px - var(--strip-h) / 2);
  min-height: calc(100dvh - var(--header-h) - 1px - var(--strip-h) / 2);
  padding-block: var(--s-6);
}
.hero-eyebrow { font: 500 0.875rem/1.5 var(--font-sans); color: rgba(243,238,226,0.75); margin-bottom: var(--s-4); }
/* Первая строка hero: десктоп — eyebrow-текст, мобильный — иконки контактов
   (замена по приёмке 2026-07-20); новые мобильные элементы hero по умолчанию
   скрыты, включает мобильный медиаблок ниже */
.hero-socials { display: none; }
.hs-title, .hs-full, .hero-zapiska, .hero-vicariate { display: none; }
/* Название храма — TT Trailers: узкий дисплейный шрифт держит длинное имя в 2 строки */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.875rem, 1.5rem + 3.9vw, 4.75rem);
  font-weight: 700; line-height: 1.08;
  text-wrap: balance; color: #FFFDF8; margin-bottom: var(--s-3);
}
.hero h1 em { font-style: normal; color: var(--accent-on-dark); }
/* Секционные заголовки (Анонсы, Афиша, Новости прихода…) — тем же TT Trailers */
h2, .clergy-h { font-family: var(--font-display); letter-spacing: 0.01em; }
.hero-lead { font-size: 1.125rem; color: rgba(243,238,226,0.92); margin-bottom: var(--s-2); }
/* Святоотеческое изречение о Кресте (случайное на каждый заход, задача 22):
   цитата — серифом в тон lead, авторство — приглушённой строкой */
.hero-quote { margin: 0; }
.hero-quote .hero-lead { font-family: var(--font-serif); font-style: italic; }
.hero-quote-author {
  display: block; font-style: normal;
  font: 500 var(--text-caption)/1.5 var(--font-sans);
  color: rgba(243, 238, 226, 0.72);
  /* воздух между цитатой и адресом (приёмка 2026-07-20) */
  margin-bottom: var(--s-4);
}
.hero-addr { font-size: var(--text-caption); color: rgba(243,238,226,0.78); margin-bottom: var(--s-5); }
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.btn--ghost-dark { background: rgba(251,247,239,0.08); color: #F3EEE2; border-color: rgba(243,238,226,0.4); }
.btn--ghost-dark:hover { background: rgba(251,247,239,0.16); }

/* Мини-расписание в hero: сегодня (2/3) + завтра (1/3) */
.hero-sched {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: rgba(18,25,33,0.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: var(--s-5);
  border-radius: var(--radius);
}
.hs-day { min-width: 0; }
.hs-today { flex: 2; }
.hs-tomorrow { flex: 1; border-top: 1px solid var(--on-dark-line); padding-top: var(--s-3); }
.hs-head { display: flex; align-items: baseline; gap: var(--s-3); }
.hs-label { font: 600 0.75rem/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-soft); }
.hs-date {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.125rem;
  color: var(--accent-on-dark); background: none; border: none; padding: 0;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-on-dark) 45%, transparent);
  text-underline-offset: 4px; transition: opacity var(--t-fast) var(--ease);
}
.hs-date:hover { opacity: 0.82; }
.hs-feast { font-family: var(--font-serif); font-size: 1.0625rem; color: var(--on-dark); margin: var(--s-2) 0 var(--s-3); max-width: none; }
.hs-tomorrow .hs-feast { font-size: 0.9375rem; color: var(--on-dark-soft); margin-bottom: 0; }
.hs-more { color: var(--accent-on-dark); font-size: var(--text-caption); }
.hs-more:hover { text-decoration-color: var(--accent-on-dark); }

/* Арка: килевидное завершение — форма наличников фасада */
.arch {
  position: relative;
  border-radius: var(--radius-arch);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.arch::after { /* тонкий «наличник» — только по дуге, без нижней кромки */
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(251, 247, 239, 0.55);
  border-bottom: none;
  border-radius: inherit; pointer-events: none;
}
.arch img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* Появление hero при загрузке */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise var(--t-slow) var(--ease) backwards; }
.hero-copy > *:nth-child(2) { animation-delay: 60ms; }
.hero-copy > *:nth-child(3) { animation-delay: 120ms; }
.hero-copy > *:nth-child(4) { animation-delay: 180ms; }
.hero-sched { animation: rise var(--t-slow) var(--ease) 140ms backwards; }

/* Текстурные полосы-разделители между секциями (лён позади контента) */
.tex-strip { height: 16px; background-repeat: repeat-x; background-position: center; opacity: 0.45; filter: sepia(0.5) saturate(0.65); }
.tex-strip--black { background-image: url("/local/templates/main/images/pattern-cross-black.jpg"); background-size: auto 320%; }
.tex-strip--blue { background-image: url("/local/templates/main/images/pattern-cross-blue.jpg"); background-size: auto 280%; }
.tex-strip--red { background-image: url("/local/templates/main/images/pattern-cross-red.jpg"); background-size: auto 280%; }
/* Широкий разделитель hero → контент: синие кресты в полную силу цвета */
.tex-strip--wide {
  height: var(--strip-h);
  position: relative; overflow: hidden;
  background: none; opacity: 0.8; filter: none;
}
.tex-strip--wide::before {
  content: "";
  position: absolute;
  /* запас растёт с шириной окна: наклон 10° на широких экранах «съедает» углы
     (нужно ~tan(10°) · полширины ≈ 8.8vw по вертикали) */
  inset: calc(-9vw - 120px) -6vw;
  background: url("/local/templates/main/images/pattern-cross-blue.jpg") center / auto 97px repeat;
  transform: rotate(10deg);
}
/* Широкий разделитель новости → о храме: красные кресты, наклон в другую сторону */
.tex-strip--wide-red::before {
  background-image: url("/local/templates/main/images/pattern-cross-red.jpg");
  transform: rotate(-10deg);
}
/* Широкий разделитель о храме → лавка: чёрно-белые кресты, наклон как у синей.
   Узор вдвое крупнее остальных полос — мелкая чб-клетка рябит в глазах */
.tex-strip--wide-bw::before {
  background-image: url("/local/templates/main/images/pattern-cross-black.jpg");
  background-size: auto 194px;
  transform: rotate(10deg);
}

/* Полоса с плашкой-заголовком раздела (макет Александра 2026-08-12, вторая
   итерация). Геометрия: первый экран заканчивается ПОЛОВИНОЙ полосы
   (см. min-height .hero-grid), поэтому плашка начинается ровно с половины
   (margin-top: strip-h/2) и выступает низом на белую зону следующей
   секции — при открытии сайта её не видно. Узор уезжает во внутренний
   клип-слой .strip-clip: сама полоса получает overflow: visible, иначе
   выступающая плашка срезалась бы. */
.tex-strip--label { opacity: 1; overflow: visible; z-index: 2; }
.tex-strip--label::before { content: none; }
.strip-clip { position: absolute; inset: 0; overflow: hidden; }
.strip-clip::before {
  content: "";
  position: absolute;
  inset: calc(-9vw - 120px) -6vw;
  background: url("/local/templates/main/images/pattern-cross-blue.jpg") center / auto 97px repeat;
  transform: rotate(10deg);
  opacity: 0.8;
}
.tex-strip--wide-red .strip-clip::before {
  background-image: url("/local/templates/main/images/pattern-cross-red.jpg");
  transform: rotate(-10deg);
}
.tex-strip--wide-bw .strip-clip::before {
  background-image: url("/local/templates/main/images/pattern-cross-black.jpg");
  background-size: auto 194px;
  transform: rotate(10deg);
}
.tex-strip--label .container { position: relative; }
.strip-h {
  --strip-pad-x: 38px; /* горизонтальный паддинг плашки — связан со сдвигом */
  position: relative;
  display: inline-block;
  /* сдвиг влево на паддинг: левый край ТЕКСТА плашки совпадает с левым
     краем контента раздела («Новости» и т.п.), фон выступает левее
     (линейка Александра, 2026-08-12) */
  margin: calc(var(--strip-h) / 2) 0 0 calc(-1 * var(--strip-pad-x));
  /* в полтора раза крупнее внутренних заголовков раздела (var(--h2)) —
     пропорция сохраняется на любой ширине (правка Александра 2026-08-12) */
  font-size: calc(var(--h2) * 1.5);
  font-weight: 700; letter-spacing: 0.01em;
  color: #F6F1E6;
}
/* Матовое стекло — во внутреннем боксе: у backdrop-filter на кромке
   проступает светлый однопиксельный ободок (Chromium сэмплирует фон
   с зажимом к краю элемента). Лечение — размывающий слой ::before
   больше видимой плашки (inset: -24px), а бокс обрезает его своим
   скруглением: ободок остаётся за пределами видимого. Тень-проекция
   живёт на внешнем .strip-h и обрезке не подвержена. */
.strip-h-box {
  position: relative;
  display: block;
  padding: 16px var(--strip-pad-x) 19px;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}
.strip-h-box::before {
  content: "";
  position: absolute; inset: -24px; z-index: -1;
  background: rgba(20, 25, 21, 0.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Тень — проекция плашки на «пол» (рецепт Александра: скошенный
   параллелограмм + gaussian blur 10px), лежит у нижней кромки; скос
   влево-вниз (origin top: низ параллелограмма уезжает левее верха).
   На первый экран (верхняя половина полосы) не попадает; z-index: -1
   прячет её под непрозрачную часть плашки. */
.strip-h::after {
  content: "";
  position: absolute; z-index: -1;
  /* значения подобраны Александром в DevTools (2026-08-12) — не «улучшать» */
  left: 20px; right: -20px; bottom: -5px; height: 30px;
  background: rgba(20, 18, 15, 0.5);
  border-radius: 10px;
  transform: skewX(-32deg);
  transform-origin: top;
  filter: blur(10px);
}
/* мобильные: плашка по центру, крупнее и с явным заступом на белое —
   clamp-кегль делал её ниже половины полосы, заступ исчезал */
@media (max-width: 860px) {
  .tex-strip--label .container { text-align: center; }
  /* мобильная плашка центрирована — сдвиг на паддинг не нужен;
     кегль — та же полуторная пропорция от var(--h2) */
  .strip-h { --strip-pad-x: 30px; margin-top: calc(var(--strip-h) / 2 + 16px); margin-left: 0; }
  .strip-h-box { padding: 14px var(--strip-pad-x) 17px; }
}


/* Скролл-появление секций */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============ Списки служб (hero-панель) ============ */
.day-services { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); align-content: start; }
.day-services li { display: flex; gap: var(--s-3); font-size: 0.9375rem; }
.day-services time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-on-dark); flex: none; width: 3.2em; }

/* ============ Новости ============ */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); container-type: inline-size; }
.card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card img { aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card-date { font: 500 var(--text-small)/1 var(--font-sans); color: var(--ink-faint); }
.card h3 { font-size: var(--h3); font-weight: 700; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent-ink); }
.card p { font-size: var(--text-caption); color: var(--ink-soft); margin: 0; }

/* ============ Анонсы + Афиша: одна сетка с новостями ============ */
#announce { padding-block: var(--s-6) var(--s-3); }
#news { padding-block: var(--s-4) var(--s-6); }
/* когда секция анонсов скрыта (афиша в новостях) — заголовок «Новости прихода»
   встаёт ровно туда, где стоял заголовок «Анонсы» */
#news:has(.card--afisha) { padding-block-start: var(--s-6); }
#announce .section-head, #news .section-head { margin-bottom: var(--s-4); }
.ann-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.ann-aside { display: flex; flex-direction: column; }
.ann-main { grid-column: span 2; }
.ann-item { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); align-items: center; }
.ann-item:first-child { padding-top: 0; }
.ann-item + .ann-item { border-top: 1px solid var(--line); }
.ann-item img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.ann-item .when { font: 700 var(--text-caption)/1.5 var(--font-serif); color: var(--accent-ink); margin-bottom: 0; }
.ann-item h3 { font-size: var(--h3); margin: 2px 0 6px; }
.ann-item h3 a { color: var(--ink); }
.ann-item h3 a:hover { color: var(--accent-ink); }
.ann-item p { font-size: var(--text-caption); color: var(--ink-soft); margin: 0; }
.ann-empty { padding: var(--s-4) 0; font-size: var(--text-caption); color: var(--ink-faint); }

/* Каркас секции анонсов одинаков при 2 и 3 анонсах: заголовок во всю ширину,
   ниже — список/карточки (2 колонки) и афиша (третья). Высота афиши
   фиксированная (441px = ряд карточек) — блок не растёт от числа анонсов,
   и расстояние до «Новостей прихода» не меняется при переключении */
#announce .ann-main { display: contents; }
#announce .section-head { grid-column: 1 / -1; margin-bottom: 0; }
#announce #ann-list { grid-column: span 2; }
/* Список из 3 анонсов тянется до низа афиши: строки распределяются,
   последний анонс прижимается нижним краем к кромке блока */
#announce:not(.is-cards) #ann-list { display: flex; flex-direction: column; justify-content: space-between; }
#ann-list .ann-item:last-child { padding-bottom: 0; align-items: end; }
#announce.is-cards #ann-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
}
/* фото анонс-карточек ужато по высоте, чтобы карточки не перерастали афишу */
#announce.is-cards #ann-list .card img { width: 100%; aspect-ratio: auto; height: 200px; }
/* высота афиши: в режиме «2 анонса» — фикс 500px (равна карточкам);
   в режиме «3» — по компактному списку анонсов, без лишнего воздуха */
#announce.is-cards .ann-aside .afisha-box { flex: none; height: 500px; }
/* Анонс-карточка (сценарии «2» и «1») — как новостная, но с акцентной датой */
.card--ann .when { font: 700 var(--text-caption)/1.5 var(--font-serif); color: var(--accent-ink); margin: 0; }

/* Lead-карточка (одиночный анонс, особая новость): два слота сетки,
   плашка-статус поверх фото на полупрозрачной чёрной подложке */
.card--lead { grid-column: span 2; }
.card-media { position: relative; }
/* высота фото lead-карточки = высоте фото обычной новости в этом же гриде
   (ширина колонки × 2/3) — линия «фото/текст» едина по всему ряду */
.card--lead .card-media img {
  width: 100%; aspect-ratio: auto; object-fit: cover;
  height: calc((100cqi - 2 * var(--s-4)) / 3 * 2 / 3);
}
.card-flag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(16, 14, 10, 0.55); color: #FFFDF8;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2); /* тот же кегль, что у заголовка «Новости прихода» */
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 14px 10px; border-radius: 8px;
}
/* Плашка единичного анонса: крупная дата · разделитель · «Анонс» */
.card-flag--date { display: flex; align-items: center; gap: 14px; padding: 8px 18px 10px 14px; }
.flag-date { display: flex; flex-direction: column; align-items: center; }
.flag-date b { font: 700 2.25rem/0.95 var(--font-sans); } /* цифра — тем же шрифтом, что месяц */
.flag-date small { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; opacity: 0.85; }
.flag-sep { align-self: stretch; width: 1px; background: rgba(243, 238, 226, 0.35); }
/* Квадратик-дата на фото (карточки анонсов в режиме «2») */
.date-badge {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(16, 14, 10, 0.55); color: #FFFDF8;
  padding: 8px 12px 7px; border-radius: 8px; line-height: 1;
  font-family: var(--font-sans);
}
.date-badge b { font-size: 1.5rem; font-weight: 700; line-height: 0.95; }
.date-badge small { font: 600 0.6875rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; opacity: 0.85; }
/* Подложка плашки престольного праздника — тёмно-бордовая */
.card--special .card-flag { background: rgb(86 16 11 / 85%); }
/* Особая новость: фото на всю карточку; текст — на полупрозрачной тёмной
   подложке с блюром ПОВЕРХ фото (картинка проглядывает сквозь стекло).
   Верхняя кромка подложки — на линии фото обычных новостей ряда */
.card--special { position: relative; background: var(--card-dark); border: none; }
.card--special .card-media { position: absolute; inset: 0; }
.card--special .card-media img { width: 100%; height: 100%; object-fit: cover; }
.card--special .card-body {
  position: relative; flex: 1;
  margin-top: calc((100cqi - 2 * var(--s-4)) / 3 * 2 / 3);
  background: rgba(24, 36, 48, 0.66);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.card--special .card-date { color: var(--on-dark-soft); }
.card--special h3 a { color: var(--on-dark); }
.card--special h3 a:hover { color: var(--accent-on-dark); }
.card--special .card-body p { color: var(--on-dark-soft); }

/* Компакт-блок «ещё три новости»: закрывает пустой слот последнего ряда */
.news-mini { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.news-mini .ann-item { grid-template-columns: 200px minmax(0, 1fr); } /* фото крупнее, чем в анонс-списке */
.news-mini .ann-item:first-child { padding-top: 0; }
.news-mini .ann-item:last-child { padding-bottom: 0; } /* низ фото = низ карточки-соседа */
/* карточка, делящая последний ряд с компакт-блоком: фото ниже — меньше воздуха в ряду */
.card--squat img { aspect-ratio: auto; height: 240px; }
.news-mini .ann-item .card-date { font: 500 var(--text-small)/1.4 var(--font-sans); color: var(--ink-faint); margin: 0 0 2px; }
.card--tucked { display: none; } /* новость, ушедшая в компакт-блок */

/* Кнопка «Все новости» — по центру под лентой */
.news-more { display: flex; justify-content: center; margin-top: var(--s-6); }
.btn--lg { padding: 16px 34px; font-size: 1.0625rem; }

/* Афиша: тёмная серо-синяя карточка, заголовок белым внутри, по центру */
.afisha-box {
  background: #5D7187; /* светлый серо-синий (ещё на ступень светлее по просьбе) */
  border-radius: var(--radius);
  padding: var(--s-3);
  flex: 1; display: flex; flex-direction: column; gap: var(--s-3); min-height: 200px;
  position: relative; overflow: hidden; isolation: isolate;
}
/* Еле заметные кресты на фоне — тот же тайл, угол и масштаб, что у широкой полосы */
.afisha-box::before {
  content: ""; position: absolute; inset: -80px; z-index: -1;
  background: url("/local/templates/main/images/pattern-cross-blue.jpg") center / auto 97px repeat;
  transform: rotate(10deg);
  filter: invert(1); /* негатив тайла: кресты светлые на тёмном */
  opacity: 0.1;
}
.afisha-box h3 {
  font-family: var(--font-display);
  font-size: 2.25rem; font-weight: 700;
  color: var(--on-dark); text-align: center;
  padding-top: var(--s-1);
}
.afisha-box .ann-empty { color: var(--on-dark-soft); text-align: center; padding: var(--s-3); }
.afisha-stage { flex: 1; min-height: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: var(--s-2); }
.afisha-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: none; border: 1px solid var(--on-dark-line); color: var(--on-dark-soft);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.afisha-arrow svg { display: block; }
.afisha-arrow:hover { background: var(--card-dark-raised); color: var(--on-dark); }
/* на посветлевшем фоне афиши стрелкам нужна обводка поярче и светлый hover */
.afisha-box .afisha-arrow { border-color: rgba(243, 238, 226, 0.3); }
.afisha-box .afisha-arrow:hover { background: rgba(251, 247, 239, 0.14); color: #FFFDF8; }
.afisha-frame { position: relative; height: 100%; min-height: 0; }
.afisha-thumb {
  position: absolute; inset: 0; width: 100%; border: none; padding: 0; background: none; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
}
.afisha-thumb img {
  /* max-габариты вместо растяжки: рамка img совпадает с листовкой,
     и скругление углов ложится на саму картинку */
  max-width: 100%; max-height: 100%; display: block;
  border-radius: 8px;
  /* приглушение чужого дизайна листовок; оригинал — по наведению и в фулскрине */
  filter: saturate(0.72) brightness(0.95);
  transition: filter var(--t-slow) var(--ease);
}
.afisha-thumb:hover img, .afisha-thumb:focus-visible img { filter: none; }

/* Режим «афиша — карточка в сетке новостей» (0–2 анонса): тёмный блок сам себе
   карточка; высоту диктует ряд новостей, листовка ужимается под неё */
.card--afisha { padding: 0; }
.card--afisha:hover { transform: none; box-shadow: none; }
.card--afisha .afisha-box { border-radius: inherit; }
.card--afisha .afisha-thumb img { aspect-ratio: auto; object-fit: contain; }
/* незакрытые слоты последнего ряда добирает компакт-блок «ещё три новости» (JS) */

/* Полноэкранный просмотр листовки */
.lightbox[hidden] { display: none; }
/* flex (не grid!): единственный in-flow ребёнок — картинка, flex центрирует
   её безусловно; grid с implicit-треком прижимал её к левому паддингу
   (приёмка 2026-07-20). Кнопки — absolute, от раскладки не зависят */
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(16, 20, 26, 0.92); }
/* max-width 100% (не 92vw!): vw больше грид-ячейки лайтбокса с паддингами —
   картинка прибивалась к левому краю и выпирала вправо (приёмка 2026-07-20) */
.lightbox img { position: relative; max-height: 92vh; max-width: min(100%, calc(92vh * 0.707)); border-radius: 8px; }
.lightbox-close {
  position: absolute; top: 12px; right: 16px; z-index: 1;
  background: none; border: none; color: #EFEAE0; font-size: 2rem; line-height: 1; cursor: pointer;
}
/* Стрелки лайтбокса: тёмные круги без обводки (приёмка 2026-07-20 —
   прозрачные с тонким stroke терялись на светлом поле афиши) */
.lightbox .afisha-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 36px; height: 36px;
  background: rgba(38, 35, 29, 0.85); border: none; color: #F3EEE2;
  box-shadow: var(--shadow-card);
}
.lightbox .afisha-arrow:hover { background: rgba(38, 35, 29, 1); color: #FFFDF8; }
.lightbox .afisha-arrow[data-lb-nav="-1"] { left: 16px; }
.lightbox .afisha-arrow[data-lb-nav="1"] { right: 16px; }

/* ============ О храме ============ */
.about-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
/* Историческая фототипия 1882 г. — с родным паспарту и подписью, без обрезки */
.about-hist { margin: 0; }
.about-hist img { width: 100%; border-radius: 3px; box-shadow: var(--shadow-card); }
.about-hist figcaption { font: 400 var(--text-small)/1.5 var(--font-sans); color: var(--ink-faint); text-align: center; margin-top: var(--s-2); }
/* Духовенство: в храме двое священников — компактные карточки внутри «О храме».
   Карточка кликабельна: открывает оверлей с полной биографией */
.clergy { margin-top: var(--s-6); }
.clergy-h { font-size: 1.75rem; font-weight: 700; margin-bottom: var(--s-4); }
.clergy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.clergy-card {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-4);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); align-items: center;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.clergy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.clergy-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clergy-card img { width: 110px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.clergy-card h3 { font-size: var(--h3); margin: 0 0 2px; }
.clergy-role { font: 600 0.75rem/1.4 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--s-2); }
.clergy-card p { font-size: var(--text-caption); color: var(--ink-soft); margin: 0; }
.clergy-more { display: inline-block; margin-top: var(--s-2); font: 600 var(--text-small)/1 var(--font-sans); color: var(--accent-ink); }

/* Оверлей «биография священника»: светлая широкая карточка поверх затемнения.
   Составной селектор — базовый .modal-card объявлен ниже и иначе перебивает фон */
.modal-card.modal-card--person {
  width: min(680px, 100%);
  background: var(--bg-raised); color: var(--ink);
  padding: var(--s-6);
}
.modal-card--person .modal-close { color: var(--ink-faint); }
.modal-card--person .modal-close:hover { color: var(--ink); }
.person-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-4); align-items: center; margin-bottom: var(--s-4); }
.person-head img { width: 150px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.person-head h3 { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 0.01em; margin: 0 0 4px; }
.person-bio p { font-size: var(--text-caption); line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--s-3); max-width: none; }
.person-bio p:last-child { margin-bottom: 0; }
.person-facts { border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-3); display: grid; gap: var(--s-2); }
.person-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-3); font-size: var(--text-small); }
.person-facts dt { color: var(--ink-faint); }
.person-facts dd { margin: 0; color: var(--ink-soft); }

/* Вкладки (месяцы расписания, разделы лавки): книжные, с акцентным подчёркиванием */
.tabs { display: flex; align-items: baseline; gap: var(--s-4); border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: none; cursor: pointer;
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 10px 2px 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"], .tabs button[aria-pressed="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
/* Таб «в разработке» (решение 2026-08-04): серый, некликабельный; JS-модули
   табов исключают [disabled] из переключения и клавиатурной навигации */
.tabs button[disabled] { color: var(--ink-faint); opacity: 0.55; cursor: not-allowed; }
.tabs button[disabled]:hover { color: var(--ink-faint); }
.tabs button .tab-soon { font: 500 0.6875rem/1 var(--font-sans); letter-spacing: 0.02em; text-transform: none; opacity: 0.75; margin-left: 2px; }

/* Расписание богослужений: светлая панель, чуть темнее фона страницы,
   со вложенной прокруткой. В шапке слева — месяцы (активный всегда посередине,
   PDF рядом с ним, как на Кулишках), справа — заголовок колонки священника.
   Активный месяц следует за прокруткой (JS) */
.sched { margin-top: var(--s-7); }
.sched-card {
  background: #F3EDE0; border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column;
}
.sched-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-2) var(--s-5); border-bottom: 1px solid var(--line-strong);
  position: relative; overflow: hidden;
  background: var(--line-strong); /* в цвет обводки панели */
}
/* поверх заливки едва проглядывает чб-узор крестов — мельче и под тем же
   углом 10°, что у широкой чб-полосы (запас под поворот) */
.sched-bar::before {
  content: ""; position: absolute; inset: -120px -40px;
  background: url("/local/templates/main/images/pattern-cross-black.jpg") center / auto 136px repeat;
  transform: rotate(10deg);
  opacity: 0.05;
}
.sched-bar > * { position: relative; } /* содержимое — над узором */
.sched-months { display: flex; align-items: center; gap: var(--s-3); }
/* смена активного месяца: содержимое скользит влево/вправо */
@keyframes sched-slide-fwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes sched-slide-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.sched-months.is-fwd { animation: sched-slide-fwd var(--t-slow) var(--ease); }
.sched-months.is-back { animation: sched-slide-back var(--t-slow) var(--ease); }
.sched-months button {
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); /* a11y: белый на светлом фоне панели давал 1.81:1 */
}
/* :not(.is-active) — hover не красит активную таблетку (там var(--on-accent)
   на акцентном фоне, акцентный текст слился бы с фоном) */
.sched-months button:not(.is-active):hover { color: var(--accent); }
.sched-months button.is-active {
  background: var(--accent); color: var(--on-accent);
  border-radius: 999px; padding: 7px 14px; cursor: default;
}
.sched-pdf { display: inline-flex; align-items: center; gap: 5px; font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 6px 2px; }
.sched-pdf:hover { color: var(--accent); }
.sched-col-head { font: 600 0.75rem/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.sched-scroll {
  position: relative; max-height: 560px; overflow-y: auto;
  padding: 20px var(--s-5) var(--s-4); /* сверху — место под таблетку первого месяца */
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
/* метка месяца — «таблетка», сидящая верхом на стыке двух полос зебры:
   вне потока (полосы смыкаются вплотную), поднята на половину своей высоты */
.sched-month { position: relative; }
.sched-mon-label {
  position: absolute; top: 0; left: var(--s-5); z-index: 1;
  transform: translateY(-50%);
  width: fit-content; margin: 0;
  padding: 8px 18px; border-radius: 999px;
  background: var(--line-strong); color: var(--ink);
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  max-width: none;
}
.sched-day {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4);
  /* полосы тянутся от края до края панели */
  margin-inline: calc(-1 * var(--s-5)); padding-inline: var(--s-5);
}
/* вместо линий-разделителей — едва заметное чередование фона строк */
.sched-month .sched-day:nth-of-type(odd) { background: rgba(255, 253, 248, 0.5); }
.sched-month .sched-day:nth-of-type(even) { background: rgba(38, 35, 29, 0.035); }
.sched-date b { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.1875rem; }
.sched-date span { display: block; font: 500 var(--text-small)/1.6 var(--font-sans); color: var(--ink-faint); }
.sched-week { font-size: var(--text-small); color: var(--ink-faint); margin: 0 0 2px; max-width: none; }
.sched-feast { font-family: var(--font-serif); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; margin: 0 0 var(--s-3); max-width: none; }
/* воскресенья и великие праздники — киноварью, как в приходском листке */
.sched-day--red .sched-date b, .sched-day--red .sched-feast { color: var(--accent-ink); }
/* пометка престольного праздника */
.sched-flag {
  display: inline-block; vertical-align: 2px; margin-left: var(--s-2); padding: 3px 9px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 700 0.6875rem/1.2 var(--font-sans); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.sched-services { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.sched-services li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: var(--s-3); font-size: var(--text-caption); align-items: baseline; }
.sched-services time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-ink); }
.sched-services .who { font-size: var(--text-small); color: var(--ink-faint); white-space: nowrap; text-align: right; }

/* --- Панель «ближайший день + 2 следующих» (2026-08-04, сокращение
   2026-08-12) ---------------------------------------------------------------
   Вместо вложенной прокрутки: слева выделенный день с церковно-календарной
   строкой, иконой и чтениями; справа два следующих дня друг над другом,
   поровну делящих высоту карточки. Типографика дней общая с панелью
   (.sched-date / .sched-feast / .sched-services / .sched-day--red) */
.sched-card--duo { padding: var(--s-5); }
.sched-duo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
.sched-duo--solo { grid-template-columns: minmax(0, 1fr); }
.sched-hl {
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) - 6px);
  padding: var(--s-5);
  display: flex; flex-direction: column;
}
.sched-hl-badge {
  width: fit-content; margin: 0 0 var(--s-3); padding: 5px 12px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 700 0.6875rem/1.2 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.sched-hl-date { margin-bottom: var(--s-2); }
.sched-hl-date b { font-size: 1.5rem; line-height: 1.2; }
.sched-hl-week { margin-bottom: var(--s-3); }
.sched-hl-week .fast { color: var(--accent-ink); font-weight: 600; }
.sched-hl .sched-feast { font-size: 1.125rem; margin-bottom: var(--s-2); }
.sched-hl-saints {
  font-size: var(--text-small); color: var(--ink-faint); line-height: 1.55;
  margin: 0 0 var(--s-3); max-width: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Икона и чтения дня в карточке (2026-08-12) */
.sched-hl-extra { display: flex; align-items: flex-start; gap: var(--s-4); margin: 0 0 var(--s-3); }
.sched-hl-icon {
  flex: none; width: 72px; height: auto;
  border-radius: 6px; border: 1px solid var(--line);
}
.sched-hl-readings { min-width: 0; }
.sched-hl-readings-label {
  display: block; margin-bottom: 2px;
  font: 600 0.6875rem/1.4 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
/* Кламп: у праздничных дней чтения тянут за собой длинные уставные
   примечания — полный текст в модалке календаря по клику на дату */
.sched-hl-readings p {
  font-size: var(--text-small); line-height: 1.55; margin: 0; max-width: none;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sched-hl-services { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--s-3); }
/* служба без времени — название от левого края, поверх колонки времени */
.sched-services li.sched-svc--notime > span:not(.who) { grid-column: 1 / 3; }
/* две клетки в столбик, поровну по высоте карточки слева */
.sched-cells { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--s-3); }
.sched-cell {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 6px);
  background: rgba(38, 35, 29, 0.03);
  padding: var(--s-4);
  display: flex; flex-direction: column;
}
.sched-cell-date { margin-bottom: 2px; }
.sched-cell-date b { font-size: 1.0625rem; }
.sched-cell .sched-feast {
  font-size: 0.9375rem; line-height: 1.35; margin-bottom: var(--s-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Службы клетки — компактной строкой «время служба · …» (2026-08-12) */
.sched-cell-times { font-size: var(--text-small); line-height: 1.7; margin: 0; max-width: none; }
.sched-cell-times time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.sched-cell-times .dot { color: var(--ink-faint); padding: 0 1px; }
.sched-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-strong);
}
/* планшеты и «квадратные» экраны раскладушек: карточка сверху, клетки 2×2 под ней */
@media (max-width: 1020px) {
  .sched-duo { grid-template-columns: minmax(0, 1fr); }
}
/* узкие телефоны: клетки в столбик, дата слева от содержимого */
@media (max-width: 560px) {
  .sched-card--duo { padding: var(--s-4); }
  .sched-cells { grid-template-columns: minmax(0, 1fr); }
  .sched-cell { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
  .sched-cell-date { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .sched-cell .sched-feast { grid-column: 2; -webkit-line-clamp: 3; }
  .sched-cell-times { grid-column: 2; margin-top: 2px; }
  .sched-hl-icon { width: 60px; }
}

/* Вонми: без вложенного скролла (решение Александра 2026-08-12) — виджет
   растёт по своему контенту, прокрутка одна, страничная. Контейнеры виджета
   зажимают себя сами (высота 900px + overflow во внутренней обёртке); классы
   чужие (cdn.vonmi.org), правим снаружи — как aria-фикс кнопок в main.js:
   смена классов на стороне Вонми просто отключит фикс, ничего не сломав */
#vonmi-widget .app__appContainer { height: auto !important; }
#vonmi-widget .app__sectionsWrapper { height: auto !important; max-height: none !important; overflow: visible !important; }

/* ============ Церковная лавка: записка / пожертвование / треба ============
   Без мелких обводок: тонированная панель, белые поля с внутренней тенью,
   кнопки-переключатели сплошной заливкой со светлым текстом */
.lavka-panel {
  background: #F3EDE0; border: none;
  border-radius: 0 0 var(--radius) var(--radius); padding: var(--s-6);
}
.lavka-pane[hidden] { display: none; }
.lavka-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
.field-col { display: grid; gap: var(--s-4); align-content: start; }
.field { display: grid; gap: 6px; align-content: start; }
.lavka-pane .btn { justify-self: start; margin-top: var(--s-2); }
.field > span { font: 600 0.75rem/1.4 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.input, .textarea {
  background: var(--bg-raised); border: none; border-radius: var(--radius);
  padding: 12px 14px; font: 400 var(--text-caption)/1.5 var(--font-sans); color: var(--ink);
  width: 100%;
  box-shadow: inset 0 1px 4px rgba(38, 35, 29, 0.14);
}
.textarea { resize: vertical; min-height: 130px; }
.input:focus-visible, .textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
/* Переключатель «О здравии / О упокоении» */
.type-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.type-card {
  border: none; border-radius: var(--radius); background: var(--line-strong);
  padding: var(--s-3) var(--s-4); text-align: center; cursor: pointer;
  font: 600 var(--text-caption)/1.4 var(--font-sans); color: var(--ink);
  transition: background-color var(--t-fast) var(--ease);
}
.type-card:hover { background: #BCB093; }
.type-card[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
/* Чипсы: вид поминовения, суммы */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  border: none; background: var(--line-strong); border-radius: 999px;
  padding: 8px 14px; font: 500 var(--text-caption)/1 var(--font-sans); color: var(--ink); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.chip:hover { background: #BCB093; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
/* Тумблер регулярного платежа */
.switch-row { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-caption); color: var(--ink-soft); }
.switch { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--line-strong); position: relative; border: none; cursor: pointer; padding: 0; transition: background-color var(--t-fast) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-raised); box-shadow: 0 1px 2px rgba(38,35,29,0.25); transition: transform var(--t-fast) var(--ease); }
.switch[aria-pressed="true"] { background: var(--accent); }
.switch[aria-pressed="true"]::after { transform: translateX(20px); }
.lavka-note { font-size: var(--text-small); color: var(--ink-faint); margin: var(--s-4) 0 0; max-width: none; }
.lavka-note a { color: var(--accent-ink); }
/* Требы: карточки с заказом — светлая «бумага» на тонированной панели, без обводок */
.treba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.treba-card { border: none; border-radius: var(--radius); background: var(--bg-raised); box-shadow: var(--shadow-card); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
/* a11y: были h4 после h2 (пропуск уровня) — теперь h3; line-height задан явно,
   т.к. глобальный h3 ужал бы строку (h4 наследовал 1.6 от body) */
.treba-card h3 { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; line-height: var(--leading-body); margin: 0; }
.treba-card p { font-size: var(--text-small); color: var(--ink-soft); margin: 0; flex: 1; max-width: none; }
.treba-card .link { font-size: var(--text-caption); }

/* ============ Адрес и контакты ============ */
.contacts-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; }
.contact-list { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); }
.contact-list > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.contact-list dt { font: 600 0.75rem/1.7 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.contact-list dd { margin: 0; font-size: var(--text-caption); color: var(--ink); line-height: 1.6; }
.contact-list a { color: var(--accent-ink); }
.metro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.metro-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--m); margin-right: 9px; }
.contacts-map { margin: 0; }
/* реальная картооснова (OSM/CARTO) со слегка охристой лессировкой и бумажным зерном */
.map-frame { position: relative; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-card); isolation: isolate; }
.map-frame img { width: 100%; display: block; filter: sepia(0.32) saturate(0.9) brightness(1.01); }
.map-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(0deg, rgba(184, 134, 11, 0.09), rgba(184, 134, 11, 0.09));
}
.map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.map-route { fill: none; stroke: var(--accent-ink); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 24; }
.map-time { font: italic 600 44px var(--font-serif); fill: var(--accent-ink); paint-order: stroke; stroke: #FBF7EF; stroke-width: 12; stroke-linejoin: round; }
.map-metro circle { fill: var(--accent-ink); stroke: #FBF7EF; stroke-width: 8; }
.map-m { font: 700 58px var(--font-sans); fill: #FFFDF8; text-anchor: middle; }
.map-station { font: 700 46px var(--font-sans); fill: var(--ink); paint-order: stroke; stroke: #FBF7EF; stroke-width: 12; stroke-linejoin: round; }
.map-hram circle { fill: var(--ink); stroke: #FBF7EF; stroke-width: 10; }
.map-cross { fill: none; stroke: #FFFDF8; stroke-width: 9; stroke-linecap: round; }
.map-hram-name { font: 700 50px var(--font-serif); fill: var(--ink); paint-order: stroke; stroke: #FBF7EF; stroke-width: 14; stroke-linejoin: round; }
.contacts-map figcaption { font: 400 var(--text-small)/1.5 var(--font-sans); color: var(--ink-faint); text-align: center; margin-top: var(--s-2); }
/* оверлей реквизитов — на базе светлой карточки духовенства */
.req-h { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: 0.01em; margin: 0 0 var(--s-3); }
.req-org { font-size: var(--text-small); line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: none; }
.req-facts dd { font-variant-numeric: tabular-nums; }

/* ============ Рушник и подвал ============ */
.rushnik {
  height: 18px;
  background: url("/local/templates/main/images/pattern-cross-black.jpg") repeat-x center top / auto 340%;
  filter: sepia(0.55) saturate(0.65);
  opacity: 0.5;
}
.footer { background: var(--bg-raised); border-top: 1px solid var(--line); padding-block: var(--s-6) var(--s-5); }
.footer-grid { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 1fr; gap: var(--s-5); }
/* h2 (heading-order, задача 23): гасим глобальный дисплейный шрифт h2 —
   вид колонок футера остаётся прежним (PT Serif 1rem) */
.footer h2 { font-size: 1rem; margin-bottom: var(--s-3); font-family: var(--font-serif); letter-spacing: normal; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--text-caption); }
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--accent-ink); }
.footer address { font-style: normal; font-size: var(--text-caption); color: var(--ink-soft); line-height: 1.7; }
.footer-bottom { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: var(--text-small); color: var(--ink-faint); }

/* ============ Модал «Церковный календарь» ============ */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--gutter); }
.modal-backdrop { position: absolute; inset: 0; background: rgba(24, 22, 18, 0.55); }
.modal-card {
  position: relative; width: min(420px, 100%); max-height: 90vh; overflow: auto;
  background: var(--card-dark); color: var(--on-dark);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: var(--s-5);
  animation: rise var(--t-slow) var(--ease);
}
.modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: none; color: var(--on-dark-soft); font-size: 1.4rem; cursor: pointer; border-radius: var(--radius);
}
.modal-close:hover { color: var(--on-dark); }
.cal-rubric { font: 600 0.75rem/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: var(--s-3); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-4); }
.cal-nav button {
  background: none; border: 1px solid var(--on-dark-line); color: var(--on-dark);
  width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background-color var(--t-fast) var(--ease);
}
.cal-nav button svg { display: block; }
.cal-nav button:hover { background: var(--card-dark-raised); }
.cal-date { text-align: center; }
.cal-date b { font-family: var(--font-serif); font-size: 1.1875rem; color: var(--accent-on-dark); display: block; }
.cal-date small { color: var(--on-dark-soft); font-size: var(--text-small); }
/* overflow:hidden снят: скругление и тень живут на самой картинке,
   контейнер их не должен обрезать */
.cal-icon { width: 150px; margin: 0 auto var(--s-4); }
/* икона может быть уже 150px контейнера — центрируем саму картинку; скругление
   на самой картинке (радиус контейнера центрированная икона не касается);
   лёгкая тень-«рамка» (правка Александра 2026-07-16) */
.cal-icon img { aspect-ratio: 3 / 4; object-fit: cover; display: block; margin: 0 auto; border-radius: 4px; box-shadow: var(--shadow-lift); }
.cal-week { text-align: center; font-size: var(--text-caption); color: var(--on-dark-soft); margin-bottom: var(--s-3); }
.cal-week .fast { color: var(--accent-on-dark); }
.cal-feast { font-family: var(--font-serif); font-weight: 700; text-align: center; font-size: 1.0625rem; margin-bottom: var(--s-3); }
.cal-saints { font-size: var(--text-small); color: var(--on-dark-soft); text-align: center; margin-bottom: var(--s-4); }
.cal-readings { border-top: 1px solid var(--on-dark-line); padding-top: var(--s-3); font-size: var(--text-small); }
.cal-readings b { color: var(--on-dark); }
.cal-readings p { color: var(--on-dark-soft); margin: var(--s-1) 0 0; max-width: none; }

/* ============ Адаптив ============ */
@media (max-width: 1020px) {
  .nav ul { gap: var(--s-3); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav, .header-contacts { display: none; }
  .burger { display: block; }
  /* внутренние страницы: в шапке — заголовок раздела вместо имени сайта
     (крест и «Меню» на месте) — общее правило, приёмка 2026-07-20 */
  .header--page .brand-site { display: none; }
  .header--page .brand-page { display: block; }
  .nav.is-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-raised); border-bottom: 1px solid var(--line); z-index: 40;
    padding: var(--s-3) var(--gutter) var(--s-4); margin: 0;
  }
  .nav.is-open ul { flex-direction: column; gap: var(--s-2); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); min-height: 0; padding-block: var(--s-6); }
  /* --- Мобильный hero (приёмка Александра 2026-07-20, пп. 1–4) --- */
  /* п.1: вместо eyebrow — иконки телефон/TG/VK по правому краю;
     воздух: 24px над, 18px под (третья итерация правки 2026-07-20 —
     значения подобраны Александром на живом телефоне) */
  .hero-eyebrow { display: none; }
  .hero-grid { padding-block: var(--s-4) var(--s-6); }
  /* слева — викариатство/благочиние в две строки, справа — иконки */
  .hero-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: 18px; }
  .hero-vicariate {
    display: block; margin: 0;
    font: 500 0.875rem/1.5 var(--font-sans);
    color: rgba(243, 238, 226, 0.75);
  }
  .hero-socials { display: flex; justify-content: flex-end; }
  .hero-socials a { color: rgba(243, 238, 226, 0.85); border-color: rgba(243, 238, 226, 0.35); }
  .hero-socials a:hover { color: #FFFDF8; border-color: rgba(243, 238, 226, 0.6); }
  /* п.2: кнопки убраны — их место занимает карточка с заголовком-тизером */
  .hero-actions { display: none; }
  .hero-addr { margin-bottom: 0; }
  .hs-title {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.75rem; line-height: 1.1; letter-spacing: 0.01em;
    color: #FFFDF8; margin-bottom: var(--s-2);
  }
  /* п.3: карточка показывает один день, дальше — кнопка на /schedule/ */
  .hs-tomorrow, .hs-more { display: none; }
  .hs-full { display: flex; justify-content: center; width: 100%; margin-top: var(--s-2); }
  /* п.4: «Подать записку» — после карточки расписания */
  .hero-zapiska { display: flex; justify-content: center; width: 100%; }
  .tex-strip--wide::before { background-size: auto 84px; }
  .tex-strip--wide-bw::before { background-size: auto 168px; }
  .afisha-box::before { background-size: auto 84px; }
  .ann-grid { grid-template-columns: 1fr; }
  .ann-main { grid-column: auto; }
  .ann-item { grid-template-columns: 108px minmax(0, 1fr); align-items: start; }
  #announce.is-cards #ann-list { grid-template-columns: 1fr; }
  .card--lead { grid-column: auto; }
  .card--lead .card-media img { height: 220px; }
  .card--special .card-media img { height: 100%; }
  .card--special .card-body { margin-top: 220px; }
  /* п.6 приёмки 2026-07-20: на мобильном (сетка в 1 колонку) компакт-блок
     не нужен — его строки становятся такими же карточками, как остальные
     новости: display:contents вливает их прямо в news-grid */
  .news-mini { display: contents; }
  .news-mini .ann-item {
    grid-template-columns: 1fr; gap: 0; padding: 0;
    background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; align-items: stretch;
  }
  .news-mini .ann-item + .ann-item { border-top: 1px solid var(--line); }
  .news-mini .ann-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 0; }
  .news-mini .ann-item > div { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
  .news-mini .ann-item .card-date { margin: 0; }
  /* свёрнутая на десктопе карточка (card--tucked) продолжает жить строкой
     мини-блока — на мобильном она такая же карточка, дубля нет */
  .card--squat img { aspect-ratio: 3 / 2; height: auto; }
  .ann-aside { display: block; max-width: 420px; }
  .afisha-box { min-height: 0; }
  #announce.is-cards .ann-aside .afisha-box { height: auto; flex: 1; } /* на мобильном высота по контенту */
  .afisha-frame { height: 340px; }
  .hero-scrim { background: linear-gradient(180deg, rgba(15,20,27,0.82) 0%, rgba(15,20,27,0.6) 55%, rgba(15,20,27,0.82) 100%); }
  .day { grid-template-columns: 1fr; gap: var(--s-2); }
  .news-grid { grid-template-columns: 1fr; }
  .announce { grid-template-columns: 1fr; }
  .about-in { grid-template-columns: 1fr; gap: var(--s-4); }
  .clergy-grid { grid-template-columns: 1fr; }
  .person-head { grid-template-columns: 110px minmax(0, 1fr); }
  .sched-scroll { max-height: 460px; }
  .sched-col-head { display: none; } /* колонка священника на мобильном уходит под службу */
  .sched-day { grid-template-columns: 1fr; gap: var(--s-2); }
  .sched-services li { grid-template-columns: 3.6em minmax(0, 1fr); }
  .sched-services .who { grid-column: 2; text-align: left; }
  .lavka-grid { grid-template-columns: 1fr; }
  .treba-grid { grid-template-columns: 1fr; }
  .tabs { gap: var(--s-3); flex-wrap: wrap; }
  .contacts-in { grid-template-columns: 1fr; gap: var(--s-5); }
  .modal { padding: 0; align-items: stretch; }
  .modal-card { width: 100%; max-height: none; height: 100dvh; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ Страница «Расписание» (/schedule/, задача 19) ============ */
/* Scope .sched-page переопределяет 6 тёмных токенов карточки календаря на
   светлые — карточка дня .cal-* становится светлой, как решено (всё светлое).
   Модалку #cal-modal на главной это НЕ трогает: она вне поддерева .sched-page
   и продолжает читать глобальные :root-значения. */
.sched-page {
  --card-dark: var(--bg-raised);
  --card-dark-raised: var(--accent-wash);
  --on-dark: var(--ink);
  --on-dark-soft: var(--ink-faint);
  --on-dark-line: var(--line);
  --accent-on-dark: var(--accent-ink);
}

/* Двухколоночный макет: панель + sticky-сайдбар с карточкой дня */
.sched-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-5); align-items: start; margin-top: var(--s-5);
}
.sched-main { min-width: 0; }
.sched-sidebar { min-width: 0; }
.sched-sidebar-inner { position: sticky; top: calc(var(--header-h) + var(--s-3)); }

/* Панель без публикуемых месяцев */
.sched-empty { color: var(--ink-faint); text-align: center; padding: var(--s-5); max-width: none; }

/* Даты панели интерактивны везде, где JS повесил role=button:
   /schedule/ (карточка дня) и главная (модалка календаря, задача 22) */
.sched-date[role="button"] { cursor: pointer; border-radius: 4px; transition: color var(--t-fast) var(--ease); }
.sched-date[role="button"]:hover b { color: var(--accent-bright); }
.sched-date[role="button"]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Карточка дня — светлая карточка (десктоп: sticky-сайдбар).
   overflow hidden — чтобы бар-шапка (на всю ширину) резалась радиусом углов */
.sched-daycard {
  position: relative; overflow: hidden;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: var(--s-5);
}
.sched-daycard-close { display: none; } /* виден только в мобильной модалке */

/* Шапка карточки — бар, единообразный шапке панели расписания (правка
   Александра 2026-07-16): тот же фон var(--line-strong) с чб-узором крестов,
   тот же кегль/цвет, что «июль»/«священник»; год — у правого края на той же
   строке. Высота = высоте бара панели (таблетка месяца 27px + 2×var(--s-2)
   + 1px border), чтобы строки обеих шапок легли на одну линию. Негативные
   маргины растягивают бар на всю ширину карточки поверх её паддинга. */
.sched-daycard .cal-rubric {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4);
  padding: var(--s-2) var(--s-5);
  min-height: calc(27px + var(--s-2) * 2 + 1px);
  background: var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  position: relative; overflow: hidden;
  font: 600 0.75rem/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.sched-daycard .cal-rubric::before {
  content: ""; position: absolute; inset: -120px -40px;
  background: url("/local/templates/main/images/pattern-cross-black.jpg") center / auto 136px repeat;
  transform: rotate(10deg);
  opacity: 0.05;
}
.sched-daycard .cal-rubric > * { position: relative; } /* текст — над узором */
.cal-rubric-year { color: var(--ink); }

/* Дата одной строкой (год ушёл в шапку — правка 2026-07-16) */
.sched-daycard .cal-date b { font-size: 1rem; white-space: nowrap; }

/* Свёртка длинных блоков (>10 строк): класс вешает JS по фактической высоте */
.cal-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-expand {
  display: block; margin: 0 auto var(--s-3);
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  font: 600 0.72rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); border-radius: var(--radius);
}
.cal-expand:hover { color: var(--accent-bright); }
.cal-expand[hidden] { display: none; } /* авторский display перебил бы UA [hidden] */
.cal-readings .cal-expand { margin-bottom: 0; margin-top: var(--s-2); }
/* зазор над кнопкой у святых = как у чтений (var(--s-2)): отрицательный top
   съедает margin-bottom списка святых (24px → 8px); нижний отступ кнопки
   замещает прежний отступ списка перед следующим блоком */
.cal-saints + .cal-expand { margin-top: calc(var(--s-2) - var(--s-4)); margin-bottom: var(--s-4); }

/* Седмица · глас · пост — одной центрированной строкой (.cal-week уже задан) */
.cal-glas { color: var(--ink-faint); }

/* Маркер типа трапезы: одна из 5 иконок по data-meal + подпись */
.cal-meal {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin-bottom: var(--s-3); font-size: var(--text-small); color: var(--ink-soft);
}
/* авторский display:flex перебивает UA [hidden]{display:none} — нужна пара,
   иначе день без трапезы даёт фантомный пустой ряд (грабля styles.css:296) */
.cal-meal[hidden] { display: none; }
.cal-meal-text { max-width: none; }
.cal-meal-glyph { width: 18px; height: 18px; flex: none; color: var(--accent-ink); display: none; }
.cal-meal[data-meal="FAll"] .cal-meal-glyph--FAll,
.cal-meal[data-meal="FFis"] .cal-meal-glyph--FFis,
.cal-meal[data-meal="FOil"] .cal-meal-glyph--FOil,
.cal-meal[data-meal="FDry"] .cal-meal-glyph--FDry,
.cal-meal[data-meal="FNon"] .cal-meal-glyph--FNon { display: block; }

/* Богослужебное примечание */
.cal-note {
  font-size: var(--text-small); color: var(--ink-faint); font-style: italic;
  text-align: center; margin-bottom: var(--s-3); max-width: none;
}

/* Блок «Богослужения» из карточки убран (правка 2026-07-16): службы дня
   уже показаны слева в панели расписания, стили .cal-services-* удалены. */

/* Календарь дня ещё не прогрет */
.cal-empty { font-size: var(--text-small); color: var(--ink-faint); text-align: center; font-style: italic; max-width: none; }

@media (max-width: 860px) {
  .sched-layout { grid-template-columns: 1fr; gap: var(--s-4); }
  .sched-sidebar-inner { position: static; }
  /* без JS карточка видна в потоке под панелью (§7.2 «работает без JS»);
     по клику (класс is-open вешает JS) она разворачивается в full-screen */
  .sched-daycard.is-open {
    display: block; position: fixed; inset: 0; z-index: 60;
    border: 0; border-radius: 0; box-shadow: none;
    height: 100dvh; max-height: none; overflow: auto; padding: var(--s-5);
  }
  /* Крестик закрытия: fixed (absolute уезжал со скроллом контента) ПОВЕРХ
     непрозрачного бара, который перекрывал его по DOM-порядку; тёмный круг
     в тон селектора месяцев + белый SVG-крест, по вертикали — в центре
     бара высотой 44px (приёмка 2026-07-20, две итерации) */
  .sched-daycard.is-open .sched-daycard-close {
    display: grid; place-items: center; position: fixed; top: 4px; right: 10px; z-index: 5;
    width: 36px; height: 36px;
    background: rgba(38, 35, 29, 0.92); border: none; border-radius: 50%;
    color: #F3EEE2; cursor: pointer;
    box-shadow: var(--shadow-card);
  }
  /* в модалке справа на баре сидит крестик закрытия — год не должен уходить под него */
  .sched-daycard.is-open .cal-rubric { padding-right: 56px; }
}

/* ============ Редизайн /schedule/ — поток дней (задача 31) ============
   Всё ниже действует только на странице расписания: селекторы либо в scope
   .sched-page, либо классы, существующие только в page-шаблоне компонента
   (.sched-panel, .sched-mon, .sched-dayc, .sched-chip, .sched-tail,
   .cal-overlay). Рамочный вариант панели (.sched-card главной и задачи 22)
   не затрагивается. Обоснования — docs/research/schedule-redesign-analysis.md. */

/* Утилита: текст только для скринридера (live-регион карточки дня) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sched-page {
  --radius-lg: 14px;                               /* карточки заметнее книжного --radius */
  --sched-top: calc(var(--header-h) + var(--s-3)); /* линия, под которой липнут панель и карточка */
  --sched-panel-h: 120px;                          /* фактическую высоту панели выставляет JS */
}

/* --- Floating-панель управления: sticky, тёмная инверсия (правка Александра
   2026-07-16), вдвое уже потока дней, чуть выступает за их левый край.
   Настоящие тёмные токены возвращаются локально: scope .sched-page их
   осветлил для карточки календаря --- */
.sched-panel {
  --on-dark: #F3EEE2; --on-dark-soft: #C0BBAD;
  --on-dark-line: rgba(243, 238, 226, 0.14); --accent-on-dark: #E86151;
  position: sticky; top: var(--sched-top); z-index: 20;
  width: calc(50% + var(--s-4)); margin-left: calc(-1 * var(--s-4));
  display: grid; gap: var(--s-2);
  margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg);
  background: rgba(38, 35, 29, 0.86); /* от --ink #26231D */
  color: var(--on-dark);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lift);
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .sched-panel { background: var(--ink); }
}
/* фокус-кольцо на тёмной поверхности — цветом текста (акцентное неразличимо) */
.sched-panel :focus-visible { outline-color: currentColor; }
.sched-panel-title {
  font-family: var(--font-display);
  color: var(--on-dark);
  /* чуть мельче var(--h2): панель вдвое уже, заголовок не должен ломаться */
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.05; margin: 0; max-width: none; white-space: nowrap;
}
.sched-panel-months { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sched-panel-months[hidden] { display: none; }
.sched-mon-btn {
  background: none; border: none; cursor: pointer; min-height: 28px; padding: 6px 10px;
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-soft); border-radius: 999px;
  transition: color var(--t-fast) var(--ease);
}
.sched-mon-btn:hover { color: var(--accent-on-dark); }
.sched-mon-btn[hidden] { display: none; }
.sched-panel .sched-pdf { color: var(--on-dark); }
.sched-panel .sched-pdf:hover { color: var(--accent-on-dark); }
/* кнопка PDF — вектор-иконка (вектор Александра 2026-07-16), имя — aria-label;
   линии вектора тонковаты (замечание Александра) — утолщаем обводкой */
.sched-page .sched-pdf svg { display: block; }
.sched-page .sched-pdf svg path { stroke: currentColor; stroke-width: 0.8; }
.sched-mon-title .sched-pdf { color: var(--ink-faint); transition: color var(--t-fast) var(--ease); }
.sched-mon-title .sched-pdf:hover { color: var(--accent); }
.sched-mon-current {
  background: var(--accent); color: var(--on-accent);
  border-radius: 999px; padding: 7px 14px; white-space: nowrap;
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
}
.sched-panel .sched-pdf[hidden] { display: none; }

/* --- Поток месяцев и дни-карточки --- */
.sched-days { display: grid; gap: var(--s-3); }
.sched-mon { display: grid; gap: var(--s-3); }
.sched-mon-title {
  /* center, не baseline: иконка PDF иначе висит выше строки текста */
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-3) 0 0;
  font: 600 0.875rem/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.sched-dayc {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  /* радиус — как у карточки календаря справа (правка Александра 2026-07-16) */
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  cursor: pointer; /* весь день — клик-цель (фокус клавиатуры — на дате) */
  scroll-margin-top: calc(var(--sched-top) + var(--sched-panel-h) + var(--s-3));
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sched-dayc:hover { box-shadow: var(--shadow-card), 0 0 0 1px var(--line-strong); }
/* день напротив хвостика карточки: выезд вправо (в зазор колонок) + кольцо;
   вход нарочно медленнее выхода — асимметрия гасит «волну» при быстрой
   прокрутке; при reduced-motion transition умирает, состояние остаётся
   читаемым кольцом (никакой информации только в движении) */
.sched-dayc.is-focus {
  transform: translateX(10px);
  box-shadow: var(--shadow-card), 0 0 0 2px var(--accent);
  transition-duration: var(--t-slow);
}

/* бейдж «сегодня» под датой и днём недели (правка Александра 2026-07-16);
   вешает JS — сервер не может: HTML кешируется и пережил бы полночь.
   Селектор с .sched-date — иначе цвет перебил бы «.sched-date span» */
.sched-date .sched-today-badge {
  display: inline-block; margin-top: var(--s-2); padding: 3px 10px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 700 0.6875rem/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
}

/* --- Кнопка следующего месяца (оживает с ленивой подгрузкой, шаг 4.2) --- */
.sched-next { display: flex; justify-content: center; margin-top: var(--s-4); }
.sched-next[hidden] { display: none; }
.sched-next-btn {
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 10px 22px; cursor: pointer;
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sched-next-btn:hover { background: var(--accent-wash); color: var(--accent-ink); }

/* --- Карточка дня: sticky в линию с панелью, целиком в высоту окна --- */
/* колонка обязана тянуться на всю высоту ряда: при align-items:start грида
   она была бы высотой с карточку — sticky-обёртке некуда ехать, карточка
   уезжала бы со скроллом (поймано браузерной приёмкой 2026-07-16) */
.sched-page .sched-sidebar { align-self: stretch; }
.sched-page .sched-sidebar-inner { top: var(--sched-top); }
@media (min-width: 861px) {
  .sched-page .sched-daycard {
    display: flex; flex-direction: column;
    /* ФИКСИРОВАННАЯ высота от окна (ТЗ Александра: высота не скачет —
       стрелка на 50% держится стабильно); длину контента подгоняет
       двусторонний кламп в JS */
    height: calc(100dvh - var(--sched-top) - var(--s-3));
  }
  .sched-page .sched-daycard > * { flex: none; }
  /* при дефиците высоты икона ужимается; остальное решают клампы */
  .sched-page .cal-icon { width: clamp(96px, 16dvh, 150px); }
  /* число строк клампа считает JS из бюджета высоты карточки */
  .sched-page .cal-clamp {
    -webkit-line-clamp: var(--clamp-lines, 10);
    line-clamp: var(--clamp-lines, 10);
  }
}

/* хвостик-стрелка: ромб на обёртке сайдбара (у самой карточки overflow:hidden
   обрезал бы его), указывает на день напротив */
.sched-tail {
  /* ровно на середине карточки календаря (правка Александра 2026-07-16 №3) —
     50% высоты обёртки держит центр при любом размере карточки.
     Обводка — градиентный stroke цветом выделения дня: пик на острие,
     угасание к карточке; градиент задан в локальных координатах ромба
     (225deg = нижне-левый угол, после rotate(45deg) он и есть остриё) */
  position: absolute; left: -11px; top: calc(50% - 11px); z-index: 1;
  width: 22px; height: 22px; transform: rotate(45deg);
  background: var(--bg-raised);
  border-left: 2px solid var(--line); border-bottom: 2px solid var(--line);
  border-image: linear-gradient(225deg, transparent 40%, var(--accent) 96%) 1;
}
/* продолжение stroke за углами стрелки: акцентная вертикаль по левой кромке
   карточки, гаснущая вверх и вниз от стрелки (мокап Александра 2026-07-16) */
.sched-page .sched-sidebar-inner::before {
  content: ""; position: absolute; left: 0; top: calc(50% - 90px);
  width: 2px; height: 180px; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent, var(--accent) 44%, var(--accent) 56%, transparent);
}

/* --- Оверлей «развернуть» поверх карточки (мини-диалог) --- */
.cal-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: var(--bg-raised);
  padding: 52px var(--s-5) var(--s-5);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.cal-overlay[hidden] { display: none; }
.cal-overlay-close {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: none; color: var(--ink-faint);
  font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: var(--radius);
}
.cal-overlay-close:hover { color: var(--ink); }
.cal-overlay-title {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700;
  margin: 0 0 var(--s-3);
}
.cal-overlay-body { font-size: var(--text-small); color: var(--ink-soft); }

/* --- Чипса «Сегодня»: fixed, видна только когда сегодняшний день вне экрана;
   тёмная, в тон floating-панели (правка Александра 2026-07-16) --- */
.sched-chip {
  position: fixed; left: 50%; translate: -50% 0;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: 25; /* ниже шапки (30) и мобильной модалки карточки (60) */
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 9px 18px;
  background: rgba(38, 35, 29, 0.86); color: #F3EEE2;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: none; border-radius: 999px; box-shadow: var(--shadow-lift);
  font: 600 0.8125rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease);
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .sched-chip { background: var(--ink); }
}
.sched-chip[hidden] { display: none; }
@starting-style {
  .sched-chip:not([hidden]) { opacity: 0; translate: -50% 8px; }
}
/* пунктирная обводка убрана (правка Александра 2026-07-16 — «шумная»);
   внимание привлекает мягкая пульсация надписи; reduced-motion глушит её
   глобальным килом, состояние остаётся читаемым текстом */
@keyframes sched-chip-pulse { 50% { opacity: 0.5; } }
.sched-chip > span { animation: sched-chip-pulse 1.8s var(--ease) infinite; }
.sched-chip-dir { flex: none; transition: rotate var(--t-fast) var(--ease); }
.sched-chip[data-dir="down"] .sched-chip-dir { rotate: 180deg; }

/* --- Низкие окна: карточка возвращается в поток (WCAG 1.4.10 reflow) --- */
@media (min-width: 861px) and (max-height: 620px) {
  .sched-page .sched-sidebar-inner { position: static; }
  .sched-page .sched-daycard { height: auto; }
  .sched-tail { display: none; }
  .sched-page .sched-sidebar-inner::before { display: none; }
}

/* --- Мобильный: заголовок страницы живёт в шапке сайта (header--page),
   селектор месяцев — floating-полоса под шапкой, тап по дню → модалка --- */
@media (max-width: 860px) {
  /* Верхний паддинг секции на десктопе занят заголовком h1; на мобильном
     h1 скрыт (заголовок живёт в шапке) — без обнуления над полосой месяцев
     у верха страницы висела дыра в 64px (приёмка 2026-07-20) */
  .sched-page { padding-block-start: 0; }
  /* Полоса месяцев «как меню»: во всю ширину экрана, липнет впритык под
     шапкой (приёмка 2026-07-20). Sticky — на САМОЙ панели: прежний sticky
     на строке месяцев был мёртв — её родитель-панель заканчивается сразу
     под ней, липнуть некуда (родитель панели .sched-main — весь поток). */
  .sched-panel {
    position: sticky; top: calc(var(--header-h) + 1px); z-index: 20;
    padding: 0; margin: 0 calc(-1 * var(--gutter)) var(--s-3);
    width: auto;
    border: none; border-radius: 0; box-shadow: none; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* h1 дублировал бы заголовок в шапке — прячем визуально, для SR остаётся */
  .sched-panel-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .sched-panel-months {
    margin: 0;
    padding: var(--s-2) var(--gutter);
    border: none; border-radius: 0;
    background: rgba(38, 35, 29, 0.92); /* инверсия — как десктопная панель */
    box-shadow: var(--shadow-lift);
    justify-content: center;
  }
  .sched-dayc { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
  .sched-dayc.is-focus { transform: none; }
  .sched-tail { display: none; }
  .sched-page .sched-sidebar-inner::before { display: none; }
  .sched-page .sched-daycard { height: auto; }
  .sched-chip { bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Задача 22: главная на живых данных
   ========================================================================== */

/* Живые заголовки бывают с длинными словами («Пятидесятница.») — без
   переноса слово вылезает из колонки и растягивает страницу вбок
   (мобильный люфт, приёмка 2026-07-20 п. 5) */
.card h3, .ann-item h3 { overflow-wrap: break-word; }

/* Страховка от горизонтального люфта: что бы ни вылезло за вьюпорт,
   страница вбок не двигается. clip (не hidden!) — не создаёт scroll
   container и не ломает sticky-элементы (/schedule/) */
html { overflow-x: clip; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

/* Кнопка-фраза «Реквизиты…» в табе «Пожертвование» — выглядит ссылкой,
   открывает модалку #req-modal этой же страницы (замечание задачи 15) */
button.lavka-req-link {
  background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

/* Заглушка «за горизонтом» в ТЁМНОЙ модалке главной: базовый .cal-empty
   писан токенами светлой карточки /schedule/ и на тёмном фоне нечитаем */
#cal-modal .cal-empty { color: var(--on-dark-soft); }

/* Кнопки-даты hero (span → кнопка через JS, как даты панели) */
.hs-date[role="button"] { cursor: pointer; }

/* End */
/* /local/templates/main/styles.css?178380757925998 */
/* /local/templates/main/template_styles.css?178655637799621 */