/*
 * BuzzStream — оформление скина.
 * ---------------------------------------------------------------------------
 * Тот же Foxiz, что и в скине foxiz, но другой пресет: антиква в заголовках,
 * Inter в интерфейсной мелочи, чёрные линейки у заголовков секций и
 * вертикальные разделители между колонками.
 *
 * Значения сняты с демо https://foxiz.io/buzzstream/ (набор :root-переменных
 * темы), а не подобраны на глаз. Отступления от оригинала помечены явно.
 *
 * Подключается последним — после main/rtl.css и theme-vars.css.
 */

:root {
    /*
     * Текст. В оригинале здесь Georgia, но в ней НЕТ буквы «ə» (U+0259),
     * а в азербайджанском она одна из самых частых — текст сваливался бы
     * на подстановочный шрифт. Берём ту же антикву, что и в заголовках:
     * Crimson Pro — это текстовая гарнитура, для набора она годится.
     */
    --body-family: "Crimson Pro", Georgia, "Times New Roman", serif;
    --body-fweight: 400;
    /*
     * 21px, а не 19px из макета. Там текст набран Georgia, у которой рост
     * строчных 0.484 от кегля — одна из самых крупных антикв. У Crimson Pro
     * он 0.42, и на одном кегле текст выглядит на 13% мельче. Замерено
     * по таблицам шрифтов, а не на глаз.
     */
    --body-fsize: 21px;
    /* В оригинале текст чистого чёрного, у темы по умолчанию #282828. */
    --body-fcolor: #000;

    /* Заголовки — антиква. */
    --h1-family: "Crimson Pro", Georgia, serif;
    --h1-fweight: 900;
    --h1-fsize: 42px;
    --h1-fspace: -0.02381em;
    --h1-fheight: 1.048;

    --h2-family: "Crimson Pro", Georgia, serif;
    --h2-fweight: 700;
    --h2-fsize: 36px;
    --h2-fspace: -0.02083em;
    --h2-fheight: 1.111;

    --h3-family: "Crimson Pro", Georgia, serif;
    --h3-fweight: 700;
    --h3-fsize: 21px;
    --h3-fspace: -0.02381em;
    --h3-fheight: 1.238;

    --h4-family: "Crimson Pro", Georgia, serif;
    --h4-fweight: 700;
    --h4-fsize: 19px;
    --h4-fspace: -0.01316em;
    --h4-fheight: 1.263;

    --h5-family: "Crimson Pro", Georgia, serif;
    --h5-fweight: 700;
    --h5-fsize: 17px;
    --h5-fspace: -0.01471em;
    --h5-fheight: 1.353;

    --h6-family: "Crimson Pro", Georgia, serif;
    --h6-fweight: 700;
    --h6-fsize: 16px;
    --h6-fspace: -0.01563em;
    --h6-fheight: 1.375;

    /* Крупный заголовок лида. */
    --headline-family: "Crimson Pro", Georgia, serif;
    --headline-fweight: 900;
    --headline-fsize: 54px;
    --headline-fspace: -0.01852em;
    --headline-s-fsize: 54px;

    --quote-family: "Crimson Pro", Georgia, serif;
    --quote-fweight: 900;
    --quote-fstyle: italic;
    --quote-fspace: -1px;

    /* Меню — тоже антиква, это заметная часть характера макета. */
    --menu-family: "Crimson Pro", Georgia, serif;
    --menu-fweight: 800;
    --menu-fsize: 18px;
    --submenu-family: "Crimson Pro", Georgia, serif;
    --submenu-fweight: 700;
    --submenu-fsize: 15px;

    /* Интерфейсная мелочь — гротеск. */
    --meta-family: Inter, system-ui, sans-serif;
    --meta-fweight: 400;
    --meta-fsize: 11px;
    --meta-fspace: 0;
    --meta-transform: capitalize;
    /* В оригинале мета чёрная — серая читается заметно хуже. */
    --meta-fcolor: #000;
    --meta-b-family: Inter, system-ui, sans-serif;
    --meta-b-fweight: 600;
    --meta-b-transform: capitalize;
    --meta-b-fspace: 0;

    --cat-family: Inter, system-ui, sans-serif;
    --cat-fweight: 600;
    --cat-fsize: 11px;
    --cat-fspace: 0.09091em;

    --excerpt-family: Inter, system-ui, sans-serif;
    --excerpt-fweight: 400;

    --heading-family: Inter, system-ui, sans-serif;
    --heading-fweight: 700;
    /*
     * Кегль текста заголовка секции — по замеру оригинала.
     * --heading-size-desktop обязателен: тема читает именно её первой
     * (font-size: var(--heading-size-desktop, var(--heading-fsize))), а наш
     * theme-vars.css из первого пресета выставляет её в 20px.
     */
    --heading-fsize: 15px;
    --heading-size-desktop: 15px;
    --heading-tagline-color: #777;

    --subheading-family: "Crimson Pro", Georgia, serif;
    --subheading-fweight: 400;
    --subheading-fstyle: italic;
    --subheading-fsize: 15px;

    --tagline-family: Inter, system-ui, sans-serif;
    --tagline-fweight: 400;
    --tagline-fsize: 22px;
    --tagline-fspace: -0.04545em;
    --tagline-fheight: 1.364;
    --tagline-s-fsize: 20px;

    --btn-family: Inter, system-ui, sans-serif;
    --btn-fweight: 700;
    --btn-fsize: 12px;

    --bcrumb-family: Inter, system-ui, sans-serif;
    --bcrumb-fweight: 400;
    --bcrumb-fsize: 15px;

    --input-family: Inter, system-ui, sans-serif;
    --input-fweight: 400;
    --input-fsize: 14px;

    --dwidgets-family: Inter, system-ui, sans-serif;
    --dwidgets-fweight: 400;

    --readmore-fsize: 11px;

    /*
     * Цвет. Фирменный красный оставляем свой — под него сделан логотип,
     * и розовый из демо (#ff184e) с ним конфликтует. Из оригинала берём
     * чёрные линейки у заголовков секций и оранжевый цвет пометки «прямой эфир».
     */
    --heading-sub-color: #111418;
    --live-color: #fe682e;
    --excerpt-color: #666;

    /*
     * Фирменный цвет взят из логотипа ArabAZ — синий #113d6a. Он же цвет
     * плашек рубрик, подсветки заголовка при наведении и активных элементов.
     * Красный #ec1c24 из логотипа оставлен для отдельных акцентов
     * (пометка «прямой эфир»), сплошным цветом не используется.
     */
    --g-color: #113d6a;
    --g-color-90: #113d6ae6;

    /* На синем плашки набираются белым. */
    --cat-fcolor: #ffffff;
}

/* Арабская версия: у Crimson Pro нет арабского, ставим классический насх. */
[dir="rtl"] {
    --body-family: Amiri, "Times New Roman", serif;
    --h1-family: Amiri, serif;
    --h2-family: Amiri, serif;
    --h3-family: Amiri, serif;
    --h4-family: Amiri, serif;
    --h5-family: Amiri, serif;
    --h6-family: Amiri, serif;
    --headline-family: Amiri, serif;
    --quote-family: Amiri, serif;
    --menu-family: Amiri, serif;
    --submenu-family: Amiri, serif;
    --subheading-family: Amiri, serif;

    /* Amiri тоже мелкий: рост строчных 0.433 — как у Crimson Pro. */
    --body-fsize: 21px;
    --headline-fsize: 46px;
    --headline-s-fsize: 46px;
    --h1-fsize: 38px;
    --h2-fsize: 32px;

    /*
     * Межстрочный интервал. В макете он рассчитан на латиницу (у h1 — 1.048),
     * а арабская вязь высокая: у неё есть и надстрочные знаки, и глубокие
     * выносные. На таком интервале строки заголовка налезали друг на друга.
     */
    --h1-fheight: 1.55;
    --h2-fheight: 1.5;
    --h3-fheight: 1.5;
    --h4-fheight: 1.5;
    --h5-fheight: 1.55;
    --h6-fheight: 1.55;
    --headline-fheight: 1.45;
    --tagline-fheight: 1.7;

    /* Интерфейс остаётся гротеском — Tajawal уже знаком по текущему скину. */
    --meta-family: Tajawal, Inter, sans-serif;
    --meta-b-family: Tajawal, Inter, sans-serif;
    --cat-family: Tajawal, Inter, sans-serif;
    --excerpt-family: Tajawal, Inter, sans-serif;
    --heading-family: Tajawal, Inter, sans-serif;
    --tagline-family: Tajawal, Inter, sans-serif;
    --btn-family: Tajawal, Inter, sans-serif;
    --bcrumb-family: Tajawal, Inter, sans-serif;
    --dwidgets-family: Tajawal, Inter, sans-serif;

    /* Арабский не знает капитализации — свойство только портит вид. */
    --meta-transform: none;
    --meta-b-transform: none;
}

/*
 * Шапка
 * ---------------------------------------------------------------------------
 * Верхняя планка и полоса рубрик в оригинале собраны в Elementor, готовой
 * раскладки в теме нет — поэтому здесь своя обвязка на префиксе bz-.
 * Всё, что тема оформляет сама (.current-date, .qlinks-inner, .ax-lang,
 * .dark-mode-toggle), только расставляется по местам.
 */
.bz-topbar {
    border-bottom: 1px solid var(--flex-gray-15, #88888826);
    background-color: var(--nav-bg, #fff);
    font-family: var(--meta-family);
}

.bz-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 38px;
}

.bz-topbar .current-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--meta-fcolor, #555);
    white-space: nowrap;
}

.bz-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Тумблер темы в планке мельче, чем в основном ряду. */
.bz-topbar .dark-mode-toggle-wrap { transform: scale(.85); }


/* Планка бесполезна на телефоне — там своя шапка. */
@media (max-width: 1024px) {
    .bz-topbar { display: none; }
}

/*
 * Полоса рубрик под шапкой.
 * Тема оформляет сами ссылки (.qlayout-1 .qlink), нам остаётся рамка и отбивка.
 */
.bz-strip {
    border-bottom: 1px solid var(--flex-gray-15, #88888826);
    background-color: var(--nav-bg, #fff);
}

.bz-strip .block-wrap { margin: 0; }

.bz-strip .qlinks-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.bz-strip .qlinks-inner::-webkit-scrollbar { display: none; }

.bz-strip .qlink {
    flex: 0 0 auto;
    font-family: var(--meta-family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.bz-strip .qlink a { color: var(--body-fcolor); }
.bz-strip .qlink a:hover { color: var(--g-color); }

@media (max-width: 767px) {
    .bz-strip .qlinks-inner { gap: 16px; min-height: 38px; }
}

/* .bz-strip остался от прежней раскладки, когда полоса шла отдельным блоком
   под шапкой. Сейчас полоса — второй ряд внутри шапки (.bz-row-strip). */

/*
 * Раскладка главной
 * ---------------------------------------------------------------------------
 * ax-col-* — наши классы деления .grid-container (в демо их роль играли
 * контейнеры Elementor, чей CSS в тему не входит). 25 и 75 добавлены
 * специально для верхнего ряда и раздела с рекламой сбоку.
 */
@media (min-width: 768px) {
    .grid-container > .ax-col-25 { flex: 0 0 25%;      width: 25%; }
    .grid-container > .ax-col-75 { flex: 0 0 75%;      width: 75%; }
}

/*
 * Колонка под вертикальный баннер
 * ---------------------------------------------------------------------------
 * 25% от контентных 1240px — это 310px, из которых 40px съедают отступы
 * .grid-container > *, и в колонку остаётся 270px. Баннер 300x600 в них не
 * помещался и ужимался до 265x530 — место показывало неправдивый формат.
 * Даём колонке ровно 300px + отступы, соседняя добирает остаток.
 */
@media (min-width: 1025px) {
    /* 300px баннера + по 30px внутренних отступов колонки. */
    .grid-container > .bz-ad-col { flex: 0 0 360px; width: 360px; }
    .bz-hero > .ax-col-50,
    .grid-container > .ax-col-75 { flex: 1 1 auto; width: auto; }

    /*
     * Сайдбар рубрик и ленты тоже держит 300px: на 1100px окна 28% давали
     * 257px под баннер, и место 300x600 ужималось до 249x499.
     */
    .grid-container > .sidebar-wrap { flex: 0 0 360px; width: 360px; }
    .grid-container > .blog-content { flex: 1 1 auto; width: auto; }

    /* То же для сайдбара страницы новости. */
    .grid-container > .single-sidebar { flex: 0 0 360px; width: 360px; }
    .grid-container > .s-ct { flex: 1 1 auto; width: auto; }
}

/* Промо-врезка вместо почтовой подписки из оригинала. */
.bz-promo {
    padding: 22px 20px;
    margin-bottom: 26px;
    border: 1px solid var(--flex-gray-15, #88888826);
    border-radius: var(--round-3, 3px);
    background-color: var(--subtle-bg, #fafafa);
}

.bz-promo-title {
    margin-bottom: 10px;
    font-family: var(--h4-family);
    font-weight: 700;
    line-height: 1.25;
}

.bz-promo-text {
    margin: 0 0 16px;
    font-family: var(--excerpt-family);
    font-size: 13px;
    line-height: 1.6;
    color: var(--excerpt-color, #666);
}

.bz-promo-social { display: flex; flex-wrap: wrap; gap: 10px; }
.bz-promo-social a { font-size: 16px; }

/*
 * Заголовки секций: линейка и засечка чёрные и заметные — это узнаваемая
 * черта макета. Тема красит их в --heading-sub-color, который задан выше.
 */
.heading-layout-5 .heading-inner { border-top-color: var(--heading-sub-color); }
.heading-layout-7 .heading-title > * { border-left-color: var(--heading-sub-color); }

/*
 * Заголовок секции набран тегом h3 — как в оригинале, отсюда и кегль 21px.
 * Раньше стоял h2, и заголовок выходил 36px гротеском.
 *
 * «Ещё» — мелкой строкой рядом с названием (.heading-tagline), а не капслоком
 * со стрелкой-иконкой, как это делает штатный .block-more-link.
 */
/*
 * Ничего не переопределяем: тема сама выравнивает «ещё» вправо и набирает его
 * стилями --subheading-*. Своё правило color:inherit на ссылке заголовка
 * пришлось убрать — оно перебивало белый цвет, который тема задаёт тексту
 * внутри чёрной плашки (heading-layout-16), и надпись сливалась с фоном.
 */
[dir="rtl"] .heading-tagline { margin-right: auto; margin-left: 0; }

/*
 * Вертикальные линейки между колонками рисует САМА тема (.col-border):
 * она вешает линию на каждый элемент через :after и убирает её у последнего
 * в ряду — отдельно для каждой контрольной ширины, а для одноколоночных
 * блоков (rb-col-1) снимает совсем.
 *
 * Своё правило здесь было ошибкой: оно ставило border-left каждому элементу
 * кроме первого, и в одноколоночном списке получалась сплошная полоса вдоль
 * всей колонки. Ничего дописывать не нужно — --column-border-color в теме задан.
 */

/* Стрелка перед заголовком в компактных списках — цвета текста, а не акцента. */
.p-list-small-1 .entry-title > .rbi {
    margin-right: 4px;
    font-size: .8em;
    color: inherit;
    vertical-align: baseline;
}

[dir="rtl"] .p-list-small-1 .entry-title > .rbi {
    margin-right: 0;
    margin-left: 4px;
    transform: scaleX(-1);
}

/*
 * Карточка-оверлей
 * ---------------------------------------------------------------------------
 * Тема заливает панель с текстом сплошным цветом правилом
 *   .p-highlight .overlay-inner { background: var(--dark-accent) !important }
 * и оно перебивает градиент из .p-gradient. При длинном анонсе панель
 * вырастает и закрывает снимок целиком — получается чёрный прямоугольник.
 * Возвращаем градиент (тоже с !important, иначе не победить) и держим анонс
 * в двух строках, чтобы панель не разрасталась.
 */
.p-gradient .p-highlight .overlay-inner {
    background: linear-gradient(
        to top,
        var(--dark-accent) 0,
        var(--dark-accent-90) calc(100% - 90px),
        var(--dark-accent-0) 100%
    ) !important;
}

/* Снимку нужна заметная высота — иначе от него остаётся полоска. */
.block-overlay .p-featured { --feat-ratio: 68; }

.p-overlay-1 .entry-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    column-count: initial;
    overflow: hidden;
}


/*
 * Панель оверлея не должна перерастать снимок.
 *
 * Тема даёт ей padding-top: 100px (зона, где градиент растворяется), а правило,
 * которое обнуляет этот отступ при плашке рубрики, живёт только в мобильной
 * медиа-выборке. В итоге на десктопе панель с заголовком, анонсом и плашкой
 * получалась выше карточки, прозрачный край градиента уезжал за верхнюю границу
 * и снимок скрывался под сплошной заливкой.
 *
 * Лечим двумя мерами: уменьшаем зону растворения и ограничиваем число строк.
 */
.p-gradient .p-highlight .overlay-inner { padding: 56px 25px 22px; }

/*
 * Обрезка строк — на ЗАГОЛОВКЕ, ссылка внутри остаётся строчной.
 *
 * Если сделать блочной саму ссылку (.p-url), ломается подсветка при наведении:
 * hover-ani-4 красит нижние 30% ЭЛЕМЕНТА, и у блока это одна полоса поперёк
 * всей карточки вместо заливки под каждой строкой.
 */
.p-overlay-1 .entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-overlay-1 .entry-title > a { display: inline; }

/* Крупный лид: снимок выше, чтобы под панелью оставалась заметная фотография. */
.bz-hero .p-overlay-1 .p-featured { --feat-ratio: 96; }
.bz-hero .p-overlay-1 .entry-summary { -webkit-line-clamp: 2; }

/*
 * Оверлеи в парных колонках — компактнее: заголовок в две строки, без анонса.
 * Верхний лид исключён: он в такой же колонке ax-col-50, но ему нужен полный
 * заголовок и анонс, иначе правило перебивало настройки лида.
 */
.grid-container:not(.bz-hero) > .ax-col-50 .p-overlay-1 .p-featured { --feat-ratio: 72; }
.grid-container:not(.bz-hero) > .ax-col-50 .p-overlay-1 .entry-title { -webkit-line-clamp: 2; }
.grid-container:not(.bz-hero) > .ax-col-50 .p-overlay-1 .entry-summary { display: none; }

/*
 * Верхний ряд: лид и колонка «главное» должны заканчиваться на одной линии.
 * .grid-container — flex-строка, сама она колонки не выравнивает, поэтому
 * подбираем пропорцию снимка и длину заголовков в списке.
 */
/*
 * Обрезка вешается на ЗАГОЛОВОК целиком, а не на ссылку внутри: иначе ссылка
 * становится блочным -webkit-box и стрелка перед ней уезжает на свою строку —
 * на узких экранах это было хорошо видно.
 */
.bz-hero .p-list-small-1 .entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bz-hero .p-list-small-1 .entry-title > a { display: inline; }

/*
 * Крупные строки в две колонки (block-list-1 rb-col-2)
 * ---------------------------------------------------------------------------
 * У части материалов анонс есть, у части нет, поэтому ряды получались разной
 * высоты: замер давал 236, 236, 148, 148 — вторая строка сетки заметно ниже
 * первой. В двухколоночном варианте анонс не нужен: карточка и так узкая,
 * а без него все строки выходят одной высоты.
 */
.block-list-1.rb-col-2 .p-list-1 .entry-summary { display: none; }

/* Заголовок в узких карточках держим в трёх строках — иначе ряд «дышит». */
.rb-col-4 .p-grid-1 .entry-title,
.rb-col-5 .p-grid-1 .entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Вертикальный баннер прилипает — иначе при прокрутке рядом с ним пустота. */
.ax-col-25 .ad-wrap { position: sticky; top: 90px; }

/*
 * Выравнивание высот
 * ---------------------------------------------------------------------------
 * Замеры показали ступеньки: ряды «Siyasət» шли 173/173/133/133, а колонки
 * тройного ряда расходились до 78px. Причина одна — заголовки разной длины.
 * Ограничиваем число строк там, где карточки стоят рядами.
 */
.p-list-small-1 .entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-list-small-1 .entry-title > a { display: inline; }

.block-list-1.rb-col-2 .p-list-1 .entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Полоса ссылок в колонке — не строкой, а столбиком по ширине колонки. */
.bz-qlinks-box .qlinks-inner {
    display: flex;
    flex-flow: row wrap;
    gap: 8px 14px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--flex-gray-15, #88888826);
    border-radius: var(--round-3, 3px);
    list-style: none;
}

.bz-qlinks-box .qlink {
    font-family: var(--meta-family);
    font-size: 13px;
    font-weight: 600;
}

.bz-qlinks-box .qlinks-heading {
    flex: 0 0 100%;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--meta-fcolor, #777);
}

.bz-qlinks-box .qlink a { color: var(--body-fcolor); }
.bz-qlinks-box .qlink a:hover { color: var(--g-color); }

/*
 * На узком экране колонка вдвое уже, и трёх строк заголовку лида не хватает —
 * он обрывался на «Təhlükəsizlik bizi…». Даём четыре.
 */
@media (max-width: 767px) {
    .bz-hero .p-overlay-1 .entry-title { -webkit-line-clamp: 4; }
}

/* Плашка рубрики в оригинале прямоугольная, без скругления. */
.ecat-bg-4 .p-category { border-radius: 0; }

/*
 * Плашки рубрик
 * ---------------------------------------------------------------------------
 * В оригинале цветов по рубрикам НЕТ вовсе: --cat-highlight нигде не задан и
 * падает на фирменный --g-color, поэтому все плашки одного цвета (у BuzzStream
 * это янтарный #ffad21). У нас в theme-vars.css заведены 22 цвета по рубрикам —
 * это наследие первого пресета, и из-за него плашки выглядели «не теми».
 *
 * Приводим к устройству оригинала, но в нашем фирменном красном: он выбран под
 * логотип, а янтарный из демо с ним спорил бы. Вернуть разноцветные плашки —
 * убрать это правило.
 */
.ecat-bg-4 .p-category,
.ecat-bg-4 .p-category:before {
    --cat-highlight: var(--g-color);
}

/*
 * Мобильная версия
 * ===========================================================================
 */
@media (max-width: 767px) {
    /*
     * Крупная горизонтальная карточка. В режиме is-m-list фото занимает
     * 150px справа, тексту остаётся ~165px — и заголовок, набранный h2 (36px),
     * разворачивался на одиннадцать строк высотой 520px. Кегль здесь должен
     * быть списочный, а не заголовочный.
     */
    .p-list-1 .entry-title {
        font-size: var(--h5-fsize, 17px);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .p-list-1 .entry-title > a { display: inline; }

    /*
     * То же для карточек сетки, когда блок переведён в режим «списком»
     * (is-m-list): текстовая колонка там такая же узкая, и заголовок h3
     * разворачивался на семь строк, споря по размеру с соседней карточкой.
     * Ленту с горизонтальной прокруткой это не затрагивает — у неё
     * is-m-list не ставится, карточка идёт во всю свою ширину.
     */
    .is-m-list .p-grid-1 .entry-title {
        font-size: var(--h5-fsize, 17px);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .is-m-list .p-grid-1 .entry-title > a { display: inline; }

    /*
     * Анонс в такой карточке не помещается — на телефоне он лишний.
     * Селектор с тремя классами: theme-vars.css задаёт анонс правилом
     * `.p-wrap .entry-summary.p-excerpt` того же веса, и с двумя классами
     * правило проигрывало.
     */
    .p-list-1 .entry-summary.p-excerpt { display: none; }

    /*
     * Вертикальный баннер 300x600 нужен только десктопу — он там выравнивает
     * высоту секции. На телефоне это полтора экрана серой заглушки.
     */
    .ax-col-25 .ad-wrap[data-slot="home-mid"] { display: none; }
}

/*
 * Мобильное меню
 * ---------------------------------------------------------------------------
 * .mobile-collapse-inner и .mobile-social-list — наши обёртки, у темы стилей
 * для них нет, поэтому содержимое прилипало к левому краю экрана.
 */
.mobile-collapse-inner {
    width: 100%;
    padding: 16px 20px 28px;
}

/* Пункты меню — шрифтом скина, а не жёстко прошитым в теме гротеском. */
.mobile-menu > li > a {
    font-family: var(--menu-family) !important;
    font-weight: 700;
}

.mobile-menu > li:not(:last-child) {
    border-bottom: 1px solid var(--flex-gray-15, #88888826);
}

/* Подменю: со сдвигом и мельче — иначе читается как соседний пункт. */
.mobile-menu .sub-menu {
    display: block;
    margin: 0 0 10px;
    padding: 0 0 0 16px;
    list-style: none;
}

.mobile-menu .sub-menu > li > a {
    display: block;
    padding: 7px 0;
    font-family: var(--submenu-family);
    font-size: 15px;
    font-weight: 400;
    color: var(--meta-fcolor, #555);
}

[dir="rtl"] .mobile-menu .sub-menu { padding: 0 16px 0 0; }

.mobile-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 20px;
    margin-top: 6px;
    border-top: 1px solid var(--flex-gray-15, #88888826);
    font-size: 18px;
}

/*
 * Плашка рубрики на странице новости
 * ---------------------------------------------------------------------------
 * Там разметка задаёт `ecat-bg-1` — крупную плашку со скосом 25° и цветом
 * из палитры первого пресета (у рубрики «Tarixdə bu gün» он бурый). Шаблон
 * общий с прежним скином, поэтому приводим вид стилями, а не правкой разметки:
 * скос снимаем, размер и цвет — как у плашек на главной.
 */
.ecat-bg-1 .p-category,
.ecat-bg-2 .p-category,
.ecat-bg-3 .p-category {
    --cat-highlight: var(--g-color);
    padding: min(0.3em, 5px) min(0.7em, 12px);
}

.ecat-bg-1 .p-category:before,
.ecat-bg-2 .p-category:before {
    transform: none;
    border-radius: 0;
}

/*
 * Ровные строки в колонках-рубриках
 * ---------------------------------------------------------------------------
 * Обрезка в три строки задаёт ВЕРХНЮЮ границу, но короткий заголовок занимает
 * одну строку, и соседние колонки расходятся: на арабской замер давал
 * 954 / 859 / 733 при равном числе материалов. Резервируем три строки — тогда
 * каждый элемент одной высоты и колонки сходятся. Пустота под короткими
 * заголовками читается как ритм списка, а не как дыра.
 */
/*
 * ОТМЕНЕНО. Резерв высоты под три строки выравнивал колонки, но у коротких
 * заголовков оставлял до 54px пустоты между названием и датой — замер показал
 * «Kəhf surəsi nədən bəhs edir?»: текст 26px, коробка 80px. Читалось как брак.
 *
 * Тройной ряд рубрик после правок редактора перешёл на карточки с картинками,
 * и резерв остался нужен только парным колонкам — там он и вредил.
 * Колонки в паре выравниваются сами: у них одинаковое число материалов.
 */

/*
 * Страница новости: вертикальный ритм в подвале материала
 * ---------------------------------------------------------------------------
 * Тема рассчитана на то, что после кнопок шеринга идут комментарии и другие
 * блоки, поэтому даёт им крошечные отступы (18px сверху, 15px снизу). У нас
 * материал на них заканчивается: замер показывал ноль между «похожими» и
 * шерингом и 15px до подвала — блоки слипались.
 */
.e-shared-sec.entry-sec {
    padding-top: 34px;
    padding-bottom: 0;
    margin-bottom: 8px;
}

/* Воздух между материалом и подвалом. */
.single-standard-2 > article {
    padding-bottom: 56px;
}

/*
 * Отступ под заголовком блока
 * ---------------------------------------------------------------------------
 * Тема задаёт его ТОЧЕЧНО: `.related-sec .block-h`, `.entry-widget .block-h`,
 * `.blog-content > .block-h`, `.sfoter-sec > .block-h`. Заголовок в сайдбаре
 * страницы новости ни под одно из них не подходит, и первая карточка липла
 * к нему вплотную — замер давал ровно 0px.
 *
 * Ставим общее правило малым весом (0,1,0): там, где у темы есть своё,
 * оно продолжает выигрывать.
 */
.block-h { margin-bottom: 14px; }

/*
 * Планшет (768–1024px)
 * ---------------------------------------------------------------------------
 * Здесь ещё действуют десктопные деления колонок, и верхний ряд из трёх частей
 * становится тесным: лид ужимался до ~200px и оказывался уже соседнего баннера.
 * Раскладываем его в два уровня — лид во всю ширину, под ним «главное» и баннер.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    .grid-container > .ax-col-50,
    .grid-container > .ax-col-75 {
        flex: 0 0 100%;
        width: 100%;
    }

    /*
     * Колонки верхнего ряда делим не пополам, а по делу: баннер занимает
     * ровно свою ширину, список забирает остаток. При делении пополам баннер
     * в 300px центрировался в колонке 423px — по 61px пустоты с каждой стороны,
     * и он не совпадал ни с одной границей страницы.
     * 340px = 300 баннера + внутренние отступы колонки.
     */
    /*
     * Перенос обязателен: начиная с 1000px тема ставит контейнеру row nowrap,
     * и три колонки перестают переноситься — лид занимает всю ширину, а список
     * сжимается до 40px. Замер: 1009 / 40 / 340.
     */
    .bz-hero { flex-wrap: wrap; }

    .bz-hero > .ax-col-25 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .bz-hero > .ax-col-25:last-child {
        flex: 0 0 340px;
        width: 340px;
    }
}

/*
 * Вертикальный баннер секции убираем вместе с колонкой начиная с планшета:
 * он шире отведённой ему четверти, а рядом остаётся сжатая карточка.
 * Нижняя граница у правила выше обязательна — без неё оно доставало до
 * телефона и разбивало там верхний ряд на две колонки.
 */
@media (max-width: 1024px) {
    /*
     * Только колонка «Rəsmi Xronika»: в верхнем ряду класс .bz-ad-col тоже
     * есть (он задаёт ширину под баннер 300px), но тот баннер на узких
     * экранах остаётся — он там единственное содержимое колонки.
     */
    .grid-container:not(.bz-hero) > .bz-ad-col { display: none; }
}

/* Переключатель языков в мобильной шапке — компактнее, чем в верхней планке. */
.header-mobile .ax-lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

[dir="rtl"] .header-mobile .ax-lang-switch { margin-right: 0; margin-left: 4px; }

.header-mobile .ax-lang { font-size: 11px; padding: 3px 6px; }

/*
 * Вертикальный зазор между колонками, когда они переносятся
 * ---------------------------------------------------------------------------
 * .grid-container — flex-строка с переносом. На десктопе колонки стоят в один
 * ряд, и зазор не нужен, поэтому в теме его нет вовсе. Но на планшете и
 * телефоне они складываются столбиком и слипались вплотную: замер давал ровно
 * 0px между лидом и следующей колонкой.
 *
 * row-gap действует ТОЛЬКО между перенесёнными рядами, поэтому на десктопе
 * ничего не меняет — правило можно держать общим.
 */
.grid-container { row-gap: 34px; }

/*
 * Неполный последний ряд на планшете
 * ---------------------------------------------------------------------------
 * Число материалов подобрано под десктопные колонки (5 у «Cəmiyyət», 5 у
 * «Türk Dövlətləri»), а на планшете колонок три — и в конце оставался «хвост»
 * из одной-двух карточек. Прячем его: лучше ровный ряд, чем сирота.
 * Работает только в планшетном диапазоне; на десктопе и телефоне все на месте.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    /* одна лишняя */
    .rb-tcol-3 > .block-inner > *:nth-child(3n+1):last-child { display: none; }

    /* две лишних */
    .rb-tcol-3 > .block-inner > *:nth-child(3n+1):nth-last-child(2),
    .rb-tcol-3 > .block-inner > *:nth-child(3n+1):nth-last-child(2) ~ * { display: none; }
}

/*
 * Размер логотипа
 * ---------------------------------------------------------------------------
 * Прежний логотип был широким (пропорция 5.9), и высоты 32px хватало —
 * он занимал 189px по ширине. Новый почти квадратный (1.2), при 32px это
 * марка в 38px, где надпись не прочитать. Поднимаем высоту и вместе с ней
 * высоту самой полосы шапки, иначе логотип упирается в её края.
 */
:root {
    /* Логотип занимает оба ряда шапки, поэтому высота больше обычной. */
    /* Подвал: 34px из theme-vars давали марку в 41px шириной — не читалась. */
    --flogo-height: 120px;
    --hd-logo-height: 74px;
}

/*
 * Шапка в два ряда с логотипом слева на всю высоту.
 * Логотип почти квадратный (1.2) — в одну строку меню он помещался марочкой,
 * где надпись не прочитать. Сетка: слева колонка логотипа, справа два ряда —
 * меню с поиском и полоса рубрик.
 */
.bz-brand-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 30px;
    align-items: stretch;
}

.bz-brand-col {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.bz-rows-col {
    display: flex;
    flex-flow: column nowrap;
    min-width: 0;
}

.bz-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.bz-row-menu {
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 20px;
}

.bz-row-strip {
    border-top: 1px solid var(--flex-gray-15, #88888826);
}

.bz-row-strip .block-wrap { margin: 0; width: 100%; }

.bz-row-strip .qlinks-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.bz-row-strip .qlinks-inner::-webkit-scrollbar { display: none; }

.bz-row-strip .qlink {
    flex: 0 0 auto;
    font-family: var(--meta-family);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.bz-row-strip .qlink a { color: var(--body-fcolor); }
.bz-row-strip .qlink a:hover { color: var(--g-color); }

/* Полоса шапки больше не фиксированной высоты — её задают два ряда. */
.navbar-wrap, .bz-brand-grid { height: auto; min-height: 0; }

@media (max-width: 1024px) {
    :root { --mbnav-height: 62px; }
    .mobile-logo-wrap img { max-height: 44px; }
}

@media (max-width: 1024px) {
    :root { --mbnav-height: 62px; }
    .mobile-logo-wrap img { max-height: 44px; }
}

/*
 * Тёмная «коробка» в секции аналитики
 * ---------------------------------------------------------------------------
 * Она — самостоятельный лид секции, а от списка под ней её отделяло всего
 * 26px при 64px между секциями. Из-за этого крупный тёмный блок сливался
 * с лентой. Даём ему заметную отбивку снизу.
 */
/* Два класса в селекторе: отступ блокам задаёт правило темы того же веса. */
.ax-section .block-list-box-1 { margin-bottom: 52px; }

@media (max-width: 767px) {
    .ax-section .block-list-box-1 { margin-bottom: 34px; }
}

/*
 * Миниатюры в боковой ленте — квадратные
 * ---------------------------------------------------------------------------
 * По правке редактора. Тема делает их круглыми правилом
 * `.p-list-small-3 .p-featured { border-radius: 50% }`; возвращаем прямые углы
 * со скруглением как у остальных карточек сайта.
 */
.p-list-small-3 .p-featured {
    border-radius: var(--round-3, 3px);
}

/*
 * Рубрика: лид, ряд из трёх и сетка
 * ---------------------------------------------------------------------------
 * Раскладка по образцу с действующего arab.az (category/qatar): крупный лид,
 * под ним три заголовка в ряд, дальше сетка. Разметку собирает
 * templates-foxiz/blocks/archive.tpl.php при archive_layout = 'lead'.
 *
 * Фото лида тянется на всю высоту блока. Штатное .p-featured держит
 * пропорцию через padding-bottom и абсолютную картинку внутри, поэтому
 * при коротком заголовке справа оставалась белая полоса под фотографией.
 */
.blog-content .block-list-1 .list-holder { align-items: stretch; }

.blog-content .block-list-1 .list-feat-holder,
.blog-content .block-list-1 .list-feat-holder .feat-holder,
.blog-content .block-list-1 .p-featured,
.blog-content .block-list-1 .p-flink { height: 100%; }

.blog-content .block-list-1 .p-featured {
    padding-bottom: 0;
    min-height: 260px;
}

.blog-content .block-list-1 .p-featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* В образце фото занимает чуть больше половины блока, а не 40%. */
@media (min-width: 768px) {
    .blog-content .block-list-1 .list-feat-holder { width: 44%; max-width: 44%; }
}

/* Ряд из трёх заголовков под лидом — отбивка сверху и снизу. */
.ax-under-lead { margin-top: 26px; margin-bottom: 34px; }

@media (max-width: 767px) {
    .blog-content .block-list-1 .p-featured { min-height: 0; padding-bottom: 60%; }
    .ax-under-lead { margin-top: 20px; margin-bottom: 26px; }
}

/*
 * Заголовок статьи на узких экранах
 * ---------------------------------------------------------------------------
 * 54px рассчитаны на колонку 860px. На телефоне при 390px такой заголовок
 * занимал весь первый экран целиком — до текста приходилось прокручивать.
 * Ставим отдельные значения под планшет и телефон.
 */
@media (max-width: 1024px) {
    .s-title,
    .s-title:not(.fw-headline) { font-size: 42px; }
}

@media (max-width: 767px) {
    .s-title,
    .s-title:not(.fw-headline) { font-size: 32px; line-height: 1.12; }
    [dir="rtl"] .s-title,
    [dir="rtl"] .s-title:not(.fw-headline) { font-size: 30px; line-height: 1.4; }
}

/*
 * Статическая страница без сайдбара
 * ---------------------------------------------------------------------------
 * Текста на таких страницах немного, а колонка с лентой и баннером выходила
 * вдвое длиннее самой страницы. Сайдбар убран в шаблоне; здесь остаётся
 * удержать текст в читаемой ширине — на всю сетку строка растянулась бы
 * почти на 1200px, это около 170 знаков, читать невозможно.
 *
 * Ширину задаём контейнеру, общему для шапки и текста: иначе заголовок
 * остаётся у левого края, а текст уезжает в центр.
 */
.bz-page-solo .rb-s-container {
    max-width: 900px;
}

@media (min-width: 1025px) {
    .bz-page-solo .grid-container > .s-ct {
        flex: 1 1 auto;
        width: auto;
    }
}

/*
 * Просмотрщик фотогалереи
 * ---------------------------------------------------------------------------
 * Свой, а не библиотечный: Magnific Popup из темы держит общий экземпляр
 * под всплывающими окнами входа и подписки и на галерее ломается.
 * Разметку создаёт assets/foxiz/js/gallery.js.
 */
html.bz-lightbox-on {
    overflow: hidden;
}

.bz-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Обязательно: атрибут hidden отключается объявлением display выше.
 * В браузерном стиле у [hidden] всего display:none с нулевой
 * специфичностью, и класс его перебивает — окно закрывалось только
 * по картинке, а затемнение и кнопки оставались на экране.
 */
.bz-lightbox[hidden] {
    display: none;
}

.bz-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 15, .92);
}

.bz-lightbox__figure {
    position: relative;
    margin: 0;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bz-lightbox__img {
    display: block;
    max-width: 92vw;
    /* Место под подпись и счётчик — иначе высокий снимок их выдавливает. */
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
}

.bz-lightbox__caption {
    max-width: 70ch;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .85);
}

.bz-lightbox__counter {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    text-align: center;
    font-family: var(--meta-family, inherit);
    font-size: 13px;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
    font-variant-numeric: tabular-nums;
}

.bz-lightbox__close,
.bz-lightbox__nav {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease;
}

.bz-lightbox__close:hover,
.bz-lightbox__nav:hover {
    background: rgba(255, 255, 255, .22);
}

.bz-lightbox__close:focus-visible,
.bz-lightbox__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.bz-lightbox__close {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 30px;
}

.bz-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 72px;
    border-radius: 4px;
    font-size: 34px;
}

.bz-lightbox__nav--prev { left: 18px; }
.bz-lightbox__nav--next { right: 18px; }

/* В арабской версии стрелки меняются местами вместе с направлением чтения. */
[dir="rtl"] .bz-lightbox__nav--prev { left: auto; right: 18px; }
[dir="rtl"] .bz-lightbox__nav--next { right: auto; left: 18px; }

@media (max-width: 767px) {
    .bz-lightbox__img { max-height: 70vh; }
    .bz-lightbox__nav { width: 40px; height: 56px; font-size: 26px; }
    .bz-lightbox__nav--prev { left: 6px; }
    .bz-lightbox__nav--next { right: 6px; }
    [dir="rtl"] .bz-lightbox__nav--prev { right: 6px; }
    [dir="rtl"] .bz-lightbox__nav--next { left: 6px; }
    .bz-lightbox__close { top: 10px; right: 10px; }
}