/**
 * Ограничение размера квадратных/вертикальных изображений на десктопе.
 * Эффект стекла — только в области картинки, с отступами от пунктирного бордера.
 * Текст вложений — мелкий, под стеклом с отступом.
 * Вложения на всю ширину контейнера.
 * @version 20260218
 */

/* Текст во вложениях — мелкий (text-xs), как раньше */
.attachbox .file dd,
.attachbox .thumbnail dd {
	font-size: 0.75rem;
	line-height: 1.25rem;
}
.content .inline-attachment .file dd,
.content .inline-attachment .thumbnail dd {
	font-size: 0.75rem;
	line-height: 1.25rem;
}

/* Контейнер вложений на всю ширину */
.attachbox {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.attachbox .attachments {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: block; /* Переопределяем inline-block из шаблона */
}

/* Все блоки с картинкой или видео на всю ширину */
.attachbox dl.thumbnail {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.attachbox dl.file:has(.attach-image),
.attachbox dl.file:has(.attach-video) {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
/* Fallback для браузеров без :has() - используем классы из шаблона */
.attachbox dl.file .attach-image,
.attachbox dl.file .attach-video {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
/* Обычные файлы (ссылка) — по контенту */
.attachbox dl.file:not(:has(.attach-image)):not(:has(.attach-video)) {
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
}

.content .inline-attachment dl.thumbnail,
.content .inline-attachment dl.file:has(.attach-image),
.content .inline-attachment dl.file:has(.attach-video) {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Картинка/видео по центру */
.attachbox dl.thumbnail dt,
.attachbox dl.file:has(.attach-image) dt,
.attachbox dl.file:has(.attach-video) dt {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}
.attachbox dl.file .attach-image,
.attachbox dl.file .attach-video {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}
.attachbox dl dt a.flex {
	display: flex;
	justify-content: center;
}

.content .inline-attachment dl.thumbnail dt,
.content .inline-attachment dl.file:has(.attach-image) dt,
.content .inline-attachment dl.file:has(.attach-video) dt {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	/* Ограничение размера только для квадратных/вертикальных */
	.attachbox img.img-constrained,
	.content img.img-constrained,
	.attachbox video.img-constrained,
	.content video.img-constrained {
		max-width: 480px;
		max-height: 70vh;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	/* Ограниченные вложения: dl только контейнер */
	.attachbox dl.file--constrained,
	.attachbox dl[class*="file--constrained"],
	.attachbox dl.thumbnail.file--constrained,
	.attachbox dl.thumbnail[class*="file--constrained"],
	.content .inline-attachment dl.file--constrained,
	.content .inline-attachment dl[class*="file--constrained"],
	.content dl.file--constrained,
	.content dl[class*="file--constrained"] {
		position: relative;
	}

	/* Стекло только в области картинки (dt), с отступом от пунктирного бордера */
	.attachbox dl.file--constrained dt:not(:has(video)),
	.attachbox dl[class*="file--constrained"] dt:not(:has(video)),
	.attachbox dl.thumbnail.file--constrained dt,
	.attachbox dl.thumbnail[class*="file--constrained"] dt,
	.content .inline-attachment dl.file--constrained dt:not(:has(video)),
	.content .inline-attachment dl[class*="file--constrained"] dt:not(:has(video)),
	.content dl.file--constrained dt:not(:has(video)),
	.content dl[class*="file--constrained"] dt:not(:has(video)) {
		position: relative;
		overflow: hidden;
		padding: 1rem;
		margin-bottom: 0.75rem;
		border-radius: 0.5rem;
		min-height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(10px) saturate(180%);
		-webkit-backdrop-filter: blur(10px) saturate(180%);
	}

	html.dark .attachbox dl.file--constrained dt:not(:has(video)),
	html.dark .attachbox dl[class*="file--constrained"] dt:not(:has(video)),
	html.dark .attachbox dl.thumbnail.file--constrained dt,
	html.dark .attachbox dl.thumbnail[class*="file--constrained"] dt,
	html.dark .content .inline-attachment dl.file--constrained dt:not(:has(video)),
	html.dark .content .inline-attachment dl[class*="file--constrained"] dt:not(:has(video)),
	html.dark .content dl.file--constrained dt:not(:has(video)),
	html.dark .content dl[class*="file--constrained"] dt:not(:has(video)) {
		background: rgba(0, 0, 0, 0.25);
	}

	/* Размытый фон стекла — только для картинок (не для видео) */
	.attachbox dl.file--constrained dt:not(:has(video))::before,
	.attachbox dl[class*="file--constrained"] dt:not(:has(video))::before,
	.attachbox dl.thumbnail.file--constrained dt::before,
	.attachbox dl.thumbnail[class*="file--constrained"] dt::before,
	.content .inline-attachment dl.file--constrained dt:not(:has(video))::before,
	.content .inline-attachment dl[class*="file--constrained"] dt:not(:has(video))::before,
	.content dl.file--constrained dt:not(:has(video))::before,
	.content dl[class*="file--constrained"] dt:not(:has(video))::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: var(--bg-image, none);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		filter: blur(20px) brightness(0.8);
		opacity: 0.5;
		z-index: 0;
		pointer-events: none;
	}

	/* Видео: фон в цвет темы, без эффекта стекла */
	.attachbox dl.file--constrained dt:has(video),
	.attachbox dl[class*="file--constrained"] dt:has(video),
	.content .inline-attachment dl.file--constrained dt:has(video),
	.content .inline-attachment dl[class*="file--constrained"] dt:has(video),
	.content dl.file--constrained dt:has(video),
	.content dl[class*="file--constrained"] dt:has(video) {
		position: relative;
		overflow: hidden;
		padding: 1rem;
		margin-bottom: 0.75rem;
		border-radius: 0.5rem;
		min-height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f3f4f6;
	}

	html.dark .attachbox dl.file--constrained dt:has(video),
	html.dark .attachbox dl[class*="file--constrained"] dt:has(video),
	html.dark .content .inline-attachment dl.file--constrained dt:has(video),
	html.dark .content .inline-attachment dl[class*="file--constrained"] dt:has(video),
	html.dark .content dl.file--constrained dt:has(video),
	html.dark .content dl[class*="file--constrained"] dt:has(video) {
		background: #1b2335;
	}

	/* Fallback .glass-bg скрыт, используем только dt::before */
	.attachbox dl.file--constrained .glass-bg,
	.attachbox dl[class*="file--constrained"] .glass-bg,
	.attachbox dl.thumbnail.file--constrained .glass-bg,
	.attachbox dl.thumbnail[class*="file--constrained"] .glass-bg,
	.content .inline-attachment dl.file--constrained .glass-bg,
	.content .inline-attachment dl[class*="file--constrained"] .glass-bg,
	.content dl.file--constrained .glass-bg,
	.content dl[class*="file--constrained"] .glass-bg {
		display: none;
	}
	.attachbox dl.file--constrained:has(video) .glass-bg,
	.attachbox dl[class*="file--constrained"]:has(video) .glass-bg,
	.content .inline-attachment dl.file--constrained:has(video) .glass-bg,
	.content .inline-attachment dl[class*="file--constrained"]:has(video) .glass-bg,
	.content dl.file--constrained:has(video) .glass-bg,
	.content dl[class*="file--constrained"]:has(video) .glass-bg {
		display: none !important;
	}

	/* Картинка и контент поверх фона внутри dt */
	.attachbox dl.file--constrained dt img,
	.attachbox dl[class*="file--constrained"] dt img,
	.attachbox dl.thumbnail.file--constrained dt img,
	.attachbox dl.thumbnail[class*="file--constrained"] dt img,
	.attachbox dl.file--constrained dt video,
	.attachbox dl[class*="file--constrained"] dt video,
	.content .inline-attachment dl.file--constrained dt img,
	.content .inline-attachment dl[class*="file--constrained"] dt img,
	.content .inline-attachment dl.file--constrained dt video,
	.content .inline-attachment dl[class*="file--constrained"] dt video,
	.content dl.file--constrained dt img,
	.content dl[class*="file--constrained"] dt img,
	.content dl.file--constrained dt video,
	.content dl[class*="file--constrained"] dt video,
	.attachbox dl.file--constrained dt a,
	.attachbox dl[class*="file--constrained"] dt a,
	.attachbox dl.thumbnail.file--constrained dt a,
	.attachbox dl.thumbnail[class*="file--constrained"] dt a {
		position: relative;
		z-index: 1;
	}

	/* Текст под стеклом, с отступом */
	.attachbox dl.file--constrained dd,
	.attachbox dl[class*="file--constrained"] dd,
	.attachbox dl.thumbnail.file--constrained dd,
	.attachbox dl.thumbnail[class*="file--constrained"] dd,
	.content .inline-attachment dl.file--constrained dd,
	.content .inline-attachment dl[class*="file--constrained"] dd,
	.content dl.file--constrained dd,
	.content dl[class*="file--constrained"] dd {
		position: relative;
		z-index: 1;
		margin-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.attachbox dl.file--constrained dd:first-of-type,
	.attachbox dl[class*="file--constrained"] dd:first-of-type,
	.attachbox dl.thumbnail.file--constrained dd:first-of-type,
	.attachbox dl.thumbnail[class*="file--constrained"] dd:first-of-type,
	.content .inline-attachment dl.file--constrained dd:first-of-type,
	.content .inline-attachment dl[class*="file--constrained"] dd:first-of-type,
	.content dl.file--constrained dd:first-of-type,
	.content dl[class*="file--constrained"] dd:first-of-type {
		margin-top: 0;
	}
	.attachbox dl.file--constrained dt + dd,
	.attachbox dl[class*="file--constrained"] dt + dd,
	.attachbox dl.thumbnail.file--constrained dt + dd,
	.attachbox dl.thumbnail[class*="file--constrained"] dt + dd,
	.content .inline-attachment dl.file--constrained dt + dd,
	.content .inline-attachment dl[class*="file--constrained"] dt + dd,
	.content dl.file--constrained dt + dd,
	.content dl[class*="file--constrained"] dt + dd {
		margin-top: 0.25rem;
	}
}

/* Мобильная версия: вложения на всю ширину поста */
@media (max-width: 767px) {
	/* Растягиваем .attachbox на всю ширину поста, компенсируя padding поста */
	.post .attachbox {
		margin-left: -1.5rem;
		margin-right: -1.5rem;
		width: calc(100% + 3rem);
		max-width: calc(100% + 3rem);
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		box-sizing: border-box;
	}
	.attachbox .attachments {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		max-width: 100%;
	}
}