/*
DLE 20 compatibility fix
Исправляет расползание постеров, скриншотов и картинок в тексте,
когда DLE выводит изображения с новыми атрибутами width/height, lazy-src
или дополнительными обёртками.
*/

/* Базовая защита: картинки не должны выходить за родительский блок. */
img:not(.emoji), picture, svg, canvas, video, iframe, embed, object {
	max-width: 100%;
}
img:not(.emoji) {
	height: auto;
}

/* Постеры/превью в карточках и на полной новости сохраняют пропорции сетки. */
.img-block,
.img-responsive,
.img-fixed-size,
.item__img,
.page__img,
.page__poster,
.fr__img,
.fs-result__img,
.comm__img,
.us__img,
.tuser__ava,
.header__ava,
.lgn__avatar {
	overflow: hidden;
}
.img-block > a,
.img-block > picture,
.img-responsive > a,
.img-responsive > picture,
.img-fixed-size > a,
.img-fixed-size > picture {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}
.img-block > a > img,
.img-block > picture > img,
.img-responsive > a > img,
.img-responsive > picture > img,
.img-fixed-size > a > img,
.img-fixed-size > picture > img,
.item__img img,
.page__img img,
.fr__img img,
.fs-result__img img,
.comm__img img,
.us__img img,
.tuser__ava img,
.header__ava img,
.lgn__avatar img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

/* Картинки в полной новости: без растягивания и без горизонтального скролла. */
.full-text,
.page__text,
.page__info,
.static-text,
.descr {
	overflow-wrap: anywhere;
	word-break: normal;
}
.full-text img:not(.emoji),
.static-text img:not(.emoji),
.descr img:not(.emoji),
.full-text .highslide img,
.full-text figure img,
.full-text picture img {
	display: block;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain;
}
.full-text figure,
.full-text picture,
.full-text .highslide,
.full-text .xfieldimagegallery,
.comments-image-gallery {
	max-width: 100%;
}
.full-text figure {
	display: block;
}
.full-text figure.image.align-center {
	display: block;
	text-align: center;
}
.full-text figure.image.align-center figcaption {
	display: block;
}

/* Галереи DLE 20 и дополнительные поля с изображениями. */
.xfieldimagegallery,
.comments-image-gallery,
.page__scr ul {
	min-width: 0;
}
.xfieldimagegallery img,
.comments-image-gallery img,
.page__scr img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
.page__scr a,
.page__scr picture {
	display: block;
	width: 100%;
	aspect-ratio: 300 / 200;
	overflow: hidden;
}

/* iframe/player от DLE 20 и сторонних плееров. */
.video-responsive,
.video-inside,
.full-text .video-responsive {
	position: relative;
	overflow: hidden;
	max-width: 100%;
}
.video-responsive iframe,
.video-inside iframe,
.full-text iframe {
	display: block;
	max-width: 100%;
}

@media screen and (max-width: 760px) {
	.page__scr ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (max-width: 400px) {
	.full-text iframe {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}


/* DLE 20: {custom} может вставить #dle-content внутрь карусели.
   Без этого первый постер становится шириной во весь контейнер. */
.has-carousel:not(.owl-carousel) > #dle-content {
	display: flex;
	overflow: hidden;
	gap: 20px;
	width: 100%;
}
.has-carousel:not(.owl-carousel) > #dle-content > * {
	flex-shrink: 0;
}
.has-carousel:not(.owl-carousel) > #dle-content > .item {
	width: calc((100% - 100px)/6);
}
@media screen and (max-width: 1220px) {
	.has-carousel:not(.owl-carousel) > #dle-content > .item {width: calc((100% - 80px)/5);}
}
@media screen and (max-width: 950px) {
	.has-carousel:not(.owl-carousel) > #dle-content > .item {width: calc((100% - 60px)/4);}
}
@media screen and (max-width: 760px) {
	.has-carousel:not(.owl-carousel) > #dle-content > .item {width: calc((100% - 40px)/3);}
}
@media screen and (max-width: 470px) {
	.has-carousel:not(.owl-carousel) > #dle-content > .item {width: calc((100% - 20px)/2);}
}