/* ===========================================================================
 * МОБИЛЬНЫЙ СЛОЙ  —  arseniev-eparhia.ru
 * Дочерняя тема fluidtheme-child. Родитель НЕ трогаем.
 * Единый брейкпоинт: 640px (синхронно с блоками fs-/fc-/iz-).
 *
 * Что делает:
 *   1. Складывает 3-колоночный макет в одну колонку.
 *   2. Ставит блоки в порядке: Избранное -> Материалы дня -> Конкурсы ->
 *      Новости -> Пагинация -> Инфо-сайдбар -> Соцсети -> Баннеры.
 *   3. Правит слайдер (fs-), мозаику (iz-), карусель (fc-) под узкий экран.
 *   4. Ограничивает жёсткие ширины картинок.
 *   5. Стили меню-бургера (раскрытие сверху вниз, подменю аккордеоном).
 *
 * Числа для ручной правки помечены комментарием: правь
 * =========================================================================== */

@media (max-width: 640px) {

/* ---------------------------------------------------------------------------
 * 0. БАЗА: убираем горизонтальный разброс, всё в поток
 * ------------------------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;                 /* глушим горизонтальный скролл */
}

/* Любая картинка не шире экрана (перебивает width="342px" и пр.) */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Баннеры в шапке контента (блок "15 лет" + "Крестный ход"):
 * в разметке лежат два <a> в ряд внутри .image-wrapper с 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,
.block-theme .image-wrapper img {
    width: 100% !important;             /* было width="342px" — перебиваем */
    max-width: 100% !important;
    height: auto !important;
}

/* ---------------------------------------------------------------------------
 * 0.5 ВЕРХНИЕ ОБЁРТКИ — снимаем фиксированную ширину ~900px
 * ------------------------------------------------------------------------- *
 * Цепочка: #main -> .sheet -> .sheet-body -> .content-layout.
 * Ширину держат #main и .sheet. Снимаем min-width и фикс-ширину. */
#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" (tl/tr/bl/br/tc...) на телефоне только мешают */
.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 8px !important;           /* правь: боковые поля страницы */
    box-sizing: border-box !important;
}

/* Фоновая подложка колонок в старой теме — на телефоне мешает */
.layout-cell .layout-bg { display: none !important; }

/* ---------------------------------------------------------------------------
 * 2. ПОРЯДОК БЛОКОВ  (flex + order на первом ярусе)
 * ------------------------------------------------------------------------- *
 * Первый content-layout содержит: sidebar1 (левые баннеры) + content + sidebar2.
 * Делаем его flex-колонкой, чтобы через order поднять контент над баннерами.
 * Остальные ярусы (карусель, новости) уже идут ниже в потоке — их не трогаем. */
.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-)  —  кадр сверху, 4 плитки в РЯД по ширине
 * ------------------------------------------------------------------------- *
 * Родной media-запрос слайдера теперь сработает (блок стал широким).
 * Здесь усиливаем: плитки НЕ лентой вбок, а 4 штуки в ряд, делят ширину. */
.fs-slider { max-width: 100% !important; }

.fs-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
}
.fs-stage {
    height: auto !important;
    aspect-ratio: 16 / 10;              /* правь: пропорция кадра на телефоне */
}

/* Плитки: горизонтальный ряд, 4 равные колонки, БЕЗ скролла вбок */
.fs-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    overflow: visible !important;       /* убираем ленту-скролл */
    gap: 5px !important;
}
.fs-nav-card {
    flex: 1 1 0 !important;             /* каждая плитка — 1/4 ширины */
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    flex-direction: column !important;  /* картинка сверху, подпись под ней */
    align-items: stretch !important;
    padding: 3px !important;
    gap: 4px !important;
}
.fs-nav-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;               /* квадратное превью */
    object-fit: cover !important;
}
/* Подпись плитки: коротко, максимум 2 строки, дальше — многоточие */
.fs-nav-label {
    font-size: 9px !important;         /* правь: размер подписи плитки */
    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; }

.fs-stage-title { font-size: 17px !important; }   /* правь */
.fs-stage-text  { font-size: 11px !important; }   /* правь */

/* ---------------------------------------------------------------------------
 * 4. МОЗАИКА «Материалы дня» (iz-)  —  2 колонки
 * ------------------------------------------------------------------------- */
.iz-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;   /* 2 колонки */
    gap: 8px !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;
    display: -webkit-box;
    -webkit-line-clamp: 3;             /* не больше 3 строк описания */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.iz-card__cat  { font-size: 8px !important; }
.iz-card__date { font-size: 9px !important; }

/* ---------------------------------------------------------------------------
 * 5. КАРУСЕЛЬ «Конкурсы» (fc-)  —  остаётся лентой, чуть уже карточка
 * ------------------------------------------------------------------------- */
.fc-carousel { max-width: 100% !important; padding: 12px 12px 14px !important; }
.fc-card     { flex: 0 0 150px !important; }       /* правь: ширина карточки */

/* ---------------------------------------------------------------------------
 * 6. ЛЕНТА НОВОСТЕЙ (.post)  —  заголовок сверху, фото слева + текст справа
 * ------------------------------------------------------------------------- */
.post {
    width: 100% !important;
    margin: 0 0 12px !important;
    box-sizing: border-box;
}
.post .postcontent img.alignleft {
    float: left !important;
    width: 40% !important;             /* правь: доля картинки в новости */
    max-width: 140px !important;
    height: auto !important;
    margin: 0 10px 6px 0 !important;
}
.postheader { font-size: 15px !important; line-height: 1.3 !important; }
.postheader a { font-size: inherit !important; }

/* Пагинация: не вылезает за экран */
.wp-pagenavi {
    text-align: center;
    font-size: 12px;
    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. ШАПКА  —  подгоняем фон-картинку под ширину экрана
 * ------------------------------------------------------------------------- *
 * .header-jpeg — фон-шапка (собор). На старой теме имеет фикс-размер.
 * Даём ей ужиматься. Точные размеры зависят от исходного CSS — при
 * необходимости поправишь высоту здесь. */
.header-center,
.header-wrapper,
.header-inner {
    max-width: 100% !important;
    width: 100% !important;
}
.header-jpeg {
    max-width: 100% !important;
    height: auto !important;
    background-size: contain !important;   /* правь: cover — если нужно заполнять */
    background-position: center !important;
}
.logo { max-width: 100% !important; }

/* ===========================================================================
 * 9. МЕНЮ-БУРГЕР  (раскрывается сверху вниз, подменю аккордеоном)
 * ---------------------------------------------------------------------------
 * Кнопку .mobile-burger вставляет mobile.js.
 * Класс .is-open на .nav-wrapper показывает меню.
 * =========================================================================== */

/* Кнопка-бургер: бордовая плашка на всю ширину под шапкой */
.mobile-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;                 /* правь: высота плашки */
    background: #8a1e33;                /* бордовый */
    color: #f0d98a;                    /* золотой текст */
    border: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 15px;
    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: 13px 44px 13px 16px !important;   /* справа место под стрелку */
    color: #6b1f2a !important;
    font-family: Verdana, Arial, sans-serif;
    font-size: 15px !important;
    text-decoration: none !important;
    background: transparent !important;
    line-height: 1.3 !important;
    height: auto !important;
    width: auto !important;
}
/* Прячем декоративные спаны l/r из старого меню, оставляем текст t */
.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;
}

/* Стрелка-переключатель подменю (вставляет mobile.js в li c подменю) */
.nav-wrapper .mb-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;                       /* правь: высота зоны тапа стрелки */
    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: 20px;
    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: 11px 16px 11px 28px !important;   /* отступ = вложенность */
    color: #4a3520 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    background: transparent !important;
}

} /* /media 640 */

/* ===========================================================================
 * ВНЕ media: мобильные элементы скрыты на десктопе
 * ---------------------------------------------------------------------------
 * mobile.js вставляет кнопку-бургер и стрелки .mb-toggle на ВСЕХ ширинах.
 * На десктопе они не нужны — прячем. Внутри @media 640 они снова показаны. */
.mobile-burger { display: none; }
.mb-toggle     { display: none; }