/**
 * گالری چندرسانه‌ای پیشرفته — استایل فرانت‌اند.
 * نسخه 1.1.2 — engsinyor
 *
 * هر مقداری که از پنل المنتور قابل تغییر است به‌صورت CSS Variable نوشته شده
 * تا کنترل‌های پنل فقط یک متغیر را ست کنند و درگیر specificity نشوند.
 *
 * @package AMMG
 */

/* =========================================================================
 * ۱. ریشه و کادر گالری
 * ====================================================================== */

.ammg-wrapper {
	--ammg-transition: 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--ammg-preview-fade: 650ms;
	--ammg-fit: contain;

	position: relative;
}

.ammg-wrapper--fit-cover {
	--ammg-fit: cover;
}

.ammg-wrapper--framed {
	padding: 18px;
	border: 1px solid #e6e8ec;
	border-radius: 18px;
	background-color: #ffffff;
}

/* =========================================================================
 * ۲. گرید
 * ====================================================================== */

.ammg-grid {
	--ammg-columns: 4;
	--ammg-gap: 14px;
	--ammg-row-height: 190px;

	display: grid;
	grid-template-columns: repeat(var(--ammg-columns), minmax(0, 1fr));
	grid-auto-rows: var(--ammg-row-height);
	grid-auto-flow: dense; /* اجازه می‌دهد آیتم‌های کوچک، جای خالی را پر کنند. */
	gap: var(--ammg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* =========================================================================
 * ۳. آیتم‌ها
 * ====================================================================== */

.ammg-item {
	--ammg-item-bg: #f2f3f5;
	--ammg-overlay: rgba(10, 12, 18, 0.18);
	--ammg-overlay-hover: rgba(10, 12, 18, 0.55);
	--ammg-play-color: #ffffff;
	--ammg-play-bg: rgba(15, 18, 25, 0.45);
	--ammg-play-size: 58px;

	position: relative;
	overflow: hidden;
	min-width: 0;
	border-radius: 12px;
	background-color: var(--ammg-item-bg);
	grid-column: span 1;
	grid-row: span 1;
}

.ammg-item.is-hidden {
	display: none;
}

/* اندازه‌های دستی (در حالت هوشمند، جاوااسکریپت این‌ها را مدیریت می‌کند). */
.ammg-item--wide {
	grid-column: span 2;
}

.ammg-item--tall {
	grid-row: span 2;
}

.ammg-item--large {
	grid-column: span 2;
	grid-row: span 2;
}

/* حالت «الگوی نامتقارن ثابت». */
.ammg-wrapper--layout-pattern .ammg-item--auto:nth-child(7n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.ammg-wrapper--layout-pattern .ammg-item--auto:nth-child(7n + 4) {
	grid-row: span 2;
}

.ammg-wrapper--layout-pattern .ammg-item--auto:nth-child(7n + 6) {
	grid-column: span 2;
}

/* حالت یکنواخت. */
.ammg-wrapper--layout-uniform .ammg-item {
	grid-column: span 1;
	grid-row: span 1;
}

/* دکمه‌ی پوشاننده‌ی آیتم؛ استایل پیش‌فرض مرورگر کاملاً حذف می‌شود. */
.ammg-item__trigger {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

div.ammg-item__trigger {
	cursor: default;
}

.ammg-item__trigger:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

.ammg-item__media {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}

/* پس‌زمینه‌ی محو (فقط در حالت «کامل / contain»). */
.ammg-item__backdrop {
	position: absolute;
	inset: -8%;
	display: block;
	background-position: center;
	background-size: cover;
	filter: blur(22px) saturate(1.15);
	opacity: 0.55;
	transform: scale(1.1);
	pointer-events: none;
}

.ammg-item__img {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: var(--ammg-fit);
	object-position: center;
	transition: transform var(--ammg-transition), opacity 500ms ease;
}

/* ظاهرشدن نرم تصویر پس از بارگذاری (فقط وقتی جاوااسکریپت فعال است). */
.ammg-wrapper.is-js .ammg-item__img {
	opacity: 0;
}

.ammg-wrapper.is-js .ammg-item__img.is-loaded {
	opacity: 1;
}

.ammg-item.is-loading .ammg-item__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.45) 50%,
		rgba(255, 255, 255, 0) 70%
	);
	background-size: 220% 100%;
	animation: ammg-shimmer 1.5s linear infinite;
	pointer-events: none;
}

@keyframes ammg-shimmer {
	from {
		background-position: 140% 0;
	}

	to {
		background-position: -40% 0;
	}
}

.ammg-wrapper--zoom .ammg-item__trigger:hover .ammg-item__img,
.ammg-wrapper--zoom .ammg-item__trigger:focus-visible .ammg-item__img {
	transform: scale(1.05);
}

.ammg-item__overlay {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--ammg-overlay);
	transition: background-color var(--ammg-transition);
	pointer-events: none;
}

.ammg-item__trigger:hover .ammg-item__overlay,
.ammg-item__trigger:focus-visible .ammg-item__overlay {
	background-color: var(--ammg-overlay-hover);
}

/* =========================================================================
 * ۴. پیش‌نمایش خودکار ویدیو
 * ====================================================================== */

.ammg-item__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--ammg-fit);
	object-position: center;
	opacity: 0;
	transition: opacity var(--ammg-preview-fade) ease;
	pointer-events: none;
	background-color: transparent;
}

.ammg-item.is-previewing .ammg-item__preview {
	opacity: 1;
}

.ammg-wrapper .ammg-item.is-previewing .ammg-item__img,
.ammg-wrapper.is-js .ammg-item.is-previewing .ammg-item__img.is-loaded {
	opacity: 0.001; /* جلوگیری از پرش رنگ هنگام محو شدن. */
	transition: opacity var(--ammg-preview-fade) ease;
}

.ammg-wrapper--hide-play-on-preview .ammg-item.is-previewing .ammg-item__play {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
}

/* نوار پیشرفت نازک پایین آیتم هنگام پیش‌نمایش. */
.ammg-item__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.22);
	opacity: 0;
	transition: opacity 260ms ease;
	pointer-events: none;
}

.ammg-item.is-previewing .ammg-item__progress {
	opacity: 1;
}

.ammg-item__progress span {
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	transform: scaleX(0);
	transform-origin: left center;
}

/* =========================================================================
 * ۵. آیکون پخش
 * ====================================================================== */

.ammg-item__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ammg-play-size);
	height: var(--ammg-play-size);
	border-radius: 50%;
	background-color: var(--ammg-play-bg);
	backdrop-filter: blur(3px);
	transform: translate(-50%, -50%);
	transition: transform var(--ammg-transition), background-color var(--ammg-transition),
		opacity var(--ammg-transition);
	pointer-events: none;
}

.ammg-item__play svg {
	width: 46%;
	height: 46%;
	margin-left: 6%; /* مرکز بصری مثلث. */
	fill: var(--ammg-play-color);
}

.ammg-item__trigger:hover .ammg-item__play,
.ammg-item__trigger:focus-visible .ammg-item__play {
	transform: translate(-50%, -50%) scale(1.1);
}

/* =========================================================================
 * ۶. عنوان آیتم
 * ====================================================================== */

.ammg-item__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 14px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.ammg-item__title {
	display: block;
	color: #ffffff;
	font-size: 15px;
	line-height: 1.5;
	word-break: break-word;
}

.ammg-wrapper--title-hover .ammg-item__content {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--ammg-transition), transform var(--ammg-transition);
}

.ammg-wrapper--title-hover .ammg-item__trigger:hover .ammg-item__content,
.ammg-wrapper--title-hover .ammg-item__trigger:focus-visible .ammg-item__content,
.ammg-wrapper--title-hover .ammg-item.is-previewing .ammg-item__content {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================================
 * ۷. ظاهر شدن آیتم‌های جدید
 * ====================================================================== */

.ammg-item.is-revealed {
	animation: ammg-reveal 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ammg-reveal {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
 * ۸. دکمه‌ها
 * ====================================================================== */

.ammg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.ammg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 30px;
	border: 0;
	border-radius: 10px;
	background-color: #16181f;
	color: #ffffff;
	font-size: 15px;
	line-height: 1.6;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color var(--ammg-transition), color var(--ammg-transition),
		border-color var(--ammg-transition), transform 160ms ease;
}

.ammg-button:hover,
.ammg-button:focus-visible {
	background-color: #39404f;
	color: #ffffff;
	text-decoration: none;
}

.ammg-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.ammg-button:active {
	transform: translateY(1px);
}

.ammg-button.is-hidden {
	display: none;
}

.ammg-button__count {
	opacity: 0.6;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.ammg-button__count:empty {
	display: none;
}

/* =========================================================================
 * ۹. لایت‌باکس
 * ====================================================================== */

.ammg-lightbox {
	--ammg-lb-backdrop: rgba(8, 9, 13, 0.94);
	--ammg-lb-ui: #f5f6f8;
	--ammg-lb-accent: #ffffff;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms ease, visibility 280ms ease;
}

.ammg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.ammg-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--ammg-lb-backdrop);
	backdrop-filter: blur(6px);
	cursor: zoom-out;
}

.ammg-lightbox__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: 1180px;
	max-height: 100%;
}

.ammg-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-height: calc(100vh - 210px);
	transform: scale(0.97);
	transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ammg-lightbox.is-open .ammg-lightbox__stage {
	transform: scale(1);
}

.ammg-lightbox__stage img,
.ammg-lightbox__stage video {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 210px);
	border-radius: 6px;
	background-color: #000000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ammg-lightbox__frame {
	position: relative;
	width: 100%;
	max-height: calc(100vh - 210px);
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background-color: #000000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ammg-lightbox__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@supports not (aspect-ratio: 16 / 9) {
	.ammg-lightbox__frame {
		padding-top: 56.25%;
	}
}

.ammg-lightbox__close,
.ammg-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--ammg-lb-ui);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 200ms ease, transform 200ms ease;
}

.ammg-lightbox__close:hover,
.ammg-lightbox__nav:hover,
.ammg-lightbox__close:focus-visible,
.ammg-lightbox__nav:focus-visible {
	background-color: rgba(255, 255, 255, 0.26);
}

.ammg-lightbox__close:focus-visible,
.ammg-lightbox__nav:focus-visible {
	outline: 3px solid var(--ammg-lb-ui);
	outline-offset: 2px;
}

.ammg-lightbox__close svg,
.ammg-lightbox__nav svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.ammg-lightbox__close {
	top: -56px;
	right: 0;
}

.ammg-lightbox__nav--prev {
	top: 50%;
	left: -60px;
	transform: translateY(-50%);
}

.ammg-lightbox__nav--next {
	top: 50%;
	right: -60px;
	transform: translateY(-50%);
}

.ammg-lightbox__nav[hidden] {
	display: none;
}

.ammg-lightbox__caption {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	color: var(--ammg-lb-ui);
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.ammg-lightbox__counter {
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* نوار تصاویر کوچک. */
.ammg-lightbox__thumbs {
	display: flex;
	gap: 8px;
	max-width: 100%;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.ammg-lightbox__thumbs[hidden] {
	display: none;
}

.ammg-lightbox__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background-color: #2a2d36;
	background-position: center;
	background-size: cover;
	opacity: 0.45;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.ammg-lightbox__thumb:hover {
	opacity: 0.8;
}

.ammg-lightbox__thumb.is-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--ammg-lb-accent);
	transform: translateY(-2px);
}

.ammg-lightbox__thumb:focus-visible {
	outline: 2px solid var(--ammg-lb-accent);
	outline-offset: 2px;
}

body.ammg-lightbox-open {
	overflow: hidden;
}

/* =========================================================================
 * ۱۰. راست‌چین (RTL)
 * ====================================================================== */

[dir="rtl"] .ammg-item__play svg {
	margin-right: 6%;
	margin-left: 0;
	transform: scaleX(-1);
}

[dir="rtl"] .ammg-item__progress span {
	transform-origin: right center;
}

[dir="rtl"] .ammg-lightbox__close {
	right: auto;
	left: 0;
}

/* =========================================================================
 * ۱۱. واکنش‌گرایی
 * ====================================================================== */

@media (max-width: 1024px) {
	.ammg-lightbox__nav--prev {
		left: 8px;
	}

	.ammg-lightbox__nav--next {
		right: 8px;
	}

	.ammg-lightbox__close {
		top: -52px;
		right: 8px;
	}

	[dir="rtl"] .ammg-lightbox__close {
		right: auto;
		left: 8px;
	}
}

@media (max-width: 767px) {
	.ammg-grid {
		--ammg-columns: 2;
	}

	.ammg-wrapper--framed {
		padding: 12px;
	}

	/* در دو ستون، آیتم ۲×۲ کل صفحه را می‌گیرد؛ الگوی ثابت ساده‌تر می‌شود. */
	.ammg-wrapper--layout-pattern .ammg-item--auto:nth-child(7n + 1),
	.ammg-wrapper--layout-pattern .ammg-item--auto:nth-child(7n + 4),
	.ammg-wrapper--layout-pattern .ammg-item--auto:nth-child(7n + 6) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.ammg-wrapper--layout-pattern .ammg-item--auto:nth-child(5n + 1) {
		grid-column: span 2;
	}

	.ammg-lightbox {
		padding: 16px;
	}

	.ammg-lightbox__stage,
	.ammg-lightbox__stage img,
	.ammg-lightbox__stage video,
	.ammg-lightbox__frame {
		max-height: calc(100vh - 230px);
	}

	.ammg-lightbox__thumb {
		width: 52px;
		height: 38px;
	}
}

/* =========================================================================
 * ۱۲. ترجیحات دسترس‌پذیری
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ammg-wrapper,
	.ammg-lightbox {
		--ammg-transition: 0ms;
	}

	.ammg-item.is-revealed {
		animation: none;
	}

	.ammg-item.is-loading .ammg-item__media::after {
		animation: none;
	}

	.ammg-item__img,
	.ammg-item__play,
	.ammg-item__content,
	.ammg-item__preview,
	.ammg-lightbox,
	.ammg-lightbox__stage,
	.ammg-button {
		transition: none !important;
	}

	.ammg-wrapper--zoom .ammg-item__trigger:hover .ammg-item__img {
		transform: none;
	}
}