/*
Theme Name:     Foxiz child
Template:      	foxiz
Theme URI:      https://foxiz.themeruby.com
Author:         Theme-Ruby
Author URI:     https://themeforest.net/user/theme-ruby/portfolio/
Description:    Make your modifications to Foxiz in this child theme.
Version:        1.0
Tags:           custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments, translation-ready
License:        Themeforest Licence
License URI:    https://themeforest.net/licenses/standard
*/

/* ============================================================
   ГАЛЕРЕЯ → SWIPER-СЛАЙДЕР (Усть-Лабинск Инфо)
   Фирменный синий: #0066CC
   ============================================================ */

.rb-gallery-wrapper {
    margin: 30px 0;
    position: relative;
    padding: 0 46px;
    box-sizing: border-box;
    overflow: visible;
}

/* --- БАЗОВАЯ РАСКЛАДКА SWIPER (самодостаточно, без внешних CSS Swiper) --- */
.rb-gallery-wrapper .swiper {
    overflow: hidden;
}
.rb-gallery-wrapper .swiper-wrapper {
    display: flex;
    width: 100%;
}
.rb-gallery-wrapper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
}

/* --- ОСНОВНОЙ СЛАЙДЕР --- */
.rb-gallery-main {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
}

.rb-gallery-main .swiper-slide {
    line-height: 0;
}

.rb-gallery-main img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

.rb-gallery-caption {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
    margin: 0;
}

.rb-gallery-credit {
    font-weight: 600;
    white-space: normal;
}

.rb-gallery-desc {
    flex: 1;
    text-align: right;
    font-style: italic;
}

/* --- СТРЕЛКИ (ВНЕ СЛАЙДЕРА, ПРОСТЫЕ ШЕВРОНЫ БЕЗ НАВОРОТОВ) --- */
.rb-gallery-wrapper .swiper-button-prev,
.rb-gallery-wrapper .swiper-button-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 20;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0066CC;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    left: 0;
    right: auto;
    transition: color .2s ease, transform .2s ease;
}

.rb-gallery-wrapper .swiper-button-next {
    left: auto;
    right: 0;
}

.rb-gallery-wrapper .swiper-button-prev:hover,
.rb-gallery-wrapper .swiper-button-next:hover {
    color: #004b99;
    transform: translateY(-50%) scale(1.12);
}

.rb-gallery-wrapper .swiper-button-prev::after,
.rb-gallery-wrapper .swiper-button-next::after {
    content: '';
    font-size: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.rb-gallery-wrapper .swiper-button-next::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- СЛАЙДЕР МИНИАТЮР --- */
.rb-gallery-thumbs {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
}

.rb-gallery-thumbs .swiper-slide {
    width: 100px !important;
    height: 100%;
    opacity: 0.45;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: opacity .3s ease, box-shadow .3s ease, filter .3s ease;
    filter: grayscale(30%);
    border: 2px solid transparent;
    box-sizing: border-box;
}

.rb-gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
    filter: grayscale(0%);
    border-color: #0066CC;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, .35);
}

.rb-gallery-thumbs .swiper-slide:hover {
    opacity: 0.85;
    filter: grayscale(0%);
    border-color: rgba(0, 102, 204, .55);
}

.rb-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

/* --- АДАПТИВ --- */
@media (max-width: 768px) {
    .rb-gallery-wrapper {
        padding: 0;
        overflow: hidden;
    }

    .rb-gallery-wrapper .swiper-button-prev,
    .rb-gallery-wrapper .swiper-button-next {
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.9) !important;
        color: #0066CC !important;
        top: 50%;
    }

    .rb-gallery-wrapper .swiper-button-prev { left: 10px; }
    .rb-gallery-wrapper .swiper-button-next { right: 10px; }

    .rb-gallery-thumbs { height: 60px; }
    .rb-gallery-thumbs .swiper-slide { width: 80px !important; }
}

/* ============================================================
   ЛАЙТБОКС
   ============================================================ */

.rb-lightbox-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2147483647 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    backdrop-filter: blur(8px);
    isolation: isolate;
    contain: layout style paint;
}

.rb-lightbox-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.rb-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    z-index: 2147483647 !important;
    transition: background .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.rb-lightbox-close:hover {
    background: rgba(0, 102, 204, .85);
}

.rb-lightbox-swiper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.rb-lightbox-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rb-lightbox-swiper img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
    -webkit-user-drag: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.rb-lightbox-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .7);
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 14px;
    max-width: 90%;
    width: auto;
    text-align: center;
    pointer-events: none;
    z-index: 3;
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.rb-lightbox-caption .rb-gallery-credit {
    font-weight: 600;
}

.rb-lightbox-caption .rb-gallery-desc {
    flex: 1;
    text-align: right;
    font-style: italic;
}

.rb-lightbox-swiper .swiper-button-prev,
.rb-lightbox-swiper .swiper-button-next {
    color: #fff !important;
    background: rgba(0, 102, 204, .78) !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.rb-lightbox-swiper .swiper-button-prev:hover,
.rb-lightbox-swiper .swiper-button-next:hover {
    background: rgba(0, 75, 153, .9) !important;
}

.rb-lightbox-swiper .swiper-button-prev::after,
.rb-lightbox-swiper .swiper-button-next::after {
    content: '';
    font-size: 0;
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.rb-lightbox-swiper .swiper-button-next::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.rb-lightbox-swiper .swiper-pagination-fraction {
    color: #fff;
    font-size: 14px;
    top: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    width: auto !important;
    transform: none;
    z-index: 3;
    background: rgba(0, 102, 204, .8);
    padding: 6px 14px;
    border-radius: 20px;
}

/* ============================================================
   ОБЛАКО СВЕЖИХ ХЭШТЕГОВ НА ГЛАВНОЙ (перенос с kub-inform.ru)
   Прокрутка — drag-scroll.js; кнопка МАКС — .messenger-tag
   ============================================================ */

.fresh-tags-cloud-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 5px;
    user-select: none;
    cursor: grab;
    touch-action: pan-x;
    position: relative;
}

.fresh-tags-cloud-wrapper::-webkit-scrollbar {
    display: none;
}

.fresh-tags-cloud-wrapper.active {
    cursor: grabbing;
}

.fresh-tags-cloud {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    min-width: max-content;
    padding: 4px 0;
}

.fresh-tags-cloud-wrapper .messenger-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #22bad4, #5e41df);
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 100px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.fresh-tags-cloud-wrapper .messenger-tag:hover {
    opacity: 0.9;
    transform: none;
}

.tag-text {
    display: flex;
    flex-direction: column;
    line-height: 0.9;
    font-size: 13px;
    margin-right: 10px;
    text-transform: uppercase;
}

.line-1,
.line-2 {
    display: block;
}

.tag-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.tags-scroll-container {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
}

.fresh-tags-cloud-wrapper .tag-item {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #f1f3f5;
    border-radius: 100px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.fresh-tags-cloud-wrapper .tag-item:hover {
    background: #e3e7eb;
    color: #181818;
}

.hash-symbol,
.first-word {
    font-weight: 700;
}

.rest-text {
    font-weight: 400;
}

/* --- АДАПТИВ ЛАЙТБОКСА --- */
@media (max-width: 768px) {
    .rb-lightbox-close {
        top: 10px; right: 10px;
        width: 36px; height: 36px;
        font-size: 24px;
        background: rgba(0, 0, 0, 0.6);
    }
    .rb-lightbox-swiper img {
        max-width: 100vw;
        max-height: 85vh;
    }
    .rb-lightbox-caption {
        bottom: 10px;
        font-size: 12px;
        padding: 6px 12px;
        max-width: 90%;
    }
}

/* ============================================================
   ЕДИНЫЙ РИТМ КАРТОЧЕК ЗАПИСЕЙ
   ------------------------------------------------------------
   Проблема: высота карточек «плыла» —
   • заголовок разной длины (2–6 строк) менял высоту карточки;
   • у записей без плашки (тема/рубрика/формат) над заголовком
     заголовок поднимался выше, и строки списков/сеток «ехали»
     лесенкой.

   Решение — только CSS, шаблоны и паттерны темы не меняются:
   1) Заголовок карточки обрезается максимум по 3 строкам, а в
      сетках/списках ещё и резервирует 3 строки (--uli-title-lines):
      короткий занимает столько же места, длинный обрезается
      многоточием. Полный текст остаётся в HTML — для SEO.
   2) Под плашку над заголовком всегда зарезервирован слот:
      если в блоке у каких-то записей плашка есть, то у остальных
      пустое место под неё тоже занято — заголовки на одной линии.
      Слот включается только в тех блоках, где плашки реально
      выводятся (селектор :has проверяет соседей по блоку).
      Плашки поверх фото (format из архива) высоту не меняют —
      их не трогаем.
   3) Плашка не переносится на вторую строку и не растягивает карточку.
   4) Анонс (entry-summary) обрезается максимум по 3 строкам,
      полный текст остаётся в HTML — для SEO.
   5) Мета (рубрика + дата либо просто дата) всегда прижата
      к нижней части карточки и выравнивается по одной линии
      в соседних карточках (margin-top: auto во flex-колонке).

   Все значения — в переменных ниже, правятся в одном месте.
   ============================================================ */

:root {
    --uli-title-lines: 3;   /* сколько строк заголовка резервируем */
    --uli-slot-grid: 52px;  /* слот плашки между фото и заголовком (сетки) */
    --uli-slot-list: 28px;  /* слот плашки над заголовком (списки .p-content) */
}

@media (max-width: 767px) {
    :root {
        --uli-slot-grid: 43px;
    }
}

/* --- 1. Плашка: всегда одна строка, фиксированная высота слота --- */
.p-wrap .p-categories.p-top {
    flex-wrap: nowrap;
    overflow: hidden;
}

.p-wrap .p-categories.p-top .p-category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 2. Резерв слота плашки, когда её у записи нет ---
   2a. Сетки (Все материалы, поиск и т.п.): плашка лежит между
       фото .feat-holder и заголовком. Резервируем место только
       в блоках, где хотя бы у одной карточки плашка выведена. */
:has(> .p-wrap > .feat-holder + .p-categories.p-top) > .p-wrap:not(:has(.p-categories.p-top)) > .feat-holder + .entry-title {
    margin-top: var(--uli-slot-grid);
}

/* 2b. Списки (главная, левая колонка): плашка — первый элемент .p-content. */
:has(> .p-wrap > .p-content > .p-categories.p-top) > .p-wrap:not(:has(.p-categories.p-top)) > .p-content > .entry-title:first-child {
    margin-top: var(--uli-slot-list);
}

/* --- 3. Заголовок: максимум 3 строки в любой карточке ---
   line-clamp обрезает только визуально: полный заголовок
   остаётся в HTML и доступен поисковикам. */
.p-wrap .entry-title > a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--uli-title-lines, 3);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Резерв 3 строк — только там, где карточки стоят рядами и высота
   должна совпадать (сетки, мини-списки, горизонтальные списки).
   Широкие горизонтальные карточки list-box-2 не трогаем: их высоту
   задаёт фото, заголовок переносится естественно. */
.p-wrap.p-grid .entry-title,
.p-wrap.p-list-small-1 .entry-title,
.p-wrap.p-list-2:not(.p-list-box-2) .entry-title {
    line-height: 1.3;
    min-height: calc(var(--uli-title-lines, 3) * 1.3em);
}

/* «Популярные новости за неделю» на главной: в оверлей-карточках
   заголовок тоже держит 3 строки — текстовая плашка на слайдах
   не «скачет» при листании. */
.elementor-element-8e1c982 .p-wrap .entry-title {
    line-height: 1.3;
    min-height: calc(var(--uli-title-lines, 3) * 1.3em);
}

/* --- 3b. Анонс: максимум 3 строки в любой карточке ---
   column-count сбрасываем: тема может ставить его в 1, а из-за этого
   display:-webkit-box не применяется и обрезка строк не работает.
   Результаты поиска (.p-grid-2) сохраняют свою обрезку в 2 строки ниже. */
.p-wrap:not(.p-grid-2) .entry-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    column-count: auto;
}

/* --- 4. Анонс в результатах поиска: 2 строки, как и заголовок ---
   column-count сбрасываем: тема ставит его в 1, а из-за этого
   display:-webkit-box не применяется и обрезка строк не работает. */
.p-grid-2 .entry-summary {
    line-height: 1.7;
    column-count: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 3.4em;
}

/* --- 5. Мета — всегда в нижней части карточки, на одном уровне ---

   5a. Мини-списки (p-list-small-1): контент тянется на всю высоту
       карточки, мета прижимается к низу. Плашке над заголовком
       запрещаем растягиваться вместе с flex-колонкой (иначе она
       превращается в высокий прямоугольник). */
.p-wrap.p-list-small-1 {
    display: flex;
    flex-direction: column;
}

.p-wrap.p-list-small-1 > .p-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.p-wrap.p-list-small-1 > .p-content > .p-categories {
    flex: 0 0 auto;
}

.p-wrap.p-list-small-1 .p-meta {
    margin-top: auto;
}

/* 5b. Горизонтальные списки (p-list-2). */
.p-wrap.p-list-2 > .list-holder {
    align-items: stretch;
}

.p-wrap.p-list-2 > .list-holder > .p-content {
    display: flex;
    flex-direction: column;
}

.p-wrap.p-list-2 > .list-holder > .p-content > .p-categories {
    flex: 0 0 auto;
}

.p-wrap.p-list-2 > .list-holder > .p-content > .p-meta {
    margin-top: auto;
}

/* 5c. Карточки-боксы (p-list-box-2): фото слева, контент справа.
       Плашке запрещаем растягиваться вместе с flex-колонкой. */
.p-wrap.p-list-box-2 > .list-box > .list-holder {
    align-items: stretch;
}

.p-wrap.p-list-box-2 > .list-box > .list-holder > .p-content {
    display: flex;
    flex-direction: column;
}

.p-wrap.p-list-box-2 > .list-box > .list-holder > .p-content > .p-categories {
    flex: 0 0 auto;
}

.p-wrap.p-list-box-2 > .list-box > .list-holder > .p-content > .p-meta {
    margin-top: auto;
}

/* 5d. Квадратные превью в мини-рубриках list-box-2 на главной
       (Общество / Политика / Спорт): тема растягивает фото по высоте
       карточки, из-за чего оно становится прямоугольным. */
.elementor-15 .p-list-box-2 .list-box .p-featured {
    height: auto;
}

/* 5e. Компактная мета в карточках list-box-2: дата не переносится
       на вторую строку и не ломает выравнивание колонок. */
.p-wrap.p-list-box-2 .p-meta {
    --meta-fsize: 11px;
}

.p-wrap.p-list-box-2 .meta-el.meta-date {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5f. На мобильных карточки list-box-2 складываются (фото сверху,
       текст снизу), и высота снова начинает зависеть от длины
       заголовка — резервируем те же 3 строки. */
@media (max-width: 767px) {
    .p-wrap.p-list-box-2 .entry-title {
        min-height: calc(var(--uli-title-lines, 3) * 1.3em);
    }
}

/* 5g. Рубрики-колонки (Общество / Политика / Спорт): у кнопок листания
       убираем подписи «Предыдущий»/«Следующий» — остаются только
       стрелки, кнопка сжимается до иконки. */
.block-list-box-2 .pagination-nextprev .pagination-trigger > span {
    display: none;
}

.block-list-box-2 .pagination-nextprev .pagination-trigger {
    min-width: 0;
    padding: 0 14px;
    justify-content: center;
}

/* =============================================================================
 * ГЛАВНАЯ: ЛЕВАЯ ЛЕНТА ЗАКРЕПОВ — «ЗЕБРА»
 * -----------------------------------------------------------------------------
 * Виджет foxiz-list-small-1 [data-id="9624c7f"] на первом экране главной:
 *   • 20 записей с прокруткой, в видимой области ровно 4 строки;
 *   • высота области 636px (задана в Elementor) → строка ровно 159px;
 *   • у 1-й, 3-й, 5-й… строк — серая подложка #f2f2f2 со скруглением 10px.
 *
 * Межстрочный зазор темы (row-gap 25px у .block-inner, настройка el_spacing)
 * убираем: 4 × 159px = 636px ровно, без обрезки четвёртой строки.
 *
 * Отрицательные поля темы (.is-gap-*\ .block-inner { margin: 0 -10px } —
 * компенсация внутренних отступов строк) тоже убираем: иначе подложка
 * вылезает влево за контент колонки, а справа её режет гуттер скроллбара.
 * С полями 0 подложка ровно совпадает с видимой областью ленты.
 *
 * Зарезервированный темой отступ под скроллбар (15px) убирали полностью,
 * но тогда тонкий скроллбар упирался в подложки строк. Оставляем небольшой
 * отступ 10px: скроллбар чуть отлеплен от записей, подложки при этом
 * ровно совпадают с видимой областью ленты. Текст не перекрывается:
 * у строки собственный внутренний отступ 10px.
 * ========================================================================== */

.elementor-15 [data-id="9624c7f"] .scroll-holder {
    padding-right: 10px;
}

.elementor-15 [data-id="9624c7f"] .block-inner {
    row-gap: 0;
    margin-left: 0;
    margin-right: 0;
}

.elementor-15 [data-id="9624c7f"] .p-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    flex-basis: 100%;
    width: 100%;
    min-height: 159px;
    padding: 10px;
}

/* Подложка «через одну»: 1-я, 3-я, 5-я… */
.elementor-15 [data-id="9624c7f"] .p-wrap:nth-child(odd) {
    background: #f2f2f2;
    border-radius: 10px;
}

/* --- Мобильная лента закрепов: горизонтальный свайп по 2 записи ---
   На экранах до 767px тема снимает max-height у .scroll-holder, и все
   20 записей выстраиваются в вертикальный список высотой ~3200px.
   Разворачиваем его в горизонтальную ленту: в видимой области ровно
   2 карточки, свайп листает парами (scroll-snap привязан к нечётным
   карточкам — 1–2, 3–4, 5–6 и т. д.). Планшет не трогаем: там лента
   остаётся узкой колонкой с вертикальной прокруткой, как на десктопе. */
@media (max-width: 767px) {
    .elementor-15 [data-id="9624c7f"] .scroll-holder {
        padding-right: 0;
    }

    .elementor-15 [data-id="9624c7f"] .block-inner {
        flex-flow: row nowrap;
        gap: 0 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .elementor-15 [data-id="9624c7f"] .block-inner::-webkit-scrollbar {
        display: none;
    }

    .elementor-15 [data-id="9624c7f"] .p-wrap {
        flex: 0 0 calc(50% - 5px);
        width: calc(50% - 5px);
        min-width: 0;
    }

    /* Точки остановки — только начало каждой пары записей. */
    .elementor-15 [data-id="9624c7f"] .p-wrap:nth-child(odd) {
        scroll-snap-align: start;
    }

    .elementor-15 [data-id="9624c7f"] .p-wrap:nth-child(even) {
        scroll-snap-align: unset;
    }
}

/* =============================================================================
 * ГЛАВНАЯ: «ФОТОРЕПОРТАЖИ» — ФОКУС-КАРУСЕЛЬ + СТРЕЛКИ СЛАЙДЕРОВ
 * -----------------------------------------------------------------------------
 * Виджет Foxiz Grid Flex 1 (id 4e0ce1a) на главной:
 *   • в центре — активный слайд крупнее (1.35), боковые уменьшены (0.825);
 *   • боковые карточки прижаты к краям контейнера, зазор до центральной —
 *     ровно 10px (2×side + center + 2×10 = ширина контейнера);
 *   • у боковых карточек видны только фото, заголовок и мета; базовые
 *     шрифты боковых слайдов крупнее, чтобы после масштаба читались;
 *   • у центральной плавно раскрывается анонс.
 *
 * Фокус-стили включаются классом .uli-photo-ready, который ставит
 * assets/js/photo-focus.js после инициализации карусели и замера высоты:
 * до этого секция скрыта (visibility: hidden), поэтому первый кадр —
 * сразу финальная раскладка, без «скачков» и кривых промежуточных состояний.
 *
 * Стрелки — единый стиль для двух тёмных слайдеров главной
 * («Фоторепортажи» 4e0ce1a и «Популярные новости» 8e1c982):
 * по краям контента, чуть выше вертикального центра (45%), светлый
 * шеврон на полупрозрачной круглой подложке.
 *
 * Параметры Swiper (центрирование, отключение free-scroll, вывод анонса,
 * зазор 10px) задаются на сервере — см. inc/photo-focus.php.
 * На экранах < 1025px эффект фокуса и боковые стрелки отключены.
 * ========================================================================== */

@media (min-width: 1025px) {

    /* Вертикальные поля рассчитаны на увеличенный центральный слайд:
       (1.35 − 1) / 2 × высота слайда (~457px) ≈ 80px запаса. */
    .elementor-element-4e0ce1a .post-carousel {
        padding: 84px 0;
    }

    /* До включения фокус-режима секция не показывается. */
    .elementor-element-4e0ce1a .post-carousel:not(.uli-photo-ready) {
        visibility: hidden;
    }

    /* Плавное «перетекание» слайдов */
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide {
        position: relative;
        transition: transform .55s cubic-bezier(.25, .8, .3, 1), opacity .45s ease;
        transform-origin: center center;
        opacity: .78;
        z-index: 1;
        will-change: transform;
    }

    /* Дубликаты loop-режима получают те же классы с суффиксом
       -duplicate-*, поэтому их тоже перечисляем — переход без рывка. */
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide-active,
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide-duplicate-active {
        transform: scale(1.35);
        opacity: 1;
        z-index: 5;
    }

    /* Боковые слайды: уменьшены и прижаты к краям контейнера.
       Смещение 36px = (406.7 − 406.7 × 0.825) / 2 при зазоре 10px:
       так визуальный зазор до центрального слайда — ровно 10px. */
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide-prev,
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide-duplicate-prev {
        transform: translateX(-36px) scale(.825);
    }

    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide-next,
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide-duplicate-next {
        transform: translateX(36px) scale(.825);
    }

    /* Шрифты слайдов меняются плавно (переход задан на базовых элементах,
       чтобы работал в обе стороны при смене активного слайда). */
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .entry-title,
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .p-meta {
        transition: font-size .45s ease;
    }

    /* Типографика боковых слайдов: базовые размеры крупнее, чтобы после
       масштаба 0.825 текст читался (заголовок ~15px, мета ~12px).
       Центральный слайд остаётся базовым (16/14) и масштабируется 1.35 —
       контраст «главный/второстепенный» сохраняется. */
    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-duplicate-active) .entry-title {
        font-size: 18px;
    }

    .elementor-element-4e0ce1a .post-carousel.uli-photo-ready .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-duplicate-active) .p-meta {
        font-size: 15px;
    }

    /* Анонс плавно раскрывается только у центральной карточки.
       Высоту секции при переключении стабилизирует min-height
       на .swiper-wrapper — его ставит assets/js/photo-focus.js. */
    .elementor-element-4e0ce1a .p-grid-1 .entry-summary {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        transition: max-height .55s cubic-bezier(.25, .8, .3, 1), opacity .45s ease, margin-top .55s ease;
    }

    .elementor-element-4e0ce1a .swiper-slide-active .entry-summary,
    .elementor-element-4e0ce1a .swiper-slide-duplicate-active .entry-summary {
        max-height: 7em;
        opacity: 1;
        margin-top: .35em;
    }

    /* Режим замера высоты (класс uli-photo-measure добавляет скрипт):
       анонсы раскрыты у всех слайдов, анимации отключены — визуально
       незаметно, браузер не успевает отрисовать промежуточное состояние. */
    .elementor-element-4e0ce1a .post-carousel.uli-photo-measure .swiper-slide,
    .elementor-element-4e0ce1a .post-carousel.uli-photo-measure .entry-summary {
        transition: none !important;
    }

    .elementor-element-4e0ce1a .post-carousel.uli-photo-measure .entry-summary {
        max-height: 7em !important;
        opacity: 1 !important;
        margin-top: .35em !important;
    }

    /* В режиме замера типографика тоже «как у активного слайда»:
       иначе увеличенные шрифты боковых карточек завышают замер
       и под центром остаётся лишняя пустота. */
    .elementor-element-4e0ce1a .post-carousel.uli-photo-measure .entry-title {
        font-size: 16px !important;
    }

    .elementor-element-4e0ce1a .post-carousel.uli-photo-measure .p-meta {
        font-size: 14px !important;
    }

    /* Стрелки — единый стиль для обоих слайдеров: по краям контента
       (отступ 10px) и чуть выше вертикального центра (45%), чтобы
       не перекрывать иконки типов записей на фото. */
    .elementor-element-4e0ce1a .slider-footer,
    .elementor-element-8e1c982 .slider-footer {
        position: absolute;
        left: 0;
        right: 0;
        top: 45%;
        transform: translateY(-50%);
        margin: 0 !important;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 30;
    }

    .elementor-element-4e0ce1a .slider-prev,
    .elementor-element-4e0ce1a .slider-next,
    .elementor-element-8e1c982 .slider-prev,
    .elementor-element-8e1c982 .slider-next {
        pointer-events: auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(13, 34, 40, .35) !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        border: 0 !important;
        color: #fff !important;
        opacity: .8;
        cursor: pointer;
        transition: opacity .25s ease, transform .25s ease;
    }

    /* Скрываем глиф иконочного шрифта темы, рисуем свой шеврон */
    .elementor-element-4e0ce1a .slider-prev::before,
    .elementor-element-4e0ce1a .slider-next::before,
    .elementor-element-8e1c982 .slider-prev::before,
    .elementor-element-8e1c982 .slider-next::before {
        display: none !important;
    }

    .elementor-element-4e0ce1a .slider-prev::after,
    .elementor-element-4e0ce1a .slider-next::after,
    .elementor-element-8e1c982 .slider-prev::after,
    .elementor-element-8e1c982 .slider-next::after {
        content: '';
        width: 22px;
        height: 22px;
        /* лёгкая тень — шеврон читается и поверх фотографий */
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35));
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .elementor-element-4e0ce1a .slider-next::after,
    .elementor-element-8e1c982 .slider-next::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    }

    .elementor-element-4e0ce1a .slider-prev:hover,
    .elementor-element-4e0ce1a .slider-next:hover,
    .elementor-element-8e1c982 .slider-prev:hover,
    .elementor-element-8e1c982 .slider-next:hover {
        opacity: 1;
        transform: scale(1.12);
    }
}