/* ==== 00-tokens.css ==== */
/* =====================================================================
   Церква «Благодать» — головна сторінка, напрям «Поріг»
   Mobile-first. Брейкпоінти: 600 (sm) · 768 (md) · 1080 (lg) · 1280 (xl)

   Контраст (WCAG 2.x, пораховано 29.09.2026):
   білий на --blue ............ 8.94   текст і час на синьому полі
   --mint на --blue ........... 5.42   вторинний текст на полі, кільце фокуса
   --gold-light на --blue ..... 5.40   рядок дати
   --gold на --blue ........... 3.06   лише лінії
   --live на --blue ........... 1.19   ЗАБОРОНА
   --blue на білому/F8/tint ... 8.94 / 8.42 / 7.77
   --ink на білому/F8/mint-t .. 14.81 / 13.95 / 13.17
   --brown на білому/F8 ....... 11.68 / 10.99
   --muted на білому/F8/tint .. 7.20 / 6.78 / 6.26
   --gold-ink на білому/F8/tint 5.78 / 5.44 / 5.02  (≥15px, вага ≥500)
   --gold на білому ........... 2.92   ПРОВАЛ — лише лінією
   --moss-deep на --mint-tint . 7.88
   білий на --live ............ 7.52   пілюля «НАЖИВО»
   --live на --live-tint ...... 6.69
   білий/--gold-light/--mint на --brown  11.68 / 7.04 / 7.08
   --blue-soft на білому ...... 6.27   кільце фокуса
   ===================================================================== */

/* Шрифти — самохостинг, лише cyrillic + latin (без блокувального CSS з Google) */
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/onest-normal-400-800-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/onest-normal-400-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/literata-normal-500-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/literata-normal-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/literata-italic-400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/literata-italic-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica");
  size-adjust: 105%;
  ascent-override: 92%;
  descent-override: 29%;
  line-gap-override: 0%;
}

:root {
  --blue: #014A8A;
  --blue-deep: #013865;
  --blue-soft: #24639D;
  --blue-tint: #E8F0F7;
  --blue-line: #D3E0EC;

  --brown: #532F23;
  --ink: #3B2119;
  --muted: #6B5244;

  --gold: #B3925F;
  --gold-ink: #7A6238;
  --gold-light: #D9C7A6;

  --mint: #A9D3BC;
  --mint-tint: #EAF4EE;
  --moss: #4E6E5E;
  --moss-deep: #35503F;
  --stone: #574B45;

  --live: #AD0212;
  --live-deep: #7F0000;
  --live-tint: #FBEFF0;
  --error: #7F0000;

  --paper: #FFFFFF;
  --paper-2: #F8F8F8;

  /* розширення для внутрішніх сторінок і адмінки (тінти кольорів брифу; нових родин немає) */
  --gold-tint: #F7F2E9;   /* фон «увага/перевірте» (автоматика, чернетка); --gold-ink на ньому 5.2 */
  --gold-line: #E6D9C2;   /* рамка того ж блоку */
  --error-tint: #FAEFEF;  /* фон помилки форми; --error на ньому 9.8 */
  --brown-tint: #F4EFED;  /* нейтральний фон бейджа «архів»; --brown на ньому 10.2, --muted 6.3 */

  --focus: var(--blue-soft);

  --font-ui: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-word: "Literata", Georgia, "Times New Roman", serif;

  --fs-time: clamp(4.5rem, 3.2rem + 6.4vw, 8rem);
  --fs-lead: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-h1: 1.0625rem;
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.625rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1rem + .15vw, 1.125rem);
  --fs-meta: .9375rem;
  --fs-small: .8125rem;
  --fs-dock: .75rem;
  --fs-slot: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --fs-sermon: clamp(1.3125rem, 1.2rem + .4vw, 1.625rem);
  --fs-quote: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --measure: 64ch;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-11: 96px;

  --gutter: 16px;
  --container: 1200px;
  /* колонка «коли» у Slot: у rem, щоб «сьогодні» / «вт–пт» не налазили на назву і при збільшеному шрифті */
  --when-w: 4.75rem;
  --section-y: 56px;
  --h2-gap: 20px;
  --head-h: 64px;
  --dock-h: 64px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 16px;

  --shadow-dock: 0 -8px 24px -12px rgb(59 33 25 / .22);
  --shadow-sheet: 0 -16px 40px -16px rgb(59 33 25 / .30);
  --shadow-lift: 0 10px 24px -14px rgb(59 33 25 / .28);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* арка-двері */
  --arch-w: min(100vw - 64px, 320px);
  --arch-h: calc(var(--arch-w) * 1.25);
  --overhang: calc(var(--arch-h) * .45);

  color-scheme: light;
  scrollbar-color: var(--blue-soft) transparent;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 72px; --h2-gap: 24px; --head-h: 72px; --dock-h: 0px; --when-w: 5.5rem;
          --arch-w: 340px; --overhang: 128px; }
}
@media (min-width: 768px) and (max-width: 1079.98px) {
  :root { --arch-w: clamp(340px, 100vw - 454px, 380px); --overhang: 112px; }
}
@media (min-width: 1080px) {
  :root { --gutter: 48px; --section-y: 96px; --h2-gap: 32px; --arch-w: 460px; --overhang: 104px;
          --fs-time: 11.5rem; }
}

/* ==== 01-base.css ==== */
/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 0px;
}
@media (min-width: 768px) { html { scroll-padding-top: var(--head-h); } }
/* мобайл: фокус і якорі не ховаються під фіксований док (WCAG 2.4.11) */
@media (max-width: 767.98px) { html { scroll-padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 16px); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  overflow-x: clip;
  caret-color: var(--blue);
  accent-color: var(--blue);
  -webkit-font-smoothing: antialiased;
}
/* Автоперенос складами — лише для довгого тексту у вузькій колонці. Короткі примітки, назви, адреси,
   час і статуси не переносимо: інакше «моли-/тва» у двох рядках примітки (DIRECTION 4.3) */
@media (max-width: 599.98px) {
  .faq details > p, .about__text > p:not(.about__lead), .route p:not([class]), .shelter p { hyphens: auto; -webkit-hyphens: auto; }
}
::selection { background: var(--mint); color: var(--ink); }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
address { font-style: normal; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.nw { white-space: nowrap; }
.lg-only { display: none; }
@media (min-width: 600px) { .lg-only { display: inline; } .sm-only { display: none; } }
/* статус картки трансляції: коротка форма на телефоні й на планшеті (там картка — пів ширини) */
.st-l { display: none; }
@media (min-width: 600px) and (max-width: 767.98px), (min-width: 1080px) { .st-l { display: inline; } .st-s { display: none; } }
[hidden] { display: none !important; }

:focus { outline: none; }
main:focus, main:focus-visible { outline: none; } /* після skip-link фокус на <main> — не інтерактивний, без кільця */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--brown);
  text-wrap: balance;
  hyphens: manual;
  margin-bottom: var(--h2-gap);
}
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; color: var(--brown); text-wrap: balance; }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-body); color: var(--ink); max-width: var(--measure); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: #fff; color: var(--blue); font-weight: 600;
  padding: 12px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-lift);
}
.skip:focus-visible { top: 12px; outline-color: #fff; } /* кільце на синій шапці — біле, не синє на синьому */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

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

/* ==== 02-ui.css ==== */
/* ---------- текстові посилання й кнопки ---------- */
.link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px;
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-1);
}
.link .ic { width: 18px; height: 18px; }
.link:hover { text-decoration-thickness: 2.5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px;
  border-radius: var(--r-md); border: 1.5px solid transparent;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform 80ms;
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 20px; height: 20px; }
.btn:active { transform: scale(.98); }
@media (min-width: 1080px) { .btn { min-height: 48px; } }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); }
.btn--primary:disabled { background: var(--blue-line); color: var(--muted); cursor: not-allowed; transform: none; }
.btn--secondary { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn--secondary:hover { background: var(--blue-tint); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-meta); }

.btn--on-blue { background: #fff; color: var(--blue); }
.btn--on-blue:hover { background: var(--blue-tint); }
.btn--on-blue:active { background: var(--blue-line); }
.btn--ghost-blue { background: transparent; color: #fff; border-color: rgb(255 255 255 / .7); }
.btn--ghost-blue:hover { background: rgb(255 255 255 / .1); }
.btn--ghost-blue:active { background: rgb(255 255 255 / .16); }

.text-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0; border: 0; background: none;
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.text-btn .ic { width: 20px; height: 20px; }
.text-btn:hover { text-decoration-thickness: 2.5px; }
.text-btn.is-done { color: var(--moss-deep); text-decoration: none; }

.icon-btn {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--brown);
  transition: background-color var(--dur-1);
}
.icon-btn:hover { background: var(--blue-tint); color: var(--blue); }

/* бейджі й позначки прототипу */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3;
  padding: 2px 8px; border-radius: var(--r-sm); white-space: nowrap;
}
.badge .ic { width: 16px; height: 16px; }
.badge--stream { background: var(--blue-tint); color: var(--blue); }
.badge--now { background: #fff; color: var(--blue); border: 1px solid var(--blue-soft); }
.badge--irregular { color: var(--muted); border: 1px dashed var(--muted); }

.tag-example {
  display: inline-block;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3;
  color: #fff; background: rgb(59 33 25 / .85);
  padding: 3px 8px; border-radius: var(--r-sm);
}
.tag-example--inline { vertical-align: 1px; margin-left: 4px; }
.tbc {
  display: inline-block;
  font-style: italic; color: var(--muted); font-size: var(--fs-meta);
  border: 1px dashed var(--muted); border-radius: var(--r-sm);
  padding: 1px 8px; line-height: 1.5;
}
.tbc--dark { color: var(--gold-light); border-color: rgb(217 199 166 / .6); }

/* ==== 03-chrome.css ==== */
/* ======================================================================
   ШАПКА
   ====================================================================== */
.site-head { background: var(--blue); color: #fff; --focus: var(--mint); position: relative; z-index: 30; }
.site-head__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  min-height: var(--head-h); padding-block: 8px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; flex: none; max-width: 100%; }
.brand__mark { width: 36px; height: auto; border-radius: 3px; }
.brand__name { font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; }
.brand__sub { font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--mint); text-wrap: balance; }

.top-nav, .head-phone, .status-pill, .head-menu { display: none; }

@media (min-width: 768px) {
  .site-head { position: sticky; top: 0; }
  .site-head.is-stuck { box-shadow: 0 1px 0 rgb(255 255 255 / .14); }
  .top-nav { display: block; margin-left: auto; }
  .top-nav ul { list-style: none; display: flex; gap: 22px; }
  .top-nav a {
    display: flex; align-items: center; min-height: 48px;
    color: #fff; font-size: 1rem; font-weight: 500; text-decoration: none;
    text-decoration-line: underline; text-decoration-color: transparent;
    text-decoration-thickness: 2px; text-underline-offset: 8px;
    transition: text-decoration-color var(--dur-1), color var(--dur-1);
    white-space: nowrap;
  }
  .top-nav a:hover { text-decoration-color: var(--gold-light); }
  .top-nav a:active { color: var(--mint); }
  .top-nav a[aria-current] { text-decoration-color: var(--gold); }
  .top-nav__lg { display: none; }
  .head-menu {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 14px;
    border: 1.5px solid rgb(255 255 255 / .7); border-radius: var(--r-md);
    color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none;
    transition: background-color var(--dur-1);
  }
  .head-menu .ic { width: 20px; height: 20px; }
  .head-menu:hover { background: rgb(255 255 255 / .1); }
  .status-pill:not([hidden]) { display: inline-flex; }
}
@media (min-width: 1080px) {
  .brand__name { font-size: 1.1875rem; }
  .top-nav ul { gap: 28px; }
  .top-nav__lg { display: list-item; }
  .top-nav__md { display: none; }
  .head-menu { display: none; }
}
/* Під час ефіру пілюля забирає місце. 768–1079: ховаємо верхню навігацію, лишаємо «Меню».
   1080–1279: навігація лишається, пілюля скорочена до «● НАЖИВО». */
@media (min-width: 768px) and (max-width: 1079.98px) {
  .site-head.has-pill .top-nav { display: none; }
  .site-head.has-pill .status-pill { margin-left: auto; }
  .site-head.has-pill .head-menu { display: inline-flex; }
}
@media (min-width: 1080px) and (max-width: 1279.98px) {
  .site-head.has-pill .site-head__inner { gap: 18px; }
  .site-head.has-pill .top-nav ul { gap: 18px; }
  .site-head.has-pill .status-pill { padding: 0 12px; }
  .status-pill .pill-more { display: none; }
}
@media (min-width: 1280px) {
  .head-phone {
    display: inline-flex; align-items: center; min-height: 48px;
    color: #fff; font-weight: 600; font-size: 1rem; white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
    text-decoration: none;
  }
  .head-phone:hover { text-decoration: underline; text-decoration-color: var(--gold-light); text-decoration-thickness: 2px; }
  .site-head.has-pill .head-phone { display: none; }
}

/* пілюля статусу (шапка) */
.status-pill {
  align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border-radius: 999px; background: #fff; color: var(--blue);
  font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.status-pill .ic { width: 18px; height: 18px; }

/* ======================================================================
   КОНТАКТИ + ПІДВАЛ
   ====================================================================== */
.site-foot {
  background: var(--brown); color: #fff; --focus: var(--gold-light);
  border-top: 1px solid var(--gold);
  padding: 56px 0 calc(24px + var(--dock-h) + env(safe-area-inset-bottom));
}
.foot { display: grid; gap: 32px; }
.foot__brand { display: flex; align-items: center; gap: 14px; }
.foot__brand img { width: 48px; height: auto; border-radius: 3px; }
.foot__name { font-size: 1.25rem; font-weight: 700; color: var(--gold-light); line-height: 1.2; }
.foot__sub { font-size: var(--fs-meta); color: rgb(255 255 255 / .8); line-height: 1.35; margin-top: 2px; }
.site-foot h2, .site-foot p.foot__title { color: #fff; margin-bottom: -12px; }
.site-foot p.foot__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; } /* 32 − 12 = 20 px від заголовка до вмісту */
.foot__label { font-size: var(--fs-small); font-weight: 600; color: var(--gold-light); margin-top: 16px; }
.foot__contacts .foot__label:first-of-type { margin-top: 0; }
.foot__row {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  color: #fff; text-decoration: none; font-weight: 500; font-size: 1.0625rem;
  border-bottom: 1px solid rgb(255 255 255 / .14);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.foot__row .ic { width: 20px; height: 20px; color: var(--gold-light); }
.foot__row:hover span { text-decoration: underline; text-decoration-color: var(--gold-light); text-underline-offset: 4px; }
.foot__place .foot__label { margin-top: 0; }
.foot__addr { margin-top: 6px; line-height: 1.5; }
.foot__sunday { margin-top: 12px; font-weight: 600; }
.foot__safe { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--mint); font-weight: 500; }
.foot__safe .ic { width: 20px; height: 20px; }
.foot__social .foot__label { margin-top: 0; }
.socials { list-style: none; display: flex; gap: 8px; margin-top: 10px; }
.socials a {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / .4); color: #fff;
  transition: background-color var(--dur-1);
}
.socials a:hover { background: rgb(255 255 255 / .1); }
.socials .ic { width: 22px; height: 22px; }
.foot__tbc { margin-top: 10px; font-size: var(--fs-small); color: rgb(255 255 255 / .8); }
.foot__nav { display: flex; flex-direction: column; align-items: flex-start; margin-top: 16px; } /* стовпчиком — без сиріт у рядку */
.foot__nav a { display: inline-flex; align-items: center; min-height: 48px; color: #fff; text-decoration: none; font-weight: 500; }
.foot__nav a:hover { color: var(--gold-light); text-decoration: underline; }
.foot__legal { font-size: var(--fs-small); color: var(--gold-light); padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .14); }

@media (min-width: 768px) {
  .foot { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 40px; }
  .foot__title, .foot__brand, .foot__legal { grid-column: 1 / -1; }
  .site-foot { padding-top: 72px; }
}
@media (min-width: 1080px) {
  .foot { grid-template-columns: 1.4fr 1fr 1fr; column-gap: 56px; }
  .foot__contacts { max-width: 460px; }
}

/* ======================================================================
   ДОК (мобайл)
   ====================================================================== */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  height: calc(64px + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid var(--blue-line);
  box-shadow: var(--shadow-dock);
  transition: transform var(--dur-2) var(--ease-out);
}
.dock a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); text-decoration: none; font-size: var(--fs-dock); font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-1), transform 80ms;
}
.dock a:active { transform: scale(.96); }
.dock__ic { position: relative; display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px; transition: background-color var(--dur-1); }
.dock a[aria-current] { color: var(--blue); }
.dock a[aria-current] .dock__ic { background: var(--blue-tint); }
.dock__dot {
  position: absolute; top: 3px; right: 13px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 2px #fff;
}
.dock__online.is-live { color: var(--live); }
.dock__online.is-live .dock__dot { background: var(--live); }
body.is-typing .dock { transform: translateY(110%); }
@media (min-width: 768px) { .dock { display: none; } }

/* ======================================================================
   ЛИСТ МЕНЮ
   ====================================================================== */
dialog { color: var(--ink); }
.sheet {
  margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0;
  width: 100%; max-width: 100%; max-height: 85dvh;
  inset: auto 0 0 0;
  border-radius: 20px 20px 0 0;
  background: #fff; box-shadow: var(--shadow-sheet);
  overflow: auto; overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.sheet[open] { transform: none; }
@starting-style { .sheet[open] { transform: translateY(100%); } }
.sheet::backdrop {
  background: rgb(59 33 25 / .45);
  opacity: 0; transition: opacity var(--dur-2), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete;
}
.sheet[open]::backdrop { opacity: 1; }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }

.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0 20px; position: sticky; top: 0; background: #fff; }
.sheet__title { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sheet__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 20px 12px; }
.sheet__acts .btn { padding: 0 12px; }
.sheet__nav { display: flex; flex-direction: column; padding: 0 20px; }
.sheet__nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; border-bottom: 1px solid var(--blue-line);
  color: var(--brown); text-decoration: none; font-size: 1.1875rem; font-weight: 600;
  transition: color var(--dur-1);
}
.sheet__nav a .ic { width: 20px; height: 20px; color: var(--blue); }
.sheet__nav a:hover { color: var(--blue); }
.sheet__info { padding: 20px; display: grid; gap: 10px; }
.sheet__hours { font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.sheet__phone { display: inline-flex; align-items: center; flex-wrap: wrap; column-gap: 10px; min-height: 48px; font-weight: 700; font-size: 1.125rem; color: var(--blue); text-decoration: none; font-variant-numeric: tabular-nums lining-nums; }
.sheet__addr { display: flex; gap: 10px; color: var(--ink); font-size: var(--fs-meta); }
.sheet__safe { display: flex; gap: 10px; align-items: center; background: var(--mint-tint); color: var(--moss-deep); padding: 12px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-meta); }
.sheet__info .ic { width: 20px; height: 20px; }
.sheet__safe .ic { color: var(--moss); }
.socials--light a { border-color: var(--blue-line); color: var(--blue); }
.socials--light a:hover { background: var(--blue-tint); }
.sheet__foot { position: sticky; bottom: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--blue-line); }
.sheet__close { width: 100%; }
@media (min-width: 768px) { .sheet__foot { display: none; } }
/* низький екран (360×640): усі 9 пунктів без прокрутки — пункти 48, «Закрити» лише хрестиком угорі */
@media (max-height: 699.98px) {
  .sheet { max-height: 94dvh; }
  .sheet__acts .btn { min-height: 48px; }
  .sheet__nav a { min-height: 48px; font-size: 1.0625rem; }
  .sheet__foot { display: none; }
}
.sheet:focus-visible { outline: none; }

@media (min-width: 768px) {
  .sheet {
    inset: 0 0 0 auto; width: 400px; height: 100dvh; max-height: 100dvh;
    border-radius: 20px 0 0 20px; transform: translateX(100%);
    padding-top: 12px;
  }
  .sheet[open] { transform: none; }
  @starting-style { .sheet[open] { transform: translateX(100%); } }
}

/* Тост «розділ у розробці» */
.toast {
  position: fixed; z-index: 60; left: 50%; translate: -50% 0;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 16px);
  width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 16px; border-radius: var(--r-md);
  background: var(--brown); color: #fff; font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
  --focus: var(--gold-light);
  box-shadow: 0 12px 28px -12px rgb(59 33 25 / .5);
  transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  opacity: 0; visibility: hidden; translate: -50% 8px; pointer-events: none;
}
/* живий регіон завжди в DOM (не hidden) — інакше скрінрідери оголошують ненадійно */
.toast.is-shown {
  opacity: 1; visibility: visible; translate: -50% 0; pointer-events: auto;
  transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out), visibility 0s;
}
.toast b { color: var(--gold-light); font-weight: 600; }
.toast:empty { padding: 0; }
.toast__text { padding-block: 8px; }
.toast__close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: #fff;
}
.toast__close:hover { background: rgb(255 255 255 / .12); }
.toast__close .ic { width: 20px; height: 20px; }
.toast__close:focus-visible { outline-offset: -3px; }
@media (min-width: 768px) { .toast { bottom: 24px; } }

/* ==== 04-components.css ==== */
/* ======================================================================
   СПІЛЬНІ UI-КОМПОНЕНТИ ВНУТРІШНІХ СТОРІНОК І АДМІНКИ
   Один набір для сайту й адмінки: бейджі статусів, кнопки, поля, прапорці, повідомлення,
   сторінки списку, порожні стани, діалоги, заголовок секції. Макроси — templates/_ui.html.
   ====================================================================== */

/* бейджі статусів (адмінка, проповіді, події) */
.badge--draft { color: var(--muted); border: 1px dashed var(--muted); }
.badge--review { color: var(--gold-ink); background: var(--gold-tint); border: 1px solid var(--gold-line); }
.badge--published { color: var(--blue); background: var(--blue-tint); }
.badge--error { color: var(--error); background: var(--error-tint); }
.badge--neutral { color: var(--brown); background: var(--brown-tint); }
.badge--today { color: #fff; background: var(--blue); }
.badge--count {
  min-width: 24px; justify-content: center; padding: 1px 7px; border-radius: 999px;
  background: var(--blue); color: #fff; font-variant-numeric: tabular-nums lining-nums;
}

/* кнопки: тихі й небезпечні (видалення — лише в адмінці, завжди з підтвердженням) */
.btn--quiet { background: transparent; color: var(--blue); border-color: var(--blue-line); }
.btn--quiet:hover { background: var(--blue-tint); border-color: var(--blue-soft); }
.btn--danger { background: #fff; color: var(--error); border-color: var(--error); }
.btn--danger:hover { background: var(--error-tint); }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { cursor: not-allowed; transform: none; }
.btn--secondary:disabled, .btn--quiet:disabled { color: var(--muted); border-color: var(--blue-line); background: var(--paper-2); }

/* ---------- поля форм: той самий вигляд, що й пошук на головній ---------- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field + .field { margin-top: 20px; }
.field__label { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); line-height: 1.35; }
.field__opt { font-weight: 500; color: var(--muted); }
.field__hint { font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; max-width: 60ch; }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--error); line-height: 1.4; }
.field__error .ic { width: 18px; height: 18px; margin-top: 1px; }
.input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid var(--blue-soft); border-radius: var(--r-sm);
  background: var(--blue-tint); color: var(--ink); font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--dur-1), background-color var(--dur-1);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover { border-color: var(--blue); }
.input:focus-visible { border-color: var(--blue); background: #fff; outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.input--area { min-height: 132px; resize: vertical; }
.input[readonly] { background: var(--paper-2); border-color: var(--blue-line); color: var(--muted); }
.input:disabled { background: var(--paper-2); border-color: var(--blue-line); color: var(--muted); cursor: not-allowed; }
.field--error .input { border-color: var(--error); background: var(--error-tint); }
.field--error .input:focus-visible { outline-color: rgb(127 0 0 / .35); background: #fff; }
.input[type="date"], .input[type="time"], .input[type="datetime-local"] { font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 1080px) { .input { min-height: 48px; padding-block: 10px; } }

.select { position: relative; display: block; }
.select .input { padding-right: 44px; cursor: pointer; }
.select__chev { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--blue); pointer-events: none; }

/* поле з іконкою зліва (пошук) — те саме, що .sermon-search на головній */
.input-ic { position: relative; display: block; }
.input-ic > .ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--blue); pointer-events: none; }
.input-ic > .input { padding-left: 44px; }

/* прапорці, радіо, перемикачі: весь рядок — ціль ≥ 48 px */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 0; cursor: pointer; line-height: 1.4; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.check__text { display: grid; gap: 2px; }
.check__label { font-size: 1.0625rem; color: var(--ink); font-weight: 500; }
.check__hint { font-size: var(--fs-meta); color: var(--muted); }
.check--switch { position: relative; }
.check--switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; }
.check__track {
  flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; margin-top: -1px;
  background: var(--blue-line); border: 1.5px solid var(--blue-soft);
  transition: background-color var(--dur-1);
}
.check__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(59 33 25 / .3); transition: translate var(--dur-2) var(--ease-out);
}
.check--switch input:checked + .check__track { background: var(--blue); border-color: var(--blue); }
.check--switch input:checked + .check__track::after { translate: 18px 0; }
.check--switch input:focus-visible + .check__track { outline: 3px solid var(--focus); outline-offset: 3px; }
fieldset.group { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.group > legend { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); padding: 0; margin-bottom: 4px; }

/* ---------- повідомлення (flash, помилки, «перевірте») ---------- */
.notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md); border: 1px solid;
  font-size: var(--fs-meta); line-height: 1.5; color: var(--ink);
}
.notice__ic { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.notice__body { min-width: 0; flex: 1; }
.notice__body > * + * { margin-top: 4px; }
.notice__title { font-weight: 700; font-size: 1rem; color: inherit; }
.notice__close { width: 40px; height: 40px; margin: -8px -8px -8px 0; }
.notice--info, .notice--success { background: var(--blue-tint); border-color: var(--blue-line); }
.notice--info .notice__ic, .notice--info .notice__title,
.notice--success .notice__ic, .notice--success .notice__title { color: var(--blue); }
.notice--warning { background: var(--gold-tint); border-color: var(--gold-line); }
.notice--warning .notice__ic, .notice--warning .notice__title { color: var(--gold-ink); }
.notice--error { background: var(--error-tint); border-color: rgb(127 0 0 / .35); }
.notice--error .notice__ic, .notice--error .notice__title { color: var(--error); }

/* ---------- сторінки списку ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 32px; }
.pager__step {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--blue-line); border-radius: var(--r-md); color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
  text-decoration: none; transition: background-color var(--dur-1);
}
.pager__step .ic { width: 20px; height: 20px; }
.pager__step:hover { background: var(--blue-tint); }
.pager__step.is-disabled { color: var(--muted); background: var(--paper-2); cursor: default; }
.pager__nums { list-style: none; display: none; gap: 4px; align-items: center; }
.pager__num {
  display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 6px; border-radius: var(--r-sm);
  color: var(--blue); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums lining-nums;
}
.pager__num:hover { background: var(--blue-tint); }
.pager__num[aria-current] { background: var(--blue); color: #fff; }
.pager__gap { color: var(--muted); padding: 0 4px; }
.pager__where { font-size: var(--fs-meta); color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
/* телефон: «‹ Сторінка 1 з 2 ›» — кроки лише іконками (підпис — у aria-label), в один ряд і на 320 */
@media (max-width: 599.98px) {
  .pager { flex-wrap: nowrap; }
  .pager__step { width: 48px; padding: 0; justify-content: center; }
  .pager__step > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pager__step.is-disabled { visibility: hidden; }
}
@media (min-width: 768px) {
  .pager { justify-content: flex-start; }
  .pager__nums { display: flex; }
  .pager__where { display: none; }
}

/* ---------- порожній стан ---------- */
.empty { display: grid; justify-items: start; gap: 8px; padding: 32px 0; max-width: 52ch; }
.empty__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.empty__title { font-size: 1.1875rem; font-weight: 700; color: var(--brown); line-height: 1.3; }
.empty__text { color: var(--ink); }
.empty__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- модальний діалог (підтвердження, лайтбокс, форма) ---------- */
.dlg {
  width: min(520px, calc(100vw - 24px)); max-height: 90dvh; overflow: auto; padding: 0; border: 0;
  border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: var(--shadow-sheet);
}
.dlg::backdrop { background: rgb(59 33 25 / .45); }
.dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 0 20px; }
.dlg__title { font-size: 1.1875rem; font-weight: 700; color: var(--brown); line-height: 1.3; }
.dlg__body { padding: 8px 20px 20px; display: grid; gap: 12px; }
.dlg__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 16px 20px 20px; border-top: 1px solid var(--blue-line); }
.dlg .icon-btn:focus-visible { outline-offset: -3px; }

/* ---------- заголовок секції з посиланням праворуч ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 24px; margin-bottom: var(--h2-gap); }
.sec-head > h2 { margin-bottom: 0; }
.sec-head > .link { min-height: 44px; }

/* ======================================================================
   ТЕКСТ СТАТТІ / СТОРІНКИ (.prose): новини, «Про нас», служіння, транскрипт
   ====================================================================== */
.prose { max-width: var(--measure); color: var(--ink); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); margin: 1.8em 0 0; letter-spacing: -0.01em; }
.prose h3 { font-size: var(--fs-h3); margin: 1.6em 0 0; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--gold-ink); font-weight: 600; }
.prose a { font-weight: 500; }
.prose a:hover { text-decoration-thickness: 2.5px; }
.prose strong { font-weight: 700; color: var(--brown); }
.prose figure { margin-block: 1.6em; }
.prose figure img { width: 100%; border-radius: var(--r-lg); }
.prose hr { border: 0; height: 2px; width: 48px; background: var(--gold); margin: 2em 0; }
/* Писання в тексті — Literata курсивом (голос Слова), без бічної смуги; звичайна цитата — Onest */
.prose blockquote { margin-block: 1.6em; padding: 0; }
.prose blockquote p { font-size: 1.1875rem; font-weight: 500; color: var(--brown); }
.prose blockquote.scripture-q p { font-family: var(--font-word); font-style: italic; font-weight: 400; font-size: var(--fs-quote); line-height: 1.4; }
.prose blockquote cite, .prose blockquote footer { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: var(--fs-meta); color: var(--gold-ink); }
.prose blockquote.scripture-q::before { content: ""; display: block; width: 48px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--blue-line); vertical-align: top; }
.prose th { color: var(--brown); font-weight: 600; }
.prose .video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--blue-deep); }
.prose .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 599.98px) { .prose p, .prose li { hyphens: auto; -webkit-hyphens: auto; } }

/* ==== 05-page-head.css ==== */
/* ======================================================================
   ПОЛЕ СТОРІНКИ — синя смуга з H1 на внутрішніх сторінках.
   Той самий світ, що й поріг головної: синє «небо» відповідає на головне питання сторінки,
   коротка золота лінія під назвою (як під «10:00»), золотий поріг знизу. Арки тут немає —
   фото-арка одна на весь сайт і стоїть лише на головній.
   ====================================================================== */
.page-head {
  background: var(--blue); color: #fff; --focus: var(--mint);
  border-bottom: 1px solid var(--gold);
}
.page-head__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 20px var(--gutter) 32px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.page-head__title {
  font-size: clamp(2rem, 1.55rem + 2vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.025em;
  color: #fff; text-wrap: balance; hyphens: manual; max-width: 22ch;
}
.page-head__rule { display: block; width: 48px; height: 2px; margin-top: 14px; background: var(--gold); }
.page-head__lead {
  margin-top: 12px; max-width: 52ch;
  font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: #fff;
}
.page-head__meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px;
  margin-top: 10px; font-size: var(--fs-meta); font-weight: 500; color: var(--mint); line-height: 1.45;
}
.page-head__meta .ic { width: 18px; height: 18px; }
.page-head__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.page-head__meta b { color: #fff; font-weight: 600; }
.page-head__meta time { color: var(--gold-light); font-weight: 600; font-variant-numeric: lining-nums; }
.page-head__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.page-head a:not(.btn) { color: #fff; }

/* Назва Слова (проповідь): Literata, як назви проповідей на головній */
.page-head--word .page-head__title {
  font-family: var(--font-word); font-weight: 500; letter-spacing: -0.01em; line-height: 1.18;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); max-width: 26ch;
}
.page-head--tall .page-head__inner { padding-bottom: 40px; }

@media (min-width: 768px) {
  .page-head__inner { padding-top: 32px; padding-bottom: 44px; }
  .page-head__rule { width: 56px; margin-top: 18px; }
  .page-head__lead { font-size: 1.1875rem; margin-top: 16px; }
  .page-head--tall .page-head__inner { padding-bottom: 56px; }
}
@media (min-width: 1080px) {
  .page-head__inner { padding-top: 40px; padding-bottom: 56px; }
  .page-head__rule { width: 64px; }
  .page-head--tall .page-head__inner { padding-bottom: 72px; }
}

/* Крихти: на телефоні — лише «‹ Батьківський розділ», на ≥768 — увесь шлях */
.crumbs { margin: -8px 0 8px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: flex; align-items: center; }
.crumbs a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  color: var(--mint) !important; font-size: var(--fs-meta); font-weight: 600; text-decoration: none;
}
.crumbs a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.crumbs__back { width: 18px; height: 18px; margin-left: -4px; }
.crumbs__sep { width: 16px; height: 16px; color: rgb(169 211 188 / .7); margin: 0 6px; }
.crumbs__far { display: none !important; }
@media (min-width: 768px) {
  .crumbs__far { display: flex !important; }
  .crumbs__back { display: none; }
}

/* поточний пункт у листі меню й у підвалі */
.sheet__nav a[aria-current] { color: var(--blue); }
.sheet__nav a[aria-current]::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin-right: auto; order: 2; display: none;
}

/* головна: посилання «Розклад і події» під «Увесь розклад тижня» */
.rozklad__more { margin-top: 0; }
@media (min-width: 768px) and (max-width: 1079.98px) {
  .rozklad { grid-template-areas: "h note" "tz tz" "list list" "all all" "more more"; }
  .rozklad > .rozklad__more { grid-area: more; justify-self: start; }
}

/* ==== 06-shared.css ==== */
/* ======================================================================
   СПІЛЬНІ БЛОКИ ВНУТРІШНІХ СТОРІНОК (уніфікація після наскрізного рев'ю)
   Один вигляд для однакового змісту на всіх сторінках:
   .bslot — Slot на синьому полі · .date-stack — стос дати · .panel — бокова панель
   .facts — рядки «назва | пояснення» · .next-line — «найближча — …» · .row-bleed — hover рядка
   ====================================================================== */

/* Перша секція під полем сторінки: поріг уже відділяє, повний --section-y зайвий */
.page-head + .sec, .page-head + main > .sec:first-child { padding-top: 40px; }
@media (min-width: 768px) { .page-head + .sec, .page-head + main > .sec:first-child { padding-top: 48px; } }
@media (min-width: 1080px) { .page-head + .sec, .page-head + main > .sec:first-child { padding-top: 64px; } }

/* Посилання й дати в мета-рядку поля */
.page-head__meta a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.page-head__meta a:hover { text-decoration-color: var(--gold-light); }
.page-head__meta > span > time { color: var(--gold-light); font-weight: 600; }

/* ---------- .bslot — Slot на синьому (найближча подія, час служіння) ----------
   <div class="bslot">
     <p class="bslot__when"><span class="bslot__day">у неділю</span><time class="bslot__time">10:00</time></p>
     <div class="bslot__body"><p class="bslot__title">…</p><p class="bslot__meta"><span class="bslot__rel">через 5 днів</span> …</p></div>
     <button class="bslot__act" data-ics-start=… aria-label="Додати в календар: …">[i-cal]</button>
   </div>
   <p class="next-line">найближча — неділя, 4 жовтня</p> (необовʼязково) */
.bslot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  margin-top: 16px; padding-block: 16px; border-top: 1px solid rgb(255 255 255 / .22); border-bottom: 1px solid rgb(255 255 255 / .22);
  max-width: 44rem;
}
.bslot__when { align-self: start; display: flex; flex-direction: column; line-height: 1.05; }
.bslot__day { font-size: var(--fs-meta); font-weight: 600; color: var(--gold-light); line-height: 1.3; }
.bslot__time {
  display: block; font-size: clamp(2.25rem, 1.8rem + 1.9vw, 3.25rem); font-weight: 800; line-height: .95;
  letter-spacing: -0.025em; color: #fff; font-variant-numeric: lining-nums proportional-nums;
}
.bslot__body { min-width: 0; }
.bslot__title { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 600; line-height: 1.3; color: #fff; text-wrap: pretty; }
.bslot__title a { color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.bslot__meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; margin-top: 4px;
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.45; color: var(--mint);
}
.bslot__meta .ic { width: 18px; height: 18px; }
.bslot__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bslot__rel { color: var(--gold-light); font-weight: 600; font-variant-numeric: lining-nums; }
.bslot__act {
  width: 48px; height: 48px; display: grid; place-items: center; align-self: center;
  border: 1.5px solid rgb(255 255 255 / .6); border-radius: var(--r-md); background: transparent; color: #fff;
  transition: background-color var(--dur-1);
}
.bslot__act .ic { width: 22px; height: 22px; }
.bslot__act:hover { background: rgb(255 255 255 / .1); }
.bslot__act:active { background: rgb(255 255 255 / .16); transform: scale(.96); }
.bslot__act.is-done { color: var(--mint); }
.bslot .badge--irregular { color: var(--gold-light); border-color: rgb(217 199 166 / .7); }
.bslot + .next-line { margin-top: 8px; }
@media (max-width: 374.98px) { .bslot { column-gap: 12px; } .bslot__time { font-size: 2rem; } .bslot__act { width: 44px; height: 44px; } }

/* ---------- .next-line — «найближча — неділя, 4 жовтня» під Slot / у полі ---------- */
.next-line { font-size: var(--fs-meta); font-weight: 600; color: var(--gold-ink); line-height: 1.45; font-variant-numeric: lining-nums; }
.page-head .next-line, .bslot .next-line { color: var(--gold-light); }

/* ---------- .date-stack — стос дати: число над підписом (архів, минулі ефіри, події) ----------
   <span class="date-stack"><span class="date-stack__d">6</span><span class="date-stack__sub">жовт. 2024</span></span>
   --lg — для подій (велике число); той самий вигляд, що й .sermon-row__date на головній */
.date-stack { display: flex; flex-direction: column; line-height: 1.15; align-self: start; padding-top: 2px; }
.date-stack__d { font-size: 1.25rem; font-weight: 700; color: var(--gold-ink); font-variant-numeric: lining-nums proportional-nums; }
.date-stack__sub { font-size: var(--fs-small); font-weight: 500; color: var(--muted); white-space: nowrap; }
.date-stack--lg .date-stack__d { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.date-stack--lg .date-stack__sub { font-size: var(--fs-meta); margin-top: 2px; }

/* ---------- .panel — бокова панель (реєстрація, «Як долучитися», альбом до статті) ---------- */
.panel { padding: 20px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--blue-line); }
.panel--tint { background: var(--blue-tint); border-color: var(--blue-line); }
.panel > h2, .panel > h3, .panel__title { font-size: var(--fs-h3); font-weight: 700; color: var(--brown); line-height: 1.25; margin-bottom: 8px; }
.panel > * + * { margin-top: 12px; }
@media (min-width: 1080px) { .panel { padding: 24px; } }

/* ---------- .facts — рядки «назва | пояснення» замість карток ----------
   <dl class="facts"><div><dt>Незмінна істина Біблії</dt><dd>…</dd></div>…</dl> */
.facts { border-top: 1px solid var(--blue-line); }
.facts > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--blue-line); }
.facts dt { font-weight: 600; color: var(--brown); font-size: 1.0625rem; line-height: 1.35; }
.facts dd { margin: 0; color: var(--ink); max-width: var(--measure); }
@media (min-width: 768px) {
  .facts > div { grid-template-columns: minmax(12rem, 1fr) 2fr; column-gap: 32px; }
}

/* ---------- .row-bleed — hover-підсвітка рядка-посилання виходить за колонку на 12 px,
   а лінія-роздільник лишається в межах тексту ---------- */
.row-bleed { position: relative; isolation: isolate; }
.row-bleed::before {
  content: ""; position: absolute; inset: 0 -12px; z-index: -1; border-radius: var(--r-sm);
  background: transparent; transition: background-color var(--dur-1);
}
.row-bleed:hover::before { background: var(--blue-tint); }
.row-bleed:active::before { background: var(--blue-line); }
@media (max-width: 599.98px) { .row-bleed::before { inset: 0 calc(var(--gutter) * -1); border-radius: 0; } }

/* ---------- «Поділитися» (макрос share у _ui.html, обробник у 20-components.js) ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* Чипи-посилання (фільтр через адресу, як буде у Flask): вибраний — aria-current="page" */
.chips a { text-decoration: none; }
.chips a[aria-current] { background: var(--blue); color: #fff; border-color: var(--blue); }
.chips a[aria-current] .ic { display: block; }

/* ==== 10-home.css ==== */
/* ======================================================================
   ПОРІГ — перший екран
   ====================================================================== */
.threshold {
  background: var(--blue);
  color: #fff;
  --focus: var(--mint);
  border-bottom: 1px solid var(--gold);
  position: relative;
}
/* Фото церкви ззовні — тихий шар під синім: впізнавана будівля, але текст лишається на чистому синьому.
   luminosity над синім фоном = синя монохромна фотографія; градієнти тримають верх (шапка) і ліву колонку тексту. */
.threshold__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.threshold__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 53% 22%;
  opacity: .32; mix-blend-mode: luminosity; filter: blur(2px) saturate(.6); transform: scale(1.04);
}
.threshold__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--blue) 0, color-mix(in srgb, var(--blue) 35%, transparent) 28%,
                    color-mix(in srgb, var(--blue) 25%, transparent) 72%, var(--blue) 100%);
}
.threshold--photo .threshold__inner { position: relative; }
@media (min-width: 768px) {
  .threshold__bg img { opacity: .34; object-position: 62% 40%; }
  .threshold__bg::after {
    background:
      linear-gradient(180deg, var(--blue) 0, transparent 22%, transparent 80%, var(--blue) 100%),
      linear-gradient(90deg, var(--blue) 0, color-mix(in srgb, var(--blue) 82%, transparent) 30%,
                      color-mix(in srgb, var(--blue) 20%, transparent) 62%, color-mix(in srgb, var(--blue) 45%, transparent) 100%);
  }
}
@media (prefers-reduced-transparency: reduce) { .threshold__bg { display: none; } }

.threshold__inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 20px var(--gutter) 0;
  display: grid;
}
.threshold__text { padding-bottom: 24px; min-width: 0; }

.threshold__lead {
  font-size: var(--fs-lead); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
  color: #fff; margin: 0 0 4px;
}
.time {
  font-size: var(--fs-time); font-weight: 800; line-height: .9; letter-spacing: -0.03em;
  font-variant-numeric: lining-nums proportional-nums;
  margin-left: -0.04em;
  hyphens: manual;
}
.time time { font-variant-numeric: inherit; }
.time-rule {
  display: block; width: 48px; height: 2px; margin-top: 10px;
  background: var(--gold); transform-origin: left center;
}
.rel {
  font-size: 1.0625rem; font-weight: 500; line-height: 1.4;
  color: var(--gold-light); margin-top: 8px; min-height: 1.4em;
  font-variant-numeric: lining-nums;
}
/* на вузьких екранах найдовші стани займають 2 рядки — резервуємо місце, щоб не було стрибка */
/* вузькі екрани: тексти станів короткі, на 360 — в один рядок; висоту не резервуємо (без «дірки») */
@media (max-width: 374.98px) { .rel { font-size: 1rem; } .place { margin-top: 12px; } }
.tz-hero {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; min-height: 1.4em;
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.4; color: var(--mint);
}
.tz-hero .ic { width: 20px; height: 20px; }
/* гість поза Києвом: місце під рядок зарезервоване з <head>, до роботи JS */
html.tz-away .tz-hero[hidden] { display: flex !important; visibility: hidden; }
.tz-hero b { color: #fff; font-weight: 700; }

.place {
  display: flex; gap: 10px; margin-top: 20px; line-height: 1.35;
}
.place .ic, .safe-line .ic { width: 20px; height: 20px; color: var(--mint); margin-top: 1px; }
.place > span { display: flex; flex-direction: column; }
.place__street { font-weight: 600; font-size: 1.0625rem; }
.place__town { font-size: 1.0625rem; }
.place__mark { font-size: var(--fs-meta); font-weight: 500; color: var(--mint); margin-top: 2px; }

.safe-line {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
}

.actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px;
}
.actions .btn { padding: 0 12px; }
/* ефір підтверджено: «НАЖИВО» червоним на білій кнопці (7.52:1) замість піктограми */
.btn.is-live .live-word { font-size: .875rem; }
/* вузькі телефони: «Маршрут» за вмістом, решта — кнопці «НАЖИВО Дивитися», щоб не обрізалась */
@media (max-width: 419.98px) { .actions:has(.btn.is-live:not([hidden])) { grid-template-columns: auto minmax(0, 1fr); } }
.hours { margin-top: 8px; font-size: var(--fs-meta); font-weight: 500; color: var(--mint); line-height: 1.45; }
.hours a { color: #fff; font-weight: 600; font-size: var(--fs-meta); }
.hours--call { margin-top: 4px; }
/* під час ефіру «Подзвонити» — текстове посилання, але з ціллю ≥ 44 px (WCAG 2.5.8 / платформні 44–48) */
.hours--call a { display: inline-flex; align-items: center; min-height: 44px; }
.hours__sub { display: block; }

.stream-row {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; margin-top: 12px;
  color: var(--mint); font-size: var(--fs-meta); font-weight: 500; text-decoration: none;
  line-height: 1.3;
}
.stream-row .ic { width: 20px; height: 20px; }
.stream-row .ic--chev { width: 18px; height: 18px; transition: transform var(--dur-1); }
.stream-row:hover span { text-decoration: underline; text-underline-offset: 4px; }
.stream-row:hover .ic--chev { transform: translateX(2px); }
.stream-row.is-strong { color: #fff; }
.stream-row.is-inert { cursor: default; }
.stream-row.is-inert:hover span { text-decoration: none; }
.stream-row.is-pill { color: var(--blue); }
.stream-row .pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 4px 14px 4px 12px;
  border-radius: 999px; background: #fff; color: var(--blue);
  font-weight: 600; font-size: var(--fs-meta); white-space: nowrap;
}
.stream-row .pill .ic { width: 18px; height: 18px; }
.live-word { color: var(--live); font-weight: 700; font-size: var(--fs-small); letter-spacing: .06em; }

/* live-крапка */
.live-dot {
  position: relative; width: 10px; height: 10px; border-radius: 50%;
  background: var(--live); flex: none; display: inline-block;
}
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: pulse 1.6s var(--ease-out) 3 both;
}
.live-dot--white { background: #fff; }
@keyframes pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(2.2); opacity: 0; } }

/* арка-двері */
.door {
  width: var(--arch-w);
  aspect-ratio: 4 / 5;
  justify-self: center;
  margin-bottom: calc(var(--overhang) * -1);
  border-radius: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 0 0;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--gold);
  background: var(--blue-deep);
  position: relative; z-index: 2;
}
.door img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.door .door__mark { position: absolute; left: 50%; top: 50%; width: 64px; height: auto; transform: translate(-50%, -50%); object-fit: contain; }
.lite .door > img:first-child { display: none; }
.lite .door .door__mark { display: block !important; }

@media (max-width: 340px) {
  :root { --gutter: 12px; }
  .actions .btn .ic { display: none; }
}
/* 600–767 (iPad mini, великі телефони в landscape): одна колонка, але кнопки не розтягуємо на всю ширину,
   а арку ставимо на ту ж ліву вертикаль, що й текст */
@media (min-width: 600px) and (max-width: 767.98px) {
  .actions { max-width: 440px; }
  .door { justify-self: start; }
}

@media (min-width: 768px) {
  .threshold__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    padding-top: 48px;
    align-items: end;
  }
  .threshold__text { grid-column: 1 / 8; padding-bottom: 40px; align-self: end; }
  .door { grid-column: 8 / 13; justify-self: end; align-self: end; margin-top: 24px; }
  .actions { display: flex; flex-wrap: wrap; }
  .actions .btn { padding: 0 22px; }
  /* «НАЖИВО Дивитися» лишається в одному ряду з «Маршрутом» (на 768 колонка тексту — 340 px) */
  .actions:has(.btn.is-live:not([hidden])) .btn { padding: 0 14px; }
}
@media (min-width: 768px) and (max-width: 1079.98px) {
  .threshold__inner { grid-template-columns: minmax(0, 1fr) var(--arch-w); column-gap: 24px; padding-top: 32px; }
  .threshold__text { grid-column: 1; padding-bottom: 32px; }
  .door { grid-column: 2; }
  .place { margin-top: 16px; }
  .actions { margin-top: 16px; }
}
@media (min-width: 1080px) {
  .threshold__inner { padding-top: 40px; column-gap: 32px; }
  .threshold__text { padding-bottom: 48px; }
  .threshold__text { grid-column: 1 / 7; }
  .door { grid-column: 7 / 13; justify-self: end; } /* правий край = край контейнера (1320 на 1440) */
  .time-rule { width: 64px; margin-top: 14px; }
  .rel { font-size: 1.125rem; margin-top: 10px; }
  .place { margin-top: 24px; }
}

/* ======================================================================
   ЦЬОГО ТИЖНЯ + ОНЛАЙН
   ====================================================================== */
.member { background: var(--paper); padding-top: var(--overhang); }
.member > .sec--rozklad { padding-top: 40px; }
.sec--online { background: var(--paper-2); }

/* Slot */
.slots { list-style: none; }
.slot {
  display: grid;
  grid-template-columns: var(--when-w) minmax(0, 1fr) 48px;
  grid-template-areas: "when body act";
  column-gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 14px 0;
  border-bottom: 1px solid var(--blue-line);
  position: relative;
  transition: background-color var(--dur-1);
}
.slot__when { grid-area: when; display: flex; flex-direction: column; line-height: 1.1; align-self: start; padding-top: 2px; }
.slot__day { font-size: .9375rem; font-weight: 600; color: var(--muted); }
.slot--today .slot__day { color: var(--blue); }
.slot--pin .slot__title { font-weight: 700; }
.slot__time {
  font-size: var(--fs-slot); font-weight: 700; color: var(--gold-ink);
  /* пропорційні цифри: табличні «1» в Onest дають «1 1:00»; вирівнювати по двокрапці тут нічого */
  font-variant-numeric: lining-nums proportional-nums; letter-spacing: -0.01em; margin-top: 2px;
}
.slot__body { grid-area: body; min-width: 0; overflow-wrap: anywhere; }
.slot__title { font-size: 1.0625rem; font-weight: 600; color: var(--brown); line-height: 1.3; text-wrap: pretty; transition: color var(--dur-1); }
.slot__meta:is(:has(.badge), :has(.slot__date)) {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px;
}
.slot__meta {
  min-width: 0;
  font-size: var(--fs-meta); font-weight: 500; color: var(--muted); line-height: 1.45;
  margin-top: 4px;
}
.slot__date { color: var(--gold-ink); font-weight: 600; white-space: nowrap; }
/* на телефоні дата — окремим рядком над метою, щоб не зливалась із текстом */
@media (max-width: 599.98px) { .slot__date { flex-basis: 100%; margin-bottom: -2px; } }
.slot__text { font-size: var(--fs-meta); color: var(--ink); margin-top: 8px; max-width: 48ch; }
.slot__act {
  grid-area: act;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--blue);
  transition: background-color var(--dur-1);
  position: relative; z-index: 1;
}
.slot__act:hover { background: var(--blue-tint); }
.slot__act.is-done { color: var(--moss); }
html:not(.js) .slot__act { display: none; }

.slot--today {
  background: var(--blue-tint);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  border-bottom-color: transparent;
}
.slot--today .slot__act:hover { background: #fff; }
/* два «сьогодні» поспіль (неділя) — одна плитка з тонким білим роздільником, без «талії» */
.slot--today:has(+ .slot--today) { border-bottom-color: #fff; }

.slot__chev { grid-area: act; justify-self: center; width: 20px; height: 20px; color: var(--blue); transition: transform var(--dur-1); }
.slot--link { cursor: pointer; }
.slot__link { color: inherit; text-decoration: none; }
.slot__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.slot__link:focus-visible { outline: none; }
.slot--link:has(.slot__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.slot--link:hover { background: var(--blue-tint); }
.slot--link:hover .slot__title { color: var(--blue); }
.slot--link:hover .slot__chev { transform: translateX(2px); }
.slot--link:active { background: var(--blue-line); }

.slots--compact .slot { min-height: 56px; padding: 10px 0; grid-template-columns: var(--when-w) minmax(0, 1fr); grid-template-areas: "when body"; align-items: center; }
.slots--compact .slot__time { font-size: 1.0625rem; }
.slots--compact .slot__when { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; align-self: center; padding: 0; }
.slots--compact .slot__day { min-width: 2.2em; font-size: var(--fs-small); }
.slots--compact .slot__title { font-size: 1rem; }
.slots--compact .slot__meta { font-size: var(--fs-meta); margin-top: 2px; }
.slots--compact li:last-child { border-bottom: 0; }

.tz-note {
  display: flex; align-items: center; gap: 8px; margin: -8px 0 16px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--blue);
}
.tz-note .ic { width: 20px; height: 20px; }
.note { margin-top: 16px; font-size: var(--fs-meta); color: var(--muted); font-weight: 500; line-height: 1.45; max-width: 52ch; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.week-all { margin-top: 12px; }
.week-all > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px;
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.week-all > summary:hover { text-decoration-thickness: 2.5px; }
.week-all .chev { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
.week-all[open] .chev { transform: rotate(180deg); }
.week-all > .slots { margin-top: 4px; border-top: 1px solid var(--blue-line); }

@media (min-width: 768px) {
  .slot--today { margin-inline: -16px; padding-inline: 16px; border-radius: var(--r-sm); }
  .slot--today:has(+ .slot--today) { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .slot--today + .slot--today { border-radius: 0 0 var(--r-sm) var(--r-sm); }
  .slot--today + .slot--today:has(+ .slot--today) { border-radius: 0; }
}
/* Планшет: один потік без «дірки» під приміткою. Шапка секції — H2 ліворуч, примітка про ранкові молитви
   праворуч (під аркою), нижче список на всю ширину і «Увесь розклад тижня». */
@media (min-width: 768px) and (max-width: 1079.98px) {
  .member > .sec--rozklad { padding-top: 56px; } /* від низу арки — 56, як на десктопі (overhang + 56) */
  .rozklad {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px;
    grid-template-areas: "h note" "tz tz" "list list" "all all";
    align-items: end;
  }
  .rozklad > h2 { grid-area: h; }
  .rozklad > .note { grid-area: note; margin: 0 0 var(--h2-gap); justify-self: end; }
  .rozklad > .tz-note { grid-area: tz; margin-top: -8px; }
  .rozklad > .slots { grid-area: list; border-top: 1px solid var(--blue-line); }
  .rozklad > .week-all { grid-area: all; justify-self: start; }
}

/* Онлайн */
.online__text .lead { margin-bottom: 20px; }
.stream-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  background: var(--blue-deep); color: #fff; text-decoration: none;
  --focus: var(--blue-soft);
  transition: box-shadow var(--dur-2);
}
.stream-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stream-card__veil { position: absolute; inset: 0; background: rgb(1 74 138 / .45); transition: opacity var(--dur-2); }
.stream-card[data-state="scheduled-now"] .stream-card__veil,
.stream-card[data-state="live"] .stream-card__veil { opacity: 0; }
.stream-card__status {
  position: absolute; left: 12px; top: 12px; right: 12px; width: fit-content;
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap; column-gap: .35em; row-gap: 0;
  min-height: 34px; padding: 5px 12px; border-radius: var(--r-sm);
  background: #fff; color: var(--blue);
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.3;
}
.stream-card__status b { font-weight: 700; white-space: nowrap; }
@media (max-width: 599.98px) { .stream-card__status { max-width: calc(100% - 24px); } }
.stream-card[data-state="live"] .stream-card__status {
  background: var(--live); color: #fff; box-shadow: 0 0 0 2px #fff; letter-spacing: .04em;
}
.stream-card[data-state="ended"] .stream-card__status { background: rgb(59 33 25 / .85); color: #fff; }
.stream-card__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; color: var(--blue); display: grid; place-items: center;
  box-shadow: 0 8px 20px -10px rgb(20 12 8 / .5);
  transition: scale var(--dur-2) var(--ease-out);
}
.stream-card__play .ic { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 3px; }
.stream-card:hover .stream-card__play { scale: 1.06; }

.online__more { margin-top: 8px; }
.online__next { margin-top: 12px; font-size: var(--fs-meta); font-weight: 500; color: var(--ink); line-height: 1.45; }
.online__next b { color: var(--brown); font-weight: 600; }
.tz-line {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-meta); font-weight: 500; color: var(--muted); line-height: 1.45;
  margin-top: 4px; max-width: 52ch;
}
.tz-line .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--muted); }
.tz-line b { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }

@media (min-width: 768px) and (max-width: 1079.98px) {
  .online {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px;
    grid-template-areas: "text card" "more card";
    align-items: start;
  }
  .online__text { grid-area: text; }
  .stream-card { grid-area: card; }
  .online__more { grid-area: more; margin-top: 0; }
}

@media (min-width: 1080px) {
  .member {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding: calc(var(--overhang) + 56px) var(--gutter) var(--section-y);
    background: var(--paper-2);
    box-shadow: 0 0 0 100vmax var(--paper-2);
    clip-path: inset(0 -100vmax);
    position: relative;
  }
  .member > .sec { background: transparent; padding: 0; }
  .member > .sec > .container { padding: 0; max-width: none; }
  .member > .sec--rozklad { grid-column: 1 / 6; padding-top: 0; }
  .member > .sec--online { grid-column: 7 / 13; }
  .rozklad { display: block; }
  .rozklad > .slots { border-top: 1px solid var(--blue-line); }
  .rozklad > .note { margin-top: 16px; }
  .stream-card:hover { box-shadow: var(--shadow-lift); }
}

/* ======================================================================
   ПРОПОВІДІ
   ====================================================================== */
.sec--sermons { background: var(--paper-2); }

.sermon-lead { margin-bottom: 40px; }
.sermon-lead__link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-lg); }
.sermon-lead__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--blue-tint);
}
.sermon-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.sermon-lead__media .tag-example { position: absolute; left: 12px; top: 12px; }
.play-disc {
  position: absolute; right: 12px; bottom: 12px;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--blue); display: grid; place-items: center;
  transition: scale var(--dur-2) var(--ease-out);
}
.play-disc .ic { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 2px; }
.sermon-lead__title {
  font-family: var(--font-word); font-weight: 500; font-size: var(--fs-sermon); line-height: 1.25;
  color: var(--brown); margin-top: 16px; letter-spacing: -0.005em; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  transition: color var(--dur-1), text-decoration-color var(--dur-1);
}
.sermon-lead__link:hover .sermon-lead__title { color: var(--blue); text-decoration-color: currentColor; }
.sermon-lead__link:hover .play-disc { scale: 1.06; }
.sermon-lead__meta { margin-top: 8px; font-size: var(--fs-meta); font-weight: 500; display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; color: var(--ink); }
/* «Дивитися» — лише на планшеті, де картка горизонтальна (на інших ширинах дію несе кнопка ▶ на фото) */
.sermon-lead__cta {
  display: none; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 20px; margin-top: 20px;
  border: 1.5px solid var(--blue); border-radius: var(--r-md);
  background: #fff; color: var(--blue); font-weight: 600; font-size: 1.0625rem; line-height: 1.1; white-space: nowrap;
  transition: background-color var(--dur-1);
}
.sermon-lead__cta .ic { width: 20px; height: 20px; }
.sermon-lead__link:hover .sermon-lead__cta { background: var(--blue-tint); }
.sermon-lead__meta .who { font-weight: 600; color: var(--ink); }
.sermon-lead__meta time { color: var(--gold-ink); }

.archive__title { margin-bottom: 12px; }
.sermon-search { position: relative; }
.sermon-search .ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--blue); pointer-events: none; }
.sermon-search input {
  width: 100%; height: 52px; padding: 0 16px 0 44px;
  border: 1.5px solid var(--blue-soft); border-radius: var(--r-sm);
  background: var(--blue-tint); color: var(--ink); font-size: 1.0625rem;
  transition: border-color var(--dur-1), background-color var(--dur-1);
  -webkit-appearance: none; appearance: none;
}
.sermon-search input::placeholder { color: var(--muted); opacity: 1; }
.sermon-search input:hover { border-color: var(--blue); }
.sermon-search input:focus-visible { border-color: var(--blue); background: #fff; outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.sermon-search input::-webkit-search-cancel-button { cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; margin-top: 8px; }
.chips :is(button, a) {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 16px;
  border: 1px solid var(--blue-soft); border-radius: var(--r-sm);
  background: #fff; color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
  transition: background-color var(--dur-1), color var(--dur-1);
}
.chips :is(button, a) .ic { width: 16px; height: 16px; display: none; }
.chips :is(button, a):hover { background: var(--blue-tint); }
.chips :is(button, a)[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.chips :is(button, a)[aria-pressed="true"] .ic { display: block; }
/* «Усі · Мартинов · Антонець» — в один ряд і на 320 */
@media (max-width: 374.98px) { .chips :is(button, a) { padding: 0 12px; } }

.search-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; }
.search-head .tag-example--inline { margin-left: 0; }
.search-status { font-size: var(--fs-meta); color: var(--muted); font-weight: 500; min-height: 1.5em; line-height: 1.5; }
.search-status a { font-weight: 600; }
.search-status.is-empty { color: var(--ink); }
.search-status.is-error { color: var(--error); display: flex; gap: 8px; }

.sermon-list { list-style: none; margin-top: 8px; border-top: 1px solid var(--blue-line); }
.sermon-list.is-default li:nth-child(n+4) { display: none; } /* за замовчуванням 3 рядки на всіх екранах */
.sermon-row {
  display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) 24px; column-gap: 12px; align-items: center;
  min-height: 72px; padding: 14px 0;
  border-bottom: 1px solid var(--blue-line);
  text-decoration: none; color: inherit;
  transition: background-color var(--dur-1);
}
.sermon-row:hover { background: var(--blue-tint); }
.sermon-row:hover .sermon-row__title { color: var(--blue); }
.sermon-row:active { background: var(--blue-line); }
.sermon-row__date { display: flex; flex-direction: column; line-height: 1.15; align-self: start; padding-top: 2px; }
.sermon-row__date .d { font-size: 1.25rem; font-weight: 700; color: var(--gold-ink); font-variant-numeric: lining-nums proportional-nums; }
.sermon-row__date .my { font-size: var(--fs-small); color: var(--muted); font-weight: 500; white-space: nowrap; }
.sermon-row__body { min-width: 0; }
.sermon-row__title { display: block; font-family: var(--font-word); font-weight: 500; font-size: 1.25rem; line-height: 1.28; color: var(--brown); text-wrap: pretty; transition: color var(--dur-1); }
.sermon-row__who { display: block; font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; }
.sermon-row > .ic { width: 20px; height: 20px; color: var(--blue); }
.sermon-row mark { background: var(--blue-tint); color: var(--ink); border-radius: 3px; padding: 0 1px; box-shadow: 0 1.5px 0 var(--blue-soft); }
.archive__links { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 8px; }
.more-btn { display: flex; margin-top: 4px; }
.sermon-list .empty { padding: 20px 0; color: var(--ink); border-bottom: 1px solid var(--blue-line); font-size: var(--fs-meta); }

@media (min-width: 768px) {
  .sermons {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px;
    grid-template-areas: "h h" "lead archive"; align-items: start;
  }
  .sermons > h2 { grid-area: h; }
  .sermon-lead { grid-area: lead; margin-bottom: 0; }
  .archive { grid-area: archive; }
}
/* Планшет: один потік без «дірки» під карткою. Остання проповідь — широка горизонтальна картка
   (фото 45 % ліворуч, назва / автор / дата / «Дивитися» праворуч), нижче «Знайти проповідь» на всю ширину:
   пошук і чипи в один ряд, під ними список. */
@media (min-width: 768px) and (max-width: 1079.98px) {
  .sermons { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "lead" "archive"; }
  .sermon-lead__link { display: grid; grid-template-columns: 45% minmax(0, 1fr); column-gap: 28px; align-items: center; }
  .sermon-lead__title { margin-top: 0; }
  .sermon-lead__cta { display: inline-flex; }
  .play-disc { width: 48px; height: 48px; }
  .archive {
    margin-top: 48px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
    grid-template-areas: "title title" "search chips" "status status" "list list" "more more" "link link";
    align-items: center;
  }
  .archive > .archive__title { grid-area: title; }
  .archive > .sermon-search { grid-area: search; }
  .archive > .chips { grid-area: chips; flex-wrap: nowrap; margin-top: 0; padding: 0; }
  .archive > .search-head { grid-area: status; }
  .archive > .sermon-list { grid-area: list; }
  .archive > .more-btn { grid-area: more; }
  .archive > .archive__links { grid-area: link; justify-self: start; }
}
@media (min-width: 1080px) {
  .sermons { grid-template-columns: 7fr 5fr; column-gap: 56px; }
}

/* ======================================================================
   ВПЕРШЕ У НАС?
   ====================================================================== */
.sec--first { background: var(--paper); }
.sec--online + .sec--first { border-top: 0; }
.first { display: grid; grid-template-areas: "head" "photo" "faq" "btns"; }
.first__head { grid-area: head; }
.first__head .lead { margin-bottom: 24px; }
.first__photo { grid-area: photo; margin-bottom: 24px; }
.first__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
figcaption { font-size: var(--fs-small); color: var(--muted); font-weight: 500; margin-top: 8px; }
.faq { grid-area: faq; border-top: 1px solid var(--blue-line); }
.faq details { border-bottom: 1px solid var(--blue-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 8px 0; cursor: pointer;
  font-size: 1.125rem; font-weight: 600; color: var(--brown); line-height: 1.3;
  transition: color var(--dur-1);
}
.faq summary:hover { color: var(--blue); }
.faq summary .chev { width: 20px; height: 20px; color: var(--blue); transition: transform var(--dur-2) var(--ease-out); }
.faq details[open] > summary .chev { transform: rotate(180deg); }
.faq details > p { padding: 0 0 16px; color: var(--ink); max-width: var(--measure); }
.faq details > p .tbc { margin-top: 6px; }
.first__actions { grid-area: btns; margin-top: 24px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { flex: 1 1 160px; }

@supports (interpolate-size: allow-keywords) {
  .faq, .week-all { interpolate-size: allow-keywords; }
  .faq details::details-content, .week-all::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete;
  }
  .faq details[open]::details-content, .week-all[open]::details-content { block-size: auto; }
}

@media (min-width: 768px) {
  .first {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px;
    grid-template-areas: none; align-items: start;
  }
  .first__photo { grid-area: auto; grid-column: 1 / 6; grid-row: 1 / span 4; margin: 0; }
  /* прямокутник 4:5 із кадром на двох сестер: арка на сторінці одна — у порозі */
  .first__photo img { aspect-ratio: 4 / 5; }
  .first__head, .faq, .first__actions { grid-area: auto; grid-column: 6 / 13; }
  .first__head { grid-row: 1; }
  .faq { grid-row: 2; }
  .first__actions { grid-row: 3; }
  .btn-row .btn { flex: 0 0 auto; }
}
@media (min-width: 1080px) {
  .first__head, .faq, .first__actions { grid-column: 7 / 13; }
}

/* ======================================================================
   ХТО МИ
   ====================================================================== */
.sec--about { background: var(--paper); }
.about__lead { font-size: 1.25rem; font-weight: 500; line-height: 1.45; color: var(--ink); max-width: 40ch; margin-bottom: 16px; }
.about__text > p { max-width: var(--measure); }
.scripture { margin: 32px 0 0; }
.scripture__rule { display: block; width: 48px; height: 2px; background: var(--gold); margin-bottom: 16px; }
.scripture blockquote p {
  font-family: var(--font-word); font-style: italic; font-weight: 400;
  font-size: var(--fs-quote); line-height: 1.4; color: var(--brown); max-width: 34ch;
}
.scripture figcaption { margin-top: 12px; }
.scripture cite { font-style: normal; font-weight: 600; font-size: var(--fs-meta); color: var(--gold-ink); }
.about__call { font-size: var(--fs-meta); color: var(--muted); margin-top: 16px; max-width: 52ch; }
.about__text .link { margin-top: 12px; }
.about__photo { margin-top: 32px; }
.about__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 75%; border-radius: var(--r-lg); }

@media (min-width: 768px) {
  .about__photo img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
}
@media (min-width: 768px) {
  .about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .about__text { grid-column: 1 / 8; }
  .about__photo { grid-column: 8 / 13; margin-top: 0; }
}
@media (min-width: 1080px) {
  .about__photo { grid-column: 9 / 13; margin-top: 8px; }
}

/* ======================================================================
   СЛУЖІННЯ
   ====================================================================== */
.sec--min { background: var(--paper-2); }
.ministries__head .lead { margin-bottom: 24px; }
.min-list { list-style: none; border-top: 1px solid var(--blue-line); }
.min-list .slot { padding-inline: 0; }
.slot--expanded {
  grid-template-areas: "photo photo photo" "when body act";
  row-gap: 14px; padding-top: 16px; padding-bottom: 16px;
}
.slot__photo { grid-area: photo; }
.slot__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 25%; border-radius: var(--r-lg); }
@media (min-width: 600px) { .slot__photo img { aspect-ratio: 4 / 3; } }
.slot--expanded .slot__chev { align-self: center; }
/* телефон: розгорнуте лише молодіжне, Grace Women — звичайним рядком (коротша сторінка) */
@media (max-width: 599.98px) {
  .slot--expanded-wide { grid-template-areas: "when body act"; row-gap: 0; }
  .slot--expanded-wide .slot__photo { display: none; }
}

.serve { margin-top: 32px; }
.serve h3 { margin-bottom: 4px; }
.serve__links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; font-size: var(--fs-body); color: var(--muted); }
.serve__links a {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.serve__links a:hover { text-decoration-thickness: 2.5px; }

@media (min-width: 768px) {
  .slot--expanded {
    grid-template-columns: 40% minmax(0, 1fr) 48px;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "photo . act" "photo when act" "photo body act" "photo . act";
    column-gap: 20px; row-gap: 4px; align-items: start;
  }
  .slot--expanded .slot__photo { align-self: start; }
  .slot--expanded .slot__when { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
  /* фото 3:2 (а не 4:3): висота фото ≈ висоті тексту, без порожнечі під ним */
  .slot--expanded .slot__photo img { aspect-ratio: 3 / 2; }

  .slot--link:hover { background: transparent; }
  .slot--link:hover .slot__title { color: var(--blue); }
  .min-list .slot--link:hover, .slots .slot--link:hover { background: var(--blue-tint); }
  .min-list .slot { padding-inline: 12px; }
}
@media (min-width: 1080px) {
  .ministries {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px;
  }
  .ministries__head { grid-column: 1 / 8; }
  .min-list {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 32px;
    align-items: stretch; /* нижні лінії сусідніх рядків (і розгорнутих карток) — на одній висоті */
  }
  .min-list .slot { align-content: start; }
  .min-list .slot { grid-column: span 2; }
  .min-list .slot--expanded {
    grid-column: span 3;
    grid-template-columns: var(--when-w) minmax(0, 1fr) 48px;
    grid-template-rows: auto auto;
    grid-template-areas: "photo photo photo" "when body act";
    align-items: start; align-content: start; row-gap: 16px; padding-top: 24px;
  }
  .min-list .slot--expanded .slot__when { flex-direction: column; gap: 0; }
  /* 2:1 — фото не перетягують вагу від трьох рядків над ними */
  .min-list .slot--expanded .slot__photo img { aspect-ratio: 2 / 1; }
  .serve { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  .serve h3 { margin: 0; }
  .serve .link { margin-left: auto; }
}

/* ======================================================================
   ЯК ДІСТАТИСЯ
   ====================================================================== */
.sec--way { background: var(--paper); }
.way { display: grid; gap: 24px; align-items: start; }
.way__head h2 { margin-bottom: 12px; }
.addr { font-size: 1.25rem; font-weight: 600; color: var(--brown); line-height: 1.35; max-width: 34ch; }
.way__head .text-btn { margin-top: 4px; }

.map {
  position: relative; border-radius: var(--r-lg); background: var(--blue-tint);
  padding: 24px 16px 16px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  overflow: hidden;
}
.map__view { position: relative; }
.map.has-iframe { padding: 0 0 16px; }
.map.has-iframe .map__view { aspect-ratio: 16 / 10; background: var(--blue-line); }
.map.has-iframe .map__actions { padding-inline: 16px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* третя колонка ширша: «Зупинка «ЖК Софія»» — найдовший підпис; лінії-зʼєднувачі дотягуються до центру сусіда */
.scheme { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.scheme li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; font-size: var(--fs-small); font-weight: 600; color: var(--brown); line-height: 1.3;
  padding-inline: 4px; min-width: 0;
}
/* вузькі екрани: 12 px і мінімальні поля — «Маршрутка» і «ЖК Софія» не злипаються і не рвуться посеред слова */
@media (max-width: 419.98px) { .scheme li { font-size: .75rem; padding-inline: 1px; letter-spacing: -0.01em; } }
.scheme__ic {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--blue); border: 1.5px solid var(--blue-soft);
}
.scheme__ic .ic { width: 22px; height: 22px; }
.scheme li.is-end .scheme__ic { background: var(--blue); color: #fff; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.scheme li:not(:last-child)::after {
  content: ""; position: absolute; top: 21px; height: 2px;
  left: calc(50% + 24px); right: calc(-50% + 24px);
  background: var(--blue-soft);
}
.scheme li:nth-child(3)::after {
  background: none; height: 0; border-top: 2px dashed var(--gold);
}
.scheme li:nth-child(2)::after { right: calc(-62.5% + 24px); }
.scheme li:nth-child(3)::after { right: calc(-40% + 24px); }
.map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.map__actions .btn { min-height: 48px; flex: 1 1 auto; }
.map__actions [data-map-hide] { flex: 0 0 auto; }

.way__routes { min-width: 0; }
.tabs {
  display: grid; grid-template-columns: 1.35fr 1.1fr .65fr; gap: 4px;
  padding: 4px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--blue-line);
  margin-bottom: 16px;
}
.tabs:not([hidden]) { display: grid; }
.tabs [role="tab"] {
  min-height: 48px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--muted); font-weight: 600; font-size: var(--fs-meta); line-height: 1.15;
  letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.tabs [role="tab"]:hover { color: var(--blue); background: var(--paper-2); }
.tabs [role="tab"][aria-selected="true"] { background: var(--blue-tint); color: var(--blue); border-color: var(--blue-line); }
@media (max-width: 379.98px) { .tabs [role="tab"] { font-size: .875rem; padding-inline: 2px; letter-spacing: -0.02em; } }
@media (max-width: 339.98px) { .tabs [role="tab"] { font-size: .8125rem; } }
.route { padding: 4px 0 8px; }
.route + .route { margin-top: 20px; }
.js .route + .route { margin-top: 0; }
.route__title { font-size: var(--fs-h3); margin-bottom: 4px; }
.route__dist { font-size: var(--fs-meta); color: var(--gold-ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.route__line { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.token {
  display: inline-grid; place-items: center; min-width: 48px; height: 32px; padding: 0 10px;
  border-radius: var(--r-sm); background: #fff; border: 1px solid var(--blue-soft);
  color: var(--blue); font-weight: 700; font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums lining-nums;
}
.route p:not([class]) { max-width: 60ch; }

.shelter {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; border-radius: var(--r-lg);
  background: var(--mint-tint); border: 1px solid var(--mint);
  color: var(--moss-deep);
}
.shelter__ic { width: 28px; height: 28px; color: var(--moss); margin-top: 1px; }
.shelter h3 { font-size: 1.1875rem; font-weight: 700; color: var(--moss-deep); margin-bottom: 4px; }
.shelter p { font-size: 1.0625rem; color: var(--moss-deep); max-width: 60ch; }

@media (min-width: 768px) {
  .way {
    grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 32px;
    grid-template-areas: "head head" "map routes" "shelter shelter";
  }
  .way__head { grid-area: head; }
  .map { grid-area: map; }
  .way__routes { grid-area: routes; }
  .shelter { grid-area: shelter; }
}
@media (min-width: 1080px) {
  .way { grid-template-columns: 7fr 5fr; column-gap: 48px; }
  .map { justify-content: center; gap: 32px; padding: 32px; }
  .scheme { width: 100%; max-width: 640px; margin-inline: auto; }
  .scheme li { font-size: .9375rem; gap: 10px; }
  .scheme__ic { width: 56px; height: 56px; }
  .scheme__ic .ic { width: 26px; height: 26px; }
  .scheme li:not(:last-child)::after { top: 26.5px; height: 3px; left: calc(50% + 32px); right: calc(-50% + 32px); }
  .scheme li:nth-child(2)::after { right: calc(-62.5% + 32px); }
  .scheme li:nth-child(3)::after { right: calc(-40% + 32px); }
  .scheme li:nth-child(3)::after { height: 0; border-top-width: 3px; }
  .map__actions { justify-content: center; }
  .map__actions .btn { flex: 0 0 auto; }
  .map.has-iframe { padding: 0 0 20px; justify-content: flex-start; gap: 20px; }
  .map.has-iframe .map__view { aspect-ratio: auto; flex: 1; min-height: 360px; }
}

/* ==== 20-sermons.css ==== */
/* ======================================================================
   ПРОПОВІДІ — архів (propovidi) і сторінка проповіді (propovid, propovid-*)
   Спільне з головної використовуємо як є: .sermon-lead, .sermon-row, .sermon-list, .chips,
   .search-status, .play-disc, .notice, .empty, .pager. Нове — з префіксом .sr-.
   ====================================================================== */

/* ---------- поле архіву: пошук просто на синьому ---------- */
.sr-seek { margin-top: 24px; max-width: 640px; }
.sr-input { min-height: 52px; background: #fff; border-color: #fff; }
.sr-input:hover { border-color: var(--blue-tint); }
.sr-input:focus-visible { background: #fff; border-color: #fff; outline: 3px solid var(--mint); outline-offset: 3px; }
.sr-input::-webkit-search-cancel-button { cursor: pointer; }

/* чипи на синьому: білі контурні; вибраний — білий фон, синій текст */
.sr-chips { margin-top: 12px; padding: 0; }
.sr-chips a { background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / .7); }
.sr-chips a:hover { background: rgb(255 255 255 / .1); }
.sr-chips a:active { background: rgb(255 255 255 / .16); }
.sr-chips a[aria-current] { background: #fff; color: var(--blue); border-color: #fff; }
/* «Усі · Мартинов · Антонець · Інші» — один ряд і на 360 (з галочкою вибраного) */
@media (max-width: 419.98px) {
  .sr-chips { gap: 6px; }
  .sr-chips a { padding: 0 11px; }
}

@media (min-width: 1080px) {
  .page-head--sr .page-head__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 64px; align-items: end;
  }
  .page-head--sr .page-head__inner > :not(.sr-seek) { grid-column: 1; }
  .page-head--sr .sr-seek { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; }
}

/* ---------- остання проповідь ---------- */
.sr-latest-sec { background: var(--paper); padding-bottom: 0; }
.sr-latest { margin-bottom: 0; }
.sr-latest__sum { margin-top: 10px; max-width: 52ch; color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.sr-latest__has {
  display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 10px;
  font-size: var(--fs-meta); font-weight: 500; color: var(--muted);
}
.sr-latest__has .ic { width: 18px; height: 18px; color: var(--blue); }
@media (min-width: 1080px) {
  .sr-latest .sermon-lead__link { display: grid; grid-template-columns: 7fr 5fr; column-gap: 48px; align-items: center; }
  .sr-latest .sermon-lead__title { margin-top: 0; font-size: clamp(1.625rem, 1rem + 1vw, 2.125rem); -webkit-line-clamp: 4; }
  .sr-latest .sermon-lead__cta { display: inline-flex; margin-top: 24px; }
  .sr-latest .play-disc { width: 64px; height: 64px; right: 16px; bottom: 16px; }
}

/* ---------- архів ---------- */
.sr-arch-sec { background: var(--paper-2); }
/* під час пошуку «Остання» не показується — архів стає першою секцією під полем: той самий відступ, що й .page-head + .sec */
.sr-arch-sec--first { padding-top: 40px; }
@media (min-width: 768px) { .sr-arch-sec--first { padding-top: 48px; } }
@media (min-width: 1080px) { .sr-arch-sec--first { padding-top: 64px; } }
.sr-rail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 8px; }
.sr-rail__head h2 { margin-bottom: 0; }
.sr-rail__head h2:focus-visible { outline-offset: 6px; }
.sr-year { display: flex; align-items: center; gap: 10px; }
.sr-year__label { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.sr-year .select { width: 10.5rem; }
.sr-year .input { background: #fff; min-height: 48px; }
.sr-months, .sr-rail__yt { display: none; }

.sr-status { margin-top: 8px; align-items: center; }
.sr-status__reset { min-height: 44px; margin-left: auto; }
.sr-status__reset .ic { width: 18px; height: 18px; }
.sr-empty .empty { padding-top: 24px; }
.sr-year noscript .btn { align-self: flex-start; }

.sr-month { margin-top: 20px; }
.sr-month__title {
  position: sticky; top: 0; z-index: 2;
  padding: 12px 0 10px; background: var(--paper-2);
  font-size: 1.0625rem; font-weight: 700; color: var(--brown); line-height: 1.3;
}
.sr-month__title::first-letter { text-transform: uppercase; }
@media (min-width: 768px) { .sr-month__title { top: var(--head-h); } }

/* рядки архіву: лінії лишаються по краю тексту, а підсвітка hover має повітря з боків */
.sr-list { margin-top: 0; }
.sr-list li { border-bottom: 1px solid var(--blue-line); }
.sr-list .sermon-row { border-bottom: 0; margin-inline: -12px; padding-inline: 12px; border-radius: var(--r-sm); }
.sr-list .sermon-row:focus-visible { outline-offset: -3px; }
.sr-list .sermon-row__date .my { text-transform: none; }
/* в архіві місяць уже в заголовку групи — під числом лише день тижня, колонка вужча, назві більше місця */
.sr-groups .sermon-row { grid-template-columns: 3rem minmax(0, 1fr) 24px; }
.sr-row__has {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin-top: 6px;
  padding: 2px 8px; border-radius: var(--r-sm); background: var(--blue-tint); color: var(--blue);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3;
}
.sr-row__has .ic { width: 14px; height: 14px; }
.sr-results .pager { margin-top: 32px; }
.sr-results__yt { margin-top: 16px; }

@media (min-width: 1080px) {
  .sr-arch { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .sr-rail { position: sticky; top: calc(var(--head-h) + 24px); }
  .sr-rail__head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
  .sr-year { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
  .sr-year .select { width: 100%; }
  .sr-months { display: block; padding-top: 20px; border-top: 1px solid var(--blue-line); }
  .sr-months__label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin-bottom: 4px; }
  .sr-months ul { list-style: none; }
  .sr-months a {
    display: flex; align-items: center; min-height: 40px; color: var(--blue); font-weight: 500;
    font-size: var(--fs-meta); text-decoration: none;
  }
  .sr-months a::first-letter { text-transform: uppercase; }
  .sr-months a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .sr-rail__yt { display: inline-flex; margin-top: 12px; }
  .sr-results { max-width: 820px; }
  .sr-results__yt { display: none; }
  .sr-month:first-of-type { margin-top: 8px; }
  .sr-month__title { top: var(--head-h); }
}

/* ======================================================================
   СТОРІНКА ПРОПОВІДІ
   <1080: один потік — відео, дії, опис, «Текст проповіді», пошук, текст (порядок через order).
   ≥1080: текст ліворуч (64ch), відео + дії + пошук по тексту — липка колонка праворуч:
   читаєш і не губиш ні плеєр, ні пошук.
   ====================================================================== */
.sr-meta__word { gap: 6px; }
.sr-meta__word .ic { color: var(--gold-light); }
.sr-tag-blue { margin-left: 4px; }

.sr-watch-sec { background: var(--paper); }
.sr-watch { display: flex; flex-direction: column; }
.sr-aside, .sr-read { display: contents; }
.sr-player { order: 1; }
.sr-note { order: 2; }
.sr-acts { order: 3; }
.sr-summary { order: 4; }
.sr-read__title { order: 5; }
.sr-points { order: 6; } /* головні думки з відеоархіву (вигляд — .vd-points, 24-video.css) */
.sr-read > .notice { order: 6; }
.sr-find { order: 7; }
.sr-text, .sr-read > .empty { order: 8; }
.sr-toggle { order: 9; }

/* плеєр-фасад: постер 16:9, youtube-nocookie вставляється лише за тапом */
.sr-player { position: relative; }
.sr-player__frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); background: var(--blue-deep);
}
.sr-player__frame > img { width: 100%; height: 100%; object-fit: cover; }
.sr-player__frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sr-player__tag { position: absolute; left: 12px; top: 12px; }
.sr-player__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; padding: 0; background: rgb(1 56 101 / .12); cursor: pointer;
  transition: background-color var(--dur-2);
}
.sr-player__play:hover { background: rgb(1 56 101 / .22); }
.sr-player__play:focus-visible { outline: 3px solid #fff; outline-offset: -8px; border-radius: 12px; box-shadow: inset 0 0 0 5px var(--blue); }
.sr-player__disc { position: static; width: 72px; height: 72px; box-shadow: var(--shadow-lift); }
.sr-player__disc .ic { width: 28px; height: 28px; margin-left: 4px; }
.sr-player__play:hover .sr-player__disc { scale: 1.06; }
.sr-player__close {
  display: flex; align-items: center; gap: 6px; margin: 4px 0 0 auto; min-height: 44px; padding: 0 4px;
  border: 0; background: none; color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.sr-player__close .ic { width: 18px; height: 18px; }
.sr-player__close[hidden] { display: none; }

/* відео ще не привʼязане до проповіді: той самий кадр 16:9, але це посилання на пошук на каналі, а не плеєр */
.sr-novideo { display: block; order: 1; color: #fff; text-decoration: none; }
.sr-novideo > img { filter: saturate(.7); opacity: .55; }
.sr-novideo__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px;
  font-weight: 600; font-size: var(--fs-body); text-align: center;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.sr-novideo__label .ic { width: 20px; height: 20px; flex: none; }
.sr-novideo:hover .sr-novideo__label { text-decoration-thickness: 2.5px; }
.sr-novideo:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.sr-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.sr-note .ic { width: 16px; height: 16px; }
.sr-player.is-on + .sr-note { display: none; }
.sr-acts { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 4px; margin-top: 12px; }
.sr-acts .btn { margin-right: 4px; }
.sr-acts .btn .ic { width: 18px; height: 18px; }
/* телефон: «Поділитися» — головна дія члена церкви (переслати родині), на всю ширину; посилання — рядком під нею */
@media (max-width: 599.98px) { .sr-acts .btn { flex-basis: 100%; margin: 0 0 4px; } }

/* Мобайл і планшет: після тапу по мітці часу плеєр пришпилюється вгорі, як у застосунку YouTube,
   інакше «12:40» у середині тексту вмикало б відео, якого не видно */
@media (max-width: 1079.98px) {
  .sr-player.is-pinned {
    position: sticky; top: 0; z-index: 6;
    margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter) 0;
    background: #fff; box-shadow: 0 12px 20px -16px rgb(59 33 25 / .45);
  }
  .sr-player.is-pinned .sr-player__close { margin-top: 0; }
}
@media (min-width: 768px) and (max-width: 1079.98px) {
  .sr-player.is-pinned { top: var(--head-h); }
  /* на планшеті пришпилений плеєр не повинен займати пів екрана */
  .sr-player.is-pinned .sr-player__frame, .sr-player.is-pinned .sr-player__close { width: min(100%, 480px); }
}

.sr-summary {
  margin-top: 28px; max-width: var(--measure);
  font-size: 1.1875rem; font-weight: 500; line-height: 1.5; color: var(--ink);
}
.sr-read__title { margin: 36px 0 16px; }
.sr-read > .notice { max-width: calc(var(--measure) + 6rem); }
.sr-read > .notice a { font-weight: 600; }
.sr-note-example { color: var(--muted); }
.sr-note-example .tag-example { margin-right: 4px; vertical-align: 1px; }
.sr-read > .empty { padding-top: 8px; }

/* пошук по тексту */
.sr-find { margin-top: 24px; max-width: 34rem; }
.sr-find__label { display: block; margin-bottom: 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.sr-find__row { display: flex; align-items: center; gap: 4px; }
.sr-find__field { flex: 1; min-width: 0; }
.sr-find__step { color: var(--blue); flex: none; }
.sr-find__step:disabled { color: var(--blue-line); background: none; cursor: default; }
.sr-find__status { min-height: 1.5em; margin-top: 6px; font-size: var(--fs-meta); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.sr-find__status.is-none { color: var(--ink); }

/* транскрипт: Onest 18px, 64ch; мітки часу — --gold-ink, на ≥768 окремою колонкою ліворуч */
.sr-text { position: relative; margin-top: 20px; }
.sr-seg { scroll-margin-top: 24px; border-radius: 12px; transition: background-color var(--dur-2); }
.sr-seg + .sr-seg { margin-top: 20px; }
.sr-seg__t {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; margin: 0 0 -6px -10px;
  border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  color: var(--gold-ink); font-size: var(--fs-meta); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.sr-seg__play { width: 14px; height: 14px; fill: currentColor; stroke: none; opacity: .75; }
.sr-seg__t:hover { background: var(--blue-tint); color: var(--blue); }
.sr-seg__t:hover .sr-seg__play { opacity: 1; }
.sr-seg__t:active { background: var(--blue-line); }
.sr-seg__t--static, .sr-seg__t--static:hover, .sr-seg__t--static:active { cursor: default; background: none; color: var(--gold-ink); }
.sr-seg__p { max-width: var(--measure); font-size: 1.125rem; line-height: 1.65; color: var(--ink); }
.sr-seg--word { margin-block: 32px; }
.sr-seg__word { margin: 0; max-width: var(--measure); }
.sr-seg__word::before { content: ""; display: block; width: 32px; height: 2px; margin: 10px 0 12px; background: var(--gold); }
.sr-seg__word p { font-family: var(--font-word); font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 1.55; color: var(--brown); }
.sr-seg__word cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: var(--fs-meta); color: var(--gold-ink); }
.sr-seg.is-current { background: var(--blue-tint); box-shadow: 0 0 0 12px var(--blue-tint); }
.sr-seg.is-current .sr-seg__t { color: var(--blue); }
.sr-text mark { background: var(--blue-tint); color: var(--ink); border-radius: 3px; padding: 0 1px; box-shadow: 0 1.5px 0 var(--blue-soft); }
.sr-text mark.is-current { background: var(--blue); color: #fff; box-shadow: none; }
.sr-seg.is-current mark:not(.is-current) { background: #fff; }
@media (max-width: 599.98px) { .sr-seg__p { hyphens: auto; -webkit-hyphens: auto; } }

/* згорнутий текст: перші 6 абзаців і м'яке затухання над кнопкою */
.sr-text.is-collapsed .sr-seg:nth-child(n+7) { display: none; }
.sr-text.is-collapsed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 112px; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / 0), #fff 88%);
}
.sr-toggle { align-self: flex-start; max-width: 100%; margin-top: 16px; white-space: normal; text-align: left; line-height: 1.25; }
.sr-toggle .ic { transition: rotate var(--dur-2) var(--ease-out); }
.sr-toggle[aria-expanded="true"] .ic { rotate: 180deg; }

@media (min-width: 768px) {
  .sr-seg { display: grid; grid-template-columns: 5.5rem minmax(0, var(--measure)); column-gap: 16px; align-items: start; }
  .sr-seg__t { margin: -7px 0 0 -10px; justify-self: start; }
  .sr-seg--word .sr-seg__t { margin-top: 3px; }
  .sr-seg__word::before { margin-top: 0; }
  .sr-seg.is-current { box-shadow: 0 0 0 14px var(--blue-tint); }
}

@media (min-width: 1080px) {
  .sr-watch { display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 64px; align-items: start; }
  .sr-aside { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--head-h) + 24px); }
  .sr-read { display: block; grid-column: 1; grid-row: 1; min-width: 0; }
  .sr-summary { margin-top: 0; }
  .sr-read > .sr-read__title:first-child { margin-top: 0; }
  .sr-read__title { margin-top: 40px; }
  .sr-find { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--blue-line); max-width: none; }
}

/* ---------- «Ще від цього проповідника» і сусідні проповіді ---------- */
.sr-next-sec { background: var(--paper-2); }
.sr-next__more { max-width: 820px; }
.sr-next .sr-list { border-top: 1px solid var(--blue-line); }
/* сусідні проповіді — рядки з лінією, як архів; hover — спільний .row-bleed */
.sr-step { margin-top: 48px; max-width: 820px; border-top: 1px solid var(--blue-line); }
.sr-step__link {
  display: grid; gap: 4px; padding: 16px 0; min-height: 72px;
  border-bottom: 1px solid var(--blue-line); color: inherit; text-decoration: none;
}
.sr-step__link:hover .sr-step__title { color: var(--blue); }
.sr-step__link:focus-visible { outline-offset: 2px; }
.sr-step__dir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--blue); }
.sr-step__dir time { color: var(--gold-ink); font-weight: 600; }
.sr-step__dir .ic { width: 18px; height: 18px; }
.sr-step__title { font-family: var(--font-word); font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: var(--brown); text-wrap: pretty; transition: color var(--dur-1); }
.sr-step__who { font-size: var(--fs-meta); color: var(--muted); }
.sr-step__last { padding: 16px 0; border-bottom: 1px solid var(--blue-line); color: var(--muted); font-size: var(--fs-meta); }
.sr-step__last a { font-weight: 600; }

/* ==== 21-schedule-live.css ==== */
/* ======================================================================
   B · РОЗКЛАД, ПОДІЯ, ОНЛАЙН (.ev- / .live-)
   Той самий світ, що й головна: поле відповідає (сьогодні + найближче / дата події / стан ефіру),
   нижче — Slot-рядки з лініями --blue-line, без карток. Червоне — лише «НАЖИВО» у білій пілюлі.
   ====================================================================== */

/* ---------- спільне: відносний час «через 5 днів» ---------- */
.ev-rel { color: var(--gold-ink); font-weight: 600; font-size: var(--fs-meta); font-variant-numeric: lining-nums; }
.ev-rel:empty { display: none; }
.ev-rel--blue { color: var(--gold-light); font-weight: 500; font-size: inherit; }

/* ======================================================================
   РОЗКЛАД — поле: «Сьогодні вівторок, 29 вересня» + найближча подія одним рядком
   ====================================================================== */
.ev-now { margin-top: 16px; max-width: 44rem; }
.ev-now__today { font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; color: #fff; text-wrap: balance; }
.ev-now__today time { color: var(--gold-light); font-variant-numeric: lining-nums; white-space: nowrap; }


/* ======================================================================
   РОЗКЛАД — «Цей тиждень»: 7 днів від сьогодні, згруповано за днями
   ====================================================================== */
.ev-week-sec { background: var(--paper); }
.ev-week__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; }
.ev-week__head .tz-note { margin: -8px 0 16px; }
@media (min-width: 768px) { .ev-week__head .tz-note { margin: 0 0 var(--h2-gap); } }
.js .ev-days__fallback { display: none; }
.ev-days__fallback { font-size: var(--fs-meta); color: var(--muted); padding: 16px 0; }

.ev-days { border-top: 1px solid var(--blue-line); }
.ev-day { padding-top: 14px; border-bottom: 1px solid var(--blue-line); }
.ev-day__name {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px;
  font-size: 1.0625rem; font-weight: 700; color: var(--brown); line-height: 1.3;
}
.ev-day__date { color: var(--gold-ink); font-weight: 600; font-variant-numeric: lining-nums; }
.ev-day__none { font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.ev-day--empty { padding-bottom: 14px; }
.ev-day--empty .ev-day__name { color: var(--muted); font-weight: 600; }
.ev-day--empty .ev-day__date { color: var(--muted); font-weight: 500; }
.ev-day .badge--today { background: var(--blue); color: #fff; }

.ev-slots { list-style: none; margin-top: 2px; }
.ev-slots .slot { min-height: 64px; padding: 12px 0; }
.ev-slots .slot:last-child { border-bottom: 0; }
.ev-slot .slot__when { gap: 2px; }
.ev-guest { font-size: var(--fs-small); font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: lining-nums; }
.ev-slot--past .slot__time { color: var(--muted); }
.ev-slot--special .slot__title { color: var(--blue); }
.ev-slot--special .slot__link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* сьогодні — плитка --blue-tint, як «сьогодні» у Slot на головній */
.ev-day--today {
  background: var(--blue-tint); border-bottom-color: transparent;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.ev-day--today .slot { border-bottom-color: #fff; }
.ev-day--today .slot__act:hover { background: #fff; }
.ev-day--today .slot--link:hover { background: #fff; }

@media (min-width: 768px) {
  .ev-day--today { margin-inline: -16px; padding-inline: 16px; border-radius: var(--r-md); margin-block: 8px; }
  .ev-slots .slot--link:hover { background: var(--blue-tint); }
}
/* десктоп: розклад як таблиця — день ліворуч, рядки праворуч, мета в окремій колонці */
@media (min-width: 1080px) {
  .ev-week { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ev-day { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 32px; padding-top: 0; align-items: start; }
  .ev-day__name { flex-direction: column; align-items: flex-start; padding-top: 16px; row-gap: 2px; }
  .ev-day__name .badge { margin-top: 6px; }
  .ev-day--empty { padding-block: 0; }
  .ev-day--empty .ev-day__name { flex-direction: row; align-items: baseline; padding-block: 16px; grid-column: 1 / -1; }
  .ev-slots { margin-top: 0; }
  .ev-slot .slot__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 24px; align-items: baseline; }
  .ev-slot .slot__meta { margin-top: 0; }
  .ev-day--today { margin-inline: -20px; padding-inline: 20px; }
}

/* ======================================================================
   РОЗКЛАД — особливі події (Slot з великою датою, фото-мініатюра, посилання на подію)
   ====================================================================== */
.ev-spec-sec { background: var(--paper-2); }
.ev-spec__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin-bottom: var(--h2-gap); }
.ev-spec__head h2 { margin-bottom: 0; }
.ev-spec { list-style: none; border-top: 1px solid var(--blue-line); }
.ev-item {
  position: relative; display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 20px; grid-template-areas: "date body chev";
  column-gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--blue-line);
  transition: background-color var(--dur-1);
}
.ev-item--photo { grid-template-columns: 3.25rem minmax(0, 1fr) 84px; grid-template-areas: "date body photo"; }
.ev-item__body { grid-area: body; min-width: 0; }
.ev-item__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--brown); text-wrap: pretty; transition: color var(--dur-1); }
.ev-item__link { color: inherit; text-decoration: none; }
.ev-item__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ev-item__link:focus-visible { outline: none; }
.ev-item:has(.ev-item__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ev-item__meta {
  display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 0; margin-top: 4px;
  font-size: var(--fs-meta); font-weight: 500; color: var(--muted); line-height: 1.45;
}
.ev-item__time { color: var(--ink); }
.ev-item__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.ev-item__badges:not(:has(> *:not(:empty))) { display: none; }
.ev-item > .date-stack { grid-area: date; }
.ev-item__photo { grid-area: photo; }
.ev-item__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.ev-item__chev { grid-area: chev; align-self: center; width: 20px; height: 20px; color: var(--blue); transition: transform var(--dur-1); }
.ev-item--photo .ev-item__chev { display: none; }
.ev-item:hover .ev-item__title { color: var(--blue); }
.ev-item:hover .ev-item__chev { transform: translateX(2px); }
.ev-spec__past { margin-top: 12px; }
.ev-spec-empty .empty { padding-top: 24px; }

@media (min-width: 600px) {
  .ev-item--photo { grid-template-columns: 4rem minmax(0, 1fr) 168px; }
  .ev-item__photo img { aspect-ratio: 3 / 2; border-radius: var(--r-md); }
}
@media (min-width: 768px) {
  .ev-item { column-gap: 20px; }
  .ev-item--photo { grid-template-columns: 4.5rem minmax(0, 1fr) 200px; }
}
@media (min-width: 1080px) {
  .ev-spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-top: 0; }
  .ev-spec > .ev-item { border-top: 1px solid var(--blue-line); border-bottom: 0; }
  .ev-spec > .ev-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--blue-line); }
  .ev-item--photo { grid-template-columns: 4.5rem minmax(0, 1fr) 176px; }
}

/* ======================================================================
   РОЗКЛАД — «Регулярно щотижня» (довідник)
   ====================================================================== */
.ev-reg-sec { background: var(--paper); }
.ev-reg__head .lead { margin-bottom: 16px; }
.ev-reg__list { border-top: 1px solid var(--blue-line); }
.ev-reg__list .slot { border-bottom: 1px solid var(--blue-line); }
.ev-reg__list .slot:last-child { border-bottom: 0; }
/* день над часом у всіх рядках (у compact-Slot «нд 11:00» інакше стає в один рядок, а «нд 10:00» — у два) */
.ev-reg__list .slot__when { flex-direction: column; align-items: flex-start; gap: 0; }
.ev-reg__notes { margin-top: 8px; }
.ev-reg__notes .note { margin-top: 12px; }
.ev-reg__notes .note a { font-weight: 600; }
.ev-kyiv {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--blue); line-height: 1.4;
}
.ev-kyiv .ic { width: 20px; height: 20px; }
.ev-reg__notes .tz-line { margin-top: 8px; }

@media (min-width: 768px) {
  .ev-reg__list { columns: 2; column-gap: 48px; border-top: 0; }
  .ev-reg__list .slot { break-inside: avoid; border-top: 1px solid var(--blue-line); border-bottom: 0; }
}
@media (min-width: 1080px) {
  .ev-reg {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px;
    grid-template-areas: "head list" "notes list"; grid-template-rows: auto 1fr; align-items: start;
  }
  .ev-reg__head { grid-area: head; }
  .ev-reg__notes { grid-area: notes; margin-top: 0; }
  .ev-reg__list { grid-area: list; columns: 1; border-top: 1px solid var(--blue-line); }
  .ev-reg__list .slot { border-top: 0; border-bottom: 1px solid var(--blue-line); }
  .ev-reg__list .slot:last-child { border-bottom: 0; }
}

/* ======================================================================
   ПОДІЯ — поле: дата великим, час, місце, дії
   ====================================================================== */
.ev-when { margin-top: 16px; }
.ev-when__date {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
  color: #fff; font-variant-numeric: lining-nums;
}
.ev-when__date .nw { color: var(--gold-light); }
.ev-when__meta {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 4px; margin-top: 10px;
  font-size: 1.0625rem; line-height: 1.4;
}
.ev-when__time { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-variant-numeric: lining-nums; }
.ev-when__time .ic, .ev-when__place .ic { width: 20px; height: 20px; color: var(--mint); flex: none; }
.ev-when__place { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 1.0625rem; line-height: 1.4; color: #fff; }
.ev-when__place .ic { margin-top: 1px; }
.ev-when__place b { font-weight: 600; }
.ev-when__place .tbc { font-size: var(--fs-meta); }
.ev-when__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.ev-when__stream { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 500; color: var(--mint); }
.ev-when__stream .ic { width: 18px; height: 18px; }
.ev-when__acts { display: grid; grid-template-columns: 1fr 1fr; }
.ev-when__acts .btn { padding-inline: 12px; }
.ev-when__acts .ev-when__main, .ev-when__acts .btn:only-child,
.ev-when__acts .ev-when__main + .btn:last-child { grid-column: 1 / -1; }
@media (min-width: 600px) { .ev-when__acts { display: flex; } .ev-when__acts .btn { padding-inline: 20px; } }

/* ---------- тіло події ---------- */
.ev-page { background: var(--paper); }
.ev-page__grid { display: grid; gap: 40px; align-items: start; }
.ev-page__main { min-width: 0; }
.ev-past { margin-bottom: 24px; }
.ev-page__photo { position: relative; margin-bottom: 28px; }
.ev-page__photo .tag-example { position: absolute; left: 12px; top: 12px; }
.ev-page__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.ev-facts { margin-top: 32px; }
.ev-facts a { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.ev-page__lead { font-size: 1.25rem; font-weight: 500; line-height: 1.45; color: var(--ink); }

/* реєстрація: функціональна панель форми, не картка-декор */
.ev-reg-box { scroll-margin-top: 24px; } /* поверхня — спільна .panel */
.ev-reg-box.is-full { background: var(--gold-tint); border-color: var(--gold-line); }
.ev-reg-box__seats { font-size: 1.0625rem; color: var(--ink); line-height: 1.45; font-variant-numeric: lining-nums; }
.ev-reg-box__seats b { color: var(--brown); font-weight: 700; }
.ev-reg-box.is-full .ev-reg-box__seats b { color: var(--gold-ink); }
.ev-reg-box__text { color: var(--ink); max-width: 48ch; }
.ev-reg-box__hint { font-size: var(--fs-meta); color: var(--muted); }
.ev-reg-box__acts { display: grid; gap: 12px; }
.panel > .ev-reg-box__acts, .panel > .ev-form .input { background: #fff; }
.ev-form textarea { font: inherit; } /* базовий reset наслідує шрифт лише для button/input/select */
.ev-form .field--error .input { background: var(--error-tint); }
.ev-form__consent { margin-top: 16px; font-size: var(--fs-meta); color: var(--muted); }
.ev-form [data-ev-submit] { margin-top: 16px; }
.ev-form [data-ev-submit][aria-busy="true"] { background: var(--blue-line); color: var(--muted); cursor: progress; }
.ev-form__alt { margin-top: 12px; font-size: var(--fs-meta); color: var(--muted); }
.ev-form__alt a { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.ev-form-done { display: grid; gap: 16px; margin-top: 16px; }
.ev-form-done:focus { outline: none; }
.ev-form .notice { margin-bottom: 16px; }

@media (min-width: 1080px) {
  .ev-page__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
  .ev-page__side { position: sticky; top: calc(var(--head-h) + 24px); }
  .ev-reg-box { scroll-margin-top: calc(var(--head-h) + 24px); }
}

.ev-more-sec { background: var(--paper-2); }
@media (min-width: 768px) {
  .ev-spec--more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .ev-spec--more > .ev-item { border-top: 1px solid var(--blue-line); grid-template-columns: 4rem minmax(0, 1fr) 20px; }
}

/* ======================================================================
   ОНЛАЙН — поле: «чи йде зараз ефір» (idle · soon · scheduled-now · live · ended · off)
   ====================================================================== */
.live-state { margin-top: 20px; }
.live-state__pill {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  min-height: 36px; padding: 4px 16px 4px 14px; margin-bottom: 14px;
  border-radius: 999px; background: #fff; color: var(--blue);
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.2;
}
.live-state__pill .ic { width: 18px; height: 18px; }
.live-state__pill .live-word { font-size: .875rem; }
.live-state__lead { font-size: var(--fs-lead); font-weight: 600; line-height: 1.2; color: #fff; text-wrap: balance; }
.live-state__big {
  margin-top: 4px; margin-left: -0.04em;
  font-size: var(--fs-time); font-weight: 800; line-height: .9; letter-spacing: -0.03em; color: #fff;
  font-variant-numeric: lining-nums proportional-nums; hyphens: manual;
}
.live-state__big time { font-variant-numeric: inherit; }
/* стан словами («почнеться за 12 хвилин», «Недільне богослужіння») — менший кегль, баланс рядків */
.live-state__big.is-text {
  margin-left: 0; font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem); line-height: 1.05; letter-spacing: -0.025em;
  text-wrap: balance; max-width: 18ch;
}
.live-state__rel {
  margin-top: 12px; max-width: 48ch;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--gold-light); font-variant-numeric: lining-nums;
}
.live-state__rel b { color: #fff; font-weight: 600; }
@media (max-width: 599.98px) { .live-state__acts .btn { flex: 1 1 auto; } }
.live-state__big + .live-state__rel { margin-top: 14px; }
.live-state.is-changing .live-state__rel { animation: reveal var(--dur-3) var(--ease-out); }
@media (min-width: 1080px) {
  .live-state__big:not(.is-text) { font-size: clamp(6rem, 3rem + 5vw, 8.5rem); }
}

/* ---------- плеєр ---------- */
.live-top { background: var(--paper); }
.live-top__grid { display: grid; gap: 48px; align-items: start; }
.live-player { min-width: 0; scroll-margin-top: 16px; }
.live-player:focus { outline: none; }
.live-player__frame { position: relative; }
.live-player__frame .stream-card { width: 100%; }
.live-player__frame iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg); background: var(--blue-deep);
}
.live-player__under { margin-top: 8px; }
.live-player__under .online__next { margin: 4px 0 0; }
.live-player__hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; max-width: 52ch; }
.live-player__hint .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--blue); }
@media (min-width: 1080px) {
  .live-player { scroll-margin-top: calc(var(--head-h) + 16px); }
  .live-top__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
  .live-player__frame .stream-card:hover { box-shadow: var(--shadow-lift); }
}

.live-sched__list { border-top: 1px solid var(--blue-line); }
.live-sched__tbc { margin-top: 16px; }

/* ---------- минулі трансляції → проповіді ---------- */
.live-low { background: var(--paper-2); }
.live-low__grid { display: grid; gap: 56px; align-items: start; }
.live-past__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin-bottom: var(--h2-gap); }
.live-past__head h2 { margin-bottom: 0; }
.live-past__list { list-style: none; border-top: 1px solid var(--blue-line); margin-bottom: 8px; }
.live-past__row {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 14px; align-items: start;
  padding: 12px 0 6px; border-bottom: 1px solid var(--blue-line);
}
.live-past__body { min-width: 0; }
.live-past__title { font-size: 1.0625rem; font-weight: 600; color: var(--brown); line-height: 1.3; }
.live-past__acts { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
.live-past__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--blue); font-size: var(--fs-meta); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.live-past__link:hover { text-decoration-thickness: 2.5px; }
.live-past__link .ic { width: 18px; height: 18px; }
.live-past__link--rec { color: var(--ink); text-decoration-color: var(--blue-line); }
.live-past__link--rec .ic { color: var(--muted); }
.live-past__wait { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.live-past__wait .ic { width: 18px; height: 18px; }

@media (min-width: 768px) {
  .live-past__row { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 20px; padding: 8px 0; align-items: center; }
  .live-past__body { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  .live-past__title { flex: 0 0 13rem; }
}
@media (min-width: 1080px) {
  .live-low__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
}

/* ---------- як дивитися ---------- */
.live-how__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

/* ==== 22-news-gallery.css ==== */
/* ======================================================================
   НОВИНИ Й ГАЛЕРЕЯ (напрям C): novyny, novyna, galereia, albom
   Стрічка — рядки, не сітка однакових карток; галерея — мозаїка «justified rows»:
   у ряду плитки однієї висоти, ширина — за пропорцією кадру (--ar), порядок DOM = порядок читання.
   ====================================================================== */

/* ---------- рубрики / категорії: спільні .chips з <a>; тут лише лічильник альбомів ---------- */
.news-chips { margin-top: 0; }
.news-chips__n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.chips a[aria-current] .news-chips__n { color: var(--mint); }

.news-bar { display: grid; gap: 12px; }
.news-note { font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; }
.news-note .tag-example { margin-right: 4px; vertical-align: 1px; }
.news-status:empty { display: none; }
.news-status { margin-top: 12px; }

.news-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.4; color: var(--muted);
}
.news-meta time { color: var(--gold-ink); font-weight: 600; font-variant-numeric: lining-nums; }
.news-meta__dot { color: var(--muted); }

/* ---------- головна новина: фото 16:9 + заголовок + лід ---------- */
.news-lead { position: relative; margin-top: 24px; }
.news-lead__media { overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 9; background: var(--blue-tint); }
.news-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-out); }
.news-lead__body { padding-top: 16px; }
.news-lead__title {
  margin: 6px 0 0; font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em;
}
.news-lead__link { color: var(--brown); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color var(--dur-1), text-decoration-color var(--dur-1); }
.news-lead__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.news-lead__link:focus-visible { outline: none; }
.news-lead:has(.news-lead__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r-lg); }
.news-lead__text { margin-top: 10px; max-width: 52ch; color: var(--ink); }
.news-lead__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; min-height: 24px;
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
}
.news-lead__more .ic { width: 18px; height: 18px; transition: translate var(--dur-2) var(--ease-out); }
.news-lead:hover .news-lead__link { color: var(--blue); text-decoration-color: currentColor; }
.news-lead:hover .news-lead__media img { scale: 1.02; }
.news-lead:hover .news-lead__more .ic { translate: 3px 0; }
@media (min-width: 768px) {
  .news-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; align-items: center; margin-top: 32px; }
  .news-lead__body { padding-top: 0; }
}
@media (min-width: 1080px) { .news-lead { column-gap: 48px; margin-top: 40px; } }

/* ---------- стрічка: рядки з мініатюрою 4:3 ліворуч ---------- */
.news-cols { margin-top: 32px; }
.news-list { list-style: none; border-top: 1px solid var(--blue-line); }
.news-row {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--blue-line);
}
.news-row__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--blue-tint); }
.news-row__body { min-width: 0; }
.news-row__title { margin: 4px 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.news-row__link { color: var(--brown); text-decoration: none; transition: color var(--dur-1); }
.news-row__link::after { content: ""; position: absolute; inset: 0; }
.news-row__link:focus-visible { outline: none; }
.news-row:has(.news-row__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.news-row__text {
  margin-top: 4px; font-size: var(--fs-meta); line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-row:hover .news-row__link { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* на вузькому телефоні — без анонсу: заголовок і дата важливіші */
@media (max-width: 359.98px) { .news-row { grid-template-columns: 80px minmax(0, 1fr); } .news-row__text { display: none; } }
@media (min-width: 600px) {
  .news-row { grid-template-columns: 160px minmax(0, 1fr); column-gap: 20px; padding: 20px 0; }
  .news-row__img { border-radius: var(--r-md); }
  .news-row__title { font-size: 1.25rem; line-height: 1.25; }
  .news-row__text { font-size: 1rem; }
}
.news-empty .empty { padding-top: 24px; }
/* новина без фото: спокійна плашка замість мініатюри */
.news-row__img--none, .news-lead__none { display: grid; place-items: center; color: var(--blue-line); }
.news-row__img--none .ic { width: 36%; height: auto; aspect-ratio: 1; }
.news-lead__none { height: 100%; }
.news-lead__none .ic { width: 64px; height: 64px; }


/* ---------- бічна колонка списку ---------- */
.news-aside { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-line); }
.news-aside__title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 16px; }
.news-aside__photos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.news-aside__photos a { display: grid; gap: 6px; color: var(--brown); text-decoration: none; font-size: var(--fs-meta); font-weight: 600; line-height: 1.3; }
.news-aside__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); transition: scale var(--dur-2) var(--ease-out); }
.news-aside__photos a:hover { color: var(--blue); }
.news-aside__photos a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.news-aside__photos a:focus-visible { outline-offset: 4px; }
.news-aside .link { margin-top: 8px; }
.news-aside__social { margin-top: 16px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.news-aside__social a { font-weight: 600; }
@media (min-width: 768px) { .news-aside__photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .news-cols { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 64px; align-items: start; margin-top: 48px; }
  .news-aside { position: sticky; top: calc(var(--head-h) + 24px); margin-top: 0; padding: 0; border-top: 0; }
  .news-aside__photos { grid-template-columns: 1fr 1fr; }
}

/* ======================================================================
   СТАТТЯ
   ====================================================================== */
.news-art { padding-bottom: var(--section-y); }

/* обкладинка під полем, не в полі */
.news-art__cover { margin: 24px 0 0; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 9; background: var(--blue-tint); }
.news-art__cover img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .news-art__cover { margin-top: 32px; aspect-ratio: 2 / 1; } }
@media (min-width: 1080px) { .news-art__cover { margin-top: 40px; aspect-ratio: 12 / 5; } }
.news-art__cover.news-art__cover--small { aspect-ratio: auto; background: none; }
.news-art__cover--small img { height: auto; }

.news-art__grid { margin-top: 28px; }
.news-art__main > .news-note { margin-bottom: 20px; }
.news-art .prose > p:first-child { font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.3125rem); line-height: 1.5; color: var(--ink); }
.news-art .prose figcaption { margin-top: 8px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; }
/* посилання на Писання в цитатах старих статей (<cite> -> span.cite, app/site/news.py:article_html) */
.news-art .prose blockquote .cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: var(--fs-meta); color: var(--gold-ink); }
.news-art .prose blockquote + blockquote { margin-top: 1em; }
.news-art__aside { margin-top: 40px; display: grid; gap: 24px; align-content: start; }
@media (min-width: 1080px) {
  .news-art__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 72px; margin-top: 48px; }
  .news-art__aside { position: sticky; top: calc(var(--head-h) + 24px); margin-top: 0; }
}

/* фасад відео: постер + play; iframe (youtube-nocookie) — лише за тапом */
.news-video { margin-block: 1.2em 1.6em; }
.news-video__btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--blue-deep);
  border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; cursor: pointer; color: inherit;
}
.prose .news-video__btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: scale var(--dur-3) var(--ease-out); }
.news-video__btn .play-disc { left: 50%; top: 50%; right: auto; bottom: auto; translate: -50% -50%; width: 64px; height: 64px; }
.news-video__btn .play-disc .ic { width: 26px; height: 26px; }
.news-video__btn .tag-example { position: absolute; left: 12px; top: 12px; }
.news-video__btn:hover .play-disc { scale: 1.06; }
.news-video__btn:hover img { scale: 1.02; }
.news-video__btn:focus-visible { outline-offset: 4px; }
.news-video .video { margin: 0; }

/* міні-галерея статті: перше фото велике, решта — квадрати; клік — лайтбокс */
.prose .news-gal { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prose .news-gal li { margin: 0; aspect-ratio: 1; }
.prose .news-gal li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.news-gal .gal-photo { height: 100%; border-radius: var(--r-sm); }
.prose .news-gal img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.prose .news-gal + p { margin-top: 8px; }
@media (min-width: 600px) { .prose .news-gal { gap: 12px; } .news-gal .gal-photo { border-radius: var(--r-md); } }

/* поділитися + альбом події */
.news-share__title { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.news-album {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) 20px; column-gap: 14px; align-items: center;
  padding: 8px; margin: 0 -8px; border-radius: var(--r-md);
  color: inherit; text-decoration: none;
  transition: background-color var(--dur-1);
}
.news-album img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.news-album__body { display: grid; gap: 2px; min-width: 0; }
.news-album__kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink); }
.news-album__kind .ic { width: 16px; height: 16px; }
.news-album__title { font-weight: 600; color: var(--brown); line-height: 1.3; }
.news-album__chev { width: 20px; height: 20px; color: var(--blue); }
.news-album:hover { background: var(--blue-tint); }
.news-album:hover .news-album__title { color: var(--blue); }

.news-more { background: var(--paper-2); }
.news-more .news-list { max-width: 880px; }

/* ======================================================================
   ГАЛЕРЕЯ: мозаїка альбомів і сітка фото (justified rows)
   ====================================================================== */
.gal-mosaic, .gal-grid {
  --row-h: 145px;
  list-style: none; display: flex; flex-wrap: wrap;
}
/* останній ряд не розтягуємо на всю ширину */
.gal-mosaic::after, .gal-grid::after { content: ""; flex: 1000 1 0px; }
.gal-mosaic { gap: 28px 16px; margin-top: 24px; }
.gal-tile { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h)); min-width: 0; }
.gal-tile__link { display: block; color: var(--brown); text-decoration: none; border-radius: var(--r-lg); }
.gal-tile__media { display: block; overflow: hidden; aspect-ratio: var(--ar); border-radius: var(--r-lg); background: var(--blue-tint); }
.gal-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-out); }
.gal-tile__title { margin: 12px 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: inherit; transition: color var(--dur-1); }
.gal-tile__meta { display: flex; flex-wrap: wrap; column-gap: 8px; margin-top: 2px; font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.gal-tile__meta time { color: var(--gold-ink); font-weight: 600; font-variant-numeric: lining-nums; }
.gal-tile__link:hover { color: var(--blue); }
.gal-tile__link:hover .gal-tile__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.gal-tile__link:hover img { scale: 1.03; }
.gal-tile__link:active .gal-tile__media { scale: .99; }
.gal-tile__link:focus-visible { outline-offset: 4px; }
/* телефон: останній ряд розтягуємо (одна плитка на всю ширину краща за «дірку» праворуч) */
@media (max-width: 599.98px) { .gal-mosaic::after { display: none; } }
@media (min-width: 600px) { .gal-mosaic { --row-h: 220px; gap: 32px 20px; } }
@media (min-width: 768px) { .gal-mosaic { --row-h: 240px; margin-top: 32px; } .gal-tile__title { font-size: 1.1875rem; } }
@media (min-width: 1080px) { .gal-mosaic { --row-h: 300px; gap: 40px 24px; margin-top: 40px; } }
.gal-mosaic--few { margin-top: 0; }
@media (min-width: 1080px) { .gal-mosaic--few { --row-h: 240px; } }

/* сітка фото альбому */
.gal-grid { --row-h: 150px; gap: 6px; }
.gal-grid > li { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h)); min-width: 0; aspect-ratio: var(--ar); }
.gal-photo {
  display: block; height: 100%; overflow: hidden; border-radius: var(--r-sm); background: var(--blue-tint);
  cursor: zoom-in;
}
.gal-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-out), filter var(--dur-2); }
.gal-photo:hover img { scale: 1.03; }
.gal-photo:focus-visible { outline-offset: 2px; }
.gal-album .notice { margin-bottom: 24px; max-width: 720px; }
@media (min-width: 600px) { .gal-grid { --row-h: 190px; gap: 8px; } }
@media (min-width: 1080px) { .gal-grid { --row-h: 220px; gap: 12px; } .gal-photo { border-radius: var(--r-md); } }
.gal-others { background: var(--paper-2); }

/* ---------- лайтбокс: темна «земля» підвалу, фото вписане, керування ←/→ і Esc ---------- */
html.gal-lb-open { overflow: hidden; }
.gal-lb {
  --focus: var(--gold-light);
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ink); color: #fff; overflow: hidden;
}
.gal-lb::backdrop { background: var(--ink); }
.gal-lb[open] {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "bar bar bar" "img img img" "prev cap next";
  row-gap: 8px; column-gap: 8px;
  padding: 0 8px max(12px, env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: no-preference) {
  .gal-lb[open] { animation: gal-lb-in var(--dur-2) var(--ease-out); }
  .gal-lb__img { transition: opacity var(--dur-1); }
}
@keyframes gal-lb-in { from { opacity: 0; } }
.gal-lb__bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; padding: 8px 0 0 12px; }
.gal-lb__count { font-weight: 600; font-size: 1rem; color: var(--gold-light); font-variant-numeric: tabular-nums lining-nums; }
.gal-lb__img { grid-area: img; width: 100%; height: 100%; object-fit: contain; min-height: 0; user-select: none; -webkit-user-drag: none; touch-action: pan-y; }
.gal-lb__img.is-swapping { opacity: 0; }
.gal-lb__cap { grid-area: cap; align-self: center; text-align: center; font-size: var(--fs-meta); line-height: 1.45; color: rgb(255 255 255 / .86); max-width: 64ch; justify-self: center; text-wrap: balance; }
.gal-lb__btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff;
  transition: background-color var(--dur-1), transform 80ms;
}
.gal-lb__btn:hover { background: rgb(255 255 255 / .2); }
.gal-lb__btn:active { transform: scale(.96); }
.gal-lb__btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.gal-lb__prev { grid-area: prev; align-self: center; }
.gal-lb__next { grid-area: next; align-self: center; justify-self: end; }
.gal-lb__btn[hidden] { display: none; }
@media (min-width: 768px) {
  .gal-lb[open] {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    grid-template-areas: "bar bar bar" "prev img next" ". cap .";
    padding: 0 16px 20px; row-gap: 12px;
  }
  .gal-lb__bar { padding: 12px 0 0 8px; }
  .gal-lb__btn { width: 56px; height: 56px; }
  .gal-lb__next { justify-self: end; }
}

/* дата на підтвердження в мета-рядках («10 років»: тека 2023/10, about.html — «у 2024 році») */
.news-tbc { padding: 0 6px; font-size: inherit; line-height: 1.35; }
.news-tbc time { color: var(--muted); font-weight: 500; }

/* ==== 23-church.css ==== */
/* ======================================================================
   НАПРЯМ «ЦЕРКВА»: про нас (.ab-), служіння (.min-), контакти (.ct-), помилки (.err-)
   Той самий світ «Поріг»: синє поле відповідає, білий порядок, Slot-рядки з лініями,
   золото лише лінією, мʼята — безпека й вторинний текст на синьому.
   ====================================================================== */

/* ---------- Служіння: сторінка ---------- */
.min-page { display: grid; gap: 40px; }
.min-main, .min-side { min-width: 0; }
.min-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.min-hero + .min-prose { margin-top: 32px; }
.min-prose > h2:first-child { margin-top: 0; }
.min-prose .scripture-q p { max-width: 34ch; }
.min-prose figure img { aspect-ratio: auto; }

/* Опис служіння — HTML з редактора (Ministry.body; sanitize_html не лишає класів на blockquote/ul/figure),
   тож вигляд прототипу — через структуру:
   <blockquote><p>«Писання»</p><p>Місце</p></blockquote>            -> як .scripture-q
   <ul><li><strong>Назва</strong><br>пояснення</li>…</ul>           -> як .facts (рядки «назва | пояснення»)
   <div class="min-fig"><img …><span class="min-fig__cap">…</span></div> -> фото з підписом */
.min-prose blockquote::before { content: ""; display: block; width: 48px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.min-prose blockquote > p:first-child { font-family: var(--font-word); font-style: italic; font-weight: 400; font-size: var(--fs-quote); line-height: 1.4; max-width: 34ch; }
.min-prose blockquote > p + p:last-child { margin-top: 8px; font-family: inherit; font-style: normal; font-weight: 600; font-size: var(--fs-meta); color: var(--gold-ink); }
.min-prose ul:has(> li > strong:first-child) { list-style: none; padding-left: 0; border-top: 1px solid var(--blue-line); }
.min-prose ul:has(> li > strong:first-child) > li { display: flow-root; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--blue-line); max-width: none; }
.min-prose ul:has(> li > strong:first-child) > li > strong:first-child { display: block; margin-bottom: 4px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--brown); }
.min-prose ul:has(> li > strong:first-child) > li > strong:first-child + br { display: none; }
@media (min-width: 768px) {
  .min-prose ul:has(> li > strong:first-child) > li { padding-left: 15rem; }
  .min-prose ul:has(> li > strong:first-child) > li > strong:first-child { float: left; width: 13rem; margin: 0 0 0 -15rem; }
}
.min-prose .min-fig { margin-block: 1.6em; }
.min-prose .min-fig img { width: 100%; height: auto; border-radius: var(--r-lg); }
.min-fig__cap { display: block; margin-top: 8px; font-size: var(--fs-meta); line-height: 1.45; color: var(--muted); }
.min-prose img { max-width: 100%; height: auto; }

.min-side { display: grid; gap: 32px; align-content: start; }
.min-side__title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.005em; }
.min-team__note { font-size: var(--fs-meta); color: var(--ink); line-height: 1.5; margin-bottom: 12px; max-width: 52ch; }
.min-team__label { font-size: var(--fs-meta); font-weight: 600; color: var(--muted); margin: 16px 0 4px; }
.min-team__note + .min-team__label, .min-side__title + .min-team__label { margin-top: 0; }
.min-team__list { list-style: none; border-top: 1px solid var(--blue-line); }
.min-team__list li { display: grid; gap: 1px; padding: 10px 0; border-bottom: 1px solid var(--blue-line); }
.min-team__name { font-weight: 600; color: var(--brown); line-height: 1.35; }
.min-team__role { font-size: var(--fs-meta); color: var(--muted); line-height: 1.4; }
.min-team__list--names { columns: 2; column-gap: 24px; border-top: 0; }
.min-team__list--names li { break-inside: avoid; padding: 5px 0; border: 0; }
.min-team__list--names .min-team__name { font-weight: 500; color: var(--ink); }

.min-join { scroll-margin-top: 24px; }
.min-join > p { color: var(--ink); max-width: 52ch; }
.min-join__acts { display: grid; gap: 12px; margin-top: 20px; }
.min-join__phone { margin-top: 12px; font-size: var(--fs-meta); font-weight: 500; color: var(--muted) !important; }
.min-join__phone a { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.min-join__links { list-style: none; margin-top: 16px; border-top: 1px solid var(--blue-line); padding-top: 4px; }
.min-join__links .link { min-height: 44px; }
.min-join__links .link .ic { width: 20px; height: 20px; }
.min-join__tbc { margin-top: 8px; }
@media (min-width: 600px) and (max-width: 1079.98px) {
  .min-join__acts { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 1080px) {
  .min-page { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: stretch; }
  .min-main { grid-column: 1 / 8; }
  .min-side { grid-column: 9 / 13; align-content: start; }
  /* липка лише панель «Як долучитися»: список команди може бути довшим за екран */
  .min-join { position: sticky; top: calc(var(--head-h) + 24px); }
  .min-page:not(:has(.min-hero)) .min-side { padding-top: 6px; }
}

/* галерея 3–6 реальних фото */
.min-gal-sec { background: var(--paper); border-top: 1px solid var(--blue-line); }
.min-gallery { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.min-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.min-gallery--n3 li:first-child, .min-gallery--n5 li:first-child { grid-column: span 2; }
@media (min-width: 768px) {
  .min-gallery--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .min-gallery--n5 li { grid-column: span 2; }
  .min-gallery--n5 li:nth-child(-n+2) { grid-column: span 3; }
  .min-gallery--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .min-gallery { gap: 12px; }
  .min-gallery--n3 { grid-template-columns: 2fr 1fr; }
  .min-gallery--n3 li:first-child { grid-column: 1; grid-row: span 2; }
  .min-gallery--n3 li:first-child img { aspect-ratio: auto; }
}
@media (min-width: 1080px) {
  .min-gallery--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .min-gallery { gap: 16px; }
}

.min-more { background: var(--paper-2); }
.min-more h2 { margin-bottom: 8px; }
.min-more__list { list-style: none; display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 0; margin-bottom: 8px; }
.min-more__list li { display: inline-flex; align-items: baseline; gap: 8px; }
.min-more__list a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.min-more__list a:hover { text-decoration-thickness: 2.5px; }
.min-more__when { font-size: var(--fs-meta); font-weight: 600; color: var(--gold-ink); white-space: nowrap; }

/* ---------- Служіння: список ---------- */
.min-week-sec { background: var(--paper); }
.min-week { border-top: 1px solid var(--blue-line); }
.min-week__note { margin-top: 16px; font-size: var(--fs-meta); font-weight: 500; color: var(--muted); max-width: 60ch; }
@media (min-width: 768px) {
  .min-week .slot { padding-inline: 12px; }
}
.min-crew-sec { background: var(--paper-2); }
.min-crew { display: grid; grid-template-areas: "head" "photo" "list" "ask"; }
.min-crew__head { grid-area: head; }
.min-crew__head .lead { margin-bottom: 24px; }
.min-crew__photo { grid-area: photo; margin-bottom: 24px; }
.min-crew__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.min-crew__list { grid-area: list; list-style: none; border-top: 1px solid var(--blue-line); }
.min-crew__row {
  padding: 16px 36px 16px 0; border-bottom: 1px solid var(--blue-line);
}
.min-crew__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--brown); transition: color var(--dur-1); }
.min-crew__meta { margin-top: 2px; font-size: var(--fs-meta); font-weight: 600; color: var(--gold-ink); }
.min-crew__text { margin-top: 4px; font-size: var(--fs-meta); color: var(--ink); line-height: 1.5; max-width: 52ch; }
.min-crew__chev { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--blue); transition: transform var(--dur-1); }
.min-crew__row:hover .min-crew__title { color: var(--blue); }
.min-crew__row:hover .min-crew__chev { transform: translateX(2px); }
.min-crew__row:has(.slot__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.min-crew__ask { grid-area: ask; margin-top: 28px; }
.min-crew__ask > p { color: var(--ink); max-width: 52ch; margin-bottom: 16px; }
@media (min-width: 768px) {
  .min-crew { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; grid-template-areas: none; align-items: start; }
  .min-crew__head, .min-crew__photo, .min-crew__list, .min-crew__ask { grid-area: auto; }
  .min-crew__head { grid-column: 1 / -1; grid-row: 1; }
  .min-crew__photo { grid-column: 1 / 6; grid-row: 2 / span 2; margin: 0; }
  .min-crew__list, .min-crew__ask { grid-column: 6 / 13; }
  .min-crew__list { grid-row: 2; }
  .min-crew__ask { grid-row: 3; }
  .min-crew__ask .btn { flex: 0 0 auto; }
}
@media (min-width: 1080px) {
  .min-crew__head { grid-column: 1 / 8; }
  .min-crew__list, .min-crew__ask { grid-column: 7 / 13; }
}

/* ---------- Про нас ---------- */
.ab-sec { background: var(--paper); }
.ab-toc { display: none; }
.ab-part { scroll-margin-top: 24px; }
.ab-part + .ab-part { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--blue-line); }
.ab-lead { font-size: 1.25rem; font-weight: 500; line-height: 1.45; color: var(--ink); max-width: 44ch; margin-bottom: 16px; }
.ab-text { max-width: var(--measure); color: var(--ink); }
.ab-photo { margin-top: 28px; }
.ab-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }

.ab-pastor { margin-bottom: 16px; }
.ab-pastor__name { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); font-weight: 700; color: var(--brown); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.ab-pastor__role { margin-top: 2px; font-size: var(--fs-meta); font-weight: 600; color: var(--gold-ink); }
.ab-part .scripture { margin-top: 24px; }
.ab-more { margin-top: 16px; display: flex; flex-wrap: wrap; column-gap: 24px; }

.ab-part .ab-text + .ab-creed { margin-top: 24px; }
.ab-creed dt { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.005em; }
/* підрозділ секції: «Віровчення повністю», «Відео з історії церкви» */
.ab-sub { margin-top: 40px; margin-bottom: 12px; }
.ab-sub + .ab-text { margin-bottom: 16px; }
.ab-faith summary { font-size: 1.0625rem; }

.ab-vision {
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em;
  color: var(--brown); max-width: 16ch; text-wrap: balance; margin-bottom: 16px;
}

.ab-come__slots { border-top: 1px solid var(--blue-line); }
.ab-come__where { margin-top: 24px; }
.ab-come__addr { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); line-height: 1.45; }
.ab-come__addr .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }
.ab-come__addr b { font-weight: 600; color: var(--brown); }
.ab-come__mark { display: block; font-size: var(--fs-meta); color: var(--muted); font-weight: 500; }
.ab-come__where .btn-row { margin-top: 16px; }
.ab-come__links { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 8px; }
@media (min-width: 768px) { .ab-come__where .btn-row .btn { flex: 0 0 auto; } }

@media (min-width: 1080px) {
  .ab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .ab-toc { display: block; grid-column: 1 / 4; position: sticky; top: calc(var(--head-h) + 40px); align-self: start; }
  .ab-toc ol { list-style: none; border-top: 1px solid var(--blue-line); }
  .ab-toc li { border-bottom: 1px solid var(--blue-line); }
  .ab-toc a {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 0;
    font-size: var(--fs-meta); font-weight: 600; color: var(--muted); text-decoration: none;
    transition: color var(--dur-1);
  }
  .ab-toc a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; transition: background-color var(--dur-1); }
  .ab-toc a:hover { color: var(--blue); }
  .ab-toc a[aria-current] { color: var(--blue); }
  .ab-toc a[aria-current]::before { background: var(--gold); }
  .ab-body { grid-column: 4 / 13; min-width: 0; }
  .ab-part + .ab-part { margin-top: 64px; padding-top: 64px; }
  .ab-photo img { aspect-ratio: 16 / 9; }
}

/* ---------- Контакти ---------- */
.ct-head {
  display: grid; gap: 16px; margin-top: 20px;
  grid-template-areas: "call" "place" "acts";
}
.ct-head__call { grid-area: call; }
.ct-phone {
  display: inline-block; font-size: clamp(1.625rem, 1rem + 3.2vw, 3rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; text-decoration: none;
}
.ct-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold-light); text-underline-offset: 6px; }
.ct-head__hours { margin-top: 6px; font-size: var(--fs-meta); font-weight: 500; color: var(--mint); }
.ct-head__place { grid-area: place; display: flex; align-items: flex-start; gap: 10px; }
.ct-head__place .ic { width: 22px; height: 22px; color: var(--mint); margin-top: 1px; }
.ct-head__place > span { display: flex; flex-direction: column; }
.ct-head__street { font-weight: 600; font-size: 1.0625rem; }
.ct-head__town { font-size: 1.0625rem; }
.ct-head__mark { margin-top: 2px; font-size: var(--fs-meta); font-weight: 500; color: var(--mint); }
.ct-head__acts { grid-area: acts; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.ct-head__acts .btn { padding: 0 12px; }
@media (min-width: 600px) { .ct-head__acts { display: flex; flex-wrap: wrap; } .ct-head__acts .btn { padding: 0 20px; } }
@media (min-width: 768px) {
  .ct-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "call place" "acts acts"; column-gap: 56px; align-items: end; }
  .ct-head__place { padding-bottom: 4px; }
}

.ct-way-sec { background: var(--paper); }
.ct-way { display: grid; gap: 24px; align-items: start; }
.ct-way__head h2 { margin-bottom: 12px; }
.ct-addr { font-size: 1.25rem; font-weight: 600; color: var(--brown); line-height: 1.35; max-width: 34ch; }
.ct-way__addr .text-btn { margin-top: 4px; }
.ct-way__routes { min-width: 0; }
.ct-steps { margin: 12px 0 0; padding-left: 1.4em; max-width: 60ch; }
.ct-steps li + li { margin-top: 6px; }
.ct-steps li::marker { color: var(--gold-ink); font-weight: 700; font-variant-numeric: lining-nums; }
.ct-park { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: var(--fs-meta); font-weight: 500; color: var(--ink); }
.ct-park .ic { width: 20px; height: 20px; color: var(--muted); margin-top: 1px; }
@media (min-width: 768px) {
  .ct-way {
    grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 32px;
    grid-template-areas: "head head" "map routes" "shelter shelter";
  }
  .ct-way__head { grid-area: head; }
  .ct-way__map { grid-area: map; }
  .ct-way__routes { grid-area: routes; }
  .ct-way__shelter { grid-area: shelter; }
}
@media (min-width: 1080px) {
  .ct-way { grid-template-columns: 7fr 5fr; column-gap: 48px; }
  .ct-way__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; }
  .ct-way__head h2 { margin-bottom: 0; }
  .ct-way__addr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; }
  .ct-way__map { justify-content: center; gap: 32px; padding: 32px; min-height: 360px; }
  .ct-way__map .scheme { width: 100%; max-width: 640px; margin-inline: auto; }
  .ct-way__map .map__actions { justify-content: center; }
  .ct-way__map .map__actions .btn { flex: 0 0 auto; }
  .ct-way__map.has-iframe { padding: 0 0 20px; justify-content: flex-start; gap: 20px; }
  .ct-way__map.has-iframe .map__view { aspect-ratio: auto; flex: 1; min-height: 360px; }
}

.ct-write-sec { background: var(--paper-2); scroll-margin-top: 0; }
.ct-write-sec:focus { outline: none; }
.ct-write { display: grid; gap: 48px; }
.ct-write__main, .ct-write__side { min-width: 0; }
.ct-write__lead { margin-bottom: 24px; }
.ct-form { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.ct-form .field + .field { margin-top: 0; }
.ct-form textarea { font-family: inherit; } /* 01-base успадковує шрифт лише для button/input/select */
.ct-form__top:not(:has(*)) { display: none; }
.js .ct-ministry[data-hide] { display: none; }
.ct-reach > legend { margin-bottom: 2px; }
.ct-reach > .field__error { margin-top: 6px; }
.ct-reach__fields { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 600px) { .ct-reach__fields { grid-template-columns: 1fr 1fr; } }
.ct-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct-form__privacy { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; }
.ct-form__privacy .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--moss); }
.ct-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ct-send { width: 100%; }
@media (min-width: 600px) { .ct-send { width: auto; min-width: 200px; } }
.ct-send.is-busy:disabled { background: var(--blue-deep); color: #fff; cursor: progress; }
.ct-send__spin { animation: ct-spin 1s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-form__status { font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.ct-form__status:empty { display: none; }
.ct-errlist { list-style: none; margin-top: 4px; }
.ct-errlist li { line-height: 1.7; }
.ct-errlist li + li { margin-top: 4px; }
.ct-errlist a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.notice[tabindex="-1"]:focus { outline: none; }
.ct-sent { max-width: 640px; }
.ct-sent:focus { outline: none; }
.ct-sent .notice { font-size: 1rem; }
.ct-sent__next { margin-top: 16px; color: var(--ink); max-width: 56ch; }
.ct-sent .link { margin-top: 8px; }

.ct-side__title { font-size: 1.1875rem; font-weight: 700; color: var(--brown); margin-bottom: 8px; }
.ct-rows + .ct-side__title { margin-top: 32px; }
.ct-rows { list-style: none; border-top: 1px solid var(--blue-line); }
.ct-row {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 0;
  border-bottom: 1px solid var(--blue-line); color: var(--ink); text-decoration: none;
}
.ct-row > .ic { width: 22px; height: 22px; color: var(--blue); }
.ct-row__main { display: flex; flex-direction: column; min-width: 0; font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.ct-row__sub { font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.ct-row__sub .tbc { margin-top: 2px; }
.ct-row .ct-row__ext { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
a.ct-row:hover .ct-row__main { color: var(--blue); }
.ct-row--off > .ic { color: var(--muted); }

@media (min-width: 1080px) {
  .ct-write { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .ct-write__main { grid-column: 1 / 8; }
  .ct-write__side { grid-column: 9 / 13; padding-top: 8px; }
}

/* ---------- Помилки 404 / 500: синє поле на весь перший екран ---------- */
.err {
  background: var(--blue); color: #fff; --focus: var(--mint);
  border-bottom: 1px solid var(--gold);
  min-height: calc(100svh - var(--head-h) - var(--dock-h));
  display: grid; align-items: center;
}
.err__inner {
  width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto;
  padding: 36px var(--gutter) 44px;
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
}
/* знак-печатка: на телефоні й планшеті вже є в шапці — лише на десктопі, праворуч, як тиха печатка */
.err__mark { display: none; }
.err__title {
  font-size: clamp(2.125rem, 1.5rem + 3vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em;
  color: #fff; max-width: 15ch; text-wrap: balance; hyphens: manual;
}
.err__rule { display: block; width: 56px; height: 2px; margin-top: 16px; background: var(--gold); }
.err__text { margin-top: 16px; max-width: 48ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 500; line-height: 1.5; color: #fff; }
.err a:not(.btn) { color: #fff; }

.err__search { margin-top: 28px; max-width: 560px; }
.err__label { display: block; margin-bottom: 8px; font-weight: 600; color: #fff; }
.err__search-row { display: flex; gap: 8px; }
.err__search-row .input-ic { flex: 1; min-width: 0; }
.err .input { background: #fff; border-color: #fff; }
.err .input:hover { border-color: var(--blue-tint); }
.err .input:focus-visible { outline-color: var(--mint); border-color: #fff; }
.err__search-row .btn { flex: none; background: transparent; color: #fff; border-color: rgb(255 255 255 / .7); padding: 0 18px; }
.err__search-row .btn:hover { background: rgb(255 255 255 / .1); }

.err__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.err__acts .btn:first-child { grid-column: 1 / -1; }
.err__acts .btn { padding: 0 12px; }
@media (min-width: 600px) {
  .err__acts { display: flex; flex-wrap: wrap; }
  .err__acts .btn { padding: 0 20px; }
}
.err__links { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 8px; }
.err__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-color: rgb(255 255 255 / .6); }
.err__links a:hover { text-decoration-color: var(--gold-light); text-decoration-thickness: 2px; }

.err__call { margin-top: 28px; }
.err__call > p:first-child { font-size: var(--fs-meta); font-weight: 500; color: var(--mint); }
.err__phone {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; flex-wrap: wrap;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); font-weight: 800; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums; text-decoration: none;
}
.err__phone .ic { width: 26px; height: 26px; color: var(--mint); }
.err__phone:hover > span { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold-light); text-underline-offset: 6px; }
.err__hours { font-size: var(--fs-meta); font-weight: 500; color: var(--mint); }

.err__sunday {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 24px;
  font-weight: 600; text-decoration: none;
}
.err__sunday .ic { width: 20px; height: 20px; color: var(--mint); }
.err__sunday .err__chev { width: 18px; height: 18px; transition: transform var(--dur-1); }
.err__sunday:hover span { text-decoration: underline; text-decoration-color: var(--gold-light); text-underline-offset: 4px; }
.err__sunday:hover .err__chev { transform: translateX(2px); }
.err__code { margin-top: 12px; font-size: var(--fs-small); font-weight: 600; color: var(--mint); font-variant-numeric: lining-nums; }
@media (min-width: 1080px) {
  .err__inner { padding-top: 64px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; justify-items: start; }
  .err__inner > * { grid-column: 1; }
  .err__inner > .err__search { justify-self: stretch; }
  .err__mark { display: block; grid-column: 2; grid-row: 1 / span 9; align-self: center; width: 144px; height: auto; margin-right: 48px; }
}

/* ==== 24-video.css ==== */
/* ======================================================================
   ВІДЕО — архів записів (/video/) і сторінка запису (/video/<slug>/).
   Спільне використовуємо як є: .page-head, .chips, .slot/.slots, .row-bleed, .notice, .empty, .pager, .sec-head;
   каркас архіву — той самий, що в проповідей (.sr-arch, .sr-rail, .sr-year, .sr-months, .sr-status, .sr-month);
   плеєр-фасад — .sr-player (youtube-nocookie лише за тапом). Нове — з префіксом .vd-.
   ====================================================================== */

/* ---------- поле архіву: пошук і вид запису на синьому ---------- */
.vd-seek { margin-top: 24px; max-width: 640px; }
.vd-input { min-height: 52px; background: #fff; border-color: #fff; }
.vd-input:hover { border-color: var(--blue-tint); }
.vd-input:focus-visible { background: #fff; border-color: #fff; outline: 3px solid var(--mint); outline-offset: 3px; }
.vd-input::-webkit-search-cancel-button { cursor: pointer; }
/* чипи на синьому: білі контурні; вибраний — білий фон, синій текст */
.vd-chips { margin-top: 12px; padding: 0; }
.vd-chips a { background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / .7); }
.vd-chips a:hover { background: rgb(255 255 255 / .1); }
.vd-chips a:active { background: rgb(255 255 255 / .16); }
.vd-chips a[aria-current] { background: #fff; color: var(--blue); border-color: #fff; }
@media (max-width: 419.98px) {
  .vd-chips { gap: 6px; }
  .vd-chips a { padding: 0 11px; }
}
@media (min-width: 1080px) {
  .page-head--vd .page-head__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 64px; align-items: end;
  }
  .page-head--vd .page-head__inner > :not(.vd-seek) { grid-column: 1; }
  .page-head--vd .vd-seek { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; }
}

/* ---------- архів: фільтри в рейці ---------- */
.vd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vd-filters .sr-year .select { width: 10.5rem; }
.vd-filters .vd-who .select { width: 14rem; }
.vd-filters noscript .btn { align-self: flex-end; }
@media (max-width: 599.98px) {
  .vd-rail .sr-rail__head { flex-direction: column; align-items: stretch; }
  .vd-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
  .vd-filters .sr-year { flex-direction: column; align-items: stretch; gap: 4px; }
  .vd-filters .sr-year .select, .vd-filters .vd-who .select { width: 100%; }
}
@media (min-width: 1080px) {
  .vd-filters { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .vd-filters .sr-year .select, .vd-filters .vd-who .select { width: 100%; }
}
.vd-results { max-width: 860px; }
.vd-example { margin-top: 20px; font-size: var(--fs-small); color: var(--muted); }
.vd-example .tag-example { margin-right: 4px; }

/* ---------- рядок запису: мініатюра 16:9 ліворуч, дата · вид, назва, проповідник, опис ---------- */
.vd-list { list-style: none; border-top: 1px solid var(--blue-line); }
.sr-month .vd-list { border-top: 0; }
.vd-row {
  position: relative;
  display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--blue-line);
}
.vd-row__media {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r-sm); background: var(--blue-tint);
}
.vd-row__media img { width: 100%; height: 100%; object-fit: cover; }
.vd-dur {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px;
  background: rgb(59 33 25 / .85); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
.vd-row__none { display: grid; place-items: center; height: 100%; color: var(--blue-soft); }
.vd-row__none .ic { width: 32px; height: 32px; }
.vd-row__body { min-width: 0; }
.vd-row__meta {
  display: flex; flex-wrap: wrap; column-gap: 8px; font-size: var(--fs-small); font-weight: 600; line-height: 1.45; color: var(--muted);
}
.vd-row__meta time { color: var(--gold-ink); font-variant-numeric: lining-nums; }
/* роздільник «·» — у кінці попереднього пункту: при переносі рядок не починається з крапки */
.vd-row__meta > :not(:last-child)::after { content: "·"; margin-left: 8px; color: var(--muted); }
.vd-row__title { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--brown); text-wrap: pretty; }
.vd-row__link { color: var(--brown); text-decoration: none; transition: color var(--dur-1); }
.vd-row__link::after { content: ""; position: absolute; inset: 0; }
.vd-row__link:focus-visible { outline: none; }
.vd-row:has(.vd-row__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.vd-row:hover .vd-row__link { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.vd-row__who { margin-top: 2px; font-size: var(--fs-meta); color: var(--muted); }
.vd-row__text {
  margin-top: 4px; font-size: var(--fs-meta); line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vd-row__note, .vd-row__found, .vd-row__parts {
  display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 6px;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.35; color: var(--muted);
}
.vd-row__note .ic, .vd-row__found .ic, .vd-row__parts .ic { width: 16px; height: 16px; flex: none; }
.vd-row__found { padding: 2px 8px; border-radius: var(--r-sm); background: var(--blue-tint); color: var(--blue); }
.vd-row__parts .ic { color: var(--blue); }
.vd-row mark { background: var(--blue-tint); color: var(--ink); border-radius: 3px; padding: 0 1px; box-shadow: 0 1.5px 0 var(--blue-soft); }
@media (max-width: 359.98px) { .vd-row { grid-template-columns: 96px minmax(0, 1fr); } .vd-row__text { display: none; } }
@media (min-width: 600px) {
  .vd-row { grid-template-columns: 176px minmax(0, 1fr); column-gap: 20px; padding: 20px 0; }
  .vd-row__media { border-radius: var(--r-md); }
  .vd-row__title { font-size: 1.1875rem; line-height: 1.28; }
  .vd-row__meta { font-size: var(--fs-meta); font-weight: 500; }
  .vd-row__meta time { font-weight: 600; }
}
@media (min-width: 1080px) { .vd-results .vd-row { grid-template-columns: 208px minmax(0, 1fr); column-gap: 24px; } }

/* ======================================================================
   СТОРІНКА ЗАПИСУ
   <1080: один потік — плеєр, дії, опис, головне, частини (тап по частині пришпилює плеєр угорі, як на проповіді).
   ≥1080: плеєр ліворуч липкий, опис і частини праворуч. Пісня / без плеєра — одна колонка.
   ====================================================================== */
.vd-meta__word .ic { color: var(--gold-light); }
.vd-meta__word .tag-example { margin-left: 4px; }
.vd-watch-sec { background: var(--paper); }
.vd-watch { display: flex; flex-direction: column; }
.vd-aside { display: contents; }
.vd-main { margin-top: 28px; min-width: 0; order: 5; } /* після плеєра, нотатки й дій (.sr-player/.sr-note/.sr-acts мають order 1–3) */
.vd-gone { order: 1; }
.vd-player__from {
  position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px;
  background: #fff; color: var(--blue); font-size: .875rem; font-weight: 600; line-height: 1.3;
  font-variant-numeric: lining-nums; pointer-events: none;
}
.vd-gone .notice { max-width: 40rem; }
.vd-acts .link .ic { width: 18px; height: 18px; }

.vd-summary { max-width: var(--measure); font-size: 1.1875rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.vd-summary .tag-example { vertical-align: 2px; }
.vd-main > .notice { margin-bottom: 20px; max-width: 40rem; }
.vd-h2 { margin: 36px 0 12px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.vd-main > .vd-h2:first-child { margin-top: 0; }
.vd-points { list-style: none; max-width: var(--measure); }
.vd-points li { position: relative; padding-left: 28px; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.vd-points li + li { margin-top: 10px; }
/* пункт — коротка золота лінія, як під назвою в полі */
.vd-points li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 14px; height: 2px; background: var(--gold); }
.vd-hint { margin: -4px 0 8px; font-size: var(--fs-meta); color: var(--muted); }
.vd-hint .tag-example { margin-left: 4px; }

/* частини запису: Slot «час · назва · вид, проповідник, тривалість · ▶»; увесь рядок — перемотка плеєра */
.vd-parts { border-top: 1px solid var(--blue-line); --when-w: 4.5rem; }
.vd-part { min-height: 64px; padding: 12px 0; }
.vd-part .slot__time { font-size: 1.125rem; }
.vd-part__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }
.vd-part__meta > :not(:last-child)::after { content: "·"; margin-left: 8px; }
.vd-part__meta:empty { display: none; }
.vd-part__dur { margin-top: 2px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); white-space: nowrap; }
.vd-part--sermon .slot__title { font-weight: 700; }
.vd-part--sermon .vd-part__kind { color: var(--blue); font-weight: 600; }
.vd-part__page {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-top: 2px;
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.vd-part__page .ic { width: 18px; height: 18px; }
.vd-part__page:hover { text-decoration-thickness: 2.5px; }
.vd-part__play { pointer-events: none; }
.vd-part__play .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.vd-parts .slot--link { margin-inline: -12px; padding-inline: 12px; border-radius: var(--r-sm); }
.vd-part.is-current { background: var(--blue-tint); }
.vd-part.is-current .slot__time { color: var(--blue); }
@media (min-width: 768px) { .vd-parts { --when-w: 5.25rem; } .vd-part .slot__time { font-size: 1.25rem; } }

.vd-sermons { list-style: none; border-top: 1px solid var(--blue-line); }
.vd-sermons li { padding: 12px 0; border-bottom: 1px solid var(--blue-line); }
.vd-sermons .link { font-weight: 600; }
.vd-sermons__who { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--muted); }

@media (min-width: 1080px) {
  .vd-watch { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .vd-aside { display: block; position: sticky; top: calc(var(--head-h) + 24px); }
  .vd-main { margin-top: 0; }
  .vd-watch--solo { grid-template-columns: minmax(0, 880px); row-gap: 32px; }
  .vd-watch--solo .vd-aside { position: static; }
}

/* ---------- ще записи ---------- */
.vd-more-sec { background: var(--paper-2); }
.vd-more { display: grid; gap: 48px; }
.vd-more .sec-head h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
@media (min-width: 1080px) {
  .vd-more { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; }
  .vd-more .vd-row { grid-template-columns: 160px minmax(0, 1fr); }
  /* лише одна колонка («Того ж дня» без проповідника) — на всю ширину, рядки у дві колонки */
  .vd-more__col:only-child { grid-column: 1 / -1; }
  .vd-more__col:only-child .vd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-top: 0; }
  .vd-more__col:only-child .vd-row:nth-child(-n+2) { border-top: 1px solid var(--blue-line); }
}

/* ==== 30-admin.css ==== */
/* ======================================================================
   АДМІНКА (напрям E) — оболонка й екрани.
   Той самий світ, що й сайт: синя смуга зверху (як поле сторінки, з золотим порогом), --paper-2 для
   навігації, білий робочий простір; ті самі кнопки, поля, чипи, бейджі, Slot-рядки, .notice, .dlg.
   Режим Operate: розміри в rem без clamp, цілі 48 px на десктопі, 13 px лише бейджі, рух лише для стану.
   Брейкпоінти: <768 — док унизу; 768–1079 — «Меню» у смузі (лист праворуч); ≥1080 — ліва навігація;
   ≥1280 — повні таблиці й бокова колонка огляду.
   ====================================================================== */
.adm { --adm-top-h: 56px; --adm-side-w: 264px; background: var(--paper); }
@media (min-width: 768px) { .adm { --adm-top-h: 64px; } }

/* ---------- верхня смуга ---------- */
.adm-top {
  height: var(--adm-top-h); position: relative; z-index: 30;
  background: var(--blue); color: #fff; --focus: var(--mint);
  border-bottom: 1px solid var(--gold);
}
.adm-top__inner {
  height: 100%; display: flex; align-items: center; gap: 4px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}
@media (min-width: 768px) {
  .adm-top { position: sticky; top: 0; }
  .adm-top__inner { gap: 8px; padding-right: max(16px, env(safe-area-inset-right)); }
}
@media (min-width: 1080px) { .adm-top__inner { padding-left: 24px; } }

.adm-brand {
  display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 0; margin-right: auto;
  color: #fff; text-decoration: none; font-size: 1.0625rem; line-height: 1.2; white-space: nowrap;
}
.adm-brand__mark { width: 28px; height: auto; border-radius: 3px; margin-right: 4px; }
.adm-brand__name { font-weight: 700; }
.adm-brand__sep { color: var(--gold-light); }
.adm-brand__area { font-weight: 600; color: var(--mint); }
@media (max-width: 359.98px) { .adm-brand__name, .adm-brand__sep { display: none; } }

.adm-top__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: var(--r-md);
  color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1);
}
.adm-top__btn .ic { width: 20px; height: 20px; }
.adm-top__btn:hover { background: rgb(255 255 255 / .1); }
.adm-top__btn:active { background: rgb(255 255 255 / .16); }
.adm-top__site:hover .adm-top__site-l { text-decoration: underline; text-decoration-color: var(--gold-light); text-underline-offset: 4px; }
@media (max-width: 599.98px) {
  .adm-top__site { padding: 0; }
  .adm-top__site-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.adm-top__menu { display: none; border: 1.5px solid rgb(255 255 255 / .7); min-height: 44px; }
@media (min-width: 768px) and (max-width: 1079.98px) { .adm-top__menu { display: inline-flex; } }

/* меню користувача: <details> з панеллю; закриття по кліку поза ним і Esc — 50-admin.js */
.adm-user { position: relative; }
.adm-user__btn {
  list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 8px; border-radius: var(--r-md); cursor: pointer;
  font-weight: 600; font-size: .9375rem; white-space: nowrap;
  transition: background-color var(--dur-1);
}
.adm-user__btn::-webkit-details-marker { display: none; }
.adm-user__btn:hover { background: rgb(255 255 255 / .1); }
.adm-user__av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--blue); font-weight: 700; font-size: .9375rem;
}
.adm-user__name { display: none; }
.adm-user__chev { width: 18px; height: 18px; transition: rotate var(--dur-2) var(--ease-out); }
.adm-user[open] .adm-user__chev { rotate: 180deg; }
@media (min-width: 1080px) { .adm-user__name { display: inline; } }
.adm-user__pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: min(300px, calc(100vw - 16px)); padding: 8px;
  background: #fff; color: var(--ink); --focus: var(--blue-soft);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 28px -8px rgb(59 33 25 / .30);
}
.adm-user__who { display: grid; gap: 2px; padding: 8px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--blue-line); }
.adm-user__who b { color: var(--brown); font-weight: 700; font-size: 1rem; }
.adm-user__who span { font-size: var(--fs-meta); color: var(--muted); overflow-wrap: anywhere; line-height: 1.4; }
.adm-user__item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
  border: 0; border-radius: var(--r-sm); background: none; text-align: left;
  color: var(--ink); font-weight: 500; font-size: 1rem; text-decoration: none;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.adm-user__item .ic { width: 20px; height: 20px; color: var(--blue); }
.adm-user__item:hover { background: var(--blue-tint); color: var(--blue); }

/* ---------- каркас: ліва навігація + робоча область ---------- */
.adm-side { display: none; }
.adm-main { display: block; min-width: 0; padding: 20px var(--gutter) calc(var(--dock-h) + env(safe-area-inset-bottom) + 40px); }
.adm-main:focus { outline: none; }
.adm-page { max-width: 1120px; }
@media (min-width: 768px) { .adm-main { padding-top: 28px; padding-bottom: 56px; } }
@media (min-width: 1080px) {
  .adm-shell { display: grid; grid-template-columns: var(--adm-side-w) minmax(0, 1fr); align-items: start; }
  .adm-side {
    display: block; position: sticky; top: var(--adm-top-h);
    height: calc(100dvh - var(--adm-top-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 20px 12px 32px; background: var(--paper-2); border-right: 1px solid var(--blue-line);
  }
  .adm-main { padding-top: 32px; }
}

/* навігація (ліва панель і лист «Меню») */
.adm-nav__group + .adm-nav__group { margin-top: 20px; }
.adm-nav__label { padding: 0 12px 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }
.adm-nav ul { list-style: none; display: grid; gap: 2px; }
.adm-nav__link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; text-align: left;
  color: var(--ink); font-size: 1rem; font-weight: 500; text-decoration: none; line-height: 1.25;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.adm-nav__link .ic { width: 20px; height: 20px; color: var(--muted); transition: color var(--dur-1); }
.adm-nav__text { flex: 1; min-width: 0; }
.adm-nav__link:hover { background: #fff; color: var(--blue); }
.adm-nav__link:hover .ic { color: var(--blue); }
.adm-nav__link:active { background: var(--blue-line); }
.adm-nav__link[aria-current] { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.adm-nav__link[aria-current] .ic { color: var(--blue); }
.adm-nav__link:focus-visible { outline-offset: -3px; }

.adm-sheet .adm-nav { padding: 4px 12px 8px; }
.adm-sheet .adm-nav__link { min-height: 52px; font-size: 1.0625rem; font-weight: 600; color: var(--brown); }
.adm-sheet .adm-nav__link:hover { background: var(--blue-tint); }
.adm-sheet .adm-nav__link[aria-current] { color: var(--blue); }
.adm-sheet__more { display: grid; gap: 2px; margin: 4px 12px 16px; padding-top: 8px; border-top: 1px solid var(--blue-line); }
.adm-sheet__more .adm-nav__link { color: var(--blue); }
.adm-sheet__more .adm-nav__link .ic { color: var(--blue); }

/* док: лічильник на іконці */
.adm-dock__n {
  position: absolute; top: -2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--blue); color: #fff; box-shadow: 0 0 0 2px #fff;
  font-size: var(--fs-dock); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- заголовок сторінки ---------- */
.adm-head { margin-bottom: 24px; }
.adm-head__back { margin: -8px 0 4px; }
.adm-head__back a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-size: var(--fs-meta); font-weight: 600; color: var(--blue); text-decoration: none;
}
.adm-head__back a .ic { width: 18px; height: 18px; margin-left: -4px; }
.adm-head__back a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.adm-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.adm-head__text { min-width: 0; flex: 1 1 22rem; }
.adm-head__title {
  font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--brown); text-wrap: balance;
}
.adm-head__lead { margin-top: 6px; font-size: 1.0625rem; color: var(--ink); max-width: 64ch; }
.adm-head__lead .tag-example { font-size: var(--fs-small); }
.adm-head__acts { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599.98px) {
  .adm-head__acts { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .adm-head__acts .btn { padding-inline: 12px; }
}
@media (min-width: 1080px) { .adm-head__title { font-size: 2rem; } }
/* лише на вужчих екранах (там, де деталь — окремий екран) */
@media (min-width: 1080px) { .adm-lt-lg { display: none !important; } }

.adm-flash { display: grid; gap: 12px; margin-bottom: 24px; }
.adm-flash .notice { max-width: 72ch; }

/* ---------- секції екрана ---------- */
.adm-sec + .adm-sec { margin-top: 40px; }
.adm-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.adm-sec__head .link { min-height: 44px; }
.adm-h2 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--brown);
}
.adm-h2 .ic { width: 22px; height: 22px; color: var(--blue); }
@media (min-width: 1080px) { .adm-h2 { font-size: 1.375rem; } }
.adm-sec__lead { margin-top: 4px; font-size: var(--fs-meta); color: var(--muted); max-width: 64ch; }
.adm-sec > .slots, .adm-sec > .adm-msgs { margin-top: 12px; border-top: 1px solid var(--blue-line); }
.adm-hint { font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; max-width: 60ch; }
.adm-muted-w { font-weight: 500; color: var(--muted); }
.adm-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Slot-рядок «перейти до дії» (огляд): замість 48-px іконки — «Перевірити ›» */
.slot--adm { grid-template-columns: var(--when-w) minmax(0, 1fr) 24px; }
.adm-slots .slot--link { margin-inline: -12px; padding-inline: 12px; }
.slot--adm .slot__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; }
.slot--adm__go {
  grid-area: act; justify-self: end; display: inline-flex; align-items: center; gap: 2px;
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
}
.slot--adm__go > span { display: none; }
.slot--adm__go .ic { width: 20px; height: 20px; transition: transform var(--dur-1); }
.slot--adm:hover .slot--adm__go .ic { transform: translateX(2px); }
@media (min-width: 600px) {
  .slot--adm { grid-template-columns: var(--when-w) minmax(0, 1fr) auto; }
  .slot--adm__go > span { display: inline; }
}
/* «Цього тижня» в адмінці: день над часом у всіх рядках; «сьогодні» — тінт у межах колонки, без виходу за поля */
.adm-week .slot__when { flex-direction: column; align-items: flex-start; gap: 0; }
.adm-week .slot--today { margin-inline: -12px; padding-inline: 12px; border-radius: var(--r-sm); }
.adm-week .slot__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }

/* ---------- огляд ---------- */
.adm-overview { display: grid; gap: 40px; }
.adm-panel { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--blue-line); border-radius: var(--r-lg); background: #fff; }
.adm-livebox__now { font-size: 1rem; color: var(--ink); }
@media (min-width: 1280px) {
  .adm-overview { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
  .adm-overview__aside { position: sticky; top: calc(var(--adm-top-h) + 32px); }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .adm-overview__aside .adm-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .adm-livebox > .adm-h2, .adm-livebox__now, .adm-pv-strip { grid-column: 1; }
  .adm-livebox > .adm-seg, .adm-livebox > .adm-hint, .adm-livebox > .link { grid-column: 2; }
  .adm-livebox > .adm-seg { grid-row: 1 / span 2; }
}

/* міні-прев'ю «як на сайті»: синє поле з рядком трансляції */
.adm-pv-strip { display: grid; gap: 2px; padding: 10px 14px 4px; border-radius: var(--r-md); background: var(--blue); color: #fff; }
.adm-pv-strip__label { font-size: var(--fs-meta); font-weight: 500; color: var(--mint); }
.adm-pv-strip .stream-row, .adm-pv .stream-row { margin-top: 0; min-height: 44px; cursor: default; }
.adm-pv-strip .stream-row:hover span, .adm-pv .stream-row:hover span { text-decoration: none; }

/* ---------- сегментний перемикач ---------- */
.adm-seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.adm-seg > legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.adm-seg__opts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  background: var(--paper-2); border: 1px solid var(--blue-line); border-radius: var(--r-md);
}
.adm-seg__opt { position: relative; display: grid; }
.adm-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.adm-seg__opt > span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 4px 8px; border-radius: 10px; text-align: center;
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.2; color: var(--muted);
  transition: background-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
}
.adm-seg__opt input:hover + span { color: var(--blue); }
.adm-seg__opt input:checked + span { background: #fff; color: var(--blue); box-shadow: 0 0 0 1px var(--blue-line), 0 2px 6px -3px rgb(59 33 25 / .28); }
.adm-seg__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.adm-seg__opt .live-dot { display: none; width: 8px; height: 8px; }
.adm-seg__opt--on input:checked + span { color: var(--live); }
.adm-seg__opt--on input:checked + span .live-dot { display: inline-block; }

/* ---------- фільтри списку ---------- */
.adm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.adm-filters__search { flex: 1 1 16rem; max-width: 26rem; }
.adm-filters .chips { margin: 0; padding: 0; flex-wrap: wrap; }
.adm-filters .chips button { min-height: 44px; padding: 0 14px; }
.adm-chip-n { margin-left: 2px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.chips button[aria-pressed="true"] .adm-chip-n { color: rgb(255 255 255 / .85); }
.adm-filters__more { display: flex; flex-wrap: wrap; gap: 12px; }
.adm-filters__status { min-height: 0; margin-top: 8px; }
.adm-filters__status:empty { margin-top: 0; }
@media (min-width: 1080px) { .adm-filters .chips button { min-height: 40px; } } /* ціль 48: 40 + паддинг обгортки */

/* ---------- таблиця-список ---------- */
.adm-list { margin-top: 16px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; }
.adm-table th {
  padding: 8px 12px; text-align: left; white-space: nowrap;
  font-size: var(--fs-meta); font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--blue-line);
}
.adm-table td { padding: 8px 12px; vertical-align: middle; border-bottom: 1px solid var(--blue-line); }
.adm-table tbody tr { transition: background-color var(--dur-1); }
.adm-table tbody tr:hover { background: var(--paper-2); }
.adm-table tbody tr.is-selected { background: var(--blue-tint); }
.adm-table .adm-table__sel { width: 48px; padding: 0 0 0 0; }
.adm-cb { display: grid; place-items: center; width: 48px; height: 48px; margin-left: -13px; cursor: pointer; }
.adm-cb input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.adm-t-date { white-space: nowrap; color: var(--gold-ink); font-weight: 600; font-size: var(--fs-meta); font-variant-numeric: lining-nums; }
.adm-t-main { min-width: 12rem; }
.adm-t-title { color: var(--brown); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.adm-t-title:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.adm-t-sub {
  display: none; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px;
  font-size: var(--fs-meta); color: var(--muted); line-height: 1.4;
}
.adm-t-sub time { color: var(--gold-ink); font-weight: 600; }
.adm-t-dots { column-gap: 8px; }
.adm-t-dots > * + *::before { content: "·"; margin-right: 8px; color: var(--muted); font-style: normal; font-weight: 500; }
.adm-t-acts .btn { min-width: 8.5rem; }
.adm-t-none { color: var(--muted); font-style: italic; }
.adm-t-muted { color: var(--muted); font-size: var(--fs-meta); }
.adm-t-src { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.adm-t-src .ic { width: 16px; height: 16px; color: var(--blue); }
.adm-t-acts { text-align: right; white-space: nowrap; }
.adm-t-acts .btn + .icon-btn { margin-left: 4px; }
.adm-t-acts .icon-btn { display: inline-grid; vertical-align: middle; color: var(--muted); }
.adm-t-acts .icon-btn:hover { color: var(--error); background: var(--error-tint); }
.adm-t-acts .icon-btn .ic { width: 20px; height: 20px; }
.adm-t-chev { display: none; }
.adm-table .adm-xl { display: none; }
@media (min-width: 768px) and (max-width: 1279.98px) { .adm-t-sub--md { display: flex; } }
@media (min-width: 1280px) { .adm-table .adm-xl { display: table-cell; } }

/* телефон: кожен рядок — «прапорець · назва з метою · ›», уся назва — посилання на весь рядок */
@media (max-width: 767.98px) {
  .adm-table thead { display: none; }
  .adm-table, .adm-table tbody { display: block; }
  .adm-table tr {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start;
    padding: 12px 0; border-bottom: 1px solid var(--blue-line); position: relative;
  }
  .adm-table tbody tr:hover { background: none; }
  .adm-table tbody tr:active { background: var(--blue-tint); }
  .adm-table td { display: block; padding: 0; border: 0; }
  .adm-table .adm-hide-sm { display: none; }
  .adm-table .adm-table__sel { width: auto; position: relative; z-index: 1; margin-top: -12px; }
  .adm-t-main { min-width: 0; padding-right: 32px !important; }
  .adm-t-title { font-size: 1.0625rem; }
  .adm-t-title::after { content: ""; position: absolute; inset: 0; }
  .adm-t-title:focus-visible { outline: none; }
  .adm-table tr:has(.adm-t-title:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 4px; }
  .adm-t-sub--sm { display: flex; }
  .adm-t-chev { display: block; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--blue); }
}
.adm-list__none .empty { padding-top: 24px; }
.adm-list + .pager { margin-top: 24px; }

/* ---------- липка панель дій (форма; масові дії) ---------- */
.adm-bar {
  position: sticky; bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 24px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter);
  background: #fff; border-top: 1px solid var(--blue-line); box-shadow: var(--shadow-dock);
}
body.is-typing .adm-bar { bottom: 0; }
.adm-bar__state { font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.adm-bar__state.is-dirty { color: var(--gold-ink); font-weight: 600; }
.adm-bar__state b { color: var(--brown); font-variant-numeric: tabular-nums lining-nums; }
.adm-bar__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
.adm-bar__acts .text-btn { margin-right: 4px; }
@media (max-width: 599.98px) {
  .adm-bar__acts { width: 100%; }
  .adm-bar__acts .btn { flex: 1 1 0; padding-inline: 12px; }
  .adm-bar--bulk .adm-bar__acts .text-btn { order: 3; flex-basis: 100%; justify-content: center; min-height: 44px; }
}
.adm-bar--bulk { margin-top: 16px; }

/* ---------- підтвердження ---------- */
.adm-confirm .dlg__title { margin: 0; font-size: 1.1875rem; }
.adm-confirm__name { font-weight: 700; color: var(--brown); overflow-wrap: anywhere; }
.adm-confirm__name:empty { display: none; }

/* ---------- кроки статусу ---------- */
.adm-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-steps__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }
.adm-steps__item + .adm-steps__item::before { content: ""; width: 20px; height: 1px; background: var(--blue-soft); }
.adm-steps__mark {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--blue-line); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums;
}
.adm-steps__mark .ic { width: 16px; height: 16px; }
.adm-steps__item.is-done { color: var(--blue); }
.adm-steps__item.is-done .adm-steps__mark { background: var(--blue); border-color: var(--blue); color: #fff; }
.adm-steps__item.is-current { color: var(--brown); }
.adm-steps__item.is-current .adm-steps__mark { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }

/* ---------- форми: групи налаштувань ---------- */
.adm-fs { display: grid; align-items: start; gap: 16px; padding-block: 28px; border-top: 1px solid var(--blue-line); }
.adm-form > .adm-fs:first-child { border-top: 0; padding-top: 0; }
.adm-fs__intro p { margin-top: 4px; font-size: var(--fs-meta); color: var(--muted); max-width: 44ch; }
.adm-fs__fields { display: grid; gap: 20px; max-width: 40rem; }
.adm-fs__fields .field + .field, .adm-row2 .field + .field { margin-top: 0; }
.adm-row2 { display: grid; gap: 20px; }
@media (min-width: 600px) { .adm-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; } }
@media (min-width: 1080px) { .adm-fs { grid-template-columns: 15rem minmax(0, 1fr); column-gap: 48px; } }
.adm-fs__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px;
  border: 1px solid var(--blue-line); border-radius: var(--r-md); color: var(--blue); font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-1);
}
.adm-fs__link:hover { background: var(--blue-tint); }
.adm-fs__link .ic { width: 20px; height: 20px; }

/* вибір радіо-рядками (стан ефіру) */
.adm-choices { display: grid; gap: 8px; }
.adm-choices > legend.adm-h2 { margin-bottom: 12px; font-size: 1.25rem; }
.adm-choices .check {
  padding: 14px 16px; border: 1px solid var(--blue-line); border-radius: var(--r-md);
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.adm-choices .check:hover { border-color: var(--blue-soft); }
.adm-choices .check:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.adm-choices .check__label { font-weight: 600; color: var(--brown); }
.adm-choices .check__hint { color: var(--ink); }
@media (min-width: 1080px) { .adm-choices > legend.adm-h2 { font-size: 1.375rem; } }

/* ---------- трансляція ---------- */
.adm-live { display: grid; gap: 32px; }
.adm-live__ctl { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1080px) {
  .adm-live { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ctl pv" "sched pv"; column-gap: 48px; align-items: start; }
  .adm-live__ctl { grid-area: ctl; }
  .adm-preview { grid-area: pv; position: sticky; top: calc(var(--adm-top-h) + 32px); }
  .adm-live__sched { grid-area: sched; }
}
.adm-preview { display: grid; gap: 12px; }
.adm-preview .chips { margin: 0; padding: 0; flex-wrap: wrap; }
.adm-preview .chips button { min-height: 40px; padding: 0 12px; }
.adm-preview__text { font-size: 1rem; color: var(--ink); min-height: 3em; }
.adm-pv { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--blue-line); }
.adm-pv__cap { font-size: var(--fs-meta); font-weight: 500; color: var(--muted); margin-top: 6px; }
.adm-pv__cap:first-child { margin-top: 0; }
.adm-pv__head {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px 0 14px;
  border-radius: var(--r-md); background: var(--blue); color: #fff;
}
.adm-pv__head img { width: 22px; height: auto; border-radius: 2px; }
.adm-pv__name { margin-right: auto; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.adm-pv .status-pill { display: inline-flex; font-size: .875rem; padding: 0 12px; }
.adm-pv .status-pill[hidden] { display: none; }
.adm-pv__none { font-size: var(--fs-meta); color: var(--mint); }
.adm-pv__field { padding: 14px 14px 6px; border-radius: var(--r-md); background: var(--blue); color: #fff; }
.adm-pv__lead { display: block; font-weight: 600; font-size: 1rem; }
.adm-pv__time { display: block; margin-top: 2px; font-weight: 800; font-size: 2.75rem; line-height: .95; letter-spacing: -0.03em; font-variant-numeric: lining-nums proportional-nums; }
.adm-pv__rule { display: block; width: 40px; height: 2px; margin: 8px 0 2px; background: var(--gold); }
.adm-pv__dock {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 60px;
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--blue-line);
}
.adm-pv__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-dock); font-weight: 600; color: var(--muted); }
.adm-pv__item .ic { width: 22px; height: 22px; }
.adm-pv__ic { position: relative; display: grid; place-items: center; }
.adm-pv__dot { position: absolute; top: -2px; right: -6px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; }
.adm-pv__item.is-live { color: var(--live); }
.adm-pv__item.is-live .adm-pv__dot { background: var(--live); }

/* ---------- звернення: вхідні (master-detail на ≥1080, окремі екрани на телефоні й планшеті) ---------- */
.adm-inbox { display: grid; align-items: start; }
@media (max-width: 1079.98px) {
  .adm-inbox--detail .adm-inbox__list { display: none; }
  .adm-inbox:not(.adm-inbox--detail) .adm-inbox__detail { display: none; }
}
@media (min-width: 1080px) {
  .adm-inbox { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); }
  .adm-inbox__list { padding-right: 24px; border-right: 1px solid var(--blue-line); min-height: 60vh; }
  .adm-inbox__detail { padding-left: 32px; position: sticky; top: calc(var(--adm-top-h) + 24px); }
  .adm-inbox .adm-filters__search { flex-basis: 100%; max-width: none; }
}
.adm-msgs { list-style: none; margin-top: 12px; border-top: 1px solid var(--blue-line); }
.adm-msgs > li { border-bottom: 1px solid var(--blue-line); }
.adm-msg {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  margin-inline: -12px; padding: 12px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; transition: background-color var(--dur-1);
}
.adm-msg:hover { background: var(--paper-2); }
.adm-msg:active { background: var(--blue-line); }
.adm-msg[aria-current] { background: var(--blue-tint); }
.adm-msg__name { font-size: 1.0625rem; font-weight: 500; color: var(--brown); overflow-wrap: anywhere; }
.adm-msg.is-new .adm-msg__name { font-weight: 700; }
.adm-msg__time { font-size: var(--fs-meta); font-weight: 600; color: var(--gold-ink); white-space: nowrap; font-variant-numeric: lining-nums; }
.adm-msg__subj { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.adm-msg__snip { grid-column: 1 / -1; font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-msg:focus-visible { outline-offset: -3px; }

.adm-detail { display: grid; gap: 20px; min-width: 0; }
.adm-detail__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.adm-detail__meta { margin-top: 4px; font-size: var(--fs-meta); color: var(--muted); }
.adm-detail__meta b { color: var(--ink); font-weight: 600; }
.adm-detail__text { max-width: 64ch; padding: 16px 18px; border-radius: var(--r-md); background: var(--paper-2); font-size: 1.0625rem; line-height: 1.6; }
.adm-kv { margin: 0; }
.adm-kv > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--blue-line); }
.adm-kv > div:first-child { border-top: 1px solid var(--blue-line); }
.adm-kv dt { font-size: var(--fs-meta); font-weight: 500; color: var(--muted); }
.adm-kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; }
.adm-kv dd a { font-weight: 600; }
.adm-detail__acts { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599.98px) { .adm-detail__acts .btn { flex: 1 1 100%; } }
.adm-detail__form { display: grid; gap: 20px; padding-top: 20px; border-top: 1px solid var(--blue-line); }
.adm-detail__form .field + .field { margin-top: 0; }
.adm-detail__save { display: flex; justify-content: flex-start; }
.adm-detail__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--blue-line); }

/* ---------- вхід ---------- */
.adm-login-page { background: var(--blue); }
.adm-login {
  min-height: 100svh; display: grid; place-items: center;
  padding: 32px var(--gutter) 40px; color: #fff; --focus: var(--mint);
}
.adm-login__inner { width: min(100%, 26rem); }
.adm-login__brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.adm-login__brand img { width: 36px; height: auto; border-radius: 3px; }
.adm-login__brand span { display: grid; line-height: 1.25; }
.adm-login__brand b { font-weight: 700; font-size: 1.0625rem; }
.adm-login__brand small { font-size: var(--fs-meta); font-weight: 500; color: var(--mint); }
.adm-login__title { margin-top: 32px; font-size: 2.25rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: #fff; }
.adm-login__rule { display: block; width: 48px; height: 2px; margin-top: 14px; background: var(--gold); }
.adm-login__lead { margin-top: 12px; color: var(--mint); font-weight: 500; }
.adm-login__panel {
  margin-top: 24px; padding: 24px 20px; display: grid; gap: 20px;
  border-radius: var(--r-lg); background: #fff; color: var(--ink); --focus: var(--blue-soft);
  box-shadow: 0 28px 56px -28px rgb(0 18 38 / .6);
}
.adm-login__panel .field + .field { margin-top: 0; }
.adm-login__panel .btn { width: 100%; }
.adm-login__help { font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; }
.adm-login__back { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin-top: 16px; color: var(--mint); font-weight: 600; font-size: var(--fs-meta); text-decoration: none; }
.adm-login__back .ic { width: 18px; height: 18px; }
.adm-login__back:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 600px) { .adm-login__panel { padding: 28px; } .adm-login__title { font-size: 2.5rem; } }

.adm-pass { position: relative; display: block; }
.adm-pass .input { padding-right: 52px; }
.adm-pass .icon-btn { position: absolute; right: 2px; top: 50%; translate: 0 -50%; color: var(--blue); }
.adm-pass .icon-btn:focus-visible { outline-offset: -3px; }
.adm-pass .icon-btn .ic { width: 22px; height: 22px; }
.adm-live > .adm-bar { grid-column: 1 / -1; }
.adm-live > * { min-width: 0; }
.adm-pv__head { flex-wrap: wrap; row-gap: 6px; padding-block: 8px; }

/* ==== 31-admin-editors.css ==== */
/* ======================================================================
   РЕДАКТОРИ АДМІНКИ (напрям E2): перевірка проповіді, новина, розклад, альбом галереї.
   Та сама система, що й оболонка E1: .field/.input/.btn/.badge/.notice/.slot/.dlg, панелі .adm-panel,
   липка .adm-bar. Нове — лише .ade-*. Режим Operate: rem без clamp, цілі 44–48 px, рух — лише для стану.
   Брейкпоінти: <600 телефон · 600 · 768 (смуга адмінки липка) · 1080 (ліва навігація) · 1280 (дві колонки).
   ====================================================================== */
.adm-page.ade-page { max-width: 1320px; }
.adm-page.ade-page--narrow { max-width: 60rem; }
.ade-inline-ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--brown); }
.ade-l-short { display: none; }
@media (max-width: 599.98px) {
  .ade-l-long { display: none; }
  .ade-l-short { display: inline; }
  .adm-bar__acts .btn.ade-bar__reject { flex: 0 0 52px; padding: 0; }
}
@media (min-width: 600px) { .ade-l-sr { display: none; } }

/* секції редактора: лінія-роздільник і відступ, як у налаштуваннях */
.ade-sec { min-width: 0; }
.ade-bounds, .ade-meta, .ade-text { padding-top: 28px; border-top: 1px solid var(--blue-line); }
.ade-count {
  margin-top: 4px; text-align: right; font-size: var(--fs-small); font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.ade-count.is-near { color: var(--gold-ink); font-weight: 700; }
.field + .ade-count { margin-top: 2px; }

/* ---------- стан проповіді: кроки + звідки запис ---------- */
.ade-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-bottom: 28px; padding: 12px 16px; border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--blue-line);
}
.ade-status__note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--muted); }
.ade-status__note .ic { width: 18px; height: 18px; color: var(--blue); }
@media (max-width: 599.98px) {
  .ade-status .adm-steps { gap: 6px; }
  .ade-status .adm-steps { column-gap: 14px; }
  .ade-status .adm-steps__item + .adm-steps__item::before { display: none; }
  .ade-tl__ticks span:nth-child(even) { display: none; }
}

/* ---------- перевірка проповіді: розкладка ---------- */
.ade-review {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px;
  grid-template-areas: "player" "bounds" "meta" "pv" "text" "bar";
}
.ade-side { display: contents; }
.ade-player { grid-area: player; }
.ade-pv { grid-area: pv; }
.ade-bounds { grid-area: bounds; }
.ade-meta { grid-area: meta; }
.ade-text { grid-area: text; }
.ade-review > .adm-bar { grid-area: bar; margin-top: 0; }
@media (min-width: 768px) and (max-width: 1279.98px) { .ade-player, .ade-pv { max-width: 40rem; } }
@media (min-width: 1280px) {
  .ade-review {
    grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 40px; align-items: start;
    grid-template-areas: "bounds side" "meta side" "text side" "bar bar";
  }
  .ade-side { display: grid; gap: 28px; grid-area: side; position: sticky; top: calc(var(--adm-top-h) + 24px); }
  .ade-side > * { grid-area: auto; }
  .ade-bounds { padding-top: 0; border-top: 0; }
}

/* плеєр запису (фасад; у Flask — YouTube IFrame API) */
.ade-player { display: grid; gap: 8px; }
.ade-player__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--blue-deep); }
.ade-player__frame img { width: 100%; height: 100%; object-fit: cover; }
.ade-player__tag { position: absolute; left: 10px; top: 10px; }
.ade-player__big {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0;
  background: rgb(1 56 101 / .22); transition: background-color var(--dur-2), opacity var(--dur-2);
}
.ade-player__big:hover { background: rgb(1 56 101 / .12); }
.ade-player__big .play-disc { position: static; width: 64px; height: 64px; transition: scale var(--dur-2) var(--ease-out); }
.ade-player__big:hover .play-disc { scale: 1.06; }
.ade-player__big:focus-visible { outline: 3px solid var(--mint); outline-offset: -6px; border-radius: var(--r-lg); }
.ade-player__live {
  position: absolute; right: 10px; bottom: 12px; padding: 2px 8px; border-radius: var(--r-sm);
  background: rgb(59 33 25 / .85); color: #fff; font-size: var(--fs-small); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.ade-player__frame::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 0%);
  background: var(--gold); transition: width 1s linear;
}
.ade-player.is-playing .ade-player__big { opacity: 0; }
.ade-player.is-playing .ade-player__big:hover, .ade-player.is-playing .ade-player__big:focus-visible { opacity: 1; background: rgb(1 56 101 / .12); }
.ade-player.is-playing .play-disc .ic { fill: none; stroke: currentColor; stroke-width: 2.5; margin-left: 0; }
.ade-player__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ade-player__ctl .icon-btn { color: var(--blue); }
.ade-player__ctl .icon-btn .ic { width: 22px; height: 22px; }
.ade-player__ctl .ic--fill, .ade-seg__t .ic--fill { fill: currentColor; stroke: none; }
.ade-player__jump {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--blue-line); border-radius: var(--r-sm); background: #fff;
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta); font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-1);
}
.ade-player__jump:hover { background: var(--blue-tint); }
.ade-player__pos { margin-left: auto; font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.ade-player__pos b { color: var(--brown); font-weight: 700; }
.ade-player__note { display: flex; gap: 8px; font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.ade-player__note .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--blue); }

/* прев'ю «як на сайті»: мініатюра синього поля сторінки проповіді */
.ade-pv { display: grid; gap: 12px; align-content: start; }
.ade-pv__field { padding: 16px 18px 18px; border-radius: var(--r-lg); background: var(--blue); color: #fff; border-bottom: 1px solid var(--gold); }
.ade-pv__crumbs { font-size: var(--fs-small); font-weight: 600; color: var(--mint); }
.ade-pv__title { margin-top: 6px; font-family: var(--font-word); font-weight: 500; font-size: 1.375rem; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.ade-pv__rule { display: block; width: 40px; height: 2px; margin: 12px 0 10px; background: var(--gold); }
.ade-pv__meta { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--fs-meta); font-weight: 500; color: #fff; }
.ade-pv__meta [data-ade-pv="who"] { flex-basis: 100%; }
.ade-pv__meta [data-ade-pv="word"]::before { content: "·"; margin: 0 8px; color: var(--gold-light); }
.ade-pv__meta [data-ade-pv="date"] { color: var(--gold-light); }
.ade-pv__meta .is-empty { color: var(--mint); font-style: italic; }
.ade-pv__line { font-size: var(--fs-meta); color: var(--muted); }
.ade-pv__line b { color: var(--brown); font-weight: 600; }

/* ---------- межі проповіді: смуга всієї трансляції ---------- */
.ade-bounds { container-type: inline-size; }
.ade-tl { margin-top: 16px; }
.ade-tl__parts { list-style: none; position: relative; height: 24px; }
.ade-tl__part {
  position: absolute; top: 0; bottom: 0; padding-left: 6px; border-left: 1px solid var(--blue-line);
  font-size: var(--fs-small); font-weight: 500; line-height: 24px; color: var(--muted); white-space: nowrap; overflow: hidden;
}
.ade-tl__part:first-child { padding-left: 0; border-left: 0; }
.ade-tl__part.is-sermon { color: var(--blue); font-weight: 700; }
.ade-tl__part.is-narrow .ade-tl__lbl { display: none; }
@media (max-width: 767.98px) { .ade-tl__part:not(.is-sermon) .ade-tl__lbl { display: none; } }
.ade-tl__track {
  position: relative; height: 48px; margin-top: 4px; border: 1px solid var(--blue-line); border-radius: var(--r-sm);
  background: var(--paper-2);
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
}
.ade-tl__auto {
  position: absolute; top: 5px; bottom: 5px; border: 1.5px dashed var(--muted); border-radius: 6px;
  pointer-events: none; opacity: 0; transition: opacity var(--dur-2);
}
.ade-tl.is-moved .ade-tl__auto { opacity: 1; }
.ade-tl__sel {
  position: absolute; top: -1px; bottom: -1px; pointer-events: none;
  background: rgb(1 74 138 / .16); border-block: 2px solid var(--blue);
}
.ade-tl.is-invalid .ade-tl__sel {
  border-color: var(--error);
  background: repeating-linear-gradient(135deg, var(--error-tint) 0 6px, rgb(127 0 0 / .14) 6px 8px);
}
.ade-tl__head { position: absolute; top: -7px; bottom: -7px; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.ade-tl__head::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.ade-tl__h {
  position: absolute; top: -1px; bottom: -1px; width: 16px; margin-left: -8px; z-index: 1;
  display: grid; place-items: center; border-radius: 6px; background: var(--blue); cursor: ew-resize; touch-action: none;
  transition: background-color var(--dur-1);
}
.ade-tl__h::before { content: ""; width: 5px; height: 18px; border-inline: 1.5px solid rgb(255 255 255 / .9); }
.ade-tl__h::after { content: ""; position: absolute; inset: -4px -14px; }
.ade-tl__h:hover, .ade-tl__h.is-drag { background: var(--blue-deep); }
.ade-tl__h:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.ade-tl.is-invalid .ade-tl__h--end { background: var(--error); }
.ade-tl__ticks { position: relative; height: 20px; margin-top: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.ade-tl__ticks span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.ade-tl__ticks span:first-child { translate: 0 0; }
.ade-tl__ticks span:last-child { translate: -100% 0; }
.ade-tl__help { margin-top: 6px; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
@media (pointer: coarse) { .ade-tl__help { display: none; } }

.ade-times { display: grid; gap: 20px; margin-top: 20px; }
.ade-times .field + .field { margin-top: 0; }
@container (min-width: 40rem) { .ade-times { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; } }
.ade-time__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ade-time__row .input { flex: 0 0 8.5rem; width: 8.5rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.ade-time__take { flex: 0 1 auto; }
.ade-time .field__hint b { color: var(--brown); font-weight: 600; }
@media (max-width: 374.98px) { .ade-time__row .input { flex: 1 1 100%; width: 100%; } }

.ade-why { margin-top: 20px; padding: 14px 16px; display: grid; gap: 8px; border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--blue-line); }
.ade-why__title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brown); font-size: 1rem; }
.ade-why__title .ic { width: 20px; height: 20px; color: var(--blue); }
.ade-why__list { list-style: none; display: grid; gap: 8px; }
.ade-why__list li { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-meta); line-height: 1.45; }
.ade-why__list .badge { flex: none; }
.ade-why__list b { color: var(--brown); font-weight: 600; }

/* ---------- про проповідь ---------- */
.ade-fields { display: grid; gap: 20px; margin-top: 16px; max-width: 46rem; }
.ade-fields .field + .field, .ade-fields .adm-row2 .field + .field { margin-top: 0; }
.ade-suggest {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; padding: 6px 6px 6px 12px;
  border-radius: var(--r-md); background: var(--gold-tint); border: 1px solid var(--gold-line); font-size: var(--fs-meta);
}
.ade-suggest > .ic { width: 18px; height: 18px; color: var(--gold-ink); }
.ade-suggest > span { flex: 1 1 12rem; }
.ade-suggest b { color: var(--brown); font-weight: 600; }
.ade-suggest .btn { background: #fff; }
.ade-preacher__new { margin-top: 12px; padding: 16px; border-radius: var(--r-md); background: var(--paper-2); }
.ade-found { display: flex; gap: 8px; margin-top: -8px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.45; }
.ade-found .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }

/* ---------- текст проповіді: пошук-заміна й абзаци ---------- */
.ade-text__stat { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.ade-text > .notice { margin-top: 16px; max-width: 72ch; }
.ade-note-example { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ade-text .notice .text-btn { min-height: 44px; color: var(--blue); }
.ade-find { display: grid; gap: 8px; margin-top: 16px; padding: 12px 0; background: #fff; border-bottom: 1px solid var(--blue-line); }
@media (min-width: 768px) { .ade-find { position: sticky; top: var(--adm-top-h); z-index: 5; } }
.ade-find__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ade-find__q { flex: 1 1 14rem; }
.ade-find__r { flex: 1 1 14rem; width: auto; }
.ade-find__n { min-width: 7rem; font-size: var(--fs-meta); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.ade-find__n.is-none { color: var(--error); }
.ade-find__steps, .ade-find__acts { display: flex; gap: 4px 8px; }
.ade-find .icon-btn { color: var(--blue); }
.ade-find .icon-btn:disabled { color: var(--blue-line); background: none; cursor: default; }
.ade-find input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.ade-segs { list-style: none; }
.ade-seg {
  display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--blue-line);
}
.ade-seg__side { display: grid; justify-items: start; align-content: start; gap: 2px; }
.ade-seg__t {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; margin-left: -8px;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--gold-ink); font-weight: 600; font-size: var(--fs-meta); font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.ade-seg__t .ic { width: 14px; height: 14px; color: var(--blue); opacity: 0; transition: opacity var(--dur-1); }
.ade-seg__t:hover { background: var(--blue-tint); }
.ade-seg__t:hover .ic, .ade-seg__t:focus-visible .ic, .ade-seg__t.is-now .ic { opacity: 1; }
.ade-seg__t.is-now { background: var(--blue-tint); color: var(--blue); }
.ade-seg__edited { font-size: var(--fs-small); font-style: italic; color: var(--muted); padding-left: 0; }
.ade-seg__main { min-width: 0; }
.ade-seg__ref { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-meta); font-weight: 600; color: var(--gold-ink); }
.ade-seg__ref .ic { width: 16px; height: 16px; }
.ade-seg__text {
  max-width: calc(var(--measure) + 20px); margin: 0 -10px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 1.0625rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  transition: background-color var(--dur-1);
}
.ade-seg__text:hover { background: var(--paper-2); }
.ade-seg__text:focus-visible { background: #fff; outline: 2px solid var(--blue); outline-offset: 0; box-shadow: 0 0 0 5px var(--blue-tint); }
.ade-seg--word .ade-seg__text { font-family: var(--font-word); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--brown); }
.ade-seg__tools { display: none; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 4px; }
.ade-seg__tools:has(.badge), .ade-seg:focus-within .ade-seg__tools { display: flex; }
.ade-seg__tools .text-btn { display: none; min-height: 44px; font-size: var(--fs-meta); }
.ade-seg__tools .text-btn .ic { width: 18px; height: 18px; }
.ade-seg:focus-within .ade-seg__tools .text-btn { display: inline-flex; }
.ade-seg__flag .ic { width: 14px; height: 14px; }
.ade-seg.is-flash { animation: ade-flash 1.2s var(--ease-out); }
@keyframes ade-flash { from { background: var(--blue-tint); } to { background: transparent; } }
.ade-segs__end { margin-top: 12px; font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
::highlight(ade-find) { background-color: var(--gold-line); color: var(--ink); }
::highlight(ade-find-cur) { background-color: var(--blue); color: #fff; }
::highlight(ade-unclear) { background-color: var(--gold-tint); color: var(--gold-ink); text-decoration: underline 1.5px wavy var(--gold); }

/* ---------- новина ---------- */
.ade-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.ade-article__main { display: grid; gap: 24px; align-content: start; min-width: 0; }
.ade-article__main .field + .field { margin-top: 0; }
.ade-article__side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.ade-article > .adm-bar { grid-column: 1 / -1; margin-top: 0; }
@media (min-width: 1280px) { .ade-article { grid-template-columns: minmax(0, 1fr) 23rem; column-gap: 40px; align-items: start; } }
.ade-field-xl .input { min-height: 56px; font-size: 1.375rem; font-weight: 600; color: var(--brown); }
@media (max-width: 599.98px) { .ade-field-xl .input { font-size: 1.1875rem; } .adm-panel.ade-box { padding: 16px; } .ade-seo__sum { padding: 14px 16px; } .ade-seo__body { padding: 0 16px 16px; } }

.ade-slug__row {
  display: flex; align-items: stretch; min-width: 0;
  border: 1.5px solid var(--blue-soft); border-radius: var(--r-sm); background: var(--blue-tint);
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.ade-slug__row:hover { border-color: var(--blue); }
.ade-slug__row:focus-within { border-color: var(--blue); background: #fff; outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.ade-slug__pre { display: flex; align-items: center; padding-left: 14px; font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.ade-slug__row .input { flex: 1; min-width: 0; border: 0; background: transparent; padding-left: 1px; }
.ade-slug__row .input:focus-visible { outline: none; }
.ade-slug__auto { min-height: 44px; justify-self: start; }
@media (max-width: 419.98px) { .ade-slug__long { display: none; } .ade-slug__pre { padding-left: 12px; } }

/* редактор тексту (у Flask — TinyMCE 8 з цією самою панеллю) */
.ade-rte__box { border: 1.5px solid var(--blue-soft); border-radius: var(--r-md); background: #fff; transition: border-color var(--dur-1); }
.ade-rte__box:focus-within { border-color: var(--blue); }
.ade-rte__box:has(.ade-rte__area:focus-visible) { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.ade-rte__bar {
  position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px;
  background: var(--paper-2); border-bottom: 1px solid var(--blue-line); border-radius: calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0 0;
}
@media (min-width: 768px) { .ade-rte__bar { top: var(--adm-top-h); } }
.ade-rte__grp { display: flex; align-items: center; gap: 2px; }
.ade-rte__grp + .ade-rte__grp { padding-left: 6px; border-left: 1px solid var(--blue-line); }
.ade-rte__b {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--brown); font-weight: 600; font-size: var(--fs-meta);
  transition: background-color var(--dur-1), color var(--dur-1);
}
.ade-rte__b .ic { width: 20px; height: 20px; }
.ade-rte__b:hover { background: #fff; color: var(--blue); }
.ade-rte__b[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); }
.ade-rte__b:focus-visible { outline-offset: -3px; }
.ade-rte__sel .input { width: 11.5rem; min-height: 44px; padding-block: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--brown); background: #fff; border-color: var(--blue-line); }
.ade-rte__area { max-width: none; min-height: 22rem; padding: 20px; outline: none; }
.ade-rte__area > * { max-width: var(--measure); }
.ade-rte__area:focus-visible { outline: none; }
.ade-rte__area:empty::before { content: attr(data-placeholder); color: var(--muted); }
.ade-rte__area figure { position: relative; }
.ade-rte__area figcaption { margin-top: 8px; font-size: var(--fs-meta); color: var(--muted); }
.ade-rte__area .ade-rte__video {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-md);
  background: var(--blue-tint); color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
}
.ade-rte__foot { padding: 8px 16px; border-top: 1px solid var(--blue-line); font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 599.98px) {
  .ade-rte__area { padding: 16px 14px; }
  .ade-rte__sel .input { width: 11.5rem; }
  .ade-rte__b--l span { display: none; }
}

/* бокова колонка новини: панелі */
.ade-box { gap: 16px; align-content: start; }
.ade-box .field + .field, .ade-box .field + .ade-image { margin-top: 0; }
.ade-box .adm-seg__opt > span { padding-inline: 4px; font-size: .875rem; }
.ade-box .check { padding-block: 8px; }
.ade-seo { padding: 0; gap: 0; }
.ade-seo__sum {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 2px 12px;
  min-height: 56px; padding: 16px 20px; border-radius: var(--r-lg); cursor: pointer;
}
.ade-seo__sum::-webkit-details-marker { display: none; }
.ade-seo__sum:hover .ade-seo__t { color: var(--blue); }
.ade-seo__sum:focus-visible { outline-offset: -3px; }
.ade-seo__t { font-size: 1.25rem; font-weight: 700; color: var(--brown); line-height: 1.25; transition: color var(--dur-1); }
.ade-seo__sub { grid-column: 1; font-size: var(--fs-meta); color: var(--muted); }
.ade-seo__chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--blue); transition: rotate var(--dur-2) var(--ease-out); }
.ade-seo[open] .ade-seo__chev { rotate: 180deg; }
.ade-seo__body { display: grid; gap: 16px; padding: 0 20px 20px; }
.ade-seo__body .field + .field { margin-top: 0; }
.ade-snip { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper-2); }
.ade-snip__cap { margin-bottom: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ade-snip__url { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.ade-snip__title { font-size: 1.125rem; font-weight: 500; color: var(--blue); line-height: 1.3; overflow-wrap: anywhere; }
.ade-snip__desc { font-size: var(--fs-meta); color: var(--ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1080px) { .ade-seo__t { font-size: 1.375rem; } }

/* фото-поле: прев'ю або зона «перетягніть сюди» */
.ade-image__has { display: grid; gap: 8px; }
.ade-image__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: var(--paper-2); }
.ade-image__file { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: var(--fs-meta); color: var(--muted); overflow-wrap: anywhere; }
.ade-image__file span:empty { display: none; }
.ade-image__file span + span::before { content: "·"; margin-right: 8px; }
.ade-image__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ade-image__alt { margin-top: 8px; }
.ade-drop {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 132px; padding: 20px 16px;
  border: 1.5px dashed var(--blue-soft); border-radius: var(--r-md); background: var(--blue-tint);
  text-align: center; color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.ade-drop:hover { background: #fff; border-color: var(--blue); }
.ade-drop.is-over { background: #fff; border-style: solid; border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ade-drop:has(.ade-drop__input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ade-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ade-drop__ic { width: 32px; height: 32px; color: var(--blue); }
.ade-drop__t { font-size: 1.0625rem; font-weight: 600; color: var(--brown); }
.ade-drop__or { font-size: var(--fs-meta); color: var(--muted); }
.ade-drop__pick { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.field--error .ade-drop { border-color: var(--error); background: var(--error-tint); }
.ade-drop--wide { min-height: 148px; }
@media (pointer: coarse) {
  .ade-drop__t, .ade-drop__ili { display: none; }
  .ade-drop__pick { font-size: 1.0625rem; }
  .ade-drop__pick::first-letter { text-transform: uppercase; }
}

/* ---------- розклад ---------- */
.ade-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.ade-jump a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--blue-line); border-radius: var(--r-sm);
  color: var(--blue); font-weight: 600; font-size: var(--fs-meta); text-decoration: none;
  transition: background-color var(--dur-1);
}
.ade-jump a:hover { background: var(--blue-tint); }
.adm-notice-top, .ade-page--narrow > .notice { max-width: 72ch; }
.ade-page--narrow > .notice { margin-bottom: 4px; }
.ade-page--narrow .adm-sec { margin-top: 36px; scroll-margin-top: calc(var(--adm-top-h) + 16px); }

.ade-sls { list-style: none; margin-top: 12px; border-top: 1px solid var(--blue-line); }
.ade-sl { border-bottom: 1px solid var(--blue-line); transition: background-color var(--dur-2); }
.ade-sl__row { grid-template-columns: var(--when-w) minmax(0, 1fr) auto; border-bottom: 0; }
.ade-sl__row .slot__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
.ade-sl__btn { grid-area: act; }
.ade-sl__row.is-off .slot__title, .ade-sl__row.is-off .slot__time { color: var(--muted); }
.ade-sl.is-open {
  margin-inline: -12px; padding: 0 12px 16px; border-radius: var(--r-md); border-bottom-color: transparent;
  background: var(--paper-2); box-shadow: 0 0 0 1px var(--blue-line);
}
.ade-sl.is-open + .ade-sl { border-top: 1px solid var(--blue-line); margin-top: 8px; }
.ade-sl.is-open .ade-sl__btn { background: #fff; }
@media (max-width: 599.98px) {
  .ade-sl__btn { width: 44px; padding: 0; }
  .ade-sl__btn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.ade-sl__form { display: grid; gap: 20px; padding-top: 8px; }
.ade-sl__form > .notice { max-width: none; }
.ade-sl__grid { display: grid; gap: 20px; max-width: 40rem; }
.ade-sl__grid .field + .field { margin-top: 0; }
.ade-sl__row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ade-sl__row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ade-sl__row3 > :first-child { grid-column: 1 / -1; }
.ade-sl__row3 .field + .field { margin-top: 0; }
@media (min-width: 600px) { .ade-sl__row3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } .ade-sl__row3 > :first-child { grid-column: auto; } }
.ade-sl__switches { display: grid; }
.ade-sl__cap { padding: 4px 0 12px 56px; }
.ade-sl__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.ade-sl__del { margin-right: auto; color: var(--error); }
.ade-add {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 12px; margin-inline: -12px;
  box-sizing: content-box; border: 0; border-radius: var(--r-sm); background: none; text-align: left;
  color: var(--blue); font-weight: 600; font-size: 1rem; transition: background-color var(--dur-1);
}
.ade-add .ic { width: 22px; height: 22px; }
.ade-add:hover { background: var(--blue-tint); }
.ade-add:focus-visible { outline-offset: -3px; }
.ade-sl.is-open > .ade-add { margin-inline: 0; padding-inline: 0; color: var(--brown); }
.ade-sl--first { margin-top: 12px; border-top: 1px solid var(--blue-line); }
.ade-sl--first.is-open { border-top-color: transparent; }
.ade-sl--first + .ade-sls { margin-top: 0; border-top: 0; }

.ade-days { border: 0; padding: 0; margin: 0; min-width: 0; }
.ade-days > legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.ade-days__chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ade-day {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; height: 48px; padding: 0 8px; border: 1px solid var(--blue-soft); border-radius: var(--r-sm);
  background: #fff; color: var(--blue); font-weight: 600; font-size: var(--fs-meta);
  transition: background-color var(--dur-1), color var(--dur-1);
}
.ade-day .ic { display: none; width: 16px; height: 16px; }
.ade-day:hover { background: var(--blue-tint); }
.ade-day[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (min-width: 600px) { .ade-day { min-width: 56px; } .ade-day[aria-pressed="true"] .ic { display: block; } }
.ade-days .field__error { margin-top: 6px; }
.ade-days.field--error .ade-day[aria-pressed="false"] { border-color: var(--error); }

.ade-slpv { display: grid; gap: 4px; padding: 10px 14px 2px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--blue-line); max-width: 40rem; }
.ade-slpv__cap { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ade-slpv__cap .ic { width: 16px; height: 16px; color: var(--blue); }
.ade-slpv__list .slot { min-height: 64px; padding: 8px 0; border-bottom: 0; }
.ade-slpv__list .slot__act { color: var(--blue); }
.ade-slpv__list .slot__act .ic { width: 22px; height: 22px; }
.ade-slpv__off { padding-bottom: 10px; font-size: var(--fs-meta); font-style: italic; color: var(--muted); }

.ade-ev__date { align-self: start; }
.ade-ev__d { font-size: var(--fs-slot); font-weight: 700; line-height: 1; color: var(--gold-ink); font-variant-numeric: lining-nums proportional-nums; }
.ade-ev__m { margin-top: 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--muted); }
.ade-example { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; font-size: var(--fs-meta); color: var(--muted); }
.ade-events .empty { padding-top: 24px; }

/* ---------- галерея: альбом ---------- */
.ade-album { display: grid; gap: 32px; }
.ade-album > .adm-bar { margin-top: 0; }
.ade-album__fields { display: grid; gap: 20px; margin-top: 16px; max-width: 44rem; }
.ade-album__fields .field + .field, .ade-album__fields .adm-row2 .field + .field { margin-top: 0; }
.ade-photos-sec { padding-top: 28px; border-top: 1px solid var(--blue-line); }
.ade-photos-sec .adm-sec__lead { max-width: 72ch; }
.ade-upload { display: grid; gap: 8px; margin-top: 16px; max-width: 46rem; }
.ade-queue { margin-top: 4px; padding: 12px 16px 4px; border: 1px solid var(--blue-line); border-radius: var(--r-md); background: #fff; }
.ade-queue__sum { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.ade-queue__list { list-style: none; margin-top: 8px; }
.ade-q {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "ic name size" "ic bar pct";
  gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--blue-line);
}
.ade-q__ic { grid-area: ic; align-self: start; width: 20px; height: 20px; margin-top: 1px; color: var(--blue); }
.ade-q__name { grid-area: name; min-width: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ade-q__size { grid-area: size; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ade-q__bar {
  grid-area: bar; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden;
  -webkit-appearance: none; appearance: none; background: var(--blue-line); color: var(--blue);
}
.ade-q__bar::-webkit-progress-bar { background: var(--blue-line); border-radius: 999px; }
.ade-q__bar::-webkit-progress-value { background: var(--blue); border-radius: 999px; transition: width var(--dur-2); }
.ade-q__bar::-moz-progress-bar { background: var(--blue); border-radius: 999px; }
.ade-q__pct { grid-area: pct; min-width: 4.5ch; text-align: right; font-size: var(--fs-small); font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums lining-nums; }
.ade-q.is-error .ade-q__ic { color: var(--error); }
.ade-q__msg { grid-column: 2 / -1; grid-row: 2; font-size: var(--fs-meta); font-weight: 600; color: var(--error); line-height: 1.4; }

.ade-photos__alt {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding: 10px 14px; max-width: 72ch;
  border-radius: var(--r-md); background: var(--gold-tint); border: 1px solid var(--gold-line); font-size: var(--fs-meta); line-height: 1.45;
}
.ade-photos__alt .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-ink); }
.ade-photos__alt b { color: var(--brown); }
.ade-photos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 16px; }
@media (min-width: 600px) { .ade-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 1080px) { .ade-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .ade-photos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ade-photo { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; border-radius: var(--r-md); }
.ade-photo__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.ade-photo__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ade-photo.is-cover .ade-photo__img { outline: 2px solid var(--gold); outline-offset: 2px; }
.ade-photo__n {
  position: absolute; left: 6px; bottom: 6px; min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center;
  border-radius: 999px; background: rgb(59 33 25 / .85); color: #fff; font-size: var(--fs-small); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.ade-photo__drag {
  position: absolute; left: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: rgb(255 255 255 / .94); color: var(--brown);
  box-shadow: 0 2px 6px -2px rgb(59 33 25 / .35); cursor: grab; touch-action: none;
}
.ade-photo__drag:hover { color: var(--blue); }
.ade-photo__drag:focus-visible { outline-offset: 1px; }
.ade-photo__cover {
  position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: var(--r-sm); background: #fff; color: var(--gold-ink); font-size: var(--fs-small); font-weight: 700;
}
.ade-photo__cover .ic { width: 14px; height: 14px; }
.ade-photo .ic--fill { fill: currentColor; }
.ade-photo__alt { min-height: 86px; padding: 8px 10px; font-size: .9375rem; line-height: 1.4; resize: vertical; }
.ade-photo.is-noalt .ade-photo__alt { border-color: var(--gold); background: var(--gold-tint); }
.ade-photo__acts { display: flex; justify-content: space-between; gap: 2px; }
.ade-photo__acts .icon-btn { width: 40px; height: 40px; color: var(--blue); }
.ade-photo__acts .icon-btn .ic { width: 20px; height: 20px; }
.ade-photo__acts .icon-btn:disabled { color: var(--blue-line); background: none; cursor: default; }
.ade-photo__star[aria-pressed="true"] { color: var(--gold-ink); }
.ade-photo__del { color: var(--muted) !important; }
.ade-photo__del:hover { color: var(--error) !important; background: var(--error-tint); }
@media (max-width: 359.98px) { .ade-photo__acts { display: grid; grid-template-columns: repeat(2, 40px); justify-content: space-between; } }
/* перетягування: піднята картка йде за пальцем, решта розступається */
.ade-photos.is-sorting .ade-photo:not(.is-lifted) { transition: transform var(--dur-2) var(--ease-out); }
.ade-photo.is-lifted { z-index: 3; pointer-events: none; }
.ade-photo.is-lifted .ade-photo__img { box-shadow: 0 18px 32px -12px rgb(59 33 25 / .45); outline: 2px solid var(--blue); outline-offset: 2px; }
.ade-photo.is-lifted .ade-photo__drag { cursor: grabbing; background: var(--blue); color: #fff; }
.ade-photo.is-moved .ade-photo__img { animation: ade-moved .9s var(--ease-out); }
@keyframes ade-moved { from { box-shadow: 0 0 0 4px var(--blue); } to { box-shadow: 0 0 0 0 transparent; } }
.ade-del-thumb { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-md); }
.ade-reasons { margin-top: 4px; }
.ade-reasons > legend { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); margin-bottom: 0; }
.ade-reasons .check { padding-block: 10px; }

/* список альбомів */
.ade-albums { list-style: none; border-top: 1px solid var(--blue-line); }
.ade-albums__item { border-bottom: 1px solid var(--blue-line); }
.ade-albums__link {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 20px; align-items: center; gap: 16px;
  margin-inline: -12px; padding: 12px; border-radius: var(--r-sm); color: inherit; text-decoration: none;
  transition: background-color var(--dur-1);
}
.ade-albums__link:hover { background: var(--paper-2); }
.ade-albums__link:hover .ade-albums__title { color: var(--blue); }
.ade-albums__link:active { background: var(--blue-line); }
.ade-albums__link:focus-visible { outline-offset: -3px; }
.ade-albums__img { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }
.ade-albums__title { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--brown); line-height: 1.3; transition: color var(--dur-1); }
.ade-albums__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; font-size: var(--fs-meta); color: var(--muted); }
.ade-albums__meta > span + span::before { content: "·"; margin-right: 8px; }
.ade-albums__date { color: var(--gold-ink); font-weight: 600; }
.ade-albums__chev { width: 20px; height: 20px; color: var(--blue); }
@media (min-width: 768px) { .ade-albums__link { grid-template-columns: 128px minmax(0, 1fr) 20px; } .ade-albums__img { width: 128px; } }

@media (prefers-reduced-motion: reduce) {
  .ade-seg.is-flash, .ade-photo.is-moved .ade-photo__img { animation: none; }
  .ade-player__frame::after { transition: none; }
}

/* липкі панелі (пошук у тексті, панель редактора) не мають закривати поле у фокусі */
@media (min-width: 768px) {
  html:has(.ade-find) { scroll-padding-top: calc(var(--adm-top-h) + 150px); }
  html:has(.ade-rte__bar) { scroll-padding-top: calc(var(--adm-top-h) + 120px); }
}

/* ---------- служіння: список із порядком ---------- */
.ade-minlist__help { margin-bottom: 12px; }
.ade-mins { list-style: none; border-top: 1px solid var(--blue-line); }
.ade-min {
  position: relative; display: grid; align-items: center; column-gap: 12px; row-gap: 4px; padding: 10px 0;
  grid-template-columns: 44px 64px minmax(0, 1fr) auto;
  grid-template-areas: "drag img body acts" "drag img status acts";
  border-bottom: 1px solid var(--blue-line); background: #fff;
}
.ade-min__drag {
  grid-area: drag; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted); cursor: grab; touch-action: none; transition: background-color var(--dur-1), color var(--dur-1);
}
.ade-min__drag:hover { background: var(--blue-tint); color: var(--blue); }
.ade-min__n {
  position: absolute; left: 50px; top: 6px; z-index: 1; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 999px; background: rgb(59 33 25 / .85); color: #fff; font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums lining-nums;
}
.ade-min__img { grid-area: img; width: 64px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }
.ade-min__img--none { display: grid; place-items: center; color: var(--blue); background: var(--blue-tint); }
.ade-min__img--none .ic { width: 22px; height: 22px; }
.ade-min__body { grid-area: body; min-width: 0; }
.ade-min__title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--brown); }
.ade-min__title a { color: inherit; text-decoration: none; }
.ade-min__title a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.ade-min__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; font-size: var(--fs-meta); color: var(--muted); }
.ade-min__when { color: var(--gold-ink); font-weight: 600; }
.ade-min__status { grid-area: status; }
.ade-min__status .badge .ic { width: 14px; height: 14px; }
.ade-min__acts { grid-area: acts; display: flex; align-items: center; gap: 4px; }
.ade-min__acts .icon-btn { width: 44px; height: 44px; color: var(--blue); }
.ade-min__acts .icon-btn:disabled { color: var(--blue-line); background: none; cursor: default; }
.ade-min.is-off .ade-min__title { color: var(--muted); }
@media (max-width: 599.98px) {
  .ade-min { grid-template-columns: 44px 56px minmax(0, 1fr); grid-template-areas: "drag img body" "drag img status" ". acts acts"; }
  .ade-min__img { width: 56px; }
  .ade-min__acts { justify-content: flex-end; }
}
.ade-mins.is-sorting .ade-min:not(.is-lifted) { transition: transform var(--dur-2) var(--ease-out); }
.ade-min.is-lifted { z-index: 3; pointer-events: none; box-shadow: 0 18px 32px -14px rgb(59 33 25 / .45); outline: 2px solid var(--blue); border-radius: var(--r-sm); }
.ade-min.is-lifted .ade-min__drag { background: var(--blue); color: #fff; }
.ade-min.is-moved { animation: ade-flash 1.2s var(--ease-out); }

/* ---------- служіння: редактор ---------- */
.ade-sub { display: grid; gap: 12px; padding-top: 28px; border-top: 1px solid var(--blue-line); }
.ade-sub .field + .field { margin-top: 8px; }
.ade-sub > .adm-sec__lead { margin-top: -8px; }
.ade-sub > .btn { justify-self: start; }
.ade-people { list-style: none; display: grid; gap: 12px; }
.ade-person {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: end;
  padding: 12px; border-radius: var(--r-md); background: var(--paper-2);
}
.ade-person .field + .field { margin-top: 0; }
.ade-person__del { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); }
.ade-person__del:hover { color: var(--error); background: var(--error-tint); }
@media (min-width: 600px) {
  .ade-person { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .ade-person__del { grid-column: 3; grid-row: 1; align-self: end; margin-bottom: 2px; }
}
.ade-mg { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .ade-mg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ade-mg__item { position: relative; display: grid; gap: 4px; align-content: start; }
.ade-mg__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--paper-2); }
.ade-mg__alt { font-size: var(--fs-small); color: var(--muted); line-height: 1.35; }
.ade-mg__del { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; background: rgb(255 255 255 / .94); color: var(--brown); box-shadow: 0 2px 6px -2px rgb(59 33 25 / .35); }
.ade-mg__del:hover { color: var(--error); background: #fff; }
.ade-mg__add .ade-drop { aspect-ratio: 4 / 3; min-height: 0; padding: 8px; }
.ade-mg__add .ade-drop__pick { font-size: var(--fs-meta); }
.ade-ministry .ade-box .link { justify-self: start; }

/* ---------- користувачі ---------- */
.ade-users { list-style: none; border-top: 1px solid var(--blue-line); }
.ade-user {
  display: grid; align-items: center; column-gap: 16px; row-gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--blue-line);
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "av who" ". role" ". last" ". st" ". acts";
}
@media (min-width: 768px) {
  .ade-user {
    grid-template-columns: 44px minmax(0, 1.4fr) minmax(12rem, 1fr) minmax(0, .9fr);
    grid-template-areas: "av who role last" ". st acts acts";
  }
}
.ade-user__av { grid-area: av; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-tint); color: var(--blue); font-weight: 700; }
.ade-user.is-off .ade-user__av { background: var(--paper-2); color: var(--muted); }
.ade-user__who { grid-area: who; min-width: 0; }
.ade-user__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: 1.0625rem; color: var(--brown); }
.ade-user.is-off .ade-user__name { color: var(--muted); }
.ade-user__mail { font-size: var(--fs-meta); color: var(--muted); overflow-wrap: anywhere; }
.ade-user__role { grid-area: role; min-width: 0; }
.ade-user__role .input { min-height: 44px; padding-block: 0; font-size: var(--fs-meta); font-weight: 600; }
.ade-user__note { margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
.ade-user__last { grid-area: last; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-meta); }
.ade-user__last time { color: var(--gold-ink); font-weight: 600; }
.ade-user__k { color: var(--muted); }
.ade-user__st { grid-area: st; }
.ade-user__acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ade-user__off { color: var(--error); }
@media (min-width: 768px) {
  .ade-user__last { display: grid; gap: 0; }
  .ade-user__acts { justify-content: flex-end; }
}
.ade-roles { display: grid; gap: 12px; margin-top: 40px; padding: 20px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--blue-line); }
.ade-roles__list { margin: 0; display: grid; gap: 10px; }
.ade-roles__list > div { display: grid; gap: 2px; }
@media (min-width: 600px) { .ade-roles__list > div { grid-template-columns: 14rem minmax(0, 1fr); gap: 16px; } }
.ade-roles__list dt { font-weight: 700; color: var(--brown); }
.ade-roles__list dd { margin: 0; color: var(--ink); }
.ade-invite { width: min(560px, calc(100vw - 24px)); }
.ade-invite .dlg__body .field + .field { margin-top: 8px; }
.ade-invite__roles > legend { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); margin-bottom: 6px; }
.ade-invite__roles .check { padding: 10px 12px; }

/* ---------- мій профіль ---------- */
.ade-myrole__v { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--fs-meta); color: var(--ink); }
.ade-myrole__v b { font-size: 1rem; color: var(--brown); }
.ade-myrole .field__hint { margin-top: 6px; }
.ade-rules { list-style: none; display: grid; gap: 4px; margin-top: -8px; font-size: var(--fs-meta); color: var(--muted); }
.ade-rules li { display: flex; align-items: center; gap: 8px; }
.ade-rules .ic { width: 18px; height: 18px; }
.ade-rules__ok { display: none; color: var(--blue); }
.ade-rules li.is-ok { color: var(--ink); }
.ade-rules li.is-ok .ade-rules__ok { display: block; }
.ade-rules li.is-ok .ade-rules__no { display: none; }
.ade-rules li.is-bad { color: var(--error); font-weight: 600; }

/* ==== 32-adm-sermons.css ==== */
/* Адмінка · Проповіді (напрям A): справжній плеєр YouTube, стан «без відео», поле посилання, порожній текст.
   Основа екрана — 31-admin-editors.css (.ade-*), тут лише те, чого не було в прототипі. */

/* плеєр: iframe YouTube поверх фасаду */
.ade-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ade-player.is-yt .ade-player__big,
.ade-player.is-yt .ade-player__live { display: none; }
.ade-player.is-yt .ade-player__frame::after { display: none; }
.ade-player__note .link { white-space: nowrap; }

/* без відео: фото приглушене, чесний текст замість кнопки відтворення */
.ade-player.is-novideo .ade-player__frame img { opacity: .35; filter: grayscale(.4); }
.ade-player__none {
  position: absolute; inset: auto 12px 12px; display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-sm); background: rgb(255 255 255 / .94); color: var(--ink);
  font-size: var(--fs-small); line-height: 1.4;
}
.ade-player__none .ic { flex: none; width: 18px; height: 18px; color: var(--blue); }
.ade-player__none[hidden] { display: none; }

/* смуга без JS не працює: лишаються поля часу */
html:not(.js) .ade-tl { display: none; }
.ade-tl[hidden] { display: none; }

/* посилання на відео (проповідь, внесена вручну) */
.ade-yt { max-width: 46rem; margin-top: 16px; }
.ade-yt + .ade-tl, .ade-yt ~ .ade-times { margin-top: 20px; }

/* тексту немає */
.ade-text__none .empty { padding: 16px 0 8px; }

/* ==== 33-adm-schedule.css ==== */
/* Адмінка · Розклад і трансляція (напрям B): доповнення до 31-admin-editors.css (розклад) і 30-admin.css (ефір). */

/* ---------- розклад: без JS форми просто розгорнуті; з JS — лише відкрита ---------- */
.js .ade-sl:not(.is-open) > .ade-sl__form { display: none; }
html:not(.js) [data-ade-sl-toggle], html:not(.js) [data-ade-sl-cancel], html:not(.js) .ade-sl__del,
html:not(.js) .ade-days__chips, html:not(.js) .ade-days > .field__error { display: none; }
html:not(.js) .ade-sl { padding-bottom: 24px; }
.ade-nojs-days { display: flex; flex-wrap: wrap; gap: 0 16px; border: 0; padding: 0; margin: 0; }
.ade-nojs-days > legend { padding: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }

.ade-sl.is-saved { background: var(--blue-tint); }
.ade-sl { scroll-margin-top: calc(var(--adm-top-h) + 16px); }
.ade-sl__keep { margin-right: auto; max-width: 30rem; font-size: var(--fs-meta); color: var(--muted); }
.ade-ev.is-off .slot__title, .ade-ev.is-off .ade-ev__d { color: var(--muted); }
.ade-sl__cap { display: grid; gap: 16px; }
.ade-sl__cap .field + .field, .ade-sl__cap .ade-sl__row2 .field + .field { margin-top: 0; }
@media (max-width: 599.98px) { .ade-sl__cap { padding-left: 0; } }

/* «Більше для сторінки події» і «Вимкнені зібрання» — розгортання */
.ade-sl__more, .ade-off { border-radius: var(--r-md); }
.ade-sl__more > summary, .ade-off > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer;
  color: var(--blue); font-weight: 600;
}
.ade-sl__more > summary::-webkit-details-marker, .ade-off > summary::-webkit-details-marker { display: none; }
.ade-sl__more > summary .ic, .ade-off > summary .ic { width: 20px; height: 20px; transition: rotate var(--dur-2) var(--ease-out); }
.ade-sl__more[open] > summary .ic, .ade-off[open] > summary .ic { rotate: 180deg; }
.ade-sl__more > summary:hover, .ade-off > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.ade-sl__more > summary .field__opt { font-weight: 400; color: var(--muted); }
.ade-sl__more > .ade-sl__grid { padding: 4px 0 8px; }
.ade-off { margin-top: 20px; }
.ade-off > summary { font-size: 1.0625rem; }
.ade-off > .adm-sec__lead { margin-top: 0; }

/* ---------- трансляція ---------- */
.adm-live__until { margin-top: 8px; font-size: var(--fs-meta); color: var(--brown); font-weight: 600; }
.adm-live__until:empty { display: none; }

/* ==== 34-adm-news-gallery.css ==== */
/* Адмінка · Новини й галерея — доповнення до 30-admin.css / 31-admin-editors.css (класи .adn-*). */

/* Список новин: рубрика поруч із чипами; дата виходу під бейджем «Заплановано» */
.adn-rubric { margin: 0; min-width: 13rem; }
.adn-rubric .select { display: block; }
.adn-when { display: block; margin-top: 4px; font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }

/* Альбоми без жодного фото — сіра плитка з іконкою замість обкладинки */
.adn-noimg { display: grid; place-items: center; color: var(--muted); }
.adn-noimg .ic { width: 28px; height: 28px; }

/* Альбом: посилання на новину про подію; підказка для роботи без JS */
.adn-news-link { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-meta); color: var(--muted); }
.adn-news-link .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.js .adn-nojs { display: none; }

/* ==== 35-adm-church.css ==== */
/* Адмінка · Служіння, звернення, користувачі, профіль (напрям D).
   Доповнює прототипні правила з 30-admin.css / 31-admin-editors.css (там — основа .ade-min, .ade-person, .ade-mg,
   .adm-inbox, .ade-user, .ade-rules). Тут — лише те, чого в прототипі не було. */

/* ---------- служіння: редактор ---------- */
.ade-sub__h3 { margin-top: 8px; font-size: 1.0625rem; font-weight: 700; color: var(--brown); }
.ade-sub > .field__error { margin: 0; }

/* «Хто веде»: імʼя · роль · група */
@media (min-width: 600px) {
  .ade-person--3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) 44px; }
  .ade-person--3 .ade-person__del { grid-column: 4; }
}
@media (max-width: 599.98px) {
  .ade-person--3 .ade-person__del { grid-row: 1 / span 3; }
}

/* фото зі служіння: підпис під кожним фото, стан завантаження */
.ade-mg__alt-in { min-height: 40px; padding-block: 6px; font-size: var(--fs-meta); }
.ade-mg__add.is-busy .ade-drop { opacity: .6; cursor: progress; }
.ade-mg__few { display: flex; align-items: flex-start; gap: 8px; max-width: none; }
.ade-mg__few .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold-ink); }

/* показ і «Коли збираються» в бічній колонці */
.ade-ministry .ade-box .adm-seg__opts { flex-wrap: wrap; }
.ade-when__own, .ade-when__more { display: grid; gap: 16px; }
.ade-when__own[hidden], .ade-when__more[hidden] { display: none; }
.ade-when .check { align-items: flex-start; }

/* ---------- звернення ---------- */
.adm-detail__text p + p { margin-top: .6em; }
.adm-detail__foot form { display: contents; }

/* ---------- користувачі ---------- */
.ade-issued { margin-bottom: 24px; }
.ade-issued .notice__body > * + * { margin-top: 8px; }
.ade-issued__kv { display: grid; gap: 8px; margin: 4px 0 0; }
.ade-issued__kv > div { display: grid; gap: 2px; }
@media (min-width: 600px) { .ade-issued__kv > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: 12px; } }
.ade-issued__kv dt { font-size: var(--fs-meta); color: var(--muted); }
.ade-issued__kv dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; overflow-wrap: anywhere; }
.ade-issued__pass {
  padding: 6px 12px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--blue-line);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.125rem; letter-spacing: .06em; color: var(--brown);
  user-select: all;
}
.ade-user__role-form { display: flex; align-items: center; gap: 8px; }
.ade-user__role-form .select { flex: 1 1 auto; min-width: 0; }
.ade-user__acts form { display: contents; }
.ade-user__st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ade-user__st .ade-user__note { margin: 0; }

/* ---------- мій профіль ---------- */
.ade-profile { margin-top: 8px; }
.adm-page > .notice + .ade-profile { margin-top: 24px; }

/* ==== 36-adm-video.css ==== */
/* ======================================================================
   АДМІНКА · ВІДЕО — список записів із чергою обробки і екран запису (опис, головні думки, частини, статус).
   Спільне як є: .adm-sec/.adm-filters/.adm-table/.adm-bar/.adm-seg/.adm-panel, .field/.input/.select, .badge,
   плеєр .ade-player (31-admin-editors.css), .ade-fields, .ade-count. Нове — лише .adv-*.
   ====================================================================== */

/* ---------- черга обробки: числа в реченні, а не плитки ---------- */
.adv-queue { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.adv-queue__link {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding-top: 10px;
  color: var(--ink); font-size: var(--fs-meta); text-decoration: none;
}
.adv-queue__link b { color: var(--brown); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.adv-queue__link:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.adv-queue__link[aria-current] { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.adv-queue__link.is-error, .adv-queue__link.is-error b { color: var(--error); }

.adv-failed { margin-top: 16px; padding: 16px 20px 4px; border: 1px solid var(--blue-line); border-radius: var(--r-lg); background: #fff; }
.adv-failed__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.adv-failed__title { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 700; color: var(--brown); }
.adv-failed__title .ic { width: 20px; height: 20px; color: var(--error); }
.adv-failed__list { list-style: none; margin-top: 8px; }
.adv-failed__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--blue-line);
}
.adv-failed__name { font-weight: 600; color: var(--brown); text-decoration: none; }
.adv-failed__name:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.adv-failed__date { display: block; margin-top: 2px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.adv-failed__date time { color: var(--gold-ink); font-weight: 600; }
.adv-failed__err { margin-top: 4px; max-width: 72ch; font-size: var(--fs-meta); color: var(--ink); line-height: 1.45; }
.adv-failed__row form { margin: 0; }
@media (max-width: 599.98px) {
  .adv-failed { padding: 14px 14px 2px; }
  .adv-failed__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .adv-failed__retry { justify-self: start; }
}

/* ---------- список ---------- */
.adv-list { margin-top: 32px; }
.adv-sel { width: auto; min-width: 11rem; }
.adv-sel .input { min-height: 44px; background: #fff; }
.adv-t-sub { display: none; }
@media (min-width: 1280px) { .adv-t-sub { display: flex; } }
.adv-pipe { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.adv-pipe .ic { width: 16px; height: 16px; color: var(--blue); }
.adv-pipe--wait .ic { color: var(--gold-ink); }
.adv-pipe--quiet { font-style: italic; }
.adm-t-sub .adv-pipe { font-size: var(--fs-small); }

/* ---------- екран запису ---------- */
.adv-edit { display: flex; flex-direction: column; gap: 32px; }
.adv-side { display: contents; }
.adv-player { order: 1; }
.adv-main { order: 2; min-width: 0; display: grid; gap: 32px; }
.adv-state { order: 3; }
.adv-sermons { order: 4; }
.adv-edit > .adm-bar { order: 5; margin-top: 0; }
@media (min-width: 768px) and (max-width: 1279.98px) { .adv-player, .adv-state, .adv-sermons { max-width: 40rem; } }
@media (min-width: 1280px) {
  .adv-edit { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; column-gap: 40px; row-gap: 32px; align-items: start; }
  .adv-side { display: grid; gap: 24px; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--adm-top-h) + 24px); }
  .adv-side > * { grid-area: auto; } /* .ade-player має grid-area: player для екрана проповіді */
  .adv-main { grid-column: 1; grid-row: 1; }
  .adv-edit > .adm-bar { grid-column: 1 / -1; }
}
.adv-sec { padding-top: 28px; border-top: 1px solid var(--blue-line); }
.adv-main > .adv-sec:first-child { padding-top: 0; border-top: 0; }
.adv-sec .adm-seg { margin-top: 12px; }
.adv-sec .adm-hint { margin-top: 8px; }

.adv-state h2, .adv-sermons h2 { font-size: 1.1875rem; }
.adv-dl > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--blue-line); }
.adv-dl dt { font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.adv-dl dd { margin: 0; font-size: var(--fs-meta); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.adv-dl__yt { color: var(--muted) !important; }
.adv-state .btn { justify-self: start; }
.adv-sermons__list { list-style: none; }
.adv-sermons__list li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--blue-line); }
.adv-sermons__list .link { font-weight: 600; }
.adv-sermons__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }

/* головні думки: рядок-поле + «прибрати» */
.adv-points legend { margin-bottom: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--brown); }
.adv-points__list { list-style: none; display: grid; gap: 8px; margin-bottom: 12px; counter-reset: pt; }
.adv-point { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 44px; align-items: center; gap: 4px; counter-increment: pt; }
.adv-point::before { content: counter(pt) "."; font-size: var(--fs-meta); font-weight: 600; color: var(--gold-ink); font-variant-numeric: lining-nums; }
.adv-point__del, .adv-part__del { color: var(--muted); }
.adv-point__del:hover, .adv-part__del:hover { color: var(--error); background: var(--error-tint); }

/* частини запису: час початку й кінця з «взяти з плеєра», що це, назва */
.adv-parts { list-style: none; margin: 12px 0 16px; border-top: 1px solid var(--blue-line); }
.adv-part { display: grid; gap: 12px; padding: 16px 0 8px; border-bottom: 1px solid var(--blue-line); }
.adv-part .field + .field { margin-top: 0; }
.adv-part__times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adv-time__row { display: flex; align-items: center; gap: 4px; }
.adv-time__row .input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums lining-nums; }
.adv-take { flex: none; color: var(--blue); }
.adv-take.is-done { color: var(--moss); }
.adv-part__tools { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.adv-part__go .ic { width: 16px; height: 16px; }
.adv-part__who { font-size: var(--fs-small); color: var(--muted); }
.adv-part__del { margin-left: auto; }
.adv-part.is-current { background: var(--blue-tint); box-shadow: 0 0 0 12px var(--blue-tint); border-radius: 2px; }
@media (min-width: 768px) {
  .adv-part { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 16px; align-items: end; }
  .adv-part__title, .adv-part__tools { grid-column: 1 / -1; }
}
/* статус: 4 варіанти не вміщаються рядком на телефоні — 2×2 */
@media (max-width: 599.98px) {
  .adv-sec .adm-seg__opts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==== 90-demo.css ==== */
/* ======================================================================
   ДЕМО-ПАНЕЛЬ (лише прототип)
   ====================================================================== */
.demo-btn {
  position: fixed; left: 12px; bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 12px); z-index: 35;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--blue-line); background: #fff; color: var(--blue);
  font-size: .8125rem; font-weight: 600;
}
.demo-btn .ic { width: 18px; height: 18px; }
@media (min-width: 768px) { .demo-btn { left: 16px; bottom: 16px; } }

.demo {
  width: min(420px, calc(100vw - 24px)); max-height: 90dvh; overflow: auto;
  padding: 0; border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-sheet);
}
.demo::backdrop { background: rgb(59 33 25 / .35); }
.demo__form { padding: 12px 20px 20px; display: grid; gap: 16px; }
.demo__head { display: flex; align-items: center; justify-content: space-between; margin-right: -8px; }
.demo__title { font-weight: 700; color: var(--brown); font-size: 1.125rem; }
.demo__note { font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.demo fieldset { border: 0; padding: 0; margin: 0; }
.demo legend { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin-bottom: 8px; padding: 0; }
.demo__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.demo__presets button {
  min-height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--blue-soft); background: #fff; color: var(--blue); font-size: .8125rem; font-weight: 600;
}
.demo__presets button:hover { background: var(--blue-tint); }
.demo__presets button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.demo__seg { display: flex; gap: 6px; flex-wrap: wrap; }
.demo__seg label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--blue-line); border-radius: var(--r-sm); font-size: .875rem; font-weight: 500; cursor: pointer;
}
.demo__field { display: grid; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.demo__field select { height: 44px; border: 1.5px solid var(--blue-soft); border-radius: var(--r-sm); padding: 0 10px; background: #fff; color: var(--ink); font-size: .9375rem; }
.demo__check { display: flex; align-items: center; gap: 8px; font-size: .875rem; }
.demo__check input, .demo__seg input { width: 18px; height: 18px; margin: 0; }
.demo__foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ==== 99-motion.css ==== */
/* ======================================================================
   РУХ — «поріг відповідає»
   ====================================================================== */
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rel.is-revealing { animation: reveal var(--dur-3) var(--ease-out); }
.time-rule.is-growing { animation: grow var(--dur-3) var(--ease-out); }
.copy-fade { animation: fadein 150ms linear; }
@keyframes fadein { from { opacity: .2; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .rel { clip-path: none !important; }
  .live-dot::after { display: none; }
}
@media (prefers-reduced-data: reduce) {
  .door > img:first-child { display: none; }
  .door .door__mark { display: block !important; }
}

.ic--fill { fill: currentColor; stroke: none; }

/* Сторінка-заглушка soon.html */
.soon-page { background: var(--blue); color: #fff; --focus: var(--mint); }
.soon {
  min-height: 100svh; display: grid; place-content: center; justify-items: start; gap: 16px;
  max-width: 34rem; margin-inline: auto; padding: 32px var(--gutter);
}
.soon h1 { font-size: var(--fs-h2); line-height: 1.15; text-wrap: balance; }
.soon p { color: var(--mint); max-width: 44ch; }
.soon img { width: 48px; height: auto; }
.sheet .icon-btn:focus-visible, .demo .icon-btn:focus-visible { outline-offset: -3px; }