/*
Theme Name: Aviation21
Theme URI: https://aviation21.ru
Author: Aviation21 team
Description: Собственная тема сайта «Авиация России» — редакционная подача в духе Wire Service. Не зависит от сторонних коммерческих тем.
Version: 0.5.0
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: aviation21
*/

/* Локальная копия Google Fonts Source Sans 3 (весь текст сайта; название
   сайта в шапке — Cambria, системный шрифт, см. ниже, скачивать нечего).
   Раньше Source Sans 3 грузился с fonts.googleapis.com при каждом заходе —
   решение отказаться: (1) скорость загрузки не должна зависеть от
   стороннего CDN, (2) сайт не должен передавать IP и User-Agent каждого
   посетителя Google просто ради шрифта, (3) исключает риск, что шрифт
   вообще не загрузится, если доступ к Google окажется ограничен. Заодно
   обнаружено и убрано: подключение Vollkorn SC оставалось мёртвым грузом
   с более раннего решения, когда название сайта ещё не переключили на
   Cambria («Cambria вместо Vollkorn SC», см. комментарий ниже по файлу) —
   шрифт реально нигде не используется, скачивать и хранить его не нужно.
   Source Sans 3 — вариативный шрифт: один файл на подмножество символов
   реально покрывает все 4 начертания (400/500/600/700), поэтому ниже 4
   правила @font-face делят между собой одни и те же файлы — это не
   дублирование, так и должно быть. */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/source-sans-3-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/source-sans-3-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/source-sans-3-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/source-sans-3-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/source-sans-3-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/source-sans-3-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/source-sans-3-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/source-sans-3-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/source-sans-3-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/source-sans-3-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/source-sans-3-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/source-sans-3-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/source-sans-3-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/source-sans-3-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/source-sans-3-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/source-sans-3-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
	--bg:#faf9f6;
	--surface:#ffffff;
	--text:#1c1e22;
	--text-muted:#6b7078;
	--border:#e4e1d9;
	--accent:#1b4d89;
	--accent-soft:#eaf0f7;
	--inset-bg:#f4f1e9;
	--rubric:#b5590a;
	--btn:#3d3d3d;
	--btn-dark:#242424;
	/* 03.09.2026: фон приподнят с почти-чёрного (#151a21) — менеджер отметил,
	   что ссылка на нём хоть и различима технически (контраст с запасом),
	   но выглядит блёкло. Тот же приподнятый фон переиспользует и
	   .secondary-nav (доп. меню) — раньше он был завязан на --text
	   (обычный цвет текста статей), что просто случайно совпадало с тёмным
	   тоном, а не было отдельным осознанным решением. */
	--footer-bg:#232a33;
	--footer-text:#c7ccd3;
	--footer-border:#2a313b;
	/* Ссылка на тёмном фоне футера/доп. меню должна отличаться от
	   окружающего текста, а не совпадать с ним (--footer-text/#8b929c
	   ниже) — насыщенный, а не блёклый синий (5.9:1 к прежнему фону,
	   4.9:1 к приподнятому — та же связка, что и с уже готовым --footer-bg
	   выше, оба менялись вместе). Не путать с #cfe0f2 у лид-стори/тикера —
	   те на фотографии/на неизменном тёмном фоне, их отдельно не трогаем. */
	--link-on-dark:#5b9bd5;
	/* Рублёный (без засечек) везде — как уже было на страницах архивов/
	   рубрик/поиска и в блоках «Этот день в истории», которые пользователь
	   выбрал эталоном; серифные варианты (Playfair, Merriweather) отклонены. */
	--font-headline:"Source Sans 3",system-ui,sans-serif;
}

*, *::before, *::after{
	box-sizing:border-box;
}

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:"Source Sans 3",system-ui,sans-serif;
	line-height:1.45;
}

/* Заголовок-лейбл раздела (.section-head, .widget-title, .related) остаётся
   на body-шрифте (uppercase caps + serif плохо сочетаются) — serif идёт только
   на настоящие заголовки статей, явно перечисленные ниже, все одним и тем же
   шрифтом/начертанием (--font-headline), чтобы не было разнобоя между блоками. */
h1, h2, h3{
	font-family:inherit;
}

.lead-story h2,
.top-list h3,
article .article-title,
.a21-card h3,
.a21-feature h3,
.a21-feature-item h4,
.widget-category-posts-boxed .entry-title{
	font-family:var(--font-headline);
	font-weight:700;
}

a{
	color:inherit;
	text-decoration:none;
}

img{
	max-width:100%;
	height:auto;
	display:block;
}

button{
	font-family:inherit;
}

.ph{
	background:linear-gradient(135deg,#dbe4ee,#c3d0e0);
	border-radius:2px;
	width:100%;
	object-fit:cover;
	object-position:center;
}

.container{
	max-width:1180px;
	margin:0 auto;
	padding:0 20px;
}

.screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
}

/* additional (secondary) menu */
.secondary-nav{background:var(--footer-bg);color:#fff;font-size:12.5px;position:relative;z-index:35;}
.secondary-nav .container{display:flex;justify-content:space-between;align-items:center;min-height:36px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px;}
.menu-scroller{display:flex;align-items:center;flex:1;min-width:0;}
.secondary-menu{list-style:none;display:flex;gap:20px;margin:0;padding:0;height:100%;flex:1;min-width:0;}
.secondary-menu li{position:relative;display:flex;align-items:center;}
/* overflow-x:auto только на узких экранах — на десктопе меню и так
   помещается по ширине, а overflow-x здесь (даже без overflow-y) заставляет
   браузер обрезать и вертикальное переполнение тоже (правило CSS: если
   overflow-x задан не visible, overflow-y перестаёт быть visible даже если
   не задан явно) — из-за этого пропадали и обрезались выпадающие подменю
   (.sub-menu, position:absolute, торчит ниже высоты полосы). На мобильных,
   где сама полоса и так узкая уже, а исходной причиной был горизонтальный
   скролл ВСЕЙ страницы, этот побочный эффект не важен — подменю по hover
   там всё равно не основной сценарий (сенсорный экран).

   Стрелки menu-scroller__arrow — только на мобильных: без них было
   непонятно, что полосу вообще можно сдвигать пальцем. Иконки соцсетей —
   последний <li> в этом же <ul> (см. header.php), скроллятся вместе с
   пунктами меню, а не живут отдельной строкой. Боковой отступ полосы
   уменьшен (был обычный отступ .container, 20px) — с ним слева от
   стрелки оставалось слишком много пустого места. */
@media (max-width:782px){
	.secondary-nav .container{padding:7px 10px;}
	.secondary-menu{overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:none;}
	.secondary-menu::-webkit-scrollbar{display:none;}
	.secondary-menu li{flex:0 0 auto;}
	/* Специфичность выше, чем у .menu-scroller__arrow{display:none} ниже по
	   файлу — та же ловушка порядка правил, что и с .social-slot выше. */
	.secondary-nav .container .menu-scroller__arrow{display:flex;}
}
.secondary-menu > li > a{opacity:.9;display:flex;align-items:center;gap:4px;color:#fff;}
.secondary-menu > li > a:hover{opacity:1;color:var(--link-on-dark);}
.secondary-menu .sub-menu{list-style:none;margin:0;padding:6px 0 10px;position:absolute;top:100%;left:0;background:var(--footer-bg);min-width:200px;box-shadow:0 8px 18px rgba(0,0,0,.25);display:none;}
.secondary-menu li:hover > .sub-menu{display:block;}
.secondary-menu .sub-menu a{display:block;padding:8px 14px;opacity:.9;white-space:nowrap;color:#fff;}
.secondary-menu .sub-menu a:hover{opacity:1;background:rgba(255,255,255,.06);color:var(--link-on-dark);}
/* Кнопка-стрелка для раскрытия подменю на сенсорных экранах — у :hover выше
   на touch-устройствах просто нет срабатывания, первое касание ссылки сразу
   уводит по её href (баг тестеров). Кнопка добавляется в js/main.js только
   рядом со ссылками, у которых реально есть подменю (.menu-item-has-children),
   и скрыта на десктопе — там hover уже работает мышью/трекпадом. */
.submenu-toggle{display:none;}
@media (max-width:782px){
	.submenu-toggle{
		display:inline-flex;align-items:center;justify-content:center;
		width:26px;height:26px;margin-left:2px;padding:0;
		background:transparent;border:0;color:rgba(255,255,255,.75);flex:0 0 auto;
	}
	.submenu-toggle svg{transition:transform .15s ease;}
	.secondary-menu li.submenu-open > .submenu-toggle{color:#fff;}
	.secondary-menu li.submenu-open > .submenu-toggle svg{transform:rotate(180deg);}
	.secondary-menu li.submenu-open > .sub-menu{display:block;}
}
/* Треугольники-стрелки — сами по себе намёк "это можно сдвинуть", плюс
   реально скроллят полосу по клику (js/main.js). Скрыты на десктопе —
   там меню и так помещается по ширине целиком, задвигать нечего. */
.menu-scroller__arrow{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:22px;height:100%;background:transparent;border:0;color:rgba(255,255,255,.65);cursor:pointer;padding:0;}
.menu-scroller__arrow svg{width:14px;height:14px;}
.menu-scroller__arrow:active{color:#fff;}
.menu-scroller__arrow.is-disabled{opacity:.25;pointer-events:none;}
.social-slot{display:flex;gap:14px;align-items:center;flex:0 0 auto;margin-left:auto;}
.social-slot img,
.social-slot .icon{width:18px;height:18px;display:block;border-radius:2px;}
/* RSS — единственная иконка здесь без своей "фирменной" картинки (у неё нет
   логотипа сети), поэтому кружок-подложка и белый глиф рисуются в CSS —
   тот же серый кружок, что раньше использовался под чужую иконку. */
.social-slot .icon{border-radius:50%;background:#9e9e9e;stroke:#fff;box-sizing:border-box;padding:3px;}
@media (max-width:600px){
	.social-slot{gap:9px;}
	.social-slot img,
	.social-slot .icon{width:22px;height:22px;}
	.social-slot .icon{padding:4px;}
}
.icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;}

/* masthead */
.masthead{padding:22px 0 14px;border-bottom:1px solid var(--border);}
.masthead .container{display:flex;align-items:center;justify-content:space-between;}
/* Утверждено 02.09.2026, скорректировано 02.09.2026 (см. docs/замечания
   по дизайну.md, «Протокол решений»): Cambria вместо Vollkorn SC — 20pt
   на десктопе, 16pt на мобильных; без разрядки (letter-spacing убрали
   совсем по правке), высота строки 80%. */
.site-title{font-family:Cambria,Georgia,serif;font-size:26.7px;font-weight:700;color:#484848;letter-spacing:0;line-height:.8;margin:0;}
@media (max-width:880px){ .site-title{font-size:21.3px;} }
.site-title a{color:inherit;display:flex;align-items:center;gap:8px;}
/* Название — один цвет, без разбивки на акцентное последнее слово. */
.site-title .accent{color:inherit;}
/* Лого (Су-57) слева от названия — размер в em, чтобы масштабировался
   вместе со шрифтом на обоих брейкпоинтах без отдельных медиа-правил. */
.site-title-logo{height:1.15em;width:auto;flex:0 0 auto;}
.search-toggle{width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);}
.search-toggle:hover, .search-toggle.active{border-color:var(--btn);color:var(--btn);}

.search-overlay{max-height:0;overflow:hidden;background:var(--surface);border-bottom:0 solid var(--border);transition:max-height .25s;}
.search-overlay.open{max-height:130px;border-bottom-width:1px;}
.search-overlay-adv-link{display:inline-block;margin:0 0 14px;}
/* .search-overlay-box (шапка) и .aviation21-search-form (searchform.php —
   везде, где вызывается get_search_form(): 404, футер, виджеты) — одна и
   та же разметка/стиль, чтобы форма поиска выглядела одинаково по всему
   сайту, а не заново придумывалась в каждом месте. */
.search-overlay-box,
.aviation21-search-form{display:flex;gap:10px;align-items:center;padding:16px 0;}
.search-overlay-box input,
.aviation21-search-form .search-field{flex:1;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;}
.search-overlay-box button[type="submit"],
.aviation21-search-form .search-submit{border:0;border-radius:8px;background:var(--btn);color:#fff;padding:0 16px;height:42px;cursor:pointer;}
.search-overlay-box button[type="submit"]:hover,
.aviation21-search-form .search-submit:hover{background:var(--btn-dark);}
.search-overlay-box button[type="submit"] .icon,
.aviation21-search-form .search-submit .icon{width:19px;height:19px;stroke-width:2.2;}
.search-overlay-box .search-close{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--text-muted);padding:0 6px;}
.search-overlay-box .search-close:hover{color:var(--text);}

/* primary nav — sticky */
.primary-nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30;transition:box-shadow .2s;}
/* Залогиненным (редактору/админу) залипшее меню без этого садится под
   чёрную панель admin-bar (z-index 99999) — верхняя часть меню пряталась
   под ней, выглядело как «не приклеивается». */
body.admin-bar .primary-nav{top:32px;}
@media screen and (max-width:782px){
	body.admin-bar .primary-nav{top:46px;}
}
.primary-nav.is-stuck{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.primary-menu{list-style:none;display:flex;gap:28px;margin:0;padding:0;height:46px;align-items:center;font-size:13.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
.primary-menu::-webkit-scrollbar{display:none;}
.primary-menu li{flex:0 0 auto;white-space:nowrap;}
.primary-menu a:hover{color:var(--accent);}
/* A few existing menu items carry an inline white text colour, set up for
   the old theme's dark nav bar — this one is light, so force it back to
   readable. The item's own inline color should be updated in Внешний вид
   → Меню when convenient; this is just a safety net. */
.primary-menu a span[style*="color"]{color:inherit !important;}

/* back to top */
.back-to-top{position:fixed;right:22px;bottom:64px;width:42px;height:42px;border-radius:10px;border:1.5px solid var(--btn);background:var(--surface);color:var(--btn);cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;z-index:22;display:flex;align-items:center;justify-content:center;}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--btn);color:#fff;}
.back-to-top svg{width:19px;height:19px;}

/* main layout: content + sidebar */
/* minmax(0,1fr), а не просто 1fr — иначе у grid-колонки неявный минимум
   auto (= max-content ширина её содержимого), и она никогда не сжимается
   меньше самого широкого, что в неё попало: например, подпись/картинка
   классического редактора с инлайновым style="width:880px" (WP сам его
   проставляет для [caption]) раздувала колонку контента, а с ней и всю
   страницу вширь на мобильных — это и есть найденный на живой странице
   баг "вёрстка слетает, картинка огромная". minmax(0,1fr) снимает этот
   неявный минимум, и .prose/.code-block уже сами умеют сжиматься/
   скроллиться внутри правильно посчитанной колонки. */
.site-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;padding:32px 0 90px;}
@media (max-width:880px){ .site-layout{grid-template-columns:minmax(0,1fr);padding:16px 0 120px;} }

/* Липкий сайдбар: align-self:start — иначе grid растягивает .widget-area
   по высоте до размера соседней колонки (умолчание align-items:stretch),
   и sticky буквально нечему "проезжать" — коробка и так уже той же
   высоты. top учитывает высоту залипающего основного меню (~47px) плюс
   немного воздуха; для залогиненных админов — ещё и высоту admin-bar,
   как у самого меню (см. .primary-nav выше). На мобильных (одна колонка,
   сайдбар в потоке ниже статьи) залипание отключено — там оно не имеет
   смысла и только мешало бы. */
/* max-height+overflow-y:auto — иначе в grid высота строки всегда равна
   высоте более высокой колонки: при короткой статье (страница по-прежнему
   выше сайдбара, но ненамного) sticky попросту нечего "проезжать" мимо,
   и колонка виджетов визуально тянется вниз пустым фоном до самого
   футера. Ограничение по высоте окна решает это без искусственного
   укорачивания самого сайдбара: он просто сам прокручивается внутри
   своей области, если виджетов больше, чем помещается на экран. 90px
   снизу — воздух под залипающей внизу лентой "Выбор редакции" (44px). */
/* top:76px, а не 60 — при 60 зазор между прилипшим основным меню (его
   собственная высота ~47px) и прилипшей колонкой виджетов получался
   всего 13px и на глаз читался как "впритык, без зазора". */
.widget-area{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 166px);overflow-y:auto;}
body.admin-bar .widget-area{top:108px;max-height:calc(100vh - 198px);}
@media (max-width:880px){
	.widget-area{position:static;top:auto;max-height:none;overflow-y:visible;}
}

/* hero + carousel — fixed card height so the anons never overflows the
   widget's bottom edge, whichever column (photo card / headline list) is
   taller */
.lead-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;margin-bottom:36px;align-items:stretch;}
@media (max-width:700px){ .lead-grid{grid-template-columns:1fr;} }
.lead-story{display:flex;flex-direction:column;}
.lead-story-media{position:relative;display:block;margin-bottom:14px;}
.lead-story-media .ph{width:100%;aspect-ratio:2/1;margin-bottom:0;transition:opacity .25s;flex:0 0 auto;}
/* Плашка-градиент снизу вверх — заголовок и рубрика лежат прямо на фото,
   а не отдельным блоком под ним (см. front-page.php). Фиксированная высота
   градиента (65%), а не "от низа до верха фото" — иначе на высоких кадрах
   верхняя часть снимка выглядела бы затемнённой без надобности. */
.lead-story-scrim{position:absolute;left:0;right:0;bottom:0;height:65%;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(to top,rgba(10,14,20,.82) 0%,rgba(10,14,20,.45) 55%,rgba(10,14,20,0) 100%);}
.lead-story-tag{display:inline-block;align-self:flex-start;background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:3px;margin-bottom:9px;}
.lead-story-tag:empty{display:none;}
.lead-story-media .lead-story-scrim h2{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);}
.lead-story h2{font-size:21px;line-height:1.15;margin:0;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lead-story-media:hover h2{color:#cfe0f2;}
/* На десктопе заголовок теперь лежит на фото (см. .lead-story-scrim), а не
   отдельным блоком под ним — под фото освободилось место, поэтому анонсу
   здесь дают больше строк, чем на мобильном (там всё идёт последовательно
   сверху вниз, и лишние строки анонса только удлиняют прокрутку). Длина
   исходного текста — из настройки Customizer "Длина анонса (символов)". */
.lead-story .dek{color:var(--text-muted);font-size:15px;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:700px){
	.lead-story .dek{-webkit-line-clamp:3;}
}
.meta{font-size:12.5px;color:var(--text-muted);display:flex;gap:14px;align-items:center;flex-wrap:wrap;}

.top-list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;height:100%;}
.top-list li{border-top:1px solid var(--border);padding:12px 0;cursor:pointer;}
.top-list li:first-child{border-top:none;padding-top:0;}
.top-list h3{font-size:16px;line-height:1.15;margin:0;}
.top-list li.active h3{color:var(--accent);}
.top-list h3 a:hover{color:var(--accent);}

/* section grid (widget wrapper) */
.section{margin-bottom:40px;}
.section-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--text);padding-bottom:8px;margin-bottom:18px;}
.section-head h2{font-size:14px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;margin:0;}
.section-head h2 a:hover{color:var(--accent);}
/* В заголовке виджета "Этот день" ссылка оборачивает весь текст, но
   визуально кликабельной должна читаться только дата/месяц — остальной
   текст остаётся без подчёркивания. */
.section-head h2 .widget-title-date{text-decoration:underline;}
.section-head .more-link{width:30px;height:30px;flex:0 0 auto;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;}
.section-head .more-link:hover{border-color:var(--btn);color:var(--btn);background:var(--bg);}

/* Type A widget: grid of 3/6/9 cards */
.a21-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:700px){ .a21-card-grid{grid-template-columns:1fr;} }
.a21-card .ph{aspect-ratio:2/1;margin-bottom:10px;}
.a21-card h3{font-size:15px;line-height:1.15;margin:0 0 6px;}
.a21-card h3 a:hover{color:var(--accent);}

/* Type B widget: 2:1 hero (image top, title below) + 3-item list beside it */
.a21-feature-widget{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;}
@media (max-width:700px){ .a21-feature-widget{grid-template-columns:1fr;} }
.a21-feature .ph{aspect-ratio:2/1;margin-bottom:12px;}
.a21-feature h3{font-size:21px;line-height:1.15;margin:0;}
.a21-feature h3 a:hover{color:var(--accent);}
.a21-feature .dek{color:var(--text-muted);font-size:14px;line-height:1.4;margin:8px 0 0;}
.a21-feature-list{display:flex;flex-direction:column;gap:16px;justify-content:space-between;list-style:none;margin:0;padding:0;}
.a21-feature-item{display:flex;gap:12px;align-items:center;}
@media (max-width:480px){ .a21-feature-item{flex-direction:column;align-items:stretch;} }
/* flex-basis должен стоять на прямом flex-потомке (обёртка <a>), не на
   вложенном <img> — тот же баг, что уже чинили для .a21-list-item: на
   вложенном элементе flex-basis ни на что не влияет, превью получает
   свой «естественный» (зарегистрированный) размер вместо заданного здесь,
   отсюда и разброс размеров маленьких превью между виджетами/карточками. */
.a21-feature-item > a{flex:0 0 140px;display:block;}
@media (max-width:480px){ .a21-feature-item > a{flex:0 0 auto;width:100%;} }
.a21-feature-item .ph{width:100%;aspect-ratio:2/1;}
.a21-feature-item-body{flex:1 1 auto;min-width:0;}
.a21-feature-item h4{font-size:13.5px;line-height:1.15;margin:0;}
.a21-feature-item h4 a:hover{color:var(--accent);}
.a21-feature-date{display:none;}
.a21-feature-date span{font-size:11.5px;color:var(--text-muted);}

/* Мобильный редизайн центральной части главной — вариант Б из трёх
   показанных макетов (утверждён 02.09.2026, скорректирован 02.09.2026,
   правки внесены по факту показа live-версии). Заголовок блока — обычным
   тёмным цветом (не оранжевым — вернули по замечанию). Первая карточка
   каждой секции остаётся крупной, остальные сжимаются в плотный список
   строк, фото — на каждой второй из трёх строк (2 с фото : 1 без —
   вернули исходный ритм). Превью — 112px (увеличено вдвое против первой
   версии, 56px было слишком мелко). Общий брейкпоинт 700px — тот же, на
   котором сетки виджетов уже уходят в одну колонку. */
@media (max-width:700px){
	/* Дата — на месте, где раньше была рубрика: над заголовком, а не
	   под ним (тот же приём и у крупной карточки, и у строк списка). */
	.a21-feature-date{display:block;}
	.a21-feature{display:flex;flex-direction:column;}
	.a21-feature > a{order:0;}
	.a21-feature .a21-feature-date{order:1;}
	.a21-feature h3{order:2;}
	.a21-feature .dek{order:3;}
	.a21-card-body{display:flex;flex-direction:column;}
	.a21-card-body .meta{order:-1;}

	.a21-feature h3{font-size:19px;}

	.a21-card-grid{gap:0;}
	.a21-card{padding:14px 0;border-top:1px solid var(--border);}
	.a21-card:first-child{padding-top:0;border-top:none;}
	.a21-card:first-child h3{font-size:19px;}
	.a21-card:not(:first-child){display:flex;gap:12px;align-items:flex-start;}
	.a21-card:not(:first-child) .a21-card-media{order:2;flex:0 0 112px;width:112px;}
	.a21-card:not(:first-child) .ph{aspect-ratio:2/1;margin-bottom:0;}
	.a21-card:not(:first-child) .a21-card-body{order:1;flex:1 1 auto;min-width:0;}
	.a21-card:not(:first-child) h3{font-size:14px;margin:0 0 3px;}
	/* Каждая третья строка — без фото (2 с фото : 1 без). */
	.a21-card:nth-child(3n) .a21-card-media{display:none;}

	.a21-feature-item{flex-direction:row;align-items:flex-start;}
	.a21-feature-item > a{order:2;flex:0 0 112px;width:112px;}
	.a21-feature-item .ph{aspect-ratio:2/1;}
	.a21-feature-item-body{order:1;display:flex;flex-direction:column;}
	.a21-feature-item-body .a21-feature-date{order:-1;}
	.a21-feature-item:nth-child(3n) > a{display:none;}

	/* Настройка виджета «Показывать превью в мобильной плотной ленте» —
	   выключено означает вообще без фото у некрупных строк, независимо
	   от ритма выше; !important — это явный переключатель админки, а не
	   исключение из общей логики. */
	.a21-hide-mobile-thumb .a21-card:not(:first-child) .a21-card-media,
	.a21-hide-mobile-thumb .a21-feature-item > a{display:none !important;}
}

/* «Этот день в истории» — блок для главной, перенесён из плагина a21-tdih в тему
   (inc/tdih.php, Этап 6). Разметка (widget-category-posts-boxed и т.д.) — старые
   классы Merlin, сохранены нарочно ради совместимости с уже накопленными данными;
   стилизация здесь — под текущую тему (Type Б выше). */
.widget-category-posts-boxed .category-posts-boxed-horizontal{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;}
@media (max-width:700px){ .widget-category-posts-boxed .category-posts-boxed-horizontal{grid-template-columns:1fr;} }
.widget-category-posts-boxed .large-post > a{display:block;}
.widget-category-posts-boxed .large-post img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:2px;margin-bottom:12px;}
.widget-category-posts-boxed .large-post .entry-title{font-size:21px;line-height:1.15;margin:0 0 6px;}
.widget-category-posts-boxed .large-post .entry-title a:hover{color:var(--accent);}
.widget-category-posts-boxed .large-post .entry-meta{font-size:12.5px;color:var(--text-muted);}
.widget-category-posts-boxed .large-post .entry-content{color:var(--text-muted);font-size:14.5px;margin-top:6px;}
.widget-category-posts-boxed .large-post .entry-content p{margin:0;}
.widget-category-posts-boxed .medium-posts{display:flex;flex-direction:column;gap:16px;}
.widget-category-posts-boxed .medium-post{display:flex;gap:12px;align-items:center;}
@media (max-width:480px){ .widget-category-posts-boxed .medium-post{flex-direction:column;align-items:stretch;} }
/* Тот же баг, что и в .a21-feature-item/.a21-list-item: flex-basis нужен на
   прямом flex-потомке (<a>), а не на вложенном <img> — иначе превью
   получает произвольный «естественный» размер вместо заданного здесь. */
.widget-category-posts-boxed .medium-post > a{flex:0 0 140px;display:block;}
@media (max-width:480px){ .widget-category-posts-boxed .medium-post > a{flex:0 0 auto;width:100%;} }
.widget-category-posts-boxed .medium-post img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:2px;}
.widget-category-posts-boxed .medium-post .entry-title{font-size:13.5px;line-height:1.15;margin:0;}
.widget-category-posts-boxed .medium-post .entry-title a:hover{color:var(--accent);}
.widget-category-posts-boxed .medium-post .entry-meta{font-size:11.5px;color:var(--text-muted);order:-1;margin-bottom:2px;}

/* Мобильная «плотная лента» (03.09.2026) — этот блок получил desktop-стили
   Type Б выше (см. комментарий над .widget-category-posts-boxed), но
   мобильный редизайн центральной части главной (весь блок @media
   max-width:700px у .a21-feature и .a21-card выше) прошёл мимо него: у
   виджетов рубрик дата переставляется над заголовком, превью сжимается до
   112px и уходит в ряд, каждая третья строка — без фото, есть переключатель
   «показывать превью». У «Этот день» на мобильных ничего из этого не было
   — просто сжимался в одну колонку без единой из этих подстроек. Правила
   ниже — построчное зеркало того же блока под классы разметки этого
   виджета (widget-category-posts-boxed/large-post/medium-post вместо
   a21-feature/a21-feature-item), в тот же брейкпоинт 700px. */
@media (max-width:700px){
	.widget-category-posts-boxed .large-post{display:flex;flex-direction:column;}
	.widget-category-posts-boxed .large-post > a{order:0;}
	.widget-category-posts-boxed .large-post .entry-meta{order:1;}
	.widget-category-posts-boxed .large-post .entry-title{order:2;font-size:19px;}
	.widget-category-posts-boxed .large-post .entry-content{order:3;}

	.widget-category-posts-boxed .medium-post{flex-direction:row;align-items:flex-start;}
	.widget-category-posts-boxed .medium-post > a{order:2;flex:0 0 112px;width:112px;}
	.widget-category-posts-boxed .medium-post img{aspect-ratio:2/1;}
	.widget-category-posts-boxed .medium-post-content{order:1;display:flex;flex-direction:column;}
	.widget-category-posts-boxed .medium-post-content .entry-meta{order:-1;}
	.widget-category-posts-boxed .medium-post:nth-child(3n) > a{display:none;}

	/* Тот же переключатель виджета «Показывать превью в мобильной плотной
	   ленте», что и у виджетов рубрик — тут раньше не действовал вообще,
	   т.к. проверял чужие классы. */
	.a21-hide-mobile-thumb .widget-category-posts-boxed .medium-post > a{display:none !important;}
}

/* sidebar widgets */
.widget{background:var(--surface);border:1px solid var(--border);padding:18px;margin-bottom:22px;}
/* An ad widget (any script/iframe/ins-based network snippet) must read as
   an ad, not blend in as a regular boxed widget — no visible container.
   .ai-sticky-widget (Ad Inserter's own widget wrapper class) added
   06.09.2026: catches ad widgets whose code is a plain <a><img></a> banner
   with no script/iframe/ins at all (found live — a НАИС banner rendered
   with the regular white widget card because it genuinely has none of the
   three tags above), without relying on what's inside the code this time. */
#mainContent .widget:has(script), #mainContent .widget:has(iframe), #mainContent .widget:has(ins), #mainContent .widget.ai-sticky-widget{
	background:none;border:none;padding:0;
}
.widget-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.7px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border);font-weight:700;font-family:"Source Sans 3",sans-serif;}
.search-box{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.search-box input{flex:1;border:0;padding:9px 10px;font-family:inherit;font-size:13.5px;}
.search-box button{border:0;background:var(--btn);color:#fff;padding:0 14px;cursor:pointer;}
.search-box button:hover{background:var(--btn-dark);}
/*
 * Единый вид списков в боковой колонке (03.09.2026) — до этого три виджета
 * («Новости за неделю» — плагин Category Posts Widget, «Этот день в
 * истории авиации» — свой tdih-модуль, «Современная авиация России» —
 * стандартный виджет «Навигационное меню») выглядели как три случайных,
 * ничем не связанных блока: у Category Posts Widget вообще не было своих
 * стилей (голый маркированный <ul> с браузерным отступом), у виджета меню
 * тоже (хаос из вложенных маркеров), у tdih — свой, отдельно от них обоих
 * выглядящий вариант (заголовок и дата акцентным синим). Общие правила:
 * если у пункта есть дата — она выглядит одинаково везде (мелкий серый
 * текст, без подчёркивания и акцентного цвета, даже если технически это
 * ссылка, как у tdih); заголовок/пункт — обычный текст статьи, синеет
 * только при наведении; разделитель между пунктами — тонкая линия сверху,
 * без буллетов и без стандартных отступов списка.
 */
.widget-area .cat-post-widget ul,
.widget-area .a21-tdih-list,
.widget-area .widget_nav_menu ul{
	list-style:none;margin:0;padding:0;
}
.widget-area .cat-post-item,
.widget-area .a21-tdih-list .a21-tdih-list__item,
.widget-area .widget_nav_menu > div > ul > li{
	padding:9px 0;border-top:1px solid var(--border);font-size:13.5px;line-height:1.35;margin:0;
}
.widget-area .cat-post-item:first-child,
.widget-area .a21-tdih-list .a21-tdih-list__item:first-child,
.widget-area .widget_nav_menu > div > ul > li:first-child{
	border-top:none;padding-top:0;
}
.widget-area .cat-post-date{
	display:block;font-size:12px;color:var(--text-muted);margin-bottom:2px;
}
.widget-area .cat-post-title,
.widget-area .widget_nav_menu li a{
	color:var(--text);
}
.widget-area .cat-post-title:hover,
.widget-area .widget_nav_menu li a:hover{
	color:var(--accent);
}
/* Дата tdih технически ссылка на архив дня — оставляем кликабельной, но
   визуально приравниваем к некликабельной дате Category Posts Widget
   выше, а не к обычной ссылке (никакого подчёркивания/акцента). Селекторы
   с лишним .a21-tdih-list в цепочке — не для красоты, а чтобы специфичность
   гарантированно перебивала собственные правила tdih (frontend.css)
   независимо от порядка подключения стилей. */
.widget-area .a21-tdih-list .a21-tdih-list__date,
.widget-area .a21-tdih-list .a21-tdih-list__date:hover{
	font-size:12px;font-weight:400;color:var(--text-muted);text-decoration:none;
}
.widget-area .a21-tdih-list .a21-tdih-list__title{
	font-size:13.5px;color:var(--text);
}
.widget-area .a21-tdih-list .a21-tdih-list__link:hover .a21-tdih-list__title{
	color:var(--accent);
}
/* Подменю: компактно, без даты, без маркеров, лёгкая вложенность вместо
   хаоса из накапливающихся браузерных отступов. */
.widget-area .widget_nav_menu li a{
	display:block;padding:8px 0;
}
.widget-area .widget_nav_menu > div > ul > li > a{
	padding:9px 0;
}
.widget-area .widget_nav_menu .sub-menu{
	padding-left:16px;
}
.widget-area .widget_nav_menu .sub-menu li{
	border-top:none;padding:0;
}
.widget-area .widget_nav_menu .sub-menu a{
	padding:5px 0;font-size:12.5px;color:var(--text-muted);
}
.widget-area .widget_nav_menu .sub-menu a:hover{
	color:var(--accent);
}
.widget-area .widget_nav_menu .current-menu-item > a{
	color:var(--accent);font-weight:600;
}
.bookmarks{display:flex;gap:10px;list-style:none;margin:0;padding:0;}
.bookmarks a{width:34px;height:34px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.bookmarks a:hover{border-color:var(--accent);color:var(--accent);}

/* running ticker — одна строка-заголовок (без даты) + кнопка-стрелка,
   раскрывающая панель-продолжение той же ленты. Тег "Выбор редакции" —
   значок-звезда вместо текста (текст отъедал место у заголовка на узких
   экранах), сдвинут ближе к левому краю. Открытие/закрытие — только по
   клику на стрелку (см. js/main.js, .is-open), ОДИНАКОВО на мобильных и
   на десктопе. Пробовали ещё и раскрытие по наведению мышью для
   десктопа — отказались: случайный проход курсора мимо плашки заставлял
   попап мелькать. Закрывающая "закладка" — явным способом убрать попап
   после открытия. */
.a21-ticker{position:fixed;left:0;right:0;bottom:0;background:var(--text);color:#fff;height:44px;z-index:20;}
/* padding-right:0 — иначе после собственного паддинга кнопки-стрелки
   (9px) добавлялся ещё и паддинг контейнера (8px), и стрелка визуально
   казалась смещённой влево: справа от неё до истинного края экрана было
   заметно больше воздуха (9+8=17px), чем слева до разделительной линии
   (9px+1px рамки). Теперь кнопка сама доходит до края экрана, и её
   собственный паддинг — единственный отступ. */
.a21-ticker .container{display:flex;align-items:center;gap:8px;height:100%;padding-left:8px;padding-right:0;}
.a21-ticker .tag{background:var(--accent);flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.a21-ticker .tag svg{width:13px;height:13px;}
.a21-ticker__current{flex:1 1 auto;min-width:0;color:#fff;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.a21-ticker__current:hover{color:#cfe0f2;}
/* Свободного места на плашке немного, поэтому сама кнопка-стрелка
   (не текст "Ещё", его убрали раньше) сделана уже — border-left вместо
   собственного паддинга слева, чтобы разделитель был на месте, а не
   отъедал лишнее у заголовка. */
.a21-ticker__toggle{flex:0 0 auto;display:flex;align-items:center;background:transparent;border:0;border-left:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;padding:0 9px;height:44px;}
.a21-ticker__toggle:hover{color:#cfe0f2;}
.a21-ticker__toggle svg{width:16px;height:16px;transition:transform .2s;}
.a21-ticker__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.a21-ticker-popup{list-style:none;margin:0;padding:8px 0;position:absolute;left:0;right:0;bottom:100%;background:var(--text);box-shadow:0 -8px 18px rgba(0,0,0,.25);display:none;}
.a21-ticker-popup.is-open{display:block;}
.a21-ticker-popup ul{list-style:none;margin:0;padding:0;}
/* .a21-ticker-popup__inner — та же ширина/центрирование, что и у
   .a21-ticker .container (max-width 1180 + margin:auto), плюс тот же
   padding-left:8px. Раньше список был отцентрирован САМ ПО СЕБЕ
   (max-width:960px;margin:0 auto никак не зависел от того, где реально
   стоит текущий заголовок) — на широких экранах, где .container уже
   не во всю ширину, а сам отцентрирован полями по бокам, оба
   центрирования не совпадали, и заголовки в попапе съезжали к самому
   краю экрана мимо текущего заголовка.
   max-height/overflow-y — записей теперь до 9 (было до 5), на невысоком
   экране список иначе не поместится целиком. Обрезка — здесь, а не на
   .a21-ticker-popup самом, потому что кнопка-закладка (см. __close ниже)
   лежит РЯДОМ с __inner, а не внутри него — иначе overflow отрезал бы и
   её (та же ловушка, что была с мобильным подменю в шапке). */
.a21-ticker-popup__inner{max-width:1180px;margin:0 auto;padding-left:8px;max-height:min(62vh,520px);overflow-y:auto;}
/* padding-left:34px = 26px кружок-звёздочка + 8px зазор (сам паддинг
   строки 8px уже учтён контейнером выше) — ровно та же арифметика, что
   даёт отступ текста в самой плашке. Раньше строка была голой ссылкой в
   одну строку текста; теперь — миниатюра + заголовок/рубрика/время, по
   аналогии с мобильной раскладкой .related-grid (стиль превью тот же). */
.a21-ticker-popup a{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 34px;}
.a21-ticker-popup a:hover{background:rgba(255,255,255,.06);}
/* 120px — вдвое больше первой версии (60px): на ней миниатюра толком не
   читалась ни на десктопе, ни на мобильном (жалоба менеджера). */
.a21-ticker-popup__thumb{flex:0 0 auto;width:120px;aspect-ratio:2/1;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.08);}
.a21-ticker-popup__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.a21-ticker-popup__body{min-width:0;display:flex;flex-direction:column;gap:3px;}
.a21-ticker-popup__title{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.a21-ticker-popup__meta{font-size:11.5px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Крестик — выступающая вверх «закладка» НАД панелью, а не внутри неё:
   раньше он лежал поверх первой строки списка, и толстым пальцем на
   мобильном легко было попасть по заголовку статьи вместо крестика. */
.a21-ticker-popup__close{position:absolute;top:-30px;right:16px;width:48px;height:34px;border:0;border-radius:8px 8px 0 0;background:var(--text);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 -3px 10px rgba(0,0,0,.2);opacity:1;}
.a21-ticker-popup__close:hover{background:var(--accent);}

/* cookie notice — informational only, does not gate ads/analytics */
/* bottom always 0 and the ticker's clearance is a padding, not a bottom
   offset — otherwise translateY(100%) (100% of the notice's own height)
   isn't enough to fully clear the extra offset, leaving a sliver visible
   after "Понятно" is clicked */
/* Настойчивое, но не на весь экран: лёгкая подложка блокирует клики по
   странице, пока баннер виден, но сам баннер остаётся компактной полосой
   снизу — не модальное окно во весь экран. Подложка не закрывает баннер
   по клику намеренно: подтвердить можно только кнопкой. */
.cookie-backdrop{position:fixed;inset:0;background:rgba(20,20,20,.35);z-index:20;opacity:0;pointer-events:none;transition:opacity .25s;}
.cookie-backdrop.visible{opacity:1;pointer-events:auto;}
/* Кнопка-триггер в подвале — визуально как обычная ссылка среди copyright/версии темы. */
.cookie-settings-trigger{border:none;background:none;padding:0;font:inherit;font-size:inherit;color:var(--link-on-dark);cursor:pointer;text-decoration:underline;}
.cookie-settings-trigger:hover{color:#fff;}
.cookie-settings-modal{position:fixed;inset:0;z-index:21;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;opacity:0;pointer-events:none;transition:opacity .2s;}
.cookie-settings-modal.visible{opacity:1;pointer-events:auto;}
.cookie-settings-box{background:var(--surface);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.2);padding:24px;max-width:420px;width:100%;box-sizing:border-box;}
.cookie-settings-box h2{margin:0 0 12px;font-size:18px;}
.cookie-settings-box p{margin:0 0 14px;font-size:13.5px;color:var(--text-muted);line-height:1.5;}
.cookie-settings-box a{color:var(--accent);}
.cookie-settings-checkbox{display:flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer;margin-bottom:20px;}
.cookie-settings-checkbox input{margin-top:3px;}
.cookie-settings-actions{display:flex;justify-content:flex-end;gap:10px;}
.cookie-settings-actions button{border:1px solid var(--border);border-radius:8px;background:none;color:var(--text);padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;}
.cookie-settings-actions button.is-primary{border-color:var(--btn);background:var(--btn);color:#fff;}
.cookie-settings-actions button.is-primary:hover{background:var(--btn-dark);}

/* footer */
.site-footer{background:var(--footer-bg);color:var(--footer-text);}
.foot-grid{display:grid;gap:30px;font-size:14px;padding:40px 0 28px;}
.foot-grid.cols-1{grid-template-columns:1fr;}
.foot-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.foot-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr !important;} }
.foot-grid .footer-widget-area h2, .foot-grid .footer-widget-area .widget-title{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#fff;margin:0 0 12px;background:none;border:0;padding:0;font-family:inherit;}
.foot-grid a{color:var(--link-on-dark);}
.foot-grid a:hover{color:#fff;text-decoration:underline;}
.foot-grid ul{margin:0;padding-left:0;list-style:none;}
.foot-grid li{padding:3px 0;}
.foot-grid .textwidget img{max-width:100%;}
/* editor-authored social icons in the footer text widget — keep them
   compact and on one row regardless of column width */
.foot-grid .textwidget a img[width]{width:26px !important;height:26px !important;}
/* Общий сброс img{display:block} (см. выше в файле) заставляет каждую иконку-ссылку
   в текстовом/HTML-виджете переноситься на свою строку — визуально «столбик» вместо
   ряда. Возвращаем инлайновое поведение только для ссылок-иконок в футере. */
.foot-grid .textwidget a{display:inline-block;}
.foot-grid .textwidget a img{display:inline-block;}
.foot-grid .widget{background:none;border:0;padding:0;margin:0;}
.foot-grid .aviation21-search-form{padding:0 0 10px;}
/* "Лента новостей" (widget_recent_entries, центральная секция) —
   единственный список футера, где явно попросили вернуть маркеры;
   остальные секции футера сознательно без буллетов, это не общий сброс. */
.foot-grid .widget_recent_entries ul{list-style:disc;padding-left:18px;}
.foot-grid .widget_recent_entries li::marker{color:var(--link-on-dark);}
.footer-widget-area[data-align="center"]{text-align:center;}
.footer-widget-area[data-align="right"]{text-align:right;}
.foot-service{border-top:1px solid var(--footer-border);padding:16px 0 76px;}
.foot-service .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:#8b929c;}
.foot-service .footer-menu{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.foot-service a{color:var(--link-on-dark);}
.foot-service a:hover{color:#fff;text-decoration:underline;}

/* article page */
.breadcrumb{font-size:12.5px;color:var(--text-muted);padding:18px 0 0;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{padding:0 2px;}

/* Раньше здесь стояла связка CSS-костылей (display:contents на
   .site-layout, явные grid-column на баннере/крошках, margin-top
   !important и т.д.), чинившая то, что боковая колонка не могла
   выровняться с автоматическими баннерами Ad Inserter ("Before post",
   хук loop_start). Настоящая причина была в шаблонах: .site-layout/
   <main> открывались ПОСЛЕ начала цикла (while have_posts()), поэтому
   loop_start срабатывал ДО этого открытия, и такие баннеры оказывались
   отдельным элементом-соседом всей сетки, а не внутри колонки статьи.
   Исправлено на уровне single.php/page.php — по образцу темы Merlin
   (D:\Сайты\Aviation21.ru\www\new-merlin-21feb2021\single.php: там
   <main> тоже открывается до цикла) — теперь любая такая автовставка,
   сколько бы их ни было, оказывается внутри <main> и подчиняется
   обычной ширине колонки статьи (.code-block{max-width:100%} ниже по
   файлу) без какой-либо специальной сетки. */

/* Найденный на живой странице баг: некоторые блоки Yandex.РТБ настроены
   в кабинете Яндекса без адаптивного формата и рендерят себя фиксированной
   desktop-шириной (880px) независимо от реального экрана. На мобильных
   это ломает всю страницу целиком — браузер расширяет весь layout-
   viewport, чтобы вместить широкий блок, из-за чего "ломается" даже то,
   что само по себе адаптивно (сетка, картинки). Сама ширина рекламного
   блока — настройка на стороне Яндекса, не темы, но подстраховаться на
   уровне темы можно и нужно: контейнер блока и всё внутри него никогда
   не должны быть шире родителя, а если что-то всё равно не помещается —
   пусть скроллится только этот блок, а не вся страница. */
.code-block{max-width:100%;overflow-x:auto;}
.code-block *{max-width:100%;}
/* Верхний баннер (вставка Ad Inserter перед #page, вне колонки контента)
   специально оборачивают в <div class="container">, чтобы он не был на
   всю ширину окна, а совпадал по ширине с остальным сайтом. Но правило
   выше (.code-block *{max-width:100%}) с той же специфичностью, идущее
   позже в файле, перебивает .container{max-width:1180px} и растягивает
   его на всю ширину — у самого .code-block здесь нет собственной ширины
   (это прямой потомок body), поэтому "100% от родителя" и есть вся
   ширина окна. Более специфичный селектор ниже возвращает нужный предел
   именно для .container внутри .code-block, не трогая остальные случаи
   (картинки/iframe рекламы по-прежнему ограничены 100% как и раньше). */
.code-block > .container{max-width:1180px;}
/* Ad Inserter сам пишет каждому блоку инлайновый style="margin:8px 0" —
   когда такой блок оказывается первым в колонке статьи (см. single.php/
   page.php), из-за этого верх статьи и верх сайдбара расходились на те
   же 8px. !important — только так можно перебить инлайн-стиль. */
#mainContent > .code-block:first-child{margin-top:0 !important;}

.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px;}
.prose caption{text-align:left;font-weight:700;font-size:15px;margin:0 0 8px;color:var(--text);caption-side:top;}
.prose th, .prose td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;}
.prose th{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.prose tr:nth-child(even){background:rgba(0,0,0,.02);}
/* Единый вид ЛЮБОЙ таблицы в статье (03.09.2026) — на проде часть таблиц
   унаследована из темы Merlin с обёрткой .unified-table и вручную
   расставленными data-label на <td> (мобильный вид "строка → карточка"),
   а часть — голые <table> вообще без адаптации (см. переписку с
   менеджером: ~75-80% таблиц на боевом сайте без какой-либо мобильной
   обработки, горизонтальный скролл). Наша тема не определяет класс
   .unified-table вовсе — он просто ничего не даёт как пустая обёртка,
   а сама таблица внутри в любом случае попадает под общий .prose table
   ниже, поэтому старые и новые/голые таблицы автоматически получают
   ОДИНАКОВЫЙ вид без миграции контента. Для таблиц без вручную
   расставленных data-label подписи достраивает js/main.js — из <th>,
   один раз при загрузке страницы, не трогая ячейки, где data-label уже
   стоит (унаследованные из Merlin таблицы продолжают работать как есть).
   Разбивка на карточки вместо горизонтального скролла — принципиальное
   требование менеджера ("на мобильной версии не должно быть
   горизонтальной прокрутки"), поэтому это не альтернатива, а замена
   прежнего display:block;overflow-x:auto. */
@media (max-width:600px){
	.prose table,
	.prose tbody,
	.prose tr,
	.prose th{display:block;}
	.prose thead{display:none;}
	/*
	 * <caption> найден на реальной таблице (менеджер прислал скрин) —
	 * его браузерный display:table-caption по умолчанию не сочетается
	 * с table, у которой мы включили display:block, и рендерился
	 * "лесенкой" (нарастающий отступ у каждой перенесённой строки).
	 * Оформление — в общем правиле .prose caption выше, здесь только
	 * снимаем конфликт display.
	 */
	.prose caption{display:block;}
	.prose tr{margin-bottom:14px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface);}
	.prose tr:nth-child(even){background:rgba(0,0,0,.03);}
	/*
	 * Подпись как position:absolute (более ранний вариант) не годится: у
	 * длинной подписи в 2-3 строки высота строки НЕ растёт под неё
	 * (абсолютный элемент вынут из потока), и перенесённые строки
	 * наезжают на соседние ячейки — найдено менеджером на реальной
	 * таблице характеристик (длинные технические подписи вроде «Предел
	 * прочности при растяжении, ГПа»). Вместо этого — flex-строка:
	 * подпись и значение оба участвуют в потоке, ячейка сама
	 * растягивается под более высокий из них, как и должно быть.
	 */
	.prose td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:10px 12px;text-align:right;}
	.prose td:not(:last-child){border-bottom:1px solid var(--border);}
	.prose td::before{content:attr(data-label);flex:0 0 auto;max-width:55%;font-weight:600;color:var(--accent);text-align:left;}
	.prose td:not([data-label])::before{content:none;}
	/*
	 * Первая ячейка строки в подавляющем большинстве таблиц — естественный
	 * идентификатор всей строки (имя материала, параметр сравнения и
	 * т.п.), а не ещё одна пара "подпись: значение" наравне с остальными
	 * — менеджер отметил отсутствие выделения "шапки" карточки. Делаем её
	 * заголовком карточки на всю ширину, без повторного дублирования
	 * подписи (она и так очевидна как заголовок).
	 */
	.prose td:first-child{display:block;text-align:left;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:15px;padding:12px;border-bottom:1px solid var(--border);}
	.prose td:first-child::before{content:none;}
}

.prose blockquote{margin:20px 0;padding:2px 0 2px 18px;border-left:3px solid #4a4a4a;font-weight:600;}

article .article-title{font-size:30px;line-height:1.1;margin:14px 0 16px;}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:var(--text-muted);font-size:13.5px;}
.article-meta .item{display:flex;gap:6px;align-items:center;}
/* На мобильных страница и так короче по ширине — крупные вертикальные
   отступы (задуманные под широкий десктопный экран) выглядят непропорционально
   большими: баннер-реклама → строка рубрик → заголовок превращались в
   ощутимый "воздушный колодец" перед началом текста. */
@media (max-width:782px){
	.breadcrumb{padding:8px 0 0;}
	article .article-title{margin:6px 0 10px;}
}

.article-hero-row{margin-top:18px;}
/* Замена ручному <hr>, который годами ставили под фото «для динамики» —
   короткая акцентная черта вместо линии во всю ширину: держит ту же идею
   зрительного разрыва между фото и текстом, но выглядит как осознанный
   элемент оформления, а не остаток HTML-разметки. */
.article-divider{width:56px;height:3px;background:var(--accent);border-radius:2px;margin:22px 0;}
/* Без width:100%/object-fit — если у конкретного изображения ещё нет
   готового варианта 880×440 (загружено до появления этого размера в
   теме), WordPress отдаёт ближайший доступный размер с другими
   пропорциями, а aspect-ratio:2/1 без object-fit:cover растягивает его
   с искажением (тот же баг, что чинили для .ph). */
.ph-hero{background:linear-gradient(135deg,#dbe4ee,#c3d0e0);width:100%;aspect-ratio:2/1;object-fit:cover;object-position:center;}
figcaption{font-size:12.5px;color:var(--text-muted);margin-top:8px;}

/* Длинные "голые" URL в тексте (частые в политике конфиденциальности —
   ссылки на разделы поддержки Яндекса) — одно неразрывное слово длиннее
   ширины экрана, без overflow-wrap раздвигает .prose и всю страницу
   вбок (баг тестеров, видно на мобильной вёрстке). anywhere вместо
   break-word — потому что часть таких URL всё равно короче строки, но
   не содержит ни одного пробела/дефиса до самого конца, где break-word
   уже не успевает найти место для переноса. */
.prose{font-size:17.5px;margin-top:26px;overflow-wrap:anywhere;}
.prose a{color:var(--accent);text-decoration:none;}
.prose a:hover{text-decoration:underline;}
/* Старые видео в статьях часто вставлены сырым <iframe width="560"
   height="315"> (код "Поделиться → Вставить" с YouTube и т.п.), без
   какой-либо адаптивной обёртки — это НЕ автоматический oEmbed WordPress
   (тот уже адаптивен сам, через .wp-embed-responsive). На мобильных
   такой iframe шире экрана и раздвигает всю страницу вбок. max-width —
   подстраховка на случай, если JS не выполнится (см. main.js — там же
   сохраняется исходное соотношение сторон через aspect-ratio, здесь
   его взять неоткуда). */
.prose iframe{max-width:100%;}
.prose p{margin:0 0 20px;}
/* Стандартные классы выравнивания WordPress (alignleft/alignright/
   aligncenter) и обёртка подписи классического редактора (.wp-caption) —
   без этих правил тема их просто игнорирует: картинка всегда падает
   обычным блочным элементом независимо от того, что выбрано в редакторе.
   Базовые темы (Underscores и т.п.) добавляют это по умолчанию — здесь
   было упущено при сборке темы с нуля. */
.prose .alignleft{float:left;margin:6px 24px 16px 0;}
.prose .alignright{float:right;margin:6px 0 16px 24px;}
.prose .aligncenter{display:block;margin-left:auto;margin-right:auto;}
.prose img.alignleft,
.prose img.alignright,
.prose img.aligncenter,
.prose img.alignnone{max-width:100%;height:auto;}
.prose .wp-caption{max-width:100%;}
.prose .wp-caption.alignleft{float:left;margin:6px 24px 16px 0;}
.prose .wp-caption.alignright{float:right;margin:6px 0 16px 24px;}
.prose .wp-caption.aligncenter{margin-left:auto;margin-right:auto;}
.prose .wp-caption img{display:block;width:100%;height:auto;}
.prose .wp-caption-text{font-size:12.5px;color:var(--text-muted);text-align:center;padding:6px 2px 0;margin:0;}
/* Клирфикс на самом .prose — иначе плавающая (float) картинка ближе к
   концу статьи может «вылезти» за пределы блока текста и наехать на
   рекламный слот/рейтинг ниже. */
.prose::after{content:"";display:table;clear:both;}
@media (max-width:600px){
	.prose .alignleft,
	.prose .alignright,
	.prose .wp-caption.alignleft,
	.prose .wp-caption.alignright{float:none;margin-left:0;margin-right:0;width:100% !important;}
}

.inline-card{float:right;width:280px;margin:4px 0 16px 22px;border:1px solid var(--border);background:var(--surface);}
@media (max-width:640px){ .inline-card{float:none;width:100%;margin:10px 0;} }
.inline-card .ph{aspect-ratio:2/1;background:linear-gradient(135deg,#dbe4ee,#c3d0e0);}
.inline-card .inline-card-body{padding:12px 14px;}
.inline-card .kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);font-weight:700;margin-bottom:6px;}
.inline-card h4{font-size:14.5px;line-height:1.3;margin:0;font-weight:600;}
.inline-card h4:hover{color:var(--accent);}

/* "Врезка" — боковой блок статуса/справки внутри текста статьи (шорткод
   [a21_inset], см. inc/inset.php). Обтекание справа — тот же приём, что
   у .inline-card выше, тот же брейкпоинт для отключения на мобильных
   (там узкая колонка обтекания просто не читается). */
.a21-inset{clear:right;float:right;width:300px;margin:4px 0 16px 24px;background:var(--inset-bg);border-top:3px solid var(--rubric);padding:16px 18px;}
@media (max-width:640px){ .a21-inset{float:none;width:100%;margin:16px 0;} }
.a21-inset__title{font-family:var(--font-headline);font-weight:700;font-size:14.5px;line-height:1.3;margin:0 0 10px;color:var(--text);}
.a21-inset__body{font-size:14px;line-height:1.5;color:var(--text);}
.a21-inset__body p{margin:0 0 10px;}
.a21-inset__body p:last-child{margin-bottom:0;}
.a21-inset__body ul,
.a21-inset__body ol{margin:0;padding-left:18px;}
.a21-inset__body li{margin-bottom:6px;}
.a21-inset__body li:last-child{margin-bottom:0;}

.rating-block{position:relative;display:flex;align-items:center;gap:14px;margin:34px 0 0;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.stars{display:flex;gap:3px;cursor:pointer;}
.stars svg{width:24px;height:24px;transition:transform .1s;}
.stars svg:hover{transform:scale(1.12);}
.star-fill{fill:#f5b301;stroke:#c98e00;stroke-width:.5;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.star-empty{fill:none;stroke:var(--border);stroke-width:1.4;}
.rating-score{font-weight:700;font-size:15px;}
.rating-count{font-size:12.5px;color:var(--text-muted);}
/* position:absolute — иначе этот текст, даже невидимый (opacity:0), всё
   равно занимал место в строке flex-ряда: на узких экранах ряду не
   хватало ширины уместить его "призрак" рядом со звёздами/оценкой, ряд
   переносился на вторую строку, и на мобильных перед тегами появлялся
   пустой промежуток высотой в целую строку. bottom:100% — над звёздами
   (не под ними, как было раньше), плюс JS (main.js) прячет его через
   3 секунды — это подтверждение действия, а не постоянный статус, ему
   не место остающимся на экране навсегда при каждом повторном заходе. */
.rating-thanks{position:absolute;left:0;bottom:100%;margin-bottom:8px;white-space:nowrap;font-size:12.5px;color:var(--accent);font-weight:600;opacity:0;transition:opacity .2s;}
.rating-thanks.visible{opacity:1;}
.rating-share{margin-left:auto;display:flex;align-items:center;}
@media (max-width:782px){
	.rating-block{margin:8px 0 0;padding:10px 0;gap:10px;}
}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}
.tag-row a{background:var(--accent-soft);color:var(--accent);font-size:12.5px;padding:6px 12px;border-radius:2px;}
.tag-row a:hover{background:var(--accent);color:#fff;}


.related{margin-top:28px;}
.related h2{font-size:14px;text-transform:uppercase;letter-spacing:.7px;border-bottom:2px solid var(--text);padding-bottom:8px;margin:0 0 16px;font-family:"Source Sans 3",sans-serif;font-weight:700;}
.related-list ul{margin:0;padding:0;list-style:none;}
.related-list li{border-top:1px solid var(--border);padding:10px 0;font-size:15px;}
.related-list li:first-child{border-top:none;}
.related-list a:hover{color:var(--accent);}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:640px){
	/* Компактные строки вместо больших карточек одна под другой: маленькое
	   превью слева, заголовок справа, без даты (её тут и не было). */
	.related-grid{display:block;}
	.related-grid > div{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);}
	.related-grid > div:first-child{border-top:none;}
	.related-grid a{flex:0 0 auto;}
	.related-grid .ph{width:100px;aspect-ratio:2/1;margin-bottom:0;}
	.related-grid h4{flex:1 1 auto;}
}

.not-found__title{font-family:var(--font-headline);font-weight:700;font-size:26px;line-height:1.15;margin:0 0 12px;}
.not-found__lead{color:var(--text-muted);font-size:15.5px;max-width:640px;margin:0 0 20px;}
.not-found__search{max-width:480px;margin:0 0 32px;}
.not-found__block{margin:0 0 32px;}
.not-found__block h2{font-size:14px;text-transform:uppercase;letter-spacing:.7px;border-bottom:2px solid var(--text);padding-bottom:8px;margin:0 0 16px;font-weight:700;}
.not-found__block .tag-row{margin-top:0;}
.related-grid .ph{aspect-ratio:2/1;background:linear-gradient(135deg,#dbe4ee,#c3d0e0);margin-bottom:8px;}
.related-grid h4{font-size:14px;line-height:1.3;margin:0;font-weight:600;}
.related-grid h4:hover{color:var(--accent);}

/* self-hosted lightbox */
.a21-lightbox-overlay{position:fixed;inset:0;background:rgba(10,12,15,.92);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:100;padding:40px;}
.a21-lightbox-overlay.open{display:flex;}
.a21-lightbox-img{max-width:90vw;max-height:80vh;object-fit:contain;}
.a21-lightbox-caption{color:#fff;font-size:14px;margin-top:14px;text-align:center;max-width:80vw;}
.a21-lightbox-close{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:32px;line-height:1;cursor:pointer;}
.a21-lightbox-prev, .a21-lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:28px;cursor:pointer;padding:10px;}
.a21-lightbox-prev{left:16px;}
.a21-lightbox-next{right:16px;}

.attachment-back{margin:0 0 16px;font-size:14px;}
.attachment-figure{margin:0;}
.attachment-figure img{width:100%;height:auto;border-radius:2px;}
.attachment-figure figcaption{font-size:12.5px;color:var(--text-muted);margin-top:8px;}

/* archive/search — alternate one-per-row list layout */
.a21-list{display:flex;flex-direction:column;gap:28px;}
.a21-list-item{display:flex;gap:22px;padding-bottom:28px;border-bottom:1px solid var(--border);}
@media (max-width:640px){ .a21-list-item{flex-direction:column;} }
/* flex-basis должен стоять на прямом flex-потомке (обёртка <a>), а не на
   вложенном <img> — на вложенном элементе он ни на что не влияет, из-за
   этого превью разъезжалось на полный собственный размер (720px вместо
   заданных здесь). Размер — как у крупной карточки виджета на главной. */
.a21-list-item > a{flex:0 0 320px;display:block;}
@media (max-width:640px){ .a21-list-item > a{flex:0 0 auto;width:100%;} }
.a21-list-item .ph{width:100%;aspect-ratio:2/1;}
.a21-list-content{flex:1;min-width:0;}
.a21-list-content h3{font-size:20px;line-height:1.15;margin:0 0 8px;font-weight:600;}
.a21-list-content h3 a:hover{color:var(--accent);}
.a21-list-content .meta{font-size:12.5px;}
.a21-list-content .dek{color:var(--text-muted);font-size:14.5px;margin:8px 0 0;}
.a21-list-cats{margin-top:14px;font-size:12.5px;color:var(--text-muted);}
.a21-list-cats a:hover{color:var(--accent);}

/* pagination */
.pagination{margin:32px 0 0;padding:20px 0;border-top:2px solid var(--text);border-bottom:2px solid var(--text);}
.pagination .nav-links{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;}
.pagination .page-numbers{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;font-weight:600;font-size:14px;padding:0 8px;}
.pagination .page-numbers.current{background:var(--btn);color:#fff;border-color:var(--btn);}
.pagination .page-numbers.dots{border:none;}
.pagination a.page-numbers:hover{border-color:var(--btn);color:var(--btn);}
/* Постраничная разбивка ВНУТРИ статьи (<!--nextpage-->, wp_link_pages() —
   inc/template-tags.php). Разметка ядра здесь другая (post-page-numbers,
   не page-numbers, как у пагинации архивов/поиска выше), но визуальный
   язык — тот же самый: номер страницы как кнопка формы, текущая залита. */
.post-pagination{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.post-pagination__label{font-size:13px;color:var(--text-muted);margin-right:2px;}
.post-page-numbers{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;font-weight:600;font-size:14px;padding:0 8px;color:var(--text);}
.post-page-numbers.current{background:var(--btn);color:#fff;border-color:var(--btn);}
a.post-page-numbers:hover{border-color:var(--btn);color:var(--btn);}

/* search results */
mark{background:none;color:Red;font-weight:bold;padding:0;}
.search-sort{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--text-muted);margin-bottom:18px;}
.search-sort a{padding:4px 10px;border:1px solid var(--border);border-radius:8px;}
.search-sort a.active{border-color:var(--btn);color:var(--btn);font-weight:600;}
/* Наглядно показывает, в каком порядке "По дате" разложит результаты —
   без этого приходится гадать (новые сверху или снизу), пока не нажмёшь.
   Повторный клик по "По дате" переключает направление (search.php), эти
   же треугольники отражают уже применённое направление, а не фиксированное. */
.sort-arrows{display:inline-flex;flex-direction:column;gap:1px;line-height:.6;margin-left:6px;vertical-align:middle;}
.sort-arrows span{font-size:13px;opacity:.3;}
.sort-arrows .is-active{opacity:1;color:var(--accent);}
.advanced-search-link{font-size:13px;font-weight:600;border-bottom:1px solid currentColor;}
.advanced-search-link:hover{color:var(--accent);}
.search-corrected{font-size:13.5px;color:var(--text-muted);background:var(--accent-soft);border-radius:6px;padding:10px 14px;margin-bottom:18px;}

/* advanced search page (template-search-advanced.php) */
.advanced-search-form{max-width:520px;display:flex;flex-direction:column;gap:16px;}
.advanced-search-field{display:flex;flex-direction:column;gap:6px;margin:0;}
.advanced-search-field label{font-size:13px;font-weight:600;color:var(--text-muted);}
.advanced-search-field input[type="text"],
.advanced-search-field input[type="date"],
.advanced-search-field select{border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;background:var(--surface);color:var(--text);}
.advanced-search-dates{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;}
.advanced-search-dates label{margin:0;}
.advanced-search-mode{border:1px solid var(--border);border-radius:8px;padding:12px 14px;}
.advanced-search-mode legend{font-size:13px;font-weight:600;color:var(--text-muted);padding:0 4px;}
.advanced-search-mode label{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:400;color:var(--text);margin-top:6px;}
.advanced-search-hint{font-size:12.5px;color:var(--text-muted);margin:8px 0 0;}
.advanced-search-form .btn{align-self:flex-start;background:var(--btn);color:#fff;border:none;border-radius:8px;padding:11px 24px;font-size:15px;font-weight:600;cursor:pointer;}
.advanced-search-form .btn:hover{background:var(--btn-dark);}

/* Скрытие телефона/email от автоматических сборщиков контактов (страница
   "Контакты" и любая другая с тем же шаблоном) — разметка и данные лежат
   прямо в контенте страницы (data-p1..data-p5), клик собирает их в
   js/main.js. Цвета — через переменные темы вместо жёстко заданного
   синего WP-админки, чтобы вписывалось в остальной сайт. */
.protected-phone{color:var(--accent);cursor:pointer;border-bottom:1px dashed var(--accent);padding:2px 0;}
.protected-phone:hover{opacity:.8;}
.protected-phone.revealed{color:var(--text);cursor:default;border-bottom:none;}