/* Чистый CSS вне less-пайплайна: less 2.5.3 не собирает @container и min(). */

.ukb {
	--ukb-radius-own: var(--ukb-radius, var(--ai-img-radius, 8px));
	--ukb-line: rgba(128, 128, 128, .28);
	--ukb-muted-opacity: .72;
	--ukb-read: 760px;
	position: relative;
	color: inherit;
	text-align: left;
}

/* Значение кастомного свойства не валидируется при парсинге: без @supports color-mix перетёр бы фолбэк и в старых браузерах линии исчезли бы целиком. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.ukb {
		--ukb-line: color-mix(in srgb, currentColor 16%, transparent);
	}
}

.ukb--feed,
.ukb--post {
	padding: 56px 0 80px;
}

/* Закреплённые блоки «Показывать сразу» (position: fixed) вынуты из потока и закрыли бы верх и низ блога: сколько они перекрывают, кладёт в переменные скрипт v2/fixed-offset.html (только паблиш). Отступ на обёртке темы — поверх собственных отступов .ukb, и фон темы тянется под шапку. */
#js-blogTheme[data-ukb-fixed] {
	padding-top: var(--ukb-fixed-top, 0px);
	padding-bottom: var(--ukb-fixed-bottom, 0px);
}

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

/* Кегли-запаски для сайтов без активной типографики: у типографики !important на .normal/.important/.note, она перебивает. */
.ukb .ukb-card__excerpt,
.ukb .ukb-card__more,
.ukb .ukb-empty__text,
.ukb .ukb-post__back,
.ukb .ukb-post__nav-title,
.ukb .ukb-pager__step,
.ukb .ukb-feed__tagline {
	font-size: 16px;
	line-height: 1.5;
}

.ukb .ukb-card__meta,
.ukb .ukb-post__meta,
.ukb .ukb-pager__status {
	font-size: 14px;
	line-height: 1.45;
}

.ukb .ukb-post__lead {
	font-size: 17px;
	line-height: 1.5;
}

/* Лид — роль .normal сайта, крупнее на пятую часть (3.17.1): кегль .normal (у типографики с !important) остаётся на <p>, увеличение — на внутреннем элементе, иначе em считался бы от родителя записи. */
.ukb .ukb-post__lead-text {
	display: block;
	font-size: 1.2em;
	line-height: 1.45;
}

.ukb .ukb-post__body {
	font-size: 17px;
	line-height: 1.6;
}

/* Сайт без активной типографики: гарнитура шаблона приходит с сервера переменными (правила шаблона висят только на виджете текста). */
.ukb[data-ukb-font] {
	font-family: var(--ukb-font-text, inherit);
}

.ukb[data-ukb-font] h1,
.ukb[data-ukb-font] h2,
.ukb[data-ukb-font] h3,
.ukb[data-ukb-font] h4,
.ukb[data-ukb-font] h5,
.ukb[data-ukb-font] h6,
.ukb[data-ukb-font] .h1,
.ukb[data-ukb-font] .h2,
.ukb[data-ukb-font] .h3,
.ukb[data-ukb-font] .h4 {
	font-family: var(--ukb-font-head, var(--ukb-font-text, inherit));
}

.ukb a,
.ukb a:hover,
.ukb a:focus,
.ukb a:active,
.ukb a:visited {
	color: inherit;
	text-decoration: none;
}

.ukb a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.ukb h1,
.ukb h2,
.ukb h3,
.ukb p,
.ukb figure,
.ukb ol {
	margin: 0;
	padding: 0;
}

.ukb img {
	max-width: 100%;
}

.ukb-feed {
	container-type: inline-size;
	container-name: ukb;
}

.ukb-feed__head {
	max-width: var(--ukb-read);
	margin: 0 0 48px;
}

#body-fict .ukb .ukb-feed__title,
.ukb .ukb-feed__title {
	margin: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
	text-transform: none;
}

.ukb .ukb-feed__tagline {
	margin: 12px 0 0;
	opacity: var(--ukb-muted-opacity);
}

.ukb--edit [data-ukb-part] {
	cursor: text;
}

/* Кольцо outline: auto огибает и строку текста, которая выше line-height заголовка: рамка «обтекала» введённое. Сплошная рамка идёт по блоку во всю колонку. */
.ukb--edit [data-ukb-part]:focus {
	outline: 2px solid #338FFF;
	outline-offset: 6px;
	border-radius: 4px;
}

/* Пустой подзаголовок снимает своё приглушение, иначе оно умножается на прозрачность плейсхолдера и подсказка почти пропадает. */
.ukb--edit .ukb-feed__tagline[data-ukb-placeholder]:empty {
	opacity: 1;
}

.ukb--edit [data-ukb-placeholder]:empty::before {
	content: attr(data-ukb-placeholder);
	opacity: .55;
	pointer-events: none;
}

.ukb-feed__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

.ukb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	container-type: inline-size;
	container-name: ukbcard;
}

.ukb-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	border-radius: var(--ukb-radius-own);
	aspect-ratio: 4 / 3;
	color: inherit;
}

.ukb-card__media::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: currentColor;
	opacity: .06;
}

.ukb-card__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.23, 1, .32, 1);
}

.ukb-card:hover .ukb-card__img {
	transform: scale(1.03);
}

.ukb-card__ph {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	opacity: .3;
}

@supports not (aspect-ratio: 1 / 1) {
	.ukb-card__media {
		height: 0;
		padding-bottom: 75%;
	}
}

.ukb-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.ukb-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	max-width: 100%;
	margin: 0 0 10px;
	opacity: var(--ukb-muted-opacity);
}

#body-fict .ukb .ukb-card__title,
.ukb .ukb-card__title {
	align-self: stretch;
	margin: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
	text-transform: none;
}

.ukb-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ukb-card__link {
	color: inherit;
}

@container ukbcard (max-width: 480px) {
	#body-fict .ukb .ukb-feed:not(.ukb-feed--list) .ukb-card:not(.ukb-card--featured) .ukb-card__title {
		font-size: 22px !important;
		line-height: 1.25 !important;
	}
}

/* Информер на три записи в колонке планшета: карточки около 220px, 22px рубили заголовок на слова по строке. */
@container ukbcard (max-width: 260px) {
	#body-fict .ukb.ukb--informer .ukb-feed:not(.ukb-feed--list) .ukb-card:not(.ukb-card--featured) .ukb-card__title {
		font-size: 19px !important;
	}
}

/* Сетка в одну колонку (лента до 559px): карточка шире 480px, но кегль не должен падать до .h4 сайта. */
@container ukb (max-width: 559px) {
	#body-fict .ukb .ukb-feed--grid .ukb-card__title {
		font-size: 22px !important;
		line-height: 1.25 !important;
	}
}

/* В списке кегль считается от ширины ленты, а не карточки: иначе карточка без фото шире соседей и получает другой кегль. */
@container ukb (max-width: 759px) {
	#body-fict .ukb .ukb-feed--list .ukb-card__title {
		font-size: 22px !important;
		line-height: 1.25 !important;
	}
}

.ukb-card__link::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.ukb .ukb-card__link:focus-visible {
	outline: none;
}

.ukb-card__link:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: var(--ukb-radius-own);
}

.ukb-card:hover .ukb-card__link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .12em;
}

.ukb .ukb-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 12px 0 0;
	opacity: .9;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ukb .ukb-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 0;
	font-weight: 600;
}

.ukb-card__arrow {
	display: inline-block;
	transition: transform .3s cubic-bezier(.23, 1, .32, 1);
}

.ukb-card:hover .ukb-card__arrow {
	transform: translateX(4px);
}

.ukb-badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 5px;
	max-width: 100%;
	margin: -2px 0;
	padding: 1px 10px;
	border: 1px solid var(--ukb-line);
	border-radius: 12px;
}

.ukb-badge__icon {
	flex: none;
}

.ukb-badge__when {
	white-space: nowrap;
}

/* Время метки «Запланировано» конструктор переписывает в пояс устройства (canvas/index.js). Серверное (пояс сайта) до этого не показываем, чтобы не мелькало; прячет его задержка анимации, поэтому без скрипта или без анимаций оно всё равно появится. */
.ukb--edit .ukb-badge__when[data-ukb-at]:not([data-ukb-localized]) {
	animation: ukb-when-reveal 0s 3s backwards;
}

@keyframes ukb-when-reveal {
	from {
		visibility: hidden;
	}
}

.ukb-card--draft,
.ukb-card--scheduled {
	opacity: .62;
}

.ukb-card--draft .ukb-card__meta,
.ukb-card--scheduled .ukb-card__meta {
	opacity: 1;
}

.ukb-badge--draft,
.ukb-badge--scheduled {
	border-style: dashed;
}

.ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card {
	padding-top: 48px;
	border-top: 1px solid var(--ukb-line);
}

.ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card .ukb-card__link::after {
	top: 48px;
}

.ukb-feed--list .ukb-card__media {
	margin-bottom: 20px;
	aspect-ratio: 3 / 2;
}

.ukb-feed--list .ukb-card:not(.ukb-card--media) .ukb-card__body {
	max-width: var(--ukb-read);
}

.ukb-feed--list .ukb-card__byline {
	white-space: normal;
}

.ukb-feed--list .ukb-card__excerpt {
	-webkit-line-clamp: 4;
}

.ukb-feed--list.ukb-feed--no-media {
	max-width: var(--ukb-read);
}

@container ukb (min-width: 640px) {
	.ukb-feed--list .ukb-card--media {
		display: grid;
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		gap: 0 32px;
		align-items: start;
	}

	.ukb-feed--list .ukb-card--media .ukb-card__media {
		margin: 0;
		aspect-ratio: 4 / 3;
	}

	.ukb-feed--list .ukb-card--media .ukb-card__body {
		padding-top: 4px;
	}
}

@container ukb (min-width: 960px) {
	.ukb-feed--list .ukb-card--media {
		gap: 0 40px;
	}
}

.ukb-feed--grid .ukb-feed__list,
.ukb-feed--informer .ukb-feed__list {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 48px 28px;
}

.ukb-feed--grid .ukb-card__media,
.ukb-feed--informer .ukb-card__media {
	margin-bottom: 18px;
}

.ukb-feed--grid .ukb-card__body,
.ukb-feed--informer .ukb-card__body {
	flex: 1 1 auto;
}

.ukb-feed--grid .ukb-card__more,
.ukb-feed--informer .ukb-card__more {
	margin-top: auto;
	padding-top: 16px;
}

/* Информер v2: колонок столько, сколько карточек помещается без «хвоста» в последнем ряду (1–4 записи). */
.ukb--informer .ukb-informer__title {
	margin: 0 0 24px;
	word-break: break-word;
	overflow-wrap: anywhere;
	text-transform: none;
}

.ukb--informer .ukb-informer__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .12em;
}

/* Легаси-стиль виджета (#body .ul-w-newsInformer article { margin-bottom }) раздвигал бы сетку поверх gap. */
#body .ul-w-newsInformer .ukb--informer .ukb-card,
.ul-w-newsInformer .ukb--informer .ukb-card {
	margin: 0;
}

/* AI-анонс центрирован auto-полями в колонке-флексе (ai-enhance.css) и берёт ширину по содержимому, а у ленты
   с container-type её нет: виджет схлопывался в полоску, картинки пропадали. Правило здесь: CSS AI-сайта
   в конструкторе запечён при генерации, а blog.css приходит вместе с разметкой v2. */
#body .ai-section .ai-news-informer {
	width: 100%;
}

.ukb--informer .ukb-feed--informer .ukb-feed__list {
	grid-template-columns: minmax(0, 1fr);
	gap: 40px 28px;
}

.ukb--informer .ukb-feed--list.ukb-feed--no-media {
	max-width: none;
	margin: 0;
}

.ukb--informer .ukb-feed--list .ukb-feed__list {
	gap: 32px;
}

.ukb--informer .ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card {
	padding-top: 32px;
}

.ukb--informer .ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card .ukb-card__link::after {
	top: 32px;
}

/* Заголовок записи в списке информера — .h3, как заголовок самого информера: иерархии не было. */
#body-fict .ukb.ukb--informer .ukb-feed--list .ukb-card__title,
.ukb.ukb--informer .ukb-feed--list .ukb-card__title {
	font-size: 24px !important;
	line-height: 1.25 !important;
}

@container ukb (min-width: 520px) {
	.ukb--informer[data-ukb-count='2'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-feed__list,
	.ukb--informer[data-ukb-count='4'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-feed__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Одна запись в широком виджете — фото слева, как в списке: карточка 4:3 на всю ширину была бы плакатом. */
@container ukb (min-width: 640px) {
	.ukb--informer[data-ukb-count='1'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-card--media {
		display: grid;
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		gap: 0 32px;
		align-items: start;
	}

	.ukb--informer[data-ukb-count='1'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-card--media .ukb-card__media {
		margin: 0;
	}
}

@container ukb (min-width: 720px) {
	.ukb--informer[data-ukb-count='3'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-feed__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container ukb (min-width: 960px) {
	.ukb--informer[data-ukb-count='4'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-feed__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px 24px;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.ukb--informer[data-ukb-count='2'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-feed__list,
		.ukb--informer[data-ukb-count='4'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-feed__list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.ukb--informer[data-ukb-count='3'] .ukb-feed--informer:not(.ukb-feed--list) .ukb-feed__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

@container ukb (min-width: 560px) {
	.ukb-feed--grid .ukb-feed__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container ukb (min-width: 880px) {
	.ukb-feed--grid .ukb-feed__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 56px 32px;
	}
}

.ukb-feed--cover .ukb-feed__list {
	gap: 24px;
}

.ukb-feed--cover .ukb-card {
	overflow: hidden;
	justify-content: flex-end;
	width: 100%;
	min-height: 320px;
	border-radius: var(--ukb-radius-own);
	aspect-ratio: 4 / 3;
}

.ukb-feed--cover .ukb-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: currentColor;
	opacity: .06;
}

.ukb-feed--cover .ukb-card__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	aspect-ratio: auto;
}

.ukb-feed--cover .ukb-card--placeholder .ukb-card__media {
	display: none;
}

/* Тёмная подложка под белым текстом, пока картинка не загрузилась или битая. */
.ukb-feed--cover .ukb-card--media {
	background-color: #2B2B2B;
}

.ukb-feed--cover .ukb-card__body {
	position: relative;
	z-index: 1;
	padding: 28px;
}

/* Scrim привязан к тексту, а не к высоте карточки: под любой строкой меты альфа не ниже .6 (контраст белого ≥4.5 даже на белом фото). */
.ukb-feed--cover .ukb-card--media .ukb-card__body::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -96px;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .74) 0, rgba(0, 0, 0, .6) calc(100% - 96px), rgba(0, 0, 0, .32) calc(100% - 48px), rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

#body-fict .ukb-feed--cover .ukb-card--media .ukb-card__body,
#body-fict .ukb-feed--cover .ukb-card--media .ukb-card__title,
#body-fict .ukb-feed--cover .ukb-card--media .ukb-card__more,
.ukb-feed--cover .ukb-card--media .ukb-card__body,
.ukb-feed--cover .ukb-card--media .ukb-card__title,
.ukb-feed--cover .ukb-card--media .ukb-card__more {
	color: #FFF !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.ukb-feed--cover .ukb-card--media .ukb-card__meta {
	opacity: .92;
}

/* В обложке ссылка растянута только на тело (оно position: relative ради scrim), поэтому фокус рисуется на всей карточке. */
.ukb-feed--cover .ukb-card__link:focus-visible::after {
	outline: none;
}

.ukb-feed--cover .ukb-card:has(.ukb-card__link:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@supports not selector(:has(*)) {
	.ukb-feed--cover .ukb-card:focus-within {
		outline: 2px solid currentColor;
		outline-offset: 3px;
	}
}

.ukb-feed--cover .ukb-card--media .ukb-badge {
	border-color: rgba(255, 255, 255, .5);
}

.ukb-feed--cover .ukb-card--media .ukb-card__excerpt {
	opacity: .92;
}

.ukb-feed--cover .ukb-card__excerpt {
	-webkit-line-clamp: 2;
}

.ukb-feed--cover .ukb-card:not(.ukb-card--featured) .ukb-card__excerpt {
	display: none;
}

.ukb-feed--cover .ukb-card__more {
	margin-top: 14px;
}

@supports not (aspect-ratio: 1 / 1) {
	.ukb-feed--cover .ukb-card {
		min-height: 400px;
	}
}

/* Первая карточка без фото: высота по тексту, а не пустой плакат 21:9. */
.ukb-feed--cover .ukb-card--featured:not(.ukb-card--media) {
	min-height: 0;
	aspect-ratio: auto;
}

/* Вторичная карточка без фото — текстовая плитка: текст сверху и анонс, иначе пустая плашка с подписью внизу читается как незагрузившееся фото. */
.ukb-feed--cover .ukb-card:not(.ukb-card--media) {
	justify-content: flex-start;
}

.ukb-feed--cover .ukb-card:not(.ukb-card--featured):not(.ukb-card--media) .ukb-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
}

@container ukb (min-width: 720px) {
	.ukb-feed--cover .ukb-feed__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.ukb-feed--cover .ukb-card--featured {
		grid-column: 1 / -1;
		aspect-ratio: 21 / 9;
		min-height: 420px;
	}

	.ukb-feed--cover .ukb-card--featured .ukb-card__body {
		padding: 44px;
	}

	.ukb-feed--cover .ukb-card--featured .ukb-card__body > * {
		max-width: 740px;
	}

	.ukb-feed--cover .ukb-card--featured .ukb-card__title {
		-webkit-line-clamp: 3;
	}

	/* Featured — первая карточка страницы, остальные по две: при нечётном их числе последняя встаёт на всю ширину, а не оставляет дыру. */
	.ukb-feed--cover .ukb-card--featured ~ .ukb-card:last-child:nth-child(even) {
		grid-column: 1 / -1;
		aspect-ratio: 21 / 9;
	}
}

@container ukb (max-width: 479px) {
	.ukb-feed--cover .ukb-card {
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.ukb-feed--cover .ukb-card--featured {
		aspect-ratio: 4 / 5;
	}

	.ukb-feed--cover .ukb-card__body {
		padding: 20px;
	}

	#body-fict .ukb .ukb-feed--cover .ukb-card--featured .ukb-card__title {
		font-size: 26px !important;
		line-height: 1.2 !important;
	}
}

@container ukb (min-width: 480px) and (max-width: 719px) {
	#body-fict .ukb .ukb-feed--cover .ukb-card--featured .ukb-card__title {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}
}

.ukb-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 24px;
	margin-top: 64px;
}

.ukb-pager__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	list-style: none;
}

.ukb .ukb-pager__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ukb-pager__list li::before {
	display: none;
}

.ukb-pager__num,
.ukb-pager__gap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.ukb-pager__num {
	border: 1px solid var(--ukb-line);
	transition: border-color .2s;
}

.ukb a.ukb-pager__num:hover {
	border-color: currentColor;
}

.ukb-pager__num--current {
	border-color: transparent;
	font-weight: 700;
}

.ukb-pager__num--current::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: .12;
}

.ukb-pager__gap {
	min-width: 20px;
	padding: 0;
	opacity: var(--ukb-muted-opacity);
}

.ukb-pager__step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	font-weight: 600;
}

.ukb a.ukb-pager__step:hover .ukb-pager__step-text {
	text-decoration: underline;
	text-underline-offset: .15em;
}

.ukb-pager__step--disabled {
	opacity: .32;
	cursor: default;
}

.ukb-pager__status {
	display: none;
	opacity: var(--ukb-muted-opacity);
}

@container ukb (max-width: 559px) {
	.ukb-pager {
		justify-content: space-between;
		gap: 12px;
		margin-top: 48px;
		padding-top: 24px;
		border-top: 1px solid var(--ukb-line);
	}

	.ukb-pager__list {
		display: none;
	}

	.ukb-pager__status {
		display: block;
	}
}

@container ukb (max-width: 339px) {
	.ukb-pager__step-text {
		position: absolute;
		overflow: hidden;
		clip: rect(0 0 0 0);
		width: 1px;
		height: 1px;
		white-space: nowrap;
	}
}

.ukb-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 72px 24px;
	text-align: center;
}

.ukb-empty__icon {
	opacity: .4;
}

/* Без приглушения: на пустой странице это единственный текст, а opacity .72 роняет ниже 4.5:1 даже темы с контрастом 5–7:1. */
.ukb-empty__text {
	max-width: 440px;
}

.ukb-empty--edit {
	gap: 20px;
	max-width: var(--ukb-read);
	margin: 0;
	padding: 56px 24px;
	border-radius: 14px;
}

/* Пустой холст и плашки шапки/подвала видны только в конструкторе — это интерфейс uKit, а не контент: светлая подложка, цвета и шрифт свои при любой теме, поэтому контраст внутри от темы не зависит. На светлых темах край даёт пунктир, на тёмных и насыщенных — сама подложка. #body-fict поднимает специфичность над правилами тем вида #body.g-theme-site-N a. */
#body-fict .ukb .ukb-empty--edit,
#body-fict .ukb .ukb-slot,
.ukb .ukb-empty--edit,
.ukb .ukb-slot {
	color: #5B6670;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	background: #F7F8FA;
	border: 1.5px dashed #A9B1BA;
}

/* Подсказка — div, а не p: типографика сайта задаёт `#body-fict p` кегль и шрифт с !important. */
#body-fict .ukb .ukb-empty__hint,
.ukb .ukb-empty__hint {
	max-width: 440px;
	color: #5B6670;
	font-size: 14px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* CTA — тёмная кнопка со своими цветами: у кнопок темы (голая .ul-w-button1) фон палитры бывает без парного текста. */
#body-fict .ukb .ukb-empty__cta,
.ukb .ukb-empty__cta {
	display: inline-block;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 9px 20px;
	border: 0;
	border-radius: 6px;
	background: #1C2A33;
	box-shadow: none;
	color: #FFF;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s;
}

#body-fict .ukb .ukb-empty__cta:hover,
.ukb .ukb-empty__cta:hover {
	background: #34495A;
}

#body-fict .ukb .ukb-empty__cta:active,
.ukb .ukb-empty__cta:active {
	background: #132026;
}

#body-fict .ukb .ukb-empty__cta:focus-visible,
.ukb .ukb-empty__cta:focus-visible {
	outline: 2px solid #1C2A33;
	outline-offset: 2px;
}

/* «+» — строчная иконка на середине прописных, как в панели: во flex-строке её середина — середина строки, а она у шрифтов разная. */
#body-fict .ukb .ukb-empty__plus,
.ukb .ukb-empty__plus {
	width: 16px;
	height: 16px;
	margin: 0 8px 0 0;
	vertical-align: calc(.35em - 8px);
	vertical-align: calc((1cap - 16px) / 2);
}

.ukb-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 24px 36px;
	text-align: center;
	border-radius: 14px;
}

.ukb--feed > .ukb-slot--header {
	margin: -32px 0 48px;
}

.ukb--post > .ukb-slot--header {
	margin: -16px 0 40px;
}

.ukb--feed > .ukb-slot--footer,
.ukb--post > .ukb-slot--footer {
	margin: 72px 0 -48px;
}

.ukb .ukb-slot__label {
	position: absolute;
	top: 14px;
	left: 18px;
}

[dir='rtl'] .ukb .ukb-slot__label {
	right: 18px;
	left: auto;
}

#body-fict .ukb .ukb-slot__label,
.ukb .ukb-slot__label {
	color: #66707A;
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ukb-slot__icon {
	display: block;
	flex: none;
	margin-bottom: 16px;
}

#body-fict .ukb .ukb-slot__icon,
.ukb .ukb-slot__icon {
	color: #868E97;
}

#body-fict .ukb .ukb-slot__icon-bar,
.ukb .ukb-slot__icon-bar {
	fill: #66707A;
}

#body-fict .ukb .ukb-slot__title,
.ukb .ukb-slot__title {
	max-width: 560px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

#body-fict .ukb .ukb-slot__title,
.ukb .ukb-slot__title {
	color: #1F2933;
}

#body-fict .ukb .ukb-slot__text,
.ukb .ukb-slot__text {
	max-width: 480px;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.55;
	text-wrap: pretty;
}

#body-fict .ukb .ukb-slot__text,
.ukb .ukb-slot__text {
	color: #5B6670;
}

#body-fict .ukb .ukb-slot__link,
.ukb .ukb-slot__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

#body-fict .ukb a.ukb-slot__link,
.ukb a.ukb-slot__link {
	text-decoration: none;
}

/* Цвет — на детях ссылки: правило темы вида «#body.g-theme-site-N[data-device] #body-fict [data-theme-block*=…] a» (два id, у kvartal) перебило бы цвет самой ссылки, а дети берут свой напрямую. */
#body-fict .ukb .ukb-slot__link > span,
#body-fict .ukb .ukb-slot__arrow,
.ukb .ukb-slot__link > span,
.ukb .ukb-slot__arrow {
	color: #3B48CC;
}

#body-fict .ukb a.ukb-slot__link:hover > span,
#body-fict .ukb a.ukb-slot__link:hover .ukb-slot__arrow,
#body-fict .ukb a.ukb-slot__link:focus-visible > span,
#body-fict .ukb a.ukb-slot__link:focus-visible .ukb-slot__arrow,
.ukb a.ukb-slot__link:hover > span,
.ukb a.ukb-slot__link:hover .ukb-slot__arrow,
.ukb a.ukb-slot__link:focus-visible > span,
.ukb a.ukb-slot__link:focus-visible .ukb-slot__arrow {
	color: #2A35A3;
}

#body-fict .ukb a.ukb-slot__link:focus-visible,
.ukb a.ukb-slot__link:focus-visible {
	border-radius: 2px;
	outline: 2px solid #3B48CC;
	outline-offset: 3px;
}

.ukb a.ukb-slot__link > span {
	text-underline-offset: .2em;
}

.ukb a.ukb-slot__link:hover > span,
.ukb a.ukb-slot__link:focus-visible > span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.ukb-slot__arrow {
	flex: none;
	transition: transform .2s ease;
}

.ukb a.ukb-slot__link:hover .ukb-slot__arrow {
	transform: translate(2px, -2px);
}

@media (max-width: 767px) {
	.ukb-slot {
		padding: 44px 16px 28px;
	}

	.ukb .ukb-slot__title {
		font-size: 16px;
	}

	.ukb--feed > .ukb-slot--header {
		margin: -16px 0 32px;
	}

	.ukb--feed > .ukb-slot--footer,
	.ukb--post > .ukb-slot--footer {
		margin: 48px 0 -32px;
	}
}

#body[data-device='phone'] .ukb-slot {
	padding: 44px 16px 28px;
}

#body[data-device='phone'] .ukb .ukb-slot__title {
	font-size: 16px;
}

#body[data-device='phone'] .ukb--feed > .ukb-slot--header {
	margin: -16px 0 32px;
}

#body[data-device='phone'] .ukb--feed > .ukb-slot--footer,
#body[data-device='phone'] .ukb--post > .ukb-slot--footer {
	margin: 48px 0 -32px;
}

.ukb--post {
	padding-top: 40px;
}

.ukb-post {
	max-width: var(--ukb-read);
	margin: 0 auto;
}

.ukb-post__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	font-weight: 600;
}

.ukb-post__back-arrow {
	transition: transform .3s cubic-bezier(.23, 1, .32, 1);
}

.ukb-post__back:hover .ukb-post__back-arrow {
	transform: translateX(-4px);
}

.ukb-post__badges {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

#body-fict .ukb .ukb-post__title,
.ukb .ukb-post__title {
	margin: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
	text-transform: none;
}

.ukb-post__meta {
	margin-top: 20px;
	opacity: var(--ukb-muted-opacity);
}

.ukb .ukb-post__cover {
	position: relative;
	overflow: hidden;
	margin-top: 36px;
	border-radius: var(--ukb-radius-own);
}

.ukb-post__cover::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: currentColor;
	opacity: .06;
}

.ukb-post__cover-img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-height: 720px;
	object-fit: cover;
}

.ukb .ukb-post__lead {
	margin-top: 36px;
}

.ukb-post__lead + .ukb-post__body {
	margin-top: 24px;
}

.ukb-post__body {
	margin-top: 36px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.ukb-post__title + .ukb-post__body,
.ukb-post__meta + .ukb-post__body {
	margin-top: 32px;
}

.ukb .ukb-post__body p,
.ukb .ukb-post__body ul,
.ukb .ukb-post__body ol,
.ukb .ukb-post__body blockquote,
.ukb .ukb-post__body figure,
.ukb .ukb-post__body pre,
.ukb .ukb-post__body table {
	margin: 0 0 1.1em;
}

.ukb .ukb-post__body h1,
.ukb .ukb-post__body h2,
.ukb .ukb-post__body h3,
.ukb .ukb-post__body h4,
.ukb .ukb-post__body h5,
.ukb .ukb-post__body h6 {
	margin: 40px 0 14px;
	overflow-wrap: break-word;
	text-transform: none;
}

.ukb .ukb-post__body > :first-child {
	margin-top: 0;
}

.ukb .ukb-post__body > :last-child {
	margin-bottom: 0;
}

.ukb .ukb-post__body ul,
.ukb .ukb-post__body ol {
	padding-left: 1.4em;
}

.ukb .ukb-post__body li {
	margin: 0 0 .4em;
}

.ukb .ukb-post__body li > p {
	margin: 0;
}

.ukb .ukb-post__body a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
}

.ukb .ukb-post__body a:hover {
	text-decoration-thickness: 2px;
}

.ukb .ukb-post__body img {
	height: auto;
	border-radius: var(--ukb-radius-own);
}

.ukb .ukb-post__body figure img {
	display: block;
	margin: 0 auto;
}

.ukb .ukb-post__body figcaption {
	margin-top: 10px;
	font-size: .85em;
	line-height: 1.45;
	opacity: var(--ukb-muted-opacity);
	text-align: center;
}

/* Обтекание картинки (класс на figure из редактора). Сужение считаем от колонки записи, а не от экрана: в конструкторе «Телефон» — узкий холст на широком окне. */
.ukb-post {
	container-type: inline-size;
	container-name: ukbpost;
}

.ukb .ukb-post__body {
	display: flow-root;
}

.ukb .ukb-post__body figure.ukb-figure--left,
.ukb .ukb-post__body figure.ukb-figure--right {
	max-width: 44%;
	margin-top: .3em;
	margin-bottom: 1em;
}

.ukb .ukb-post__body figure.ukb-figure--left {
	float: left;
	clear: left;
	margin-right: 28px;
}

.ukb .ukb-post__body figure.ukb-figure--right {
	float: right;
	clear: right;
	margin-left: 28px;
}

.ukb .ukb-post__body figure.ukb-figure--center {
	max-width: 60%;
	margin-right: auto;
	margin-left: auto;
}

/* Заголовок, разделитель и широкие блоки начинаются под картинкой; списки и цитаты встают рядом, не залезая маркерами и линией под неё. */
.ukb .ukb-post__body h1,
.ukb .ukb-post__body h2,
.ukb .ukb-post__body h3,
.ukb .ukb-post__body h4,
.ukb .ukb-post__body h5,
.ukb .ukb-post__body h6,
.ukb .ukb-post__body hr,
.ukb .ukb-post__body figure:not(.ukb-figure--left):not(.ukb-figure--right),
.ukb .ukb-post__body .video-inline {
	clear: both;
}

.ukb .ukb-post__body ul,
.ukb .ukb-post__body ol,
.ukb .ukb-post__body blockquote {
	display: flow-root;
}

@container ukbpost (max-width: 559px) {
	.ukb .ukb-post__body figure.ukb-figure--left,
	.ukb .ukb-post__body figure.ukb-figure--right,
	.ukb .ukb-post__body figure.ukb-figure--center {
		float: none;
		max-width: none;
		margin: 0 0 1.1em;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 559px) {
		.ukb .ukb-post__body figure.ukb-figure--left,
		.ukb .ukb-post__body figure.ukb-figure--right,
		.ukb .ukb-post__body figure.ukb-figure--center {
			float: none;
			max-width: none;
			margin: 0 0 1.1em;
		}
	}

	#body[data-device='phone'] .ukb .ukb-post__body figure.ukb-figure--left,
	#body[data-device='phone'] .ukb .ukb-post__body figure.ukb-figure--right,
	#body[data-device='phone'] .ukb .ukb-post__body figure.ukb-figure--center {
		float: none;
		max-width: none;
		margin: 0 0 1.1em;
	}
}

.ukb .ukb-post__body blockquote {
	padding: 4px 0 4px 24px;
	border-left: 3px solid rgba(128, 128, 128, .5);
	border-left-color: color-mix(in srgb, currentColor 30%, transparent);
	font-size: inherit;
}

.ukb .ukb-post__body blockquote > :last-child {
	margin-bottom: 0;
}

.ukb .ukb-post__body hr {
	height: 0;
	margin: 2em 0;
	border: 0;
	border-top: 1px solid rgba(128, 128, 128, .35);
	border-top-color: color-mix(in srgb, currentColor 20%, transparent);
}

.ukb .ukb-post__body iframe,
.ukb .ukb-post__body video {
	display: block;
	max-width: 100%;
	border: 0;
}

.ukb .ukb-post__body .video-inline {
	position: relative;
	display: block;
	width: 100% !important;
	margin: 0 0 1.1em;
	padding: 0;
}

.ukb .ukb-post__body .video-inline:empty {
	display: none;
}

/* Пропорция на самом iframe: пустой контейнер не оставляет дыру, а oEmbed с собственной padding-обёрткой не получает двойную высоту. */
/* Пока плеер грузится или заблокирован, на месте видео плашка, а не белая дыра. */
.ukb .ukb-post__body .video-inline iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--ukb-radius-own);
	background: rgba(128, 128, 128, .12);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

@supports not (aspect-ratio: 1 / 1) {
	.ukb .ukb-post__body .video-inline iframe {
		height: 56vw;
		max-height: 428px;
	}
}

.ukb .ukb-post__body table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
}

.ukb .ukb-post__body th,
.ukb .ukb-post__body td {
	padding: 8px 12px;
	border: 1px solid var(--ukb-line);
}

.ukb .ukb-post__body pre {
	overflow-x: auto;
	white-space: pre-wrap;
}

.ukb-post__share {
	margin-top: 40px;
}

/* share2 подключается только после load: место под кнопки размера l занято заранее, иначе навигация под ними прыгает. */
.ukb-post__share .ya-share2 {
	min-height: 48px;
}

/* Зазор — gap флекса, а не margin-right share2: в RTL (ar, fa) он встаёт между кнопками, а не у края. Специфичность выше правил share2 (.ya-share2__list.ya-share2__list_direction_horizontal > .ya-share2__item): его стили вставляются позже blog.css. */
.ukb .ukb-post__share .ya-share2__list.ya-share2__list_direction_horizontal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.ukb .ukb-post__share .ya-share2__list .ya-share2__item {
	margin: 0;
}

/* Превью в конструкторе (canvas/post.js): share2 там не грузится, круги с теми же цветами и знаками рисует панель. */
.ukb .ukb-share-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: default;
}

.ukb .ukb-share-preview__item {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}

/* Бейдж X почти чёрный: на тёмной палитре круг сливается с фоном. Светлый контур виден только на тёмном. */
.ukb-post__share .ya-share2__item_service_twitter .ya-share2__badge,
.ukb .ukb-share-preview__item--twitter {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

/* 48px нужны пальцу; в колонке записи шире телефона кнопки ужаты до 40px (у share2 такого размера нет) — по ширине колонки, как вся вёрстка: в конструкторе «Телефон» остаются 48px. Без zoom (старый Firefox) останутся 48px. */
@container ukbpost (min-width: 560px) {
	.ukb-post__share .ya-share2,
	.ukb .ukb-share-preview {
		zoom: .8334;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.ukb-post__share .ya-share2,
		.ukb .ukb-share-preview {
			zoom: .8334;
		}
	}
}

.ukb-post__stub {
	padding: 16px 20px;
	border: 1px dashed var(--ukb-line);
	border-radius: var(--ukb-radius-own);
	opacity: var(--ukb-muted-opacity);
	text-align: center;
}

.ukb-post__nav {
	display: flex;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--ukb-line);
}

.ukb-post__nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 48%;
}

.ukb-post__nav-link--next {
	align-items: flex-end;
	margin-left: auto;
	text-align: right;
}

.ukb-post__nav-label {
	opacity: var(--ukb-muted-opacity);
}

.ukb-post__nav-title {
	font-weight: 600;
}

.ukb a.ukb-post__nav-link:hover .ukb-post__nav-title {
	text-decoration: underline;
	text-underline-offset: .15em;
}

.ukb-post__comments {
	margin-top: 48px;
}

@media (max-width: 767px) {
	.ukb--feed,
	.ukb--post {
		padding: 32px 0 56px;
	}

	#body-fict .ukb .ukb-post__title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}

	#body-fict .ukb .ukb-post__body h1,
	#body-fict .ukb .ukb-post__body h2 {
		font-size: 26px !important;
		line-height: 1.2 !important;
	}

	#body-fict .ukb .ukb-post__body h3,
	#body-fict .ukb .ukb-post__body h4 {
		font-size: 22px !important;
		line-height: 1.25 !important;
	}

	.ukb .ukb-post__body h1,
	.ukb .ukb-post__body h2,
	.ukb .ukb-post__body h3,
	.ukb .ukb-post__body h4 {
		margin: 32px 0 12px;
	}

	.ukb-feed--list .ukb-feed__list {
		gap: 36px;
	}

	.ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card {
		padding-top: 36px;
	}

	.ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card .ukb-card__link::after {
		top: 36px;
	}

	.ukb-feed--grid .ukb-feed__list {
		row-gap: 40px;
	}

	.ukb-feed__head {
		margin-bottom: 36px;
	}

	#body-fict .ukb .ukb-feed__title {
		font-size: 32px !important;
		line-height: 1.15 !important;
	}

	.ukb-post__back {
		margin-bottom: 20px;
	}

	.ukb-post__cover,
	.ukb-post__lead {
		margin-top: 28px;
	}

	.ukb-post__nav {
		flex-direction: column;
	}

	.ukb-post__nav-link {
		max-width: none;
	}

	.ukb-post__nav-link--next {
		align-items: flex-start;
		margin-left: 0;
		text-align: left;
	}
}

#body[data-device='phone'] .ukb--feed,
#body[data-device='phone'] .ukb--post {
	padding: 32px 0 56px;
}

#body-fict[data-device='phone'] .ukb .ukb-post__title,
#body[data-device='phone'] #body-fict .ukb .ukb-post__title {
	font-size: 32px !important;
	line-height: 1.15 !important;
}

#body-fict[data-device='phone'] .ukb .ukb-post__body h1,
#body-fict[data-device='phone'] .ukb .ukb-post__body h2,
#body[data-device='phone'] #body-fict .ukb .ukb-post__body h1,
#body[data-device='phone'] #body-fict .ukb .ukb-post__body h2 {
	font-size: 26px !important;
	line-height: 1.2 !important;
}

#body-fict[data-device='phone'] .ukb .ukb-post__body h3,
#body-fict[data-device='phone'] .ukb .ukb-post__body h4,
#body[data-device='phone'] #body-fict .ukb .ukb-post__body h3,
#body[data-device='phone'] #body-fict .ukb .ukb-post__body h4 {
	font-size: 22px !important;
	line-height: 1.25 !important;
}

#body[data-device='phone'] .ukb-feed--list .ukb-feed__list {
	gap: 36px;
}

#body[data-device='phone'] .ukb-feed--grid .ukb-feed__list {
	row-gap: 40px;
}

#body[data-device='phone'] .ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card {
	padding-top: 36px;
}

#body[data-device='phone'] .ukb-feed--list .ukb-feed__list > .ukb-card + .ukb-card .ukb-card__link::after {
	top: 36px;
}

#body[data-device='phone'] .ukb-feed__head {
	margin-bottom: 36px;
}

#body-fict[data-device='phone'] .ukb .ukb-feed__title,
#body[data-device='phone'] #body-fict .ukb .ukb-feed__title {
	font-size: 32px !important;
	line-height: 1.15 !important;
}

#body[data-device='phone'] .ukb-post__nav {
	flex-direction: column;
}

#body[data-device='phone'] .ukb-post__nav-link {
	max-width: none;
}

#body[data-device='phone'] .ukb-post__nav-link--next {
	align-items: flex-start;
	margin-left: 0;
	text-align: left;
}

/* Браузеры без container queries: десктопная раскладка списка и обложки по ширине окна. */
@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.ukb-feed--list .ukb-card--media {
			display: grid;
			grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
			gap: 0 32px;
			align-items: start;
		}

		.ukb-feed--list .ukb-card--media .ukb-card__media {
			margin: 0;
		}

		.ukb-feed--cover .ukb-feed__list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.ukb-feed--cover .ukb-card--featured {
			grid-column: 1 / -1;
		}
	}
}

/*
 * Версия для слабовидящих (public/js/ulib/cecutient.js): включённый режим ставит body
 * data-cecutient-background-color="g-theme-site-N" и кегль html 17/22/27px. Как легаси-блогу
 * в cecutient.css — кегли в rem и Arial; #body в селекторе перебивает кегли container queries.
 */
body[data-cecutient-background-color^='g-theme-site'] .ukb {
	--ukb-muted-opacity: 1;
}

body[data-cecutient-background-color^='g-theme-site'] .ukb .ukb-card__excerpt {
	opacity: 1;
}

body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-feed__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-card__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-informer__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body h2,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body h3,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body h4 {
	font-family: Arial, sans-serif !important;
	line-height: 1.3 !important;
	letter-spacing: .25px;
}

body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-feed__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__title {
	font-size: 2.4rem !important;
}

body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-informer__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body h2 {
	font-size: 1.8rem !important;
}

body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-card__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body h3 {
	font-size: 1.5rem !important;
}

body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb.ukb--informer .ukb-card__title,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body h4 {
	font-size: 1.25rem !important;
}

body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-card__excerpt,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-card__more,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-card__meta,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-feed__tagline,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-empty__text,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-badge,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-pager,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-pager__status,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__back,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__meta,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__lead,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body p,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body li,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__body figcaption,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__nav-label,
body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__nav-title {
	font-family: Arial, sans-serif !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	letter-spacing: .25px;
}

body[data-cecutient-background-color^='g-theme-site'] #body #body-fict .ukb .ukb-post__lead-text {
	font-size: 1.1em;
}

@media (prefers-reduced-motion: reduce) {
	.ukb *,
	.ukb *::before,
	.ukb *::after {
		transition: none !important;
	}

	.ukb-card:hover .ukb-card__img,
	.ukb-card:hover .ukb-card__arrow,
	.ukb-post__back:hover .ukb-post__back-arrow,
	.ukb a.ukb-slot__link:hover .ukb-slot__arrow {
		transform: none;
	}
}