/* ============================================
   Києво-Житомирська дієцезія — kzd.org.ua
   ДИЗАЙН v2 «Світлий собор»
   Джерело: ТЗ + design-system/TOKENS.md (розділ 4.0)
   v1 заархівовано: archive/v1-navy-gold-2026-07-10
   ============================================ */

:root {
  /* Палітра (ТЗ: синій / білий / золотий) */
  --navy:    #0C1E3E;
  --navy2:   #071429;
  --navy3:   #162D54;
  --gold:    #C8A84B;
  --gold-l:  #E8C870;
  --gold-p:  #F5ECD8;
  --gold-bd: rgba(200, 168, 75, .25);
  --gold-bg: rgba(200, 168, 75, .08);
  --cream:   #FAF8F4;

  /* «Час війни» — лише маркери, не заливки */
  --war:     #8B1A1A;
  --war-l:   #FCA5A5;
  --war-bg:  rgba(139, 26, 26, .12);

  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  /* Приглушений текст: підписи, дати, метадані, крихти, плейсхолдери.
     Було #9CA3AF — на білому лише 2.8:1, нижче порогу WCAG AA (4.5:1);
     слабозорі скаржились, що не читають. #6B7280 = 4.8:1 і лишається
     помітно тихішим за основний текст, тобто ієрархія не з'їхала.
     ⚠️ Токен вжитий ТІЛЬКИ як color: і тільки на світлому тлі (перевірено
     всі 26 місць), тому темнішати можна одним значенням; для тексту на
     navy у футері та героєві кольори свої й цього не стосуються. */
  --gray-400: #6B7280;
  --gray-600: #4B5563;
  --gray-800: #1F2937;

  /* Типографіка */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Шкала відступів */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* Layout */
  --container: 1200px;
  --header-h:  80px;
  --section-y: 120px;

  --radius:     10px;   /* дрібні елементи */
  --radius-img: 18px;   /* зображення, медіа */
  --radius-pill: 999px; /* кнопки */
  --transition: .2s ease;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* clip, НЕ hidden: hidden створює скрол-контейнер і ламає position:sticky шапки */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* :where() — базовий ресет навмисно нульової специфічності, щоб БУДЬ-яке
   компонентне правило (.prose ul, .hero-stats…) завжди його перебивало
   незалежно від порядку підключення файлів. */
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
p { margin: 0; }
svg { display: block; flex-shrink: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
}

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* html.force-motion — демо-перемикач ?motion=on (js/script.js) */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.section { padding-block: var(--section-y); }

/* ---- Розкладка вмісту сторінки (WP-тема): «constrained layout» ----
   Кожен блок верхнього рівня центрується й обмежується шириною контейнера;
   alignwide/alignfull розширюються без урізання інших. Без негативних
   маржинів (заборонено CLAUDE.md) — лише max-width/padding по кожному блоку. */
.entry-content > * {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: var(--s-6);
}
.entry-content > .alignwide { max-width: calc(var(--container) + 200px); }
.entry-content > .alignfull { max-width: none; padding-inline: 0; }
.entry-content > * + * { margin-top: var(--s-8); }
/* Без цього останній блок ліпиться прямо до футера — немає жодного
   відступу знизу після контенту сторінки. ⚠️ Не додавати, якщо останній
   блок — сам <section> (kzd/form-slot, news-announce, aim-grid тощо) —
   у нього вже є власний .section{padding-block} і подвійний відступ дає
   зайву білу смугу перед футером. */
.entry-content:not(:has(> section:last-child)) { padding-bottom: var(--section-y); }

/* .alignnarrow — власна (не-нативна для WP) опція ширини, доступна для БУДЬ-
   якого блоку (нативного й kzd/*) через кнопку в тулбарі (editor-filters.js).
   Загальний клас, не прив'язаний до .entry-content — потрібен і поза ним
   (напр. <article class="prose alignnarrow"> на текстових сторінках). */
.alignnarrow { max-width: 720px; margin-inline: auto; }

/* ---- Колонковий блок (kzd/columns) — опція дзеркалення ---- */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.cols.is-mirrored { direction: rtl; }
.cols.is-mirrored > * { direction: ltr; }
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
}

/* Без min-width:0 велике фото/довгий рядок «розпирає» grid-комірку понад
   1fr (типова поведінка grid-items: min-width:auto), і вся сітка ламається. */
.cols-item { min-width: 0; }
.cols-item img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-img); }

/* ---- Кнопки: пігулки ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
/* іконка в кнопці не має розтягуватись на всю ширину */
.btn > svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-gold {
  background: var(--gold);
  color: var(--navy2);
  padding: 16px 36px;
}
.btn-gold:hover { background: var(--gold-l); }

/* Ghost на світлому */
.btn-ghost {
  border: 1.5px solid var(--navy);
  color: var(--navy);
  padding: 15px 34px;
}
.btn-ghost:hover { background: var(--navy); color: #fff; }

/* Контурна на темному */
.btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-weight: 500;
  padding: 15px 34px;
}
.btn-outline-light:hover { border-color: var(--gold-l); color: var(--gold-l); }

/* «Час війни»: маркер-крапка, без коробки */
.btn-war {
  color: var(--war);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
}
.btn-war::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--war);
  animation: war-pulse 2s infinite;
}
.btn-war:hover { background: var(--war-bg); }

@keyframes war-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.65); }
}

/* ---- Дуотонові іконки ---- */
svg .ic-g { stroke: var(--gold); }
svg .ic-war { stroke: var(--war); }

/* ---- Поява блоків при скролі (рішення власника 2026-07-10)
   Клас .anim додає лише JS → без JS нічого не ховається.
   prefers-reduced-motion: JS не ініціалізує ефект узагалі ---- */
.anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--anim-delay, 0s);
}
.anim.is-inview {
  opacity: 1;
  transform: none;
}

/* ---- Заголовок секції ---- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.sec-eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--gold);
}
.sec-eyebrow-center { justify-content: center; }
.sec-eyebrow-center::after {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--gold);
}

.sec-title {
  font-size: clamp(36px, 4.4vw, 54px);
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -.01em;
}

.sec-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 8px;
  transition: color var(--transition);
}
/* Рядок із кількох .sec-link поспіль (посилання під описом священника,
   блок єпископа на головній). Саме .sec-link має white-space:nowrap, тож
   переносити треба контейнером, інакше на вузькому екрані рядок вилазить. */
.sec-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-6);
  margin-top: var(--s-5);
}
.sec-link::after { content: '→'; transition: transform var(--transition); }
.sec-link:hover { color: var(--gold); }
.sec-link:hover::after { transform: translateX(4px); }

/* ============================================
   БЛОК 1. ШАПКА (ТЗ 2.2.1)
   ============================================ */
.util-bar { background: var(--navy2); }

.util-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 38px;
  padding-block: 4px;
}

.util-contacts,
.util-right { display: flex; align-items: center; gap: var(--s-5); }
.util-right { gap: var(--s-4); }

.util-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  transition: color var(--transition);
}
.util-link:hover { color: rgba(255, 255, 255, .9); }
.util-link svg { width: 14px; height: 14px; }

.util-socials { display: flex; align-items: center; gap: 2px; }
.util-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .72);
  transition: color var(--transition), background var(--transition);
}
.util-socials a:hover { color: var(--gold-l); background: rgba(255, 255, 255, .06); }
.util-socials svg { width: 15px; height: 15px; }

.lang {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
}
.lang a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .72);
  transition: color var(--transition), background var(--transition);
}
.lang a:hover { color: rgba(255, 255, 255, .85); }
.lang a.is-active { background: var(--gold); color: var(--navy2); }

.util-bar :focus-visible { outline-color: var(--gold-l); }

/* Липне вся шапка: util-bar + хедер разом */
.site-top {
  position: sticky;
  top: 0;
  z-index: 200;
}

/* ---- Рядок 2 ---- */
.site-header {
  background: #fff;
  border-bottom: 2px solid var(--gold-bd);
}

.header-in {
  position: relative; /* база для мега-меню (.drop-mega) */
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  gap: var(--s-2);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  margin-right: var(--s-2);
}
.logo-mark {
  width: 52px; height: 62px;
  object-fit: contain;
  mix-blend-mode: multiply; /* тимчасовий JPG-герб */
}
.logo-text { display: flex; flex-direction: column; gap: 3px; }
.logo-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--navy);
  white-space: nowrap;
}
.logo-sub {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}

.main-nav { flex: 1; min-width: 0; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* 18px — прохання замовника (краща читабельність головного меню).
     Паддінг довелось підтиснути з 12 до 9: контейнер жорстко 1200px, тож
     ширший екран місця НЕ додає, і при 18/12 останній пункт налазив на
     кнопки праворуч на ВСІХ ширинах ≥1280. Заміряно: запас 23–24px. */
  font-size: 18px;
  color: var(--gray-600);
  padding: 8px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--navy); background: var(--gold-bg); }
.nav-link svg { width: 12px; height: 12px; transition: transform var(--transition); }

.has-drop { position: relative; }

.drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 210;
  min-width: 250px;
  padding: var(--s-3);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(12, 30, 62, .16);
  display: none;
}
.drop::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}
.has-drop.is-open > .drop { display: block; }
.has-drop.is-open > .nav-link { color: var(--navy); background: var(--gold-bg); }
.has-drop.is-open > .nav-link svg { transform: rotate(180deg); }

.drop a {
  display: block;
  font-size: 15px;
  color: var(--gray-600);
  padding: 9px 14px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}
.drop a:hover { color: var(--navy); background: var(--gold-bg); }

/* ---- Мега-меню «Про дієцезію»: 4 колонки на всю ширину контейнера ----
   .has-mega робиться static, щоб панель позиціонувалась від .header-in
   (контейнер 1200px) і не виїжджала за край екрана. */
.has-mega { position: static; }

.has-drop.is-open > .drop.drop-mega { display: grid; }

.drop-mega {
  left: 0;
  right: 0;
  min-width: 0;
  padding: var(--s-6);
  grid-template-columns: 1fr 1fr 1.15fr .85fr;
  gap: var(--s-5) var(--s-6);
}

.mega-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 0 14px 12px;
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--gray-100);
}

.mega-bishops { display: flex; flex-direction: column; gap: 4px; }

/* .drop a вище задає display:block — тут потрібна вища специфічність */
.drop a.mega-bishop {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 14px;
  border-radius: 10px;
  transition: background var(--transition);
}
.drop a.mega-bishop:hover { background: var(--gold-bg); }

/* портрети з kzd.org.ua — квадрат 346×346, круглий кроп по обличчю */
.mega-bishop-photo {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
}
/*
 * ⚠️ Раніше тут був фіксований transform:scale(1.45) — підігнаний під ОДНЕ
 * конкретне фото (де обличчя займає малу частку кадру, знято по груди).
 * Коли додали другого єпископа з іншим кадруванням джерела (обличчя вже
 * займає більшість кадру), той самий множник почав над-зумити його фото
 * до "паспортного" кропу без плечей. Портрети з kzd.org.ua не мають
 * єдиного стандарту кадрування, тож без transform — просто object-position
 * зверху, однаково передбачувано для будь-якого майбутнього фото.
 */
.mega-bishop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.mega-bishop-info { display: flex; flex-direction: column; gap: 2px; }
.mega-bishop-role {
  font-size: 12.5px;
  color: var(--gray-400);
}
.mega-bishop-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  transition: background var(--transition), color var(--transition);
}
.icon-btn svg { width: 21px; height: 21px; }

.icon-btn-quiet { color: var(--gray-600); background: var(--gray-100); }
.icon-btn-quiet:hover { color: var(--navy); background: var(--gold-bg); }

.icon-btn-gold { background: var(--gold); color: var(--navy2); }
.icon-btn-gold:hover { background: var(--gold-l); }

.icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 220;
  background: var(--navy2);
  color: #fff;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
}
.icon-btn:hover::after,
.icon-btn:focus-visible::after { opacity: 1; visibility: visible; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: var(--radius);
}
.burger span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-actions { display: none; }
.nav-contacts { display: none; }

/* ============================================
   БЛОК 2. ГЕРОЙ — full-bleed, video-ready (ТЗ 2.2.2)
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: min(86vh, 820px);
  background: var(--navy);
}

/* Слайдер: кросфейд кадрів (кероване js, .is-active) */
.hero-slider { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 20, 41, .35) 0%, rgba(7, 20, 41, .2) 40%, rgba(7, 20, 41, .82) 100%),
    linear-gradient(100deg, rgba(7, 20, 41, .55) 0%, rgba(7, 20, 41, .15) 55%, transparent 100%);
}

.hero-in {
  position: relative;
  z-index: 2;
  padding-block: var(--s-8) 150px; /* низ — під картку пошуку */
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-5);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-l);
}
.hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: var(--gold);
}

.hero-title {
  max-width: 900px;
  margin-bottom: var(--s-4);
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #fff;
}

.hero-sub {
  max-width: 560px;
  margin-bottom: var(--s-6);
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

/* «Час війни» на темному: світла пігулка з war-маркером */
.btn-war-dark {
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-weight: 500;
  padding: 15px 32px;
}
.btn-war-dark::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--war-l);
  animation: war-pulse 2s infinite;
}
.btn-war-dark:hover { border-color: var(--war-l); }

.hero-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
}
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stat-n {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-l);
}
.hero-stat-l {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

.hero :focus-visible { outline-color: var(--gold-l); }

/* ============================================
   БЛОК 3. ПОШУК СВЯТОЇ МЕСИ (ТЗ 2.2.3)
   Біла картка напливає на герой
   ============================================ */
.mass-search {
  position: relative;
  z-index: 5;
  margin-top: -80px;
}

.mass-search-in {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  padding: var(--s-6);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(12, 30, 62, .16);
}

.mass-search-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  align-self: flex-end;
  min-height: 50px;
}
.mass-search-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.mass-search-divider {
  width: 1px;
  height: 50px;
  background: var(--gray-200);
  flex-shrink: 0;
  align-self: flex-end;
}

.mass-search-fields {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  flex: 1;
  flex-wrap: wrap;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 130px;
}
.form-field > label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.select {
  width: 100%;
  padding: 13px 36px 13px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gray-800);
  background-color: var(--cream);
  border: none;
  border-radius: var(--radius);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234B5563' stroke-width='1.5'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  transition: box-shadow var(--transition), background-color var(--transition);
}
.select:hover { background-color: var(--gold-p); }
.select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold); background-color: #fff; }

.btn-navy {
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  padding: 14px 30px;
}
.btn-navy:hover { background: var(--navy3); }

/* ============================================
   БЛОК 4. ПАСТИРСТВО ПІД ЧАС ВІЙНИ (ТЗ 2.2.4)
   Navy-смуга, фото з плавним переходом. Червоний — лише маркер.
   ============================================ */
.war-band {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  margin-top: var(--s-9);
}

.war-band-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  /* фото саме розчиняється у плашці — шва немає за будь-якого кадру */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
}

/* легке тонування поверх фото + гарантія читабельності тексту зліва */
.war-band-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--navy) 36%,
    rgba(12, 30, 62, .4) 62%,
    rgba(12, 30, 62, .18) 100%);
}

.war-band-in {
  position: relative;
  z-index: 2;
  padding-block: var(--s-9);
  max-width: 640px;
}

.war-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--war-l);
}
.war-eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--war-l);
  animation: war-pulse 2s infinite;
}

.war-title {
  font-size: clamp(34px, 4vw, 48px);
  color: #fff;
  margin-bottom: var(--s-3);
}

.war-sub {
  font-size: 18px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: var(--s-6);
}

.war-links {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.war-pill {
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 26px;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition);
}
.war-pill:hover { border-color: var(--gold-l); color: var(--gold-l); }

.war-band :focus-visible { outline-color: #fff; }

/* ============================================
   БЛОК 5. ШВИДКІ КНОПКИ (ТЗ 2.2.5) — без коробок
   ============================================ */
.quick-nav { padding-block: var(--s-9); }

.quick-nav-in {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
}

.quick-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  text-align: center;
  border-radius: var(--radius-img);
  transition: background var(--transition);
}
.quick-cell:hover { background: var(--cream); }

.quick-ico {
  display: flex;
  color: var(--navy);
  transition: color var(--transition), transform var(--transition);
}
.quick-ico svg { width: 60px; height: 60px; }
.quick-cell:hover .quick-ico { color: var(--gold); transform: translateY(-3px); }

.quick-label {
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
}

.quick-cell-gold .quick-ico { color: var(--gold); }
.quick-cell-gold .quick-label { color: var(--navy); }
.quick-cell-gold:hover { background: var(--gold-p); }
.quick-cell-gold:hover .quick-ico { color: var(--navy); }

/* ============================================
   БЛОК 6. АНОНС НОВИН (ТЗ 2.2.6) — borderless
   ============================================ */
.news-section { padding-top: 0; }
/* коли анонс новин — окрема секція (не одразу за іншим білим блоком, як на
   головній), повертаємо верхній відступ, інакше надзаголовок липне до стику */
.news-section.news-section-standalone { padding-top: var(--section-y); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.news-card { height: 100%; }

.news-card-in {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card-img {
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-img);
  margin-bottom: var(--s-5);
}
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-card-in:hover .news-card-img img { transform: scale(1.05); }

.news-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.news-tag {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.news-title {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  transition: color var(--transition);
}
.news-card-in:hover .news-title { color: var(--gold); }

.news-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-600);
}

.news-date {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: 14px;
  color: var(--gray-400);
}

/* ============================================
   БЛОК 7. ЯК ЦЕРКВА МОЖЕ ДОПОМОГТИ ВАМ? (ТЗ 2.2.7)
   Кремова смуга, без коробок
   ============================================ */
.ministries { background: var(--cream); }

.min-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-8) var(--s-7);
}

.min-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
}

.min-ico {
  display: flex;
  margin-bottom: var(--s-3);
  color: var(--gold);
}
.min-ico svg { width: 52px; height: 52px; }
.min-ico svg .ic-g { stroke: var(--navy); } /* інверсія дуотону на кремі */

.min-name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
}

.min-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gray-600);
}

.min-more {
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  transition: color var(--transition);
}
.min-more::after { content: ' →'; }
.min-card:hover .min-more { color: var(--gold); }

/* ============================================
   БЛОК 8. ПРАВЛЯЧИЙ ЄПИСКОП (ТЗ 2.2.8) — editorial
   ============================================ */
.bishop-card {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--s-9);
  align-items: center;
}

.bishop-side {
  position: relative;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: linear-gradient(170deg, var(--gold-p) 0%, var(--cream) 100%);
}
.bishop-side img {
  width: 100%;
  height: auto;
  object-fit: cover;
  mix-blend-mode: multiply; /* фото на білому тлі → зливається з плашкою */
}

.bishop-body { max-width: 620px; }

.bishop-name {
  font-size: clamp(38px, 4.4vw, 56px);
  color: var(--navy);
  margin-bottom: var(--s-2);
}

.bishop-role {
  font-size: 16px;
  color: var(--gray-400);
  margin-bottom: var(--s-6);
}

.bishop-quote {
  position: relative;
  margin: 0 0 var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 27px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy3);
}

/* ============================================
   БЛОК 9. АНОНС ПОДІЙ (ТЗ 2.2.9)
   ============================================ */
/* фон білий: після кремових «Служінь» дві крем-смуги поспіль злипались
   (правка замовника після переносу блоку єпископа вгору) */
.events-section { background: #fff; }

.events-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-9);
  align-items: start;
}

.event-feat { display: block; }

.event-feat-img {
  position: relative;
  height: 340px;
  overflow: hidden;
  border-radius: var(--radius-img);
  margin-bottom: var(--s-5);
}
.event-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  transition: transform .5s ease;
}
.event-feat:hover .event-feat-img img { transform: scale(1.04); }

.event-badge {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: 7px 16px;
  background: var(--gold);
  border-radius: var(--radius-pill);
  color: var(--navy2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-feat-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: var(--s-2);
  transition: color var(--transition);
}
.event-feat:hover .event-feat-title { color: var(--gold); }

.event-meta {
  font-size: 15.5px;
  color: var(--gray-400);
}

.events-side { display: flex; flex-direction: column; }

.event-mini {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--gray-200); /* волосяна лінія списку */
}
.events-side .event-mini:first-child { padding-top: 0; }
.events-side .event-mini:last-child { border-bottom: none; }

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 64px;
}
.event-d {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
}
.event-m {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.event-tag {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.event-mini-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
  transition: color var(--transition);
}
.event-mini:hover .event-mini-title { color: var(--gold); }
.event-loc {
  font-size: 14px;
  color: var(--gray-400);
}

/* ============================================
   БЛОК 10. БЛАГОДІЙНІСТЬ (ТЗ 2.2.10) — тепла смуга
   ============================================ */
/* Темний акорд перед футером — контраст до кремових подій */
.donate-section {
  background: linear-gradient(160deg, var(--navy2) 0%, var(--navy) 55%, var(--navy3) 100%);
  padding-block: var(--section-y);
  text-align: center;
}

.donate-in { display: flex; flex-direction: column; align-items: center; }

.donate-title {
  font-size: clamp(38px, 4.6vw, 58px);
  color: #fff;
  margin-bottom: var(--s-3);
}
.donate-sub {
  font-size: 18px;
  color: rgba(255, 255, 255, .72);
  margin-bottom: var(--s-8);
}

.donate-dirs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-8);
  margin-bottom: var(--s-8);
}

.donate-dir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.donate-dir-ico { display: flex; color: rgba(255, 255, 255, .9); }
.donate-dir-ico svg { width: 46px; height: 46px; }
.donate-dir-ico svg .ic-g { stroke: var(--gold-l); }
/* war-акцент на темному — світлий варіант */
.donate-dir-ico svg .ic-war { stroke: var(--war-l); }
.donate-dir-name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
}

.donate-section :focus-visible { outline-color: var(--gold-l); }

.donate-cta {
  font-size: 17px;
  padding: 19px 52px;
}

/* ============================================
   ОРДЕНИ, РУХИ ТА СПІЛЬНОТИ (ТЗ 2.5 / 2.7)
   Світла смуга-карусель, нативний свайп
   ============================================ */
.orders-section { padding-block: var(--s-9); }

/* Стрічка на всю ширину екрана (edge-bleed), нескінченний автоскрол (js).
   Краї розчиняються масками — видно, що стрічка тече далі */
.orders-track {
  --track-inset: max(var(--s-6), calc((100% - 1200px) / 2 + var(--s-6)));
  display: flex;
  gap: 40px;
  overflow-x: auto;
  padding: 0 var(--s-6) var(--s-2) var(--track-inset);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.orders-track::-webkit-scrollbar { display: none; }

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 172px;
  text-align: center;
}

@media (max-width: 640px) {
  .orders-track {
    --track-inset: var(--s-4);
    padding-right: var(--s-4);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}

.order-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background: var(--gold-bg);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--navy);
  transition: background var(--transition), color var(--transition);
}
.order-item:hover .order-mono { background: var(--gold-p); color: var(--navy2); }

/* Кола з фото/гербами орденів */
.order-photo {
  overflow: hidden;
  background: var(--cream);
}
.order-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--transition);
}
.order-item:hover .order-photo img { transform: scale(1.06); }

.order-name {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  transition: color var(--transition);
}
.order-item:hover .order-name { color: var(--gold); }

.order-type {
  font-size: 14px;
  color: var(--gray-400);
}

/* ============================================
   БЛОК 11. ФУТЕР (ТЗ 2.2.11)
   ============================================ */
/* золота лінія відділяє футер від темної секції пожертви */
.site-footer {
  background: var(--navy);
  border-top: 2px solid var(--gold-bd);
  padding: var(--s-9) 0 var(--s-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid rgba(200, 168, 75, .15);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.footer-coa {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  background: var(--cream);
  border-radius: var(--radius);
}
.footer-coa img { width: 38px; height: 46px; object-fit: contain; }
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--gold-l);
  line-height: 1.2;
}

.footer-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .75);
  margin-bottom: var(--s-5);
  max-width: 340px;
}

.footer-socials { display: flex; gap: var(--s-2); }
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: rgba(200, 168, 75, .12);
  border-radius: 50%;
  color: rgba(255, 255, 255, .85);
  transition: background var(--transition), color var(--transition);
}
.footer-socials a:hover { background: var(--gold); color: var(--navy2); }
.footer-socials svg { width: 16px; height: 16px; }

.footer-col-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-links li,
.footer-links a {
  font-size: 15px;
  color: rgba(255, 255, 255, .8);
}
.footer-links a { transition: color var(--transition); }
.footer-links a:hover { color: var(--gold-l); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}
.footer-bottom a { color: var(--gold-l); }
.footer-bottom a:hover { color: var(--gold-l); }

.site-footer :focus-visible { outline-color: var(--gold-l); }

/* ============================================
   ВНУТРІШНІ СТОРІНКИ: шапка сторінки + крихти
   ============================================ */
.page-head {
  background: var(--cream);
  padding: var(--s-6) 0 var(--s-7);
}
/* Для сторінок, де на крем напливає картка/фото (фільтри, герой парафії):
   104 − 60 (наплив) = 44px видимого зазору — як між крихтами і заголовком */
.page-head-overlap { padding-bottom: 104px; }

.crumbs { margin-bottom: 28px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 14px;
  color: var(--gray-400);
}
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: '›'; color: var(--gold); }
.crumbs a { transition: color var(--transition); }
.crumbs a:hover { color: var(--navy); }
.crumbs [aria-current] { color: var(--gray-600); }

/* надзаголовок над H1 сторінки (напр. абревіатура ордену) */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-3);
}
.page-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--gold-bd);
}

.page-title {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: var(--s-3);
}
.page-sub {
  font-size: 18px;
  color: var(--gray-600);
}

/* ============================================
   ПАРАФІЇ — СПИСОК (ТЗ 2.3.1)
   ============================================ */
/* картка ~120px заввишки → -60px садить її центром на стик крем/білий */
.parish-filter {
  position: relative;
  z-index: 5;
  margin-top: -60px;
}

.filter-card {
  display: grid;
  /* назва · область · місто · кнопка (район і орден прибрані — правка замовника) */
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: var(--s-3);
  align-items: end;
  padding: var(--s-5) var(--s-6);
  background: #fff;
  border-radius: var(--radius-img);
  box-shadow: 0 18px 48px rgba(12, 30, 62, .12);
}

.input {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gray-800);
  background-color: var(--cream);
  border: none;
  border-radius: var(--radius);
  transition: box-shadow var(--transition), background-color var(--transition);
}
.input::placeholder { color: var(--gray-400); }
.input:hover { background-color: var(--gold-p); }
.input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold); background-color: #fff; }

.parish-list { padding-top: var(--s-8); }

.parish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8) var(--s-6);
}

.parish-card { display: block; }
.parish-card-img {
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-img);
  margin-bottom: var(--s-4);
}
.parish-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.parish-card:hover .parish-card-img img { transform: scale(1.05); }

.parish-name {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 4px;
  transition: color var(--transition);
}
.parish-card:hover .parish-name { color: var(--gold); }

.parish-loc {
  font-size: 15px;
  color: var(--gray-400);
}

/* ============================================
   ПАРАФІЯ ДЕТАЛЬНО (ТЗ 2.3.2)
   ============================================ */
.parish-hero { margin-top: -60px; position: relative; z-index: 5; }
.parish-hero-img {
  height: clamp(280px, 38vw, 460px);
  overflow: hidden;
  border-radius: var(--radius-img);
}
.parish-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.parish-detail { padding-top: var(--s-8); }

.parish-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--s-9);
  align-items: start;
}

.parish-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  max-width: 640px;
}

.detail-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--s-4);
}

.detail-text,
.detail-text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: var(--s-4);
}
.detail-text p:last-child { margin-bottom: 0; }

.detail-source {
  font-size: 15px;
  color: var(--gray-400);
}
.detail-source a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-bd);
  transition: color var(--transition), border-color var(--transition);
}
.detail-source a:hover { color: var(--navy); border-color: var(--gold); }

/* Люди й ордени при парафії */
.person-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.person-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.person-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px; height: 72px;
  font-size: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gold-bg);
}
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person-info { display: flex; flex-direction: column; gap: 3px; }
.person-role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.person-name {
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
  transition: color var(--transition);
}
.person-card:hover .person-name { color: var(--gold); }

/* Сайдбар: розклад + контакти */
.parish-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.aside-card {
  background: var(--cream);
  border-radius: var(--radius-img);
  padding: var(--s-6);
}

.aside-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--s-4);
}

.schedule { display: flex; flex-direction: column; }
.schedule li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 10px;
  border-bottom: 1px solid rgba(12, 30, 62, .08);
}
.schedule li:last-child { border-bottom: none; }
.schedule-day { font-size: 15px; font-weight: 500; color: var(--navy); }
.schedule-time { font-size: 15px; color: var(--gray-600); white-space: nowrap; }

.schedule-sunday-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: var(--s-5) 0 var(--s-2);
}
.schedule-sunday li { justify-content: flex-start; }
.schedule-time-big {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--navy);
  min-width: 64px;
}
.schedule-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-600);
  align-self: center;
}

.aside-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--s-4);
}
.aside-contacts li { font-size: 15px; color: var(--gray-600); }
.aside-contacts a {
  color: var(--navy);
  border-bottom: 1px solid var(--gold-bd);
  transition: color var(--transition);
}
.aside-contacts a:hover { color: var(--gold); }

.map-embed {
  overflow: hidden;
  border-radius: var(--radius);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}
/* Власна JS-карта (.parish-solo-map) — <div>, не <iframe>: Google Maps
   потребує явної висоты контейнера, iframe цього не потребував. */
.map-embed.parish-solo-map {
  height: 260px;
}
/* Власне посилання на Google Карти під embed'ом — не покладаємось на
   внутрішню кнопку "Відкрити на Картах" самого Google (непередбачувано
   веде на чужий заклад поруч чи відкриває мапу без піна, якщо в
   будівлі вже є власний бізнес-запис у довіднику Google). */
.map-open-link {
  margin: var(--s-3) 0 0;
}

/* ============================================
   ДУХОВЕНСТВО — СПИСОК (ТЗ 2.4.1)
   ============================================ */
/* духовенство має ту саму сітку, що й базова картка фільтра */

.clergy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8) var(--s-6);
}

.clergy-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clergy-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-img);
  margin-bottom: var(--s-3);
  background: var(--cream);
}
.clergy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .5s ease;
}
.clergy-card:hover .clergy-photo img { transform: scale(1.04); }

/* монограма замість фото, поки клієнт не надав */
.clergy-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  color: var(--gold-bd);
}

.clergy-role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.clergy-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
  transition: color var(--transition);
}
.clergy-card:hover .clergy-name { color: var(--gold); }

/* ============================================
   СВЯЩЕННИК ДЕТАЛЬНО (ТЗ 2.4.2)
   ============================================ */
.priest-detail { padding-top: var(--s-8); }

.priest-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--s-9);
  align-items: start;
}

.priest-photo {
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--cream);
  margin-bottom: var(--s-5);
}
.priest-photo img { width: 100%; height: auto; }

.priest-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.priest-actions .btn { flex: 1; }
.priest-fb { flex-shrink: 0; width: 54px; height: 54px; }
.priest-fb svg { width: 20px; height: 20px; }

.priest-main { max-width: 640px; }

/* ---- Модальна форма запису ---- */
.contact-dialog {
  width: min(480px, calc(100vw - 32px));
  border: none;
  border-radius: var(--radius-img);
  padding: 0;
  box-shadow: 0 32px 80px rgba(12, 30, 62, .3);
}
.contact-dialog::backdrop {
  background: rgba(7, 20, 41, .55);
}

.dialog-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
}

.dialog-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--navy);
  transition: background var(--transition);
}
.dialog-close:hover { background: var(--gold-p); }
.dialog-close svg { width: 15px; height: 15px; }

.dialog-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
}
.dialog-sub {
  font-size: 15px;
  color: var(--gray-600);
  margin-top: -8px;
}

textarea.input { resize: vertical; min-height: 96px; }

.dialog-submit { margin-top: var(--s-2); }
.dialog-success {
  font-size: 15px;
  color: var(--navy);
  background: var(--gold-p);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-align: center;
}

/* ============================================
   НОВИНИ / ПОДІЇ (ТЗ 2.16)
   ============================================ */
/* Таби розділів у page-head */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.cat-tab {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--gold-bd);
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-600);
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
.cat-tab:hover { border-color: var(--gold); color: var(--navy); }
.cat-tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy2);
}

.news-page { padding-top: var(--s-8); }

.news-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s-9);
  align-items: start;
}

.news-grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-6); }
.news-grid-2 .news-card-img { height: 220px; }
.news-grid-2 .news-title { font-size: 23px; }

/* Сайдбар: останні новини */
.news-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.mini-news { display: flex; flex-direction: column; }
.mini-news li { border-bottom: 1px solid rgba(12, 30, 62, .08); }
.mini-news li:last-child { border-bottom: none; }

.mini-news-item {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-3);
  align-items: flex-start;
}
.mini-news-img {
  width: 64px; height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.mini-news-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-news-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-news-date { font-size: 12.5px; color: var(--gray-400); }
.mini-news-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
  transition: color var(--transition);
}
.mini-news-item:hover .mini-news-title { color: var(--gold); }

/* Теги */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.tag-chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13.5px;
  color: var(--gray-600);
  transition: background var(--transition), color var(--transition);
}
.article-tags .tag-chip,
.news-aside .tag-chip { background: var(--gold-bg); }
.tag-chip:hover { background: var(--gold); color: var(--navy2); }
.tag-count { color: var(--gray-400); margin-inline-start: 2px; }

.tags-all-btn {
  margin-top: var(--s-4);
  width: 100%;
  font-size: 14px;
  padding: 11px 20px;
}

/* Пагінація (ТЗ 2.16.1) */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-8);
}

/* Перемикач вигляду подій: «Архів подій» ↔ «Найближчі події».
   Той самий відступ, що в пагінації — блок під списком читається як
   один рівень, незалежно від того, є пагінація чи ні. */
.events-view-switch { margin-top: var(--s-8); }
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-600);
  transition: background var(--transition), color var(--transition);
}
.page-btn:hover { background: var(--gold-p); color: var(--navy); }
.page-btn.is-active { background: var(--navy); color: #fff; }
.page-btn.is-disabled { opacity: .35; pointer-events: none; }
.page-dots { color: var(--gray-400); }

/* Стаття (детальна новини, ТЗ 2.16.2) */
.page-title-article {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.12;
  max-width: 900px;
}
.article-meta { display: flex; gap: 8px; }
.article-cat {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-bd);
  transition: color var(--transition);
}
.article-cat:hover { color: var(--navy); }

.article-main { max-width: 680px; }

.article-img {
  overflow: hidden;
  border-radius: var(--radius-img);
  margin-bottom: var(--s-6);
}
.article-img img { width: 100%; height: auto; }
.article-img-inline { margin-block: var(--s-6); }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--gray-200);
}

/* ============================================
   ТЕКСТОВА СТОРІНКА (шаблон): фото-шапка + .prose
   ============================================ */
/* Фото-смуга для сторінок-настроїв (напливає на крем, як фото парафії) */
.page-hero { margin-top: -60px; position: relative; z-index: 5; }
.page-hero-img {
  height: clamp(260px, 34vw, 420px);
  overflow: hidden;
  border-radius: var(--radius-img);
}
.page-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.text-page { padding-top: var(--s-8); }

/* Контентна зона: контракт для тексту з WordPress (the_content) */
/* .prose — лише типографіка (камертон elementy.html). Ширина — окремо,
   через .alignnarrow/.alignwide/.alignfull, щоб текстові блоки за
   замовчуванням (none) мали ширину контейнера, як і всі інші блоки. */
.prose {
  font-size: 18px;
  line-height: 1.8;
  color: var(--gray-800);
}
.prose > * + * { margin-top: var(--s-5); }
/* якщо контент починається одразу із заголовка — без зайвого верхнього відступу */
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }

.prose > p:first-child { font-size: 21px; line-height: 1.7; color: var(--navy3); }

/*
 * "Лід" — той самий вигляд, що й автоматичний перший абзац, але як
 * стиль блоку (Styles-панель редактора), щоб редактор міг застосувати
 * його на БУДЬ-ЯКИЙ абзац, не лише перший (фідбек 2026-08-19). Клас
 * is-style-lead ставить сам WordPress через register_block_style()
 * (inc/editor-styles.php) на core/paragraph.
 */
.prose p.is-style-lead { font-size: 21px; line-height: 1.7; color: var(--navy3); }

/* Акцент частини тексту всередині абзацу (inline-формат редактора,
   assets/js/editor-lead-format.js) — колір+вага, без зміни розміру
   (font-size на span всередині рядка ламає вертикальний ритм). */
.prose .lead-text { color: var(--navy3); font-weight: 600; }

.prose h2 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  margin-top: var(--s-8);
}
.prose h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin-top: var(--s-6);
}

/* підкреслення — лише текстові посилання, не кнопки */
.prose a:not(.btn) {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-bd);
  transition: color var(--transition), border-color var(--transition);
}
.prose a:not(.btn):hover { color: var(--navy); border-color: var(--gold); }

.prose blockquote {
  margin-block: var(--s-6);
  padding-left: var(--s-5);
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
}

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-img);
  margin-block: var(--s-6);
}

/* Навмисно НЕ display:flex — flex-контейнер зі стислим (fit-content) вмістом
   короткого списку в редакторі підхоплював margin-inline:auto з core
   layout-класів і «спливав» у центр канви. Звичайний блоковий <ul> з
   margin-top між <li> — без цієї категорії проблем узагалі. */
.prose ul, .prose ol {
  padding-left: var(--s-5);
}
.prose ul > li + li,
.prose ol > li + li {
  margin-top: 10px;
}
.prose ul { list-style: none; }
.prose ul > li { position: relative; padding-left: var(--s-5); }
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.prose ol { list-style: decimal; }
.prose ol > li { padding-left: 6px; }
.prose li::marker { color: var(--gold); font-weight: 600; }

/* вкладені списки — щільніше, без подвійного верхнього відступу */
.prose li > ul,
.prose li > ol { margin-top: 10px; }
.prose li > ul > li,
.prose li > ol > li { margin-top: 8px; }

/* ---- Заголовки H1–H6 у контенті ---- */
.prose h1 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
  margin-top: var(--s-8);
}
.prose h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-top: var(--s-6);
}
.prose h5 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--navy);
  margin-top: var(--s-5);
}
.prose h6 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--s-5);
}

/* ---- Інлайн-елементи ---- */
.prose strong, .prose b { font-weight: 600; color: var(--navy); }
.prose em, .prose i { font-style: italic; }
.prose mark {
  background: var(--gold-p);
  color: var(--navy);
  padding: .05em .3em;
  border-radius: 3px;
}
.prose small { font-size: .82em; color: var(--gray-600); }
.prose sub, .prose sup { font-size: .72em; }
.prose del, .prose s { color: var(--gray-400); }
.prose ins { text-decoration: none; border-bottom: 2px solid var(--gold-bd); }
.prose abbr[title] { text-decoration-style: dotted; cursor: help; }
.prose code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .88em;
  background: var(--cream);
  padding: .12em .4em;
  border-radius: 4px;
  color: var(--navy3);
}
.prose kbd {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .8em;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: .1em .45em;
  color: var(--navy);
}

/* ---- Розділювач ---- */
.prose hr {
  border: none;
  height: 1px;
  background: var(--gray-200);
  margin-block: var(--s-7);
}

/* ---- Список означень ---- */
.prose dl { display: grid; gap: var(--s-2) var(--s-5); }
.prose dt { font-weight: 600; color: var(--navy); }
.prose dd { margin: 0 0 var(--s-3); color: var(--gray-600); }

/* ---- Фото з підписом ---- */
.prose figure { margin: var(--s-6) 0; }
.prose figure img { margin-block: 0; margin-inline: auto; }
.prose figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  font-style: italic;
  color: var(--gray-400);
  text-align: center;
}

/* ---- Нотатка / виноска ----
   Клас працює і поза .prose (напр. під списком документів) */
.note {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-4) var(--s-5);
  font-size: 16px;
  color: var(--gray-800);
}
.note > * + * { margin-top: 10px; }
/* на кремовому тлі нотатка має лишатись помітною */
.section-cream .note { background: #fff; }

/* ---- Таблиця (адаптивна: горизонтальний скрол у власному контейнері) ---- */
.prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.prose table {
  width: 100%;
  min-width: 520px;               /* вужче — скрол у .table-scroll */
  border-collapse: collapse;
  font-size: 16px;
  margin: 0;
}
.prose caption {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  color: var(--gray-400);
  padding-bottom: 10px;
}
.prose thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.prose th, .prose td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}
.prose tbody tr:nth-child(even) { background: var(--cream); }
.prose tbody tr:hover { background: var(--gold-bg); }
.prose thead th:first-child { border-top-left-radius: var(--radius); }
.prose thead th:last-child { border-top-right-radius: var(--radius); }

/* ============================================
   ФОРМА В КОНТЕНТІ (контракт полів)
   ============================================ */
.content-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  max-width: 720px;
  margin-inline: auto;
}
.content-form .form-field-full { grid-column: 1 / -1; }

.content-form fieldset {
  grid-column: 1 / -1;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.content-form legend {
  padding: 0;
  margin-bottom: var(--s-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* чекбокси / радіо — акцент золотий */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: var(--gray-800);
  cursor: pointer;
}
.check-item input {
  width: 20px; height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.content-form .form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.form-hint { font-size: 13.5px; color: var(--gray-400); margin-top: 6px; }

/* ============================================
   ІНСТИТУЦІЙНІ СТОРІНКИ (Контакти 2.17, Курія 2.10, Суд 2.11)
   Спільні компоненти: колонка+сайдбар, реквізити, посади, документи
   ============================================ */

/* та сама сітка, що й на сторінці парафії, але з нейтральною назвою */
.side-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--s-9);
  align-items: start;
}
.side-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  max-width: 640px;
}
.side-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Дзеркальний варіант: вузька колонка ЛІВОРУЧ, текст праворуч.
   Для детальної сторінки ордену — портретне фото 2:3 поруч із текстом
   (замість горизонтальної смуги .page-hero, яка різала портрет у вузьку
   смужку). Розмітка: .side-aside йде першим у DOM, тож на ≤1100px, коли
   колонки складаються, фото природно опиняється зверху — окремий
   .side-aside-first тут не потрібен. */
.side-layout-aside-left { grid-template-columns: 400px 1fr; }

/* Портрет ордену в детальній: та сама пропорція, що в каталозі (2:3 —
   рівно як оригінали з kzd.org.ua, без обрізання). */
.ord-detail-img {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--cream);
}
.ord-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-cream { background: var(--cream); }
/* на кремовому тлі поля мають лишатись читними — інакше зливаються */
.section-cream .input { background-color: #fff; }
.section-cream .input:hover { background-color: var(--gold-p); }

/* секція одразу під .page-head: шапка вже дала повітря зверху */
.section-tight { padding-top: var(--s-7); }
/* коли далі йде ще одна біла секція — щоб паддінги не склались удвічі */
.section-tight-b { padding-bottom: var(--s-6); }

/* заголовок + форма однією колонкою */
/* вузька колонка контенту (720px) — форми й компактні блоки */
.block-narrow,
.form-block { max-width: 720px; margin-inline: auto; }
.form-block .content-form { margin-inline: 0; max-width: none; }
/* нотатка під вмістом блоку — власний відступ, бо .prose тут немає */
.form-block > .note { margin-top: var(--s-6); }

/* ---- Реквізити: тип даних ліворуч, значення праворуч ---- */
.info-list { display: flex; flex-direction: column; }
.info-list > li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--gray-100);
}
.info-list > li:last-child { border-bottom: none; }
.info-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 4px;
}
.info-value {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-800);
}
.info-value a {
  color: var(--navy);
  border-bottom: 1px solid var(--gold-bd);
  transition: color var(--transition), border-color var(--transition);
}
.info-value a:hover { color: var(--gold); border-color: var(--gold); }
.info-value span { display: block; }

/* ---- Посади: назва посади + людина ---- */
.staff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6) var(--s-7);
}
.staff-item { display: flex; flex-direction: column; gap: 6px; }
.staff-role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.staff-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
.staff-note { font-size: 15px; color: var(--gray-600); }

/* ---- Документи для завантаження ---- */
.doc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.doc-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--cream);
  border-radius: var(--radius-img);
  transition: background var(--transition), transform var(--transition);
}
.doc-item:hover { background: var(--gold-p); }
/* на кремовій секції плитка кремом не читається */
.section-cream .doc-item { background: #fff; }
.section-cream .doc-item:hover { background: var(--gold-p); }
.doc-ico {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.doc-ico svg { width: 30px; height: 30px; }
.doc-info { display: flex; flex-direction: column; gap: 3px; }
.doc-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.35;
}
.doc-meta {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* ============================================
   ВІДЕО (ТЗ 2.14.1: «текст, відео з ютуб»)
   Пропорція 16:9 без хаків: aspect-ratio на обгортці
   ============================================ */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--navy);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Заглушка, поки замовник не дав посилання на ролик */
.video-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%; height: 100%;
  color: rgba(255, 255, 255, .8);
  text-align: center;
  padding: var(--s-5);
}
.video-ph-play {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.video-ph-play svg { width: 30px; height: 30px; }
.video-ph-text { font-size: 15px; }

/* ============================================
   НАПРЯМКИ (розділи допомоги, напрямки пожертви, види волонтерства)
   Плитка на кремі: іконка + назва + рядок пояснення. Рамок немає.
   ============================================ */
.aim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.aim-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--cream);
  border-radius: var(--radius-img);
  transition: background var(--transition);
}
a.aim-card:hover { background: var(--gold-p); }
/* на кремовій секції плитка кремом не читається — білимо, як поля вводу */
.section-cream .aim-card { background: #fff; }
.section-cream a.aim-card:hover { background: var(--gold-p); }
.aim-ico {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}
.aim-ico svg { width: 34px; height: 34px; }
.aim-ico svg .ic-g { stroke: var(--gold); }
.aim-ico svg .ic-war { stroke: var(--war); }
.aim-body { display: flex; flex-direction: column; gap: 5px; }
.aim-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}
.aim-text { font-size: 15px; line-height: 1.6; color: var(--gray-600); }

/* ============================================
   КАРТКА ОНЛАЙН-ПОЖЕРТВИ (ТЗ 2.15) — темний акцент у сайдбарі
   ============================================ */
.donate-card {
  background: linear-gradient(160deg, var(--navy2), var(--navy3));
  border-radius: var(--radius-img);
  padding: var(--s-6);
  color: #fff;
}
.donate-card .aside-title { color: #fff; }
.donate-card-text {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .75);
  margin-bottom: var(--s-5);
}
.donate-card-note {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
  margin-top: var(--s-4);
}
.donate-card :focus-visible { outline-color: var(--gold-l); }

/* сума пожертви: пігулки-варіанти */
.amount-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.amount-pill {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, .28);
  background: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.amount-pill:hover { border-color: var(--gold); color: var(--gold-l); }

.btn-block { width: 100%; }

/* ============================================
   ВХІД ДЛЯ СВЯЩЕННИКІВ (ТЗ 2.18)
   ============================================ */
.login-block { max-width: 460px; margin-inline: auto; }
.login-block .content-form { grid-template-columns: 1fr; max-width: none; margin-inline: 0; }
.login-block .form-actions { justify-content: stretch; }
.login-block .form-actions .btn { flex: 1; }
.login-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: 15px;
  color: var(--gray-600);
}
.login-links a {
  color: var(--navy);
  border-bottom: 1px solid var(--gold-bd);
  transition: color var(--transition), border-color var(--transition);
}
.login-links a:hover { color: var(--gold); border-color: var(--gold); }

/* ---- Оголошення курії (вміст кабінету; наповнює адміністратор) ----
   Список без коробок: дата — надзаголовок, розділювач — волосяна лінія */
.notice-list { display: flex; flex-direction: column; }
.notice-list > li {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--gray-200);
}
.notice-list > li:first-child { padding-top: 0; }
.notice-list > li:last-child { padding-bottom: 0; border-bottom: none; }

.notice-date {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.notice-title {
  margin-top: 6px;
  font-size: 25px;
  color: var(--navy);
}
.notice-text {
  margin-top: var(--s-3);
  font-size: 16px;
  color: var(--gray-600);
}
/* кнопка «Всі оголошення» під списком */
.notice-all { margin-top: var(--s-6); }

/* Заголовок середнього рівня всередині блоку (менший за .sec-title) */
.block-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--s-5);
}
.form-block > * + .block-title,
.block-narrow > * + .block-title { margin-top: var(--s-8); }

/* Документи в сайдбарі: та сама плитка, але один стовпчик і щільніше */
.doc-list-stack { grid-template-columns: 1fr; gap: var(--s-3); }
.doc-list-stack .doc-item { padding: var(--s-4); }
/* картка сайдбара кремова — плитка всередині має лишатись білою */
.aside-card .doc-item { background: #fff; }
.aside-card .doc-item:hover { background: var(--gold-p); }

/* ============================================
   СПИСКИ-КАТАЛОГИ (Ордени 2.5 · Рухи/Заклади/ЗМІ 2.7–2.9)
   Спільна сітка карток без рамок — повітря + радіус зображення
   ============================================ */
.tile-list { padding-top: var(--s-8); }
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8) var(--s-6);
}

/* ---- Картка ордену: фото + абревіатура + повна назва ---- */
/* Фото орденів — ПОРТРЕТНІ 2:3: усі оригінали з kzd.org.ua саме такі
   (order_640_960 → 1280×1920), тож ця пропорція не ріже нічого. Раніше
   стояла фіксована height:240px — з портрета вирізалась горизонтальна
   смуга, і більша частина фото пропадала (фідбек власника 2026-09-03). */
.ord-card { display: block; }
.ord-card-img {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius-img);
  margin-bottom: var(--s-4);
  background: var(--cream);
}
.ord-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.ord-card:hover .ord-card-img img { transform: scale(1.05); }
.ord-abbr {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.ord-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  transition: color var(--transition);
}
.ord-card:hover .ord-name { color: var(--gold); }

/* ---- Картка руху/закладу/ЗМІ: фото + назва + опис + читати далі ---- */
.mv-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mv-card-img {
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-img);
  margin-bottom: var(--s-4);
  background: var(--cream);
}
.mv-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mv-card:hover .mv-card-img img { transform: scale(1.05); }
.mv-name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--navy);
  margin-bottom: 10px;
  transition: color var(--transition);
}
.mv-card:hover .mv-name { color: var(--gold); }
.mv-excerpt {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gray-600);
  margin-bottom: var(--s-4);
}
.mv-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--navy);
  transition: color var(--transition);
}
.mv-more::after { content: '→'; transition: transform var(--transition); }
.mv-card:hover .mv-more { color: var(--gold); }
.mv-card:hover .mv-more::after { transform: translateX(4px); }

/* ============================================
   РЕЗУЛЬТАТИ ПОШУКУ МЕС (ТЗ 2.6.1) — «анонс меси»
   Рядок-картка: фото парафії + назва/адреса/розклад + перехід
   ============================================ */
.results-count {
  font-size: 15px;
  color: var(--gray-600);
  margin-bottom: var(--s-5);
}
.results-count strong { color: var(--navy); font-weight: 600; }
.results-hint { color: var(--gray-400); }

.mass-results {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.mass-card {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-4);
  background: var(--cream);
  border-radius: var(--radius-img);
  transition: background var(--transition), transform var(--transition);
}
.mass-card:hover { background: var(--gold-p); }
.mass-card-img {
  height: 130px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.mass-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mass-card:hover .mass-card-img img { transform: scale(1.05); }
.mass-card-body { min-width: 0; }
.mass-card-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 8px;
}
.mass-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--gray-600);
  margin-top: 4px;
}
.mass-card-row svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }
.mass-card-when {
  font-weight: 500;
  color: var(--navy);
}

/* Картки, всередині яких є ВТОРИННЕ посилання («На мапі»), не можуть
   самі бути тегом <a> — вкладене <a> в <a> невалідне, браузер рве
   розмітку. Тому картка стає контейнером, а головний клік на всю її
   площу дає «розтягнуте» посилання назви (.card-link::after).
   Використовується .mass-card (пошук меси) і .parish-card (каталог). */
.mass-card,
.parish-card { position: relative; }
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

/* Вторинне посилання «На мапі» — має лежати ВИЩЕ за розтягнуте,
   інакше його не клікнути. Використовується і в картці меси, і в
   каталозі парафій. */
.map-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.map-link svg { width: 14px; height: 14px; color: var(--gold); transition: color var(--transition); }
.map-link:hover { background: var(--gold); color: var(--navy2); }
.map-link:hover svg { color: var(--navy2); }
.mass-card-go {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  border: 1.5px solid var(--gold-bd);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.mass-card:hover .mass-card-go { background: var(--gold); border-color: var(--gold); color: var(--navy2); }
.mass-card-go svg { width: 20px; height: 20px; }

/* ============================================
   ПЕРЕМИКАЧ РЕЖИМІВ ПОШУКУ (Списком / На мапі)
   ============================================ */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--cream);
  border-radius: var(--radius-pill);
}
.view-switch a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  transition: background var(--transition), color var(--transition);
}
.view-switch a:hover { color: var(--navy); }
.view-switch a.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(12, 30, 62, .10);
}
.view-switch svg { width: 16px; height: 16px; }

/* ============================================
   МАПА ПАРАФІЙ — ЗАГЛУШКА
   ⚠️ Інтерактивна Google-карта (кластери, пошук по місту,
   «Найближча до мене») — фаза WordPress-теми. Тут лише макет.
   ============================================ */
.map-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--s-6);
  align-items: stretch;
}
.map-aside { display: flex; flex-direction: column; gap: var(--s-5); }
.aside-card .input { background-color: #fff; }

.map-geo-btn { margin-top: var(--s-4); }
.map-aside-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-400);
  margin-top: var(--s-4);
}

.map-near { display: flex; flex-direction: column; }
.map-near li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid rgba(12, 30, 62, .08);
}
.map-near li:last-child { border-bottom: none; }
.map-near-name { display: block; font-size: 16px; font-weight: 500; color: var(--navy); }
.map-near-loc { display: block; font-size: 13px; color: var(--gray-400); margin-top: 2px; }
.map-near-dist {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
}

/* Полотно мапи — стилізована плашка з «шпильками» й поміткою */
.map-canvas {
  position: relative;
  min-height: 560px;
  border-radius: var(--radius-img);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(197, 160, 89, .10), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(12, 30, 62, .08), transparent 45%),
    repeating-linear-gradient(0deg, rgba(12,30,62,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(12,30,62,.05) 0 1px, transparent 1px 48px),
    var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.map-canvas-pin {
  position: absolute;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(12, 30, 62, .28);
}
.map-canvas-pin.is-gold { background: var(--gold); color: var(--navy2); }
.map-canvas-note {
  position: relative;
  z-index: 2;
  max-width: 360px;
  padding: var(--s-6);
  background: rgba(255, 255, 255, .92);
  border-radius: var(--radius-img);
  box-shadow: 0 20px 50px rgba(12, 30, 62, .14);
}
.map-canvas-note-ico { color: var(--gold); margin-bottom: var(--s-3); }
.map-canvas-note-ico svg { width: 40px; height: 40px; }
.map-canvas-note h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.map-canvas-note p { font-size: 15px; line-height: 1.6; color: var(--gray-600); }

.filter-name-hint {
  font-size: 13px;
  color: var(--war);
  margin-top: 6px;
}

.no-results {
  max-width: 480px;
  padding: var(--s-6) 0;
}
.no-results-hint {
  font-size: 15px;
  color: var(--gray-400);
  margin-top: 8px;
  margin-bottom: var(--s-5);
}

/* Адаптив внутрішніх сторінок */
@media (max-width: 1100px) {
  .side-layout { grid-template-columns: 1fr; gap: var(--s-7); }
  .map-layout { grid-template-columns: 1fr; }
  .map-canvas { min-height: 380px; }
  .side-main { max-width: 720px; }
  .side-aside { max-width: 640px; }
  /* у вузькій колонці головна дія (онлайн-пожертва) має бути першою */
  .side-aside-first { order: -1; }
  .filter-card { grid-template-columns: 1fr 1fr 1fr; }
  .filter-card .filter-name { grid-column: 1 / -1; }
  .parish-layout { grid-template-columns: 1fr; gap: var(--s-7); }
  /* order: -1 — правка замовника: у вузькій колонці розклад богослужінь
     і карта йдуть одразу після фото, перед описом парафії */
  .parish-aside { max-width: 640px; order: -1; }
  .clergy-grid { grid-template-columns: repeat(3, 1fr); }
  .tile-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-6); }
  .priest-layout { grid-template-columns: 320px 1fr; gap: var(--s-7); }
  .news-layout { grid-template-columns: 1fr; gap: var(--s-7); }
  .news-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

@media (max-width: 960px) {
  .parish-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .clergy-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .priest-layout { grid-template-columns: 1fr; }
  .priest-side { max-width: 380px; }
}

@media (max-width: 640px) {
  .page-head { padding: var(--s-5) 0 var(--s-6); }
  .page-head-overlap { padding-bottom: var(--s-8); }
  .parish-filter { margin-top: -40px; }
  .parish-hero { margin-top: -40px; }
  .page-hero { margin-top: -40px; }
  .prose { font-size: 17px; }
  .prose > p:first-child { font-size: 19px; }
  .prose p.is-style-lead { font-size: 19px; }
  .content-form { grid-template-columns: 1fr; }
  .info-list > li { grid-template-columns: 1fr; gap: 4px; }
  .info-label { padding-top: 0; }
  .staff-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .doc-list { grid-template-columns: 1fr; }
  .aim-grid { grid-template-columns: 1fr; }
  .login-links { flex-direction: column; gap: var(--s-2); }
  .mass-card {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .mass-card-img { height: 200px; }
  .mass-card-go { display: none; }
  .filter-card { grid-template-columns: 1fr 1fr; padding: var(--s-4); }
  .filter-card .filter-name,
  .filter-card .btn-navy { grid-column: 1 / -1; }
  .filter-card .btn-navy { min-height: 50px; }
  .parish-grid { grid-template-columns: 1fr; }
  .parish-card-img { height: 220px; }
  .tile-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  /* .ord-card-img тут НЕ чіпаємо — у нього aspect-ratio 2/3 (портрет),
     фіксована height перебила б пропорцію й повернула обрізання. */
  .mv-card-img { height: 240px; }
  .aside-card { padding: var(--s-5); }
  .clergy-grid { grid-template-columns: 1fr 1fr; }
  .clergy-name { font-size: 17px; }
  .clergy-mono { font-size: 34px; }
  .dialog-form { padding: var(--s-5); }
  .news-grid-2 { grid-template-columns: 1fr; }
  .news-aside { grid-template-columns: 1fr; }
  .cat-tab { font-size: 14px; padding: 8px 15px; }
  .pagination { flex-wrap: wrap; }
}

/* ============================================
   RESPONSIVE — 1279 / 1100 / 960 (burger) / 640 / 400
   ============================================ */

@media (max-width: 1279px) {
  .logo-name { font-size: 19px; }
  .nav-link { font-size: 18px; padding: 8px 8px; }
  /* Нижче 1280 контейнер починає вужчати, а лого-лок-ап лишається
     широким (сам підзаголовок — 259px). Знімаємо його першим: назва
     дієцезії читається й без гасла, а меню отримує потрібні ~60px. */
  .logo-sub { display: none; }
}

@media (max-width: 1279px) {
  .util-contacts .util-phone2 { display: none; }
}

@media (max-width: 1100px) {
  .util-contacts .util-address { display: none; }
  /* Тут лого вже згорнуте до герба, місця вдосталь — повертаємо пунктам
     нормальний внутрішній відступ (пігулка ховера не тисне до тексту). */
  .nav-link { padding: 8px 10px; }
  .nav-link { padding: 8px 10px; }
  .min-grid { grid-template-columns: repeat(3, 1fr); }
  .mass-search-in { flex-direction: column; align-items: stretch; }
  .mass-search-label { align-self: flex-start; min-height: 0; }
  .mass-search-divider { display: none; }
}

/* Планшет 961–1200: лише герб.
   Поріг піднято з 1100 до 1200 (2026-09-03). Причина не в новому кеглі:
   заміри показали, що смуга 1101–1150 налазила на кнопки і при старих
   15px — назва "Києво-Житомирська Дієцезія" сама по собі 259px, і на
   цих ширинах її просто нема куди подіти. Прийом не новий — шапка вже
   так робить нижче 1100, зсунувся лише поріг. */
@media (min-width: 961px) and (max-width: 1200px) {
  .logo-text { display: none; }
}

@media (max-width: 960px) {
  :root { --section-y: 88px; }

  .burger { display: flex; }
  .header-actions .btn-war,
  .header-actions .icon-btn-quiet { display: none; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-bottom: 2px solid var(--gold-bd);
    /* під липкою шапкою: хедер + util-bar (~38px) */
    max-height: calc(100vh - var(--header-h) - 38px);
    overflow-y: auto;
    display: none;
  }
  .main-nav.is-open { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-4);
  }
  .nav-list > li { border-bottom: 1px solid var(--gray-100); }
  .nav-list > li:last-child { border-bottom: none; }

  .nav-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 17px;
    padding: 14px 6px;
    border-radius: 0;
  }
  .nav-link:hover { background: none; }

  .drop {
    position: static;
    display: none;
    min-width: 0;
    box-shadow: none;
    padding: 0 0 var(--s-2) var(--s-4);
  }
  .drop::before { display: none; }
  .drop a { font-size: 16px; padding: 10px 6px; }

  .drop-mega { grid-template-columns: 1fr; gap: var(--s-4); padding: 0 0 var(--s-2) var(--s-4); }
  .mega-head { padding: 0 6px 8px; margin-bottom: 4px; }
  .mega-bishop { padding: 8px 6px; }

  .nav-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    border-top: 1px solid var(--gray-200);
  }
  .nav-actions .btn { width: 100%; min-height: 50px; }
  /* у мобільній панелі war-кнопка — помітніша */
  .nav-actions .btn-war { border: 1.5px solid var(--war-bg); }

  /* Адреса/телефони/пошта, приховані з верхньої смуги на мобільному —
     дублюються тут (див. header.php) */
  .nav-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    border-top: 1px solid var(--gray-200);
  }
  .nav-contacts .util-link { color: var(--gray-600); font-size: 15px; }
  .nav-contacts .util-link:hover { color: var(--navy); }
  .nav-contacts .util-link svg { color: var(--gray-400); }

  .hero { min-height: 0; }
  .hero-in { padding-block: var(--s-8) 130px; }

  .war-band-bg {
    width: 100%;
    opacity: .35;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .war-band-fade {
    background: linear-gradient(180deg, rgba(7,20,41,.75), rgba(7,20,41,.88));
  }

  .quick-nav-in { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); }

  .news-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .news-grid li:nth-child(3) { grid-column: 1 / -1; }

  .min-grid { grid-template-columns: 1fr 1fr; }

  .bishop-card { grid-template-columns: 1fr; gap: var(--s-6); }
  .bishop-side { max-width: 380px; }

  .events-grid { grid-template-columns: 1fr; gap: var(--s-6); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --section-y: 72px; }
  .container { padding-inline: var(--s-4); }

  /* Адреса/телефони/пошта на телефоні йдуть у видувне меню (.nav-contacts) —
     на вузькій верхній смузі лишаються тільки пошук, соцмережі й мова. */
  .util-contacts { display: none; }
  .util-bar-in { justify-content: flex-end; }
  .util-right { gap: var(--s-3); }

  .util-search {
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
  }
  .util-search:hover { background: rgba(255, 255, 255, .18); }
  .util-search svg { width: 16px; height: 16px; }
  .util-search-text { display: none; }

  .util-socials a { width: 26px; height: 26px; }

  .logo { flex-shrink: 1; min-width: 0; }
  .logo-text { min-width: 0; }
  .logo-mark { width: 46px; height: 55px; }
  .logo-name { font-size: 17px; white-space: normal; line-height: 1.15; }
  .logo-sub { display: none; }

  .hero-title { font-size: clamp(40px, 11vw, 52px); }
  .hero-sub { font-size: 17px; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: var(--s-4) var(--s-6); }
  .hero-stat-n { font-size: 36px; }

  .mass-search { margin-top: -60px; }
  .mass-search-in { padding: var(--s-5) var(--s-4); border-radius: var(--radius-img); }
  .mass-search-fields { display: grid; grid-template-columns: 1fr 1fr; }
  /* Область + Місто парою, «День тижня» — на всю ширину */
  .mass-search-fields .form-field:nth-child(3) { grid-column: 1 / -1; }
  .mass-search-fields .btn-navy { grid-column: 1 / -1; min-height: 50px; }

  .war-band-in { padding-block: var(--s-8); }
  .war-links { flex-direction: column; align-items: stretch; }
  .war-pill { text-align: center; }

  .quick-nav { padding-block: var(--s-8); }
  .quick-nav-in { grid-template-columns: 1fr 1fr; }
  .quick-nav-in li:last-child { grid-column: 1 / -1; }
  .quick-nav-in li:last-child .quick-cell { flex-direction: row; justify-content: center; gap: var(--s-3); }
  .quick-ico svg { width: 48px; height: 48px; }

  .news-grid { grid-template-columns: 1fr; }
  .news-grid li:nth-child(3) { grid-column: auto; }
  .news-card-img { height: 220px; }

  .min-grid { grid-template-columns: 1fr; gap: var(--s-6); }

  .donate-dirs { gap: var(--s-5) var(--s-5); }
  .donate-dir { min-width: calc(50% - var(--s-5)); }
  .donate-cta { width: 100%; }

  .site-footer { padding-top: var(--s-8); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 400px) {
  .hero-title { font-size: 38px; }
}