/* === Эффект увеличения картинок (Image Zoom Overlay) === */
.image-zoom-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	background-color: rgba(0, 0, 0, 0.75);
	/* Полупрозрачный черный задник */
	z-index: 9999;
	/* Поверх абсолютно всего, включая любые контекстные меню */
	display: none;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
	animation: zoomFadeIn 0.15s ease-out;
}

.image-zoom-overlay.active {
	display: flex;
}

.image-zoom-overlay img {
	max-width: 95vw;
	max-height: 95dvh;
	object-fit: contain;
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-l);
	animation: zoomScaleIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes zoomScaleIn {
	from {
		transform: scale(0.95);
	}

	to {
		transform: scale(1);
	}
}

/* Курсор при наведении на увеличиваемые картинки */
.screen-content img:not(.tg-emoji):not(.att-preview-thumb),
.content-img,
.att-image img:not(.tg-emoji),
.kb-editor-right-preview img:not(.tg-emoji),
.media-wrapper img:not(.tg-emoji) {
	cursor: zoom-in;
	transition: opacity var(--anim-fast) ease;
}

/* Стили для сломанных изображений, замененных на заглушки */
img.img-load-error {
	max-width: 320px;
	width: 100%;
	height: auto;
	aspect-ratio: 240 / 130;
	object-fit: contain;
	margin: var(--size-4-4) auto;
	display: block;
}

/* Выравнивание по ширине для статей, тетрадей и обновлений только на десктопных экранах */
@media (min-width: 73.143rem) {
	.screen-content {
		text-align: justify;
	}

	.screen-content p,
	.screen-content div,
	.screen-content li {
		text-align: justify;
	}

	.screen-content h1,
	.screen-content h2,
	.screen-content h3,
	.screen-content h4,
	.screen-content h5,
	.screen-content h6 {
		text-align: left;
	}
}