/* ===== CZB V10.7: головна для десктопа, планшета і телефона в ландшафті (від 768px).
   Мобільна V4 (до 767px) не зачіпається, тексти не змінюються.
   Підключати ОКРЕМИМ .css файлом, не вставляти в .twig ===== */

/* ---------- Спільне від 768px: шапка, футер ---------- */
@media (min-width: 768px) {
  body:has(#common-home) { background: #f6f5fb; }
  header { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #eceaf5; position: sticky; top: 0; z-index: 60; }
  header > .container { width: auto; max-width: 1248px; padding-left: 24px; padding-right: 24px; }
  header + .container { padding: 0; }

  #top-2 #logo, #top-2 #logo a { display: flex !important; align-items: center; gap: 12px; text-decoration: none; height: auto; margin: 0; padding: 0; line-height: 0; }
  #top-2 #logo img.img-responsive { display: none !important; }
  #top-2 #logo img.czb-mark { display: block !important; flex: 0 0 44px; width: 44px !important; height: 44px !important; border-radius: 50%; }
  #top-2 #logo .czb-name { display: block !important; font: 600 18px/1.2 Inter, system-ui, sans-serif; letter-spacing: -0.01em; color: #1e1c33; white-space: nowrap; }
  #top-2 .header-icons-column { display: none !important; }

  /* футер в один рядок: © і соцмережі зліва, «Контакти» і «Надіслати прохання» справа */
  footer { margin-top: 0 !important; padding: 18px 0 !important; }
  footer .footer-container { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px 20px; width: auto; max-width: 1248px; margin: 0 auto !important; padding: 0 24px !important; }
  footer .footer-container::before, footer .footer-container::after { display: none !important; }
  footer .footer-container > p { order: 1; margin: 0 !important; font-size: 14px; color: rgba(255, 255, 255, .7); }
  footer .footer-container > hr { display: none !important; }
  footer .footer-container > .row { order: 3; margin: 0 0 0 auto !important; display: flex !important; gap: 24px; }
  footer .footer-container > .row::before, footer .footer-container > .row::after { display: none !important; }
  footer .footer-info-col, footer .footer-support-col, footer .footer-account-col { display: none !important; }
  footer .footer-contact-col, footer .footer-prayer-col { width: auto !important; float: none !important; padding: 0 !important; }
  footer .footer-contact-col h5, footer .footer-prayer-col h5 { display: none !important; }
  footer .footer-contact-col ul, footer .footer-prayer-col ul { margin: 0 !important; }
  footer .footer-contact-col a, footer .footer-prayer-col a { font-size: 15px; font-weight: 500; color: #fff !important; }
  footer .footer-contact-col a:hover, footer .footer-prayer-col a:hover { color: #c9c3ff !important; }
  footer .czb-social { order: 2; display: flex !important; gap: 10px; margin: 0 !important; }
  footer .czb-social a {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: #fff !important; transition: background .2s ease, transform .2s ease;
  }
  footer .czb-social a:hover { background: #6360ba; transform: translateY(-2px); }
  footer .czb-social svg { display: block; width: 20px; height: 20px; fill: currentColor; }
}

/* ---------- Головна від 768px ---------- */
@media (min-width: 768px) {
  #block-home-top { display: none !important; }

  #common-home {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px; align-items: stretch;
    width: auto; max-width: 1248px; padding: 28px 24px 32px;
  }
  #common-home::before, #common-home::after { display: none !important; }
  #common-home > .row, #common-home #content, #common-home #content > .section,
  #common-home .home-main-layout, #common-home .home-primary-grid, #common-home .home-secondary-grid,
  #common-home .czb-home, #common-home .v4-duo { display: contents !important; }
  #common-home .czb-home > :not(.v4-duo), #common-home > .czb-bar { display: none !important; }
  #common-home .home-church-visit, #common-home .home-calendar-promo, #common-home .bp-home-support,
  #common-home .home-ministries, #common-home .v4-tile { margin: 0 !important; min-width: 0; width: auto !important; }

  /* порядок: hero → «Підтримка поруч» + служіння → проповідь + календар + храм */
  #common-home .home-church-visit       { grid-column: 1 / -1;      grid-row: 1; }
  #common-home .bp-home-support         { grid-column: 1 / span 8;  grid-row: 2; }
  #common-home .home-ministries         { grid-column: 9 / span 4;  grid-row: 2; }
  #common-home .v4-sermon               { grid-column: 1 / span 6;  grid-row: 3; }
  #common-home .home-calendar-promo     { grid-column: 7 / span 3;  grid-row: 3; }
  #common-home .v4-tile:not(.v4-sermon) { grid-column: 10 / span 3; grid-row: 3; }

  /* ===== 1. Hero: H1 і тексти зліва, живе фото служіння справа ===== */
  #common-home .home-church-visit__inner {
    display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr; column-gap: 40px; row-gap: 22px;
    background: #fff !important; border: 0 !important; border-radius: 28px !important;
    padding: 44px 16px 44px 48px !important; box-shadow: 0 18px 50px rgba(45, 46, 75, .08);
    overflow: hidden; min-height: 470px;
  }
  #common-home .home-church-visit__inner::after {
    content: "" !important; position: static !important; display: block !important;
    grid-column: 2; grid-row: 1 / span 3; width: auto !important; height: auto !important;
    border-radius: 22px !important; margin: -28px 0;
    background: #2a2840 url("/image/catalog/banner-musicians.jpg") 100% 50% / cover no-repeat !important;
  }
  #common-home .home-church-visit__intro   { grid-column: 1; grid-row: 1; }
  #common-home .home-church-visit__facts   { grid-column: 1; grid-row: 2; }
  #common-home .home-church-visit__actions { grid-column: 1; grid-row: 3; align-self: end; }
  #common-home .home-church-visit__kicker { font: 600 12px/1 Inter, system-ui, sans-serif !important; letter-spacing: .12em; color: #6360ba !important; }
  #common-home .home-church-visit__title {
    font: 700 40px/1.12 Inter, system-ui, sans-serif !important; letter-spacing: -0.025em;
    color: #1e1c33 !important; margin: 14px 0 12px !important; border: 0 !important; padding: 0 !important;
  }
  #common-home .home-church-visit__subtitle { font: 600 19px/1.35 Inter, system-ui, sans-serif !important; color: #6360ba !important; margin-bottom: 14px !important; }
  #common-home .home-church-visit__lead,
  #common-home .home-church-visit__social { font: 400 16px/1.6 Inter, system-ui, sans-serif !important; color: #55526b !important; }
  #common-home .home-church-visit__facts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  #common-home .home-church-visit__fact { width: auto !important; background: #f6f5fb !important; border: 0 !important; border-radius: 16px !important; }
  #common-home .home-church-visit__actions { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; }
  #common-home .home-church-visit__primary { padding: 15px 24px !important; border-radius: 14px !important; font-size: 16px !important; box-shadow: 0 10px 24px rgba(99, 96, 186, .3); }
  #common-home .home-church-visit__secondary { border-radius: 14px !important; padding: 14px 20px !important; }

  /* ===== Календар: темна вертикальна картка між проповіддю і храмом ===== */
  #common-home .home-calendar-promo__inner {
    display: flex !important; flex-direction: column; gap: 12px; height: 100%;
    align-items: stretch !important; text-align: left !important;
    background: #1e1c33 !important; color: #fff !important; border: 0 !important; border-radius: 24px !important;
    padding: 22px !important; box-shadow: 0 12px 34px rgba(30, 28, 51, .22);
  }
  #common-home .home-calendar-promo__inner::before, #common-home .home-calendar-promo__inner::after { display: none !important; }
  #common-home .home-calendar-promo__head { justify-content: flex-start !important; text-align: left !important; margin: 0 !important; }
  #common-home .home-calendar-promo__intro { margin: 0 !important; text-align: left !important; color: rgba(255, 255, 255, .7) !important; font-size: 13px !important; line-height: 1.5 !important; }
  #common-home .home-calendar-promo__schedule { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; margin: 0 !important; }
  #common-home .home-calendar-promo__note { margin: 0 !important; text-align: left !important; color: rgba(255, 255, 255, .6) !important; font-size: 12px !important; }
  #common-home .home-calendar-promo__action { margin: auto 0 0 !important; width: 100%; }
  #common-home .home-calendar-promo__action a { width: 100%; justify-content: center; background: #fff !important; color: #1e1c33 !important; border-radius: 12px !important; }
  #common-home .home-calendar-promo__kicker { color: #c9c3ff !important; }
  #common-home #home-calendar-title { color: #fff !important; }
  #common-home .home-calendar-promo__visual { background: rgba(255, 255, 255, .1) !important; color: #fff !important; border: 0 !important; }
  #common-home .home-calendar-promo__event {
    width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10px 12px !important;
    background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 12px !important;
  }
  #common-home .home-calendar-promo__event strong { color: #fff !important; }
  #common-home .home-calendar-promo__event span { color: rgba(255, 255, 255, .7) !important; }

  /* ===== 3. Проповідь: велика горизонтальна картка ===== */
  #common-home .v4-tile {
    position: relative; display: flex; overflow: hidden; isolation: isolate; text-decoration: none;
    border-radius: 24px; box-shadow: 0 12px 34px rgba(45, 46, 75, .1);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  #common-home .v4-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(45, 46, 75, .16); }
  #common-home .v4-tile-img { display: block; position: relative; overflow: hidden; }
  #common-home .v4-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  #common-home .v4-tile:hover .v4-tile-img img { transform: scale(1.04); }
  #common-home .v4-tile-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  #common-home .v4-over {
    font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 10px; border-radius: 8px;
  }
  #common-home .v4-tile-txt b { font: 700 28px/1.2 Inter, system-ui, sans-serif; letter-spacing: -0.02em; }
  #common-home .v4-tile-txt small { font: 400 15px/1.4 Inter, system-ui, sans-serif; }

  /* проповідь: лише обкладинка з кнопкою play (назва є на самій обкладинці; для читачів екрана є aria-label) */
  /* картка як відеоплеєр: обкладинка 16:9 по центру на темному тлі */
  #common-home .v4-sermon { align-items: center; background: #0f0e1a; min-height: 0; }
  #common-home .v4-sermon .v4-tile-img { flex: 1 1 auto; width: 100%; aspect-ratio: 16 / 9; align-self: center; }
  #common-home .v4-sermon .v4-tile-txt { display: none !important; }
  #common-home .v4-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
    width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .94);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    transition: transform .2s ease;
  }
  #common-home .v4-tile:hover .v4-play { transform: translate(-50%, -50%) scale(1.08); }
  #common-home .v4-play svg { width: 24px; height: 24px; fill: #6360ba; margin-left: 3px; }

  /* ===== 3. Храм: фото на всю картку, текст на затемненні ===== */
  #common-home .v4-tile:not(.v4-sermon) { flex-direction: column; justify-content: flex-end; background: #2a2840; color: #fff; min-height: 260px; }
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img { position: absolute; inset: 0; z-index: -1; }
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 18, 40, 0) 35%, rgba(20, 18, 40, .6) 65%, rgba(20, 18, 40, .92) 100%);
  }
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-txt { padding: 24px 26px; }
  #common-home .v4-tile:not(.v4-sermon) .v4-over { color: #1e1c33; background: rgba(255, 255, 255, .92); }
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-txt b { color: #fff; font-size: 24px; }
  #common-home .v4-pill {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
    background: #fff; color: #1e1c33; padding: 11px 18px; border-radius: 12px;
    font: 600 15px/1 Inter, system-ui, sans-serif;
  }
  #common-home .v4-pill svg, #common-home .v4-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

  /* ===== 4. Служіння (зліва) і «Підтримка поруч» (справа) ===== */
  #common-home .home-ministries { background: #fff !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 12px 34px rgba(45, 46, 75, .08); }
  #common-home .home-ministries__links { grid-template-columns: 1fr 1fr !important; }
  #common-home .home-ministries__all { margin-top: 16px !important; }
  #common-home .bp-home-support { border-radius: 24px !important; border: 0 !important; box-shadow: 0 12px 34px rgba(45, 46, 75, .12); }
}

/* ---------- 1200px+: hero трохи вищий, H1 більший ---------- */
@media (min-width: 1200px) {
  /* фото трохи збільшене і притиснуте догори, щоб не було видно світлої дуги банера знизу */
  #common-home .home-church-visit__inner::after { background-size: auto 125% !important; background-position: 100% 0 !important; }
  #common-home .home-church-visit__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 40px 16px 40px 44px !important; row-gap: 20px; min-height: 0; }
  #common-home .home-church-visit__title { font-size: 38px !important; }
}

/* ---------- 768–1199px: планшет і телефон у ландшафті ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  #common-home { gap: 20px; padding-top: 22px; }
  #common-home .bp-home-support         { grid-column: 1 / -1;     grid-row: 2; }
  #common-home .home-ministries         { grid-column: 1 / span 6; grid-row: 3; }
  #common-home .home-calendar-promo     { grid-column: 7 / span 6; grid-row: 3; }
  #common-home .v4-sermon               { grid-column: 1 / span 7; grid-row: 4; }
  #common-home .v4-tile:not(.v4-sermon) { grid-column: 8 / span 5; grid-row: 4; }

  #common-home .home-church-visit__inner { grid-template-columns: 1fr; grid-template-rows: 280px auto auto auto; padding: 16px 16px 32px !important; column-gap: 0; min-height: 0; }
  /* на широкій смузі показуємо лише праву частину банера з музикантами, без надпису */
  #common-home .home-church-visit__inner::after { grid-column: 1; grid-row: 1; margin: 0; background-size: 200% auto !important; background-position: 100% 45% !important; }
  #common-home .home-church-visit__intro   { grid-row: 2; padding: 12px 16px 0; }
  #common-home .home-church-visit__facts   { grid-row: 3; padding: 0 16px; }
  #common-home .home-church-visit__actions { grid-row: 4; padding: 0 16px; }
  #common-home .home-church-visit__title { font-size: 32px !important; }
  #common-home .v4-tile-txt b { font-size: 22px; }
}

/* ---------- 768–991px: «Підтримка поруч» і служіння на всю ширину ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  #common-home .home-ministries__links  { grid-template-columns: 1fr 1fr !important; }
}

/* телефон у ландшафті: низький екран, шапка не прилипає */
@media (min-width: 768px) and (max-height: 500px) {
  header { position: static; }
}

/* ---------- Шапка з меню в один рядок: від 990px (там, де тема показує десктопне меню) ---------- */
@media (min-width: 990px) {
  #top-2 { display: flex; align-items: center; gap: 20px; min-height: 76px; padding: 0; flex-wrap: wrap; }
  #top-2 .logo-column { flex: 0 0 auto; padding: 0; }

  #top-2 .main-nav-wrap { order: 2; flex: 1 1 auto; background: none !important; margin: 0; padding: 0; height: auto; box-shadow: none; border: 0; }
  #top-2 .main-nav { display: flex; align-items: center; justify-content: flex-end; gap: 2px; background: none !important; margin: 0; padding: 0; float: none; }
  #top-2 .main-nav > li { float: none; background: none; border: 0; }
  #top-2 .main-nav > li > a {
    display: block; padding: 9px 13px; border-radius: 11px !important;
    font: 500 15px/1.2 Inter, system-ui, sans-serif; color: #2b2940 !important;
    background: none !important; text-transform: none; letter-spacing: 0; white-space: nowrap;
  }
  #top-2 .main-nav > li > a:hover,
  #top-2 .main-nav > li:hover > a { background: #f1f0f9 !important; color: #4b47a3 !important; }

  /* які пункти показувати і в якому порядку (мобільне меню не змінюється) */
  #top-2 .main-nav > li:has(> a[href*="path=70"]),
  #top-2 .main-nav > li:has(> a[href$="/home"]),
  #top-2 .main-nav > li:has(> a[href$="/alfa.html"]),
  #top-2 .main-nav > li:has(> a[href$="/eshl"]) { display: none !important; }
  #top-2 .main-nav > li:has(> a[href$="/pro-cerkvu"])  { order: 1; }
  #top-2 .main-nav > li:has(> a[href$="/propovedi"])   { order: 2; }
  #top-2 .main-nav > li:has(> a[href$="/calendar"])    { order: 3; }
  #top-2 .main-nav > li:has(> a[href$="/blog-novyny"]) { order: 4; }
  #top-2 .main-nav > li:has(> a[href$="/contacts"])    { order: 5; }
  #top-2 .main-nav > li:has(> a[href$="/pidtrymaty-cerkvu"]) { order: 6; }

  /* пошук: компактне поле */
  #top-2 .search-column--desktop { order: 3; flex: 0 0 auto; width: auto; padding: 0; }
  #top-2 #search { width: 190px; height: 40px; border: 0; background: #f3f2f9; border-radius: 12px; overflow: hidden; }
  #top-2 #search .search--category-selector { display: none; }
  #top-2 #search .search--input { height: 40px; border: 0; background: transparent; box-shadow: none; font: 400 14px Inter, system-ui, sans-serif; padding: 0 40px 0 14px; width: 100%; }
  #top-2 #search .search--button { height: 40px; width: 40px; top: 0; right: 0; border: 0; background: transparent; color: #6360ba; }
}

/* 990–1199px: меню переходить на другий рядок шапки */
@media (min-width: 990px) and (max-width: 1199px) {
  #top-2 { gap: 4px 16px; padding: 10px 0 8px; }
  #top-2 .main-nav-wrap { order: 4; flex: 1 0 100%; }
  #top-2 .main-nav { justify-content: flex-start; margin-left: -13px; }
  #top-2 .search-column--desktop { margin-left: auto; }
}

/* ---------- 768–989px (планшет вертикально, телефон у ландшафті): шапка як у мобільній V4 ---------- */
@media (min-width: 768px) and (max-width: 989px) {
  #top-2 { display: flex; align-items: center; justify-content: flex-start !important; min-height: 0; padding: 10px 0 !important; }
  #top-2 .logo-column { margin-right: auto !important; flex: 0 0 auto !important; }
  body.czb-v3-page .search--mobile { display: none !important; }
  #top-2 > .main-nav-trigger:not(.active) {
    position: static !important; box-sizing: border-box; border: 0; display: flex !important;
    flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
    width: 44px !important; height: 44px !important; margin: 0 -6px 0 0 !important; padding: 0 10px 0 0 !important;
    border-radius: 14px !important; background: transparent !important; transform: none !important;
  }
  #top-2 > .main-nav-trigger:not(.active) > div { display: none !important; }
  #top-2 > .main-nav-trigger:not(.active)::before,
  #top-2 > .main-nav-trigger:not(.active)::after {
    content: "" !important; display: block !important; height: 2px !important; border-radius: 2px;
    background: #1e1c33 !important; margin: 0 !important; position: static !important; transform: none !important;
  }
  #top-2 > .main-nav-trigger:not(.active)::before { width: 22px !important; }
  #top-2 > .main-nav-trigger:not(.active)::after { width: 14px !important; }
  .main-nav-trigger.active { backdrop-filter: blur(12px); background: rgba(255, 255, 255, .16) !important; border-radius: 12px !important; }
  ul.main-nav {
    height: 100dvh; box-sizing: border-box; font-family: Inter, system-ui, sans-serif; font-size: 17px;
    top: 0 !important; margin-top: 0 !important; max-height: none !important;
    padding: 84px 24px calc(24px + env(safe-area-inset-bottom)) !important;
    background: rgba(36, 33, 84, .14) !important;
    backdrop-filter: blur(12px) saturate(160%) brightness(.6) !important; filter: none !important;
    overflow-y: auto;
  }
  ul.main-nav > li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
  ul.main-nav a { font-weight: 500; border-radius: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); padding: 15px 14px !important; color: #fff !important; }
}

/* ---------- Доповнення: меню в рядок від 990px ---------- */
@media (min-width: 990px) {
  #top-2 .main-nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; width: auto !important; }
  #top-2 .main-nav > li { width: auto !important; }
}
/* «Підтримка поруч» на 768–991px: темне затемнення фото, як у ландшафті (тема робила його лише для ландшафту) */
@media (min-width: 768px) and (max-width: 991px) {
  .bp-home-support {
    background-color: transparent !important;
    background-image: linear-gradient(rgba(15, 16, 22, .66), rgba(15, 16, 22, .66)), url("/image/catalog/bibliya-poruch-home.jpg") !important;
    background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  }
  .bp-home-support::before { background: none !important; }
  .bp-home-support h2 { color: #fff !important; opacity: 1 !important; text-shadow: 0 2px 6px rgba(0, 0, 0, .85) !important; }
  .bp-home-support p { color: #fff !important; opacity: 1 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, .9) !important; }
  .bp-home-support .bp-home-support-kicker,
  .bp-home-support .bp-home-support-btn { background: rgba(255, 255, 255, .94) !important; color: #1f1f1f !important; text-shadow: none !important; }
  .bp-home-support .bp-home-quick a { background: rgba(255, 255, 255, .9) !important; }
}

/* ================= V8: доопрацювання ================= */

/* шапка: тонкі назва і пункти меню; пошук завжди в одному рядку з меню (від 990px) */
@media (min-width: 768px) {
  #top-2 #logo .czb-name { font-weight: 400 !important; }
}
@media (min-width: 990px) {
  #top-2 { flex-wrap: nowrap !important; gap: 16px !important; padding: 0 !important; min-height: 72px; }
  #top-2 .main-nav-wrap { order: 2 !important; flex: 1 1 auto !important; min-width: 0; }
  #top-2 .main-nav { justify-content: flex-end !important; margin-left: 0 !important; }
  #top-2 .main-nav > li > a { font-weight: 400 !important; padding: 9px 11px !important; }
  #top-2 .search-column--desktop { order: 3 !important; flex: 0 1 180px !important; min-width: 130px; margin-left: 0 !important; }
  #top-2 #search { width: 100% !important; }
}
@media (min-width: 990px) and (max-width: 1199px) {
  #top-2 .main-nav > li > a { font-size: 14px !important; padding: 8px 8px !important; }
  #top-2 #logo .czb-name { font-size: 16px !important; }
  #top-2 .search-column--desktop { flex-basis: 150px !important; }
}

@media (min-width: 1200px) {
  /* hero: менше порожнечі, фото за висотою блоку */
  #common-home .home-church-visit__inner {
    grid-template-rows: auto auto auto !important; row-gap: 16px !important;
    padding: 28px 16px 28px 36px !important; min-height: 0 !important;
  }
  #common-home .home-church-visit__inner::after { margin: -12px 0 !important; }
  #common-home .home-church-visit__actions { align-self: start !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #common-home .home-church-visit__inner { row-gap: 14px !important; padding-bottom: 24px !important; }
}
@media (min-width: 768px) {
  /* H1 менший і тонший */
  #common-home .home-church-visit__title { font: 500 30px/1.22 Inter, system-ui, sans-serif !important; letter-spacing: -0.015em; margin: 10px 0 8px !important; }
  #common-home .home-church-visit__subtitle { margin-bottom: 8px !important; }
  #common-home .home-church-visit__lead, #common-home .home-church-visit__social { margin: 0 0 6px !important; }

  /* «Підтримка поруч» і «Служіння церкви»: компактніше по висоті */
  #common-home .bp-home-support { padding: 20px 22px !important; min-height: 0 !important; }
  #common-home .home-ministries { padding: 20px 22px !important; gap: 12px !important; }
  #common-home .home-ministries__intro { margin: 0 !important; }
  #common-home .home-ministries__links a { min-height: 40px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  #common-home .home-ministries__all { margin-top: 4px !important; }

  /* календар: світла картка в стилі «Служіння церкви», фіолетові акценти */
  #common-home .home-calendar-promo__inner { background: #fff !important; color: #1e1c33 !important; box-shadow: 0 12px 34px rgba(45, 46, 75, .08) !important; }
  #common-home .home-calendar-promo__kicker { color: #6360ba !important; }
  #common-home #home-calendar-title { color: #1e1c33 !important; }
  #common-home .home-calendar-promo__visual { background: #eeedfa !important; color: #6360ba !important; }
  #common-home .home-calendar-promo__intro { color: #55526b !important; }
  #common-home .home-calendar-promo__note { color: #6b6880 !important; }
  #common-home .home-calendar-promo__event { background: #f6f5fb !important; border: 0 !important; }
  #common-home .home-calendar-promo__event strong { color: #1e1c33 !important; }
  #common-home .home-calendar-promo__event span { color: #6b6880 !important; }
  #common-home .home-calendar-promo__action a { background: #6360ba !important; color: #fff !important; }

  /* проповідь: обкладинка maxresdefault (16:9) на всю картку, без смуг; підставляє скрипт V4 */
  #common-home .v4-sermon { background: #eceaf5 !important; align-items: stretch !important; }
  #common-home .v4-sermon .v4-tile-img { aspect-ratio: auto !important; align-self: stretch !important; height: auto !important; }
  #common-home .v4-sermon .v4-tile-img img { object-fit: cover; object-position: center; }

  /* храм: мітка «Життя громади» вгорі, на рівні «Календар церкви»; затемнення легше */
  #common-home .v4-tile:not(.v4-sermon) .v4-over { position: absolute; top: 22px; left: 22px; }
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img::after {
    background: linear-gradient(180deg, rgba(20, 18, 40, 0) 45%, rgba(20, 18, 40, .35) 72%, rgba(20, 18, 40, .72) 100%) !important;
  }

  /* менше відступу між останнім рядом і футером */
  #common-home { padding-bottom: 16px !important; }
  footer { margin-top: 0 !important; }
}

/* ================= V9 ================= */

/* шрифт Tilda Sans (безкоштовний, з кирилицею), змінна версія: дає будь-яку товщину, зокрема 350 і 550.
   Спершу з сервера сайту, якщо файлу немає — з CDN Tilda */
@font-face {
  font-family: 'TildaSans'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('../fonts/TildaSans-VF.woff2') format('woff2');
}
/* запасний шрифт з метриками Tilda Sans: поки Tilda вантажиться, текст не «стрибає» за розміром */
@font-face {
  font-family: 'TildaSans Fallback';
  src: local('Arial');
  size-adjust: 94%; ascent-override: 101%; descent-override: 27%; line-gap-override: 0%;
}

@media (min-width: 768px) {
  /* шапка: назва, пункти меню і пошук — TildaSans, не жирні */
  #top-2 #logo .czb-name { font-family: 'TildaSans', 'TildaSans Fallback', Arial, sans-serif !important; font-weight: 350 !important; font-size: 20px !important; letter-spacing: 0 !important; }
  #top-2 .main-nav > li > a { font-family: 'TildaSans', 'TildaSans Fallback', Arial, sans-serif !important; font-weight: 400 !important; font-size: 16px !important; letter-spacing: 0 !important; }
  #top-2 #search .search--input { font-family: 'TildaSans', 'TildaSans Fallback', Arial, sans-serif !important; font-weight: 400 !important; font-size: 15px !important; }

  /* H1 у блоці «Церква в Ужгороді» — TildaSans, не жирний */
  #common-home .home-church-visit__title { font-family: 'TildaSans', 'TildaSans Fallback', Arial, sans-serif !important; font-weight: 400 !important; font-size: 34px !important; line-height: 1.18 !important; letter-spacing: -0.01em !important; }

  /* нове фото служіння (обрізане і підготовлене, обличчя без змін) */
  #common-home .home-church-visit__inner::after {
    background: #2a2840 url("/image/catalog/home/czb-hero-desk.webp") 50% 40% / cover no-repeat !important;
  }

  /* календар трохи компактніший, щоб ряд мав висоту обкладинки 16:9 */
  #common-home .home-calendar-promo__inner { padding: 18px !important; gap: 9px !important; }
  #common-home .home-calendar-promo__event { padding: 8px 12px !important; }
}
@media (min-width: 990px) and (max-width: 1199px) {
  #top-2 .main-nav > li > a { font-size: 15px !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #common-home .home-church-visit__inner::after {
    background: #2a2840 url("/image/catalog/home/czb-hero-wide.webp") 50% 45% / cover no-repeat !important;
  }
  #common-home .home-church-visit__title { font-size: 30px !important; }
}

/* 1200px+: сітка 24 колонки, щоб проповідь була ширшою і мала пропорцію обкладинки */
@media (min-width: 1200px) {
  #common-home { grid-template-columns: repeat(24, minmax(0, 1fr)) !important; }
  #common-home .home-church-visit       { grid-column: 1 / -1 !important; }
  #common-home .bp-home-support         { grid-column: 1 / span 16 !important; }
  #common-home .home-ministries         { grid-column: 17 / span 8 !important; }
  #common-home .v4-sermon               { grid-column: 1 / span 13 !important; }
  #common-home .home-calendar-promo     { grid-column: 14 / span 6 !important; }
  #common-home .v4-tile:not(.v4-sermon) { grid-column: 20 / span 5 !important; }
  #common-home .v4-sermon .v4-tile-img  { aspect-ratio: 16 / 9 !important; }
}

/* ================= V10 ================= */
@media (min-width: 768px) {
  /* «Місце натхнення і росту» */
  #common-home .home-church-visit__subtitle { font: 550 20px/1.3 'TildaSans', 'TildaSans Fallback', Inter, system-ui, sans-serif !important; }
  /* футер: увесь текст TildaSans */
  footer, footer p, footer a, footer h5, footer li { font-family: 'TildaSans', 'TildaSans Fallback', Inter, system-ui, sans-serif !important; }
}

/* ================= V10.2 ================= */
/* смуга прокрутки завжди зарезервована: шапка і сторінка не зсуваються на 7–8px,
   коли під час завантаження сторінки з'являється вертикальний скрол */
@media (min-width: 768px) {
  html { overflow-y: scroll; scrollbar-gutter: stable; }
}

/* ================= V10.3 ================= */
/* Стрілка «Про церкву»: CSS-трикутник замість іконки FontAwesome (не блимає квадратиком під час завантаження) */
@media (min-width: 990px) {
  #top-2 .main-nav > li > a.has-subnav-link::after {
    content: "" !important; font: 0/0 a !important; width: 0; height: 0; margin-left: 7px;
    vertical-align: middle; position: relative; top: -1px;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  }
}
/* 768–989px: бургер праворуч, меню знову видно */
@media (min-width: 768px) and (max-width: 989px) {
  #top-2 > .container { flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
  header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #fff !important; }
}
/* Кнопка Play на обкладинці проповіді: нижче центру, під назвою */
@media (min-width: 768px) {
  #common-home .v4-play { top: 78% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; }
  #common-home .v4-tile:hover .v4-play { transform: translate(-50%, -50%) scale(1.08) !important; }
}

/* ================= V10.4 ================= */
/* /calendar: місце під кнопку «Показати минулі події» зарезервоване одразу, список подій не стрибає */
#pastToggleWrap { display: block !important; }
#pastToggleWrap[style*="none"] { visibility: hidden; }

/* ================= V10.7 ================= */
/* Inter з власного сервера (замість Google Fonts, що підключався асинхронно і давав «стрибок» шрифту на кожній сторінці) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.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; }

/* V10.3: плитка храму — фото зверху без розмиття, текст на білій картці (як «Календар» і «Служіння»).
   Тільки від 768px; мобільна V4 не зачіпається. */
@media (min-width:768px){
  #common-home .v4-tile:not(.v4-sermon){background:#fff!important;color:#1e1c33!important;justify-content:flex-start!important;box-shadow:0 12px 34px rgba(45,46,75,.08)!important}
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img{position:relative!important;inset:auto!important;z-index:0!important;flex:0 0 auto;aspect-ratio:4/3;background:#e9e8f3!important}
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img::before,
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img::after{content:none!important;display:none!important}
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;margin:0!important;object-fit:cover!important;object-position:52% 40%;filter:brightness(1.08) saturate(1.06)!important}
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-txt{flex:1 1 auto;padding:16px 20px 20px!important}
  #common-home .v4-tile:not(.v4-sermon) .v4-over{position:static!important;align-self:flex-start;background:#eeedfa!important;color:#4b47a3!important}
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-txt b{color:#1e1c33!important;font-size:22px;text-shadow:none!important}
  #common-home .v4-tile:not(.v4-sermon) .v4-pill{margin-top:auto;background:#6360ba!important;color:#fff!important}
}
@media (min-width:768px) and (max-width:1199px){
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img{aspect-ratio:16/9}
}

/* V10.4: фото храму довше вниз (≈+17%), менше порожнього місця між заголовком і кнопкою */
@media (min-width:1200px){
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img{aspect-ratio:8/7}
  #common-home .v4-tile:not(.v4-sermon) .v4-tile-img img{object-position:50% 38%}
}