/* ===========================================================================
 * АДАПТИВНЫЙ СЛОЙ  —  arseniev-eparhia.ru
 * Дочерняя тема fluidtheme-child. Родительскую тему НЕ трогаем.
 * ---------------------------------------------------------------------------
 * ТРИ СЛОЯ:
 *   A. ОБЩАЯ БАЗА   @media (max-width:1024px)                — телефон + планшет
 *   B. ТОЛЬКО ТЕЛЕФОН @media (max-width:640px)               — узкие экраны
 *   C. ТОЛЬКО ПЛАНШЕТ @media (min-width:641px)and(max-1024)  — средние экраны
 *
 * Порядок блоков (сверху вниз):
 *   Шапка -> Меню -> Избранное -> Материалы дня -> Конкурсы ->
 *   Новости -> Пагинация -> Инфо-сайдбар -> Соцсети -> Баннеры.
 *
 * Числа для ручной правки помечены комментарием: правь
 * =========================================================================== */


/* ###########################################################################
 * СЛОЙ A — ОБЩАЯ БАЗА (телефон + планшет, ≤1024px)
 * ######################################################################### */
@media (max-width: 1024px) {

/* --- 0. База: гасим горизонтальный разброс --------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Баннеры "15 лет" + "Крестный ход": два <a> в ряд (width="342px") -> в столбец */
.block-theme .image-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}
.block-theme .image-wrapper .block-theme_piclink { width: 100% !important; text-align: center; }
/* ВСЕ картинки в block-theme (в т.ч. блок старцев с <img height="100px"> без
 * width и без image-wrapper) — вписываем по ширине, высоту сбрасываем в auto. */
.block-theme,
.block-theme_block {
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;             /* сброс фикс-высоты старой темы (пустота) */
    min-height: 0 !important;
    line-height: normal !important;
}
.block-theme img,
.block-theme_block img,
.block-theme .image-wrapper img {
    width: 100% !important;             /* перебивает width="342px" и height="100px" */
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* --- 0.5 Верхние обёртки: снимаем фиксированную ширину ~900px -------------- *
 * Цепочка: #main -> .sheet -> .sheet-body -> .content-layout. */
#main,
.sheet,
.sheet-body,
.header,
.header-center,
.header-wrapper,
.header-inner,
.nav,
.nav-wrapper,
.nav-inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Пустые декоративные уголки "sheet" — скрываем */
.sheet-tl, .sheet-tr, .sheet-bl, .sheet-br,
.sheet-tc, .sheet-bc, .sheet-cl, .sheet-cr { display: none !important; }
.sheet-cc { background: none !important; }

/* Фоновые "блики" — это ОБЁРТКИ всего #main, скрывать нельзя, гасим только фон */
#page-background-glare,
#page-background-glare-image {
    background: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* --- 1. Раскладка: три яруса content-layout -> одна колонка ---------------- */
.content-layout,
.content-layout-row {
    display: block !important;
    width: 100% !important;
    float: none !important;
}
.layout-cell {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px !important;
    padding: 0 10px !important;          /* правь: боковые поля страницы */
    box-sizing: border-box !important;
}
.layout-cell .layout-bg { display: none !important; }

/* --- 2. Порядок блоков: контент над баннерами ----------------------------- */
.content-layout:first-of-type .content-layout-row {
    display: flex !important;
    flex-direction: column !important;
}
.content-layout:first-of-type .layout-cell.content  { order: 1; }
.content-layout:first-of-type .layout-cell.sidebar2 { order: 2; }
.content-layout:first-of-type .layout-cell.sidebar1 { order: 3; }

/* --- 3. Слайдер «Избранное» (fs-): кадр сверху + плитки в ряд -------------- */
.fs-slider { max-width: 100% !important; }
.fs-grid {
    display: block !important;
    grid-template-columns: none !important;
}
/* Кадр-герой. Слайды внутри position:absolute — высоту задаём явно (в vw). */
.fs-stage {
    height: 56vw !important;             /* правь: высота героя (56vw≈16:9, 62.5vw≈16:10) */
    max-height: 420px !important;        /* правь: потолок на планшете */
    aspect-ratio: auto !important;
    margin-bottom: 6px !important;
}
.fs-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    align-items: stretch !important;     /* плитки одной высоты по самой высокой */
    overflow: visible !important;
    gap: 6px !important;
}
.fs-nav-card {
    flex: 1 1 0 !important;              /* 4 плитки делят ширину */
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    flex-direction: column !important;   /* картинка сверху, подпись под ней */
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 4px !important;
    gap: 4px !important;
}
.fs-nav-img {
    flex: 0 0 auto !important;           /* картинка не сжимается */
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;                 /* квадратное превью */
    object-fit: cover !important;
}
.fs-nav-label {
    flex: 1 1 auto !important;           /* подпись занимает остаток, выравнивая низ плиток */
    min-height: 2.3em !important;        /* правь: место под 2 строки — ровняет плитки */
    line-height: 1.15 !important;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;              /* не больше 2 строк, дальше многоточие */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fs-nav-card.is-active::before { display: none !important; }

/* --- 4. Мозаика «Материалы дня» (iz-): сетка (кол-во колонок — в слоях B/C) */
.iz-grid {
    display: grid !important;
    gap: 8px !important;
}
.iz-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 5. Карусель «Конкурсы» (fc-): остаётся лентой ------------------------ */
.fc-carousel { max-width: 100% !important; padding: 12px 14px 14px !important; }

/* --- 6. Лента новостей (.post): заголовок сверху, фото слева + текст ------- */
.post {
    width: 100% !important;
    margin: 0 0 12px !important;
    box-sizing: border-box;
}
.post .postcontent img.alignleft {
    float: left !important;
    height: auto !important;
    margin: 0 12px 6px 0 !important;
}
.postheader a { font-size: inherit !important; }

/* Пагинация */
.wp-pagenavi { text-align: center; line-height: 2; }
.wp-pagenavi a, .wp-pagenavi span { display: inline-block; margin: 2px; }

/* --- 7. Инфо-блоки и виджеты --------------------------------------------- */
.block, .widget { width: 100% !important; box-sizing: border-box !important; }
.block img, .widget img { max-width: 100% !important; height: auto !important; }
#wp-calendar, .wp-calendar-table { width: 100% !important; table-layout: fixed; }
#searchform #s { width: 100% !important; box-sizing: border-box; }

/* --- 8. Шапка: подмена на мобильную картинку Shapka_k.png (844x198) -------- *
 * Родитель (style.css) держит шапку так:
 *   div.header      { height:200px; overflow:hidden; }
 *   div.header-center { width:1920px; left:50%; }
 *   div.header-jpeg { position:absolute; left:-50%; width:1920px; height:200px;
 *                     background:url('images/header.jpg'); }
 * Из-за position:absolute + width:1920px + left:-50% блок уезжает за экран —
 * поэтому на телефоне шапки НЕ видно. Возвращаем его в НОРМАЛЬНЫЙ поток.
 * Селектор родителя div.header-jpeg (0-1-1) сильнее .header-jpeg (0-1-0),
 * поэтому бьём через #main ... (выше специфичность) + !important.
 *
 * ВЫСОТА в vw (844:198 -> 100vw/4.26 ≈ 23.5vw). ПРАВЬ при желании. */
#main div.header,
div.header {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;        /* родитель резал overflow:hidden */
    background: none !important;
}
#main div.header-center,
div.header-center {
    position: static !important;         /* был relative + left:50% */
    width: 100% !important;
    left: 0 !important;
    max-width: 100% !important;
}
#main div.header .header-center div.header-jpeg,
div.header-center div.header-jpeg,
div.header-jpeg {
    position: static !important;         /* был absolute — возвращаем в поток */
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 23.5vw !important;           /* правь: высота шапки (пропорция 844:198) */
    max-height: 200px !important;        /* правь: потолок на планшете */
    min-height: 60px !important;
    background-image: url('Shapka_k.png') !important;   /* подмена картинки */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}
.logo {                                  /* пустой div-накладка — прячем */
    display: none !important;
}

/* --- 9. Меню-бургер (раскрытие сверху вниз, подменю аккордеоном) ---------- *
 * Кнопку .mobile-burger и стрелки .mb-toggle вставляет responsive.js. */
.mobile-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;                  /* правь: высота плашки */
    background: #8a1e33;
    color: #f0d98a;
    border: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.mobile-burger .mb-icon { display: inline-block; width: 20px; height: 14px; position: relative; }
.mobile-burger .mb-icon span,
.mobile-burger .mb-icon::before,
.mobile-burger .mb-icon::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #f0d98a;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-burger .mb-icon::before { top: 0; }
.mobile-burger .mb-icon span    { top: 6px; }
.mobile-burger .mb-icon::after  { top: 12px; }
.mobile-burger.is-active .mb-icon::before { transform: translateY(6px) rotate(45deg); }
.mobile-burger.is-active .mb-icon span    { opacity: 0; }
.mobile-burger.is-active .mb-icon::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #fff8d3;
    border-bottom: 2px solid #c9a24a;
}
.nav-wrapper.is-open { max-height: 3000px; overflow-y: auto; }

.nav-l, .nav-r { display: none !important; }
.nav-inner { width: 100% !important; }

.nav-wrapper ul.menu {
    display: block !important;
    width: 100% !important;
    margin: 0; padding: 0; list-style: none;
}
.nav-wrapper ul.menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid rgba(182,130,18,0.25);
    position: relative;
}
.nav-wrapper .menu-li-separator { display: none !important; }
.nav-wrapper ul.menu > li > a {
    display: block !important;
    padding: 14px 44px 14px 16px !important;
    color: #6b1f2a !important;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px !important;
    text-decoration: none !important;
    background: transparent !important;
    line-height: 1.3 !important;
    height: auto !important;
    width: auto !important;
}
.nav-wrapper ul.menu > li > a .l,
.nav-wrapper ul.menu > li > a .r { display: none !important; }
.nav-wrapper ul.menu > li > a .t {
    display: inline !important;
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    height: auto !important;
    line-height: inherit !important;
}
.nav-wrapper .mb-toggle {
    position: absolute;
    top: 0; right: 0;
    width: 46px; height: 48px;           /* правь: зона тапа стрелки */
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    color: #8a1e33; font-size: 15px;
}
.nav-wrapper .mb-toggle::before {
    content: '\203a';
    transform: rotate(90deg);
    transition: transform 0.25s ease;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
}
.nav-wrapper li.is-expanded > .mb-toggle::before { transform: rotate(-90deg); }
.nav-wrapper ul.menu > li > ul {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin: 0; padding: 0; list-style: none;
    background: #fdf3c4;
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
}
.nav-wrapper li.is-expanded > ul { max-height: 2000px; }
.nav-wrapper ul.menu > li > ul > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-top: 1px solid rgba(182,130,18,0.18);
}
.nav-wrapper ul.menu > li > ul > li > a {
    display: block !important;
    padding: 12px 16px 12px 28px !important;
    color: #4a3520 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    background: transparent !important;
}

} /* /СЛОЙ A ≤1024 */


/* ###########################################################################
 * СЛОЙ B — ТОЛЬКО ТЕЛЕФОН (≤640px): компактнее
 * ######################################################################### */
@media (max-width: 640px) {

/* Мозаика — 2 колонки */
.iz-grid { grid-template-columns: 1fr 1fr !important; }

/* Слайдер: компактные шрифты */
.fs-stage-title { font-size: 17px !important; }   /* правь */
.fs-stage-text  { font-size: 11px !important; }   /* правь */
.fs-nav-label   { font-size: 9px  !important; }   /* правь */

/* Мозаика: компактные шрифты */
.iz-card__title { font-size: 12px !important; line-height: 1.25 !important; }
.iz-card__text  { font-size: 10px !important; line-height: 1.3 !important; }
.iz-card__cat   { font-size: 8px  !important; }
.iz-card__date  { font-size: 9px  !important; }

/* Карусель: узкая карточка */
.fc-card { flex: 0 0 150px !important; } /* правь: ширина карточки */

/* Новости: фото 40% */
.post .postcontent img.alignleft { width: 40% !important; max-width: 140px !important; }
.postheader { font-size: 15px !important; line-height: 1.3 !important; }

} /* /СЛОЙ B ≤640 */


/* ###########################################################################
 * СЛОЙ C — ТОЛЬКО ПЛАНШЕТ (641–1024px): просторнее
 * ######################################################################### */
@media (min-width: 641px) and (max-width: 1024px) {

/* Мозаика — 3 колонки */
.iz-grid { grid-template-columns: 1fr 1fr 1fr !important; }

/* Слайдер: крупнее шрифты */
.fs-stage-title { font-size: 22px !important; }   /* правь */
.fs-stage-text  { font-size: 14px !important; }   /* правь */
.fs-nav-label   { font-size: 11px !important; }   /* правь */

/* Мозаика: крупнее шрифты */
.iz-card__title { font-size: 15px !important; line-height: 1.3 !important; }
.iz-card__text  { font-size: 12px !important; line-height: 1.4 !important; }
.iz-card__cat   { font-size: 10px !important; }
.iz-card__date  { font-size: 11px !important; }

/* Карусель: шире карточка (видно ~3) */
.fc-card { flex: 0 0 30% !important; }  /* правь: доля ширины карточки */
.fc-title { font-size: 18px !important; }

/* Новости: фото крупнее, текст больше */
.post .postcontent img.alignleft { width: 32% !important; max-width: 220px !important; }
.postheader { font-size: 18px !important; line-height: 1.35 !important; }

/* Сайдбары (цитата, календарь, баннеры) оставляем в ОДНУ колонку и на планшете:
 * виджеты сильно разной высоты — в 2 колонки дали бы рваные пустоты.
 * Просто шире и с воздухом. */

} /* /СЛОЙ C 641–1024 */


/* ===========================================================================
 * ВНЕ media (десктоп ≥1025px): мобильные элементы скрыты
 * ---------------------------------------------------------------------------
 * responsive.js вставляет бургер и стрелки на ВСЕХ ширинах — прячем на деске.
 * Внутри слоя A (≤1024) они снова показаны более специфичными селекторами. */
.mobile-burger { display: none; }
.mb-toggle     { display: none; }