/**
 * File: assets/css/components/media-frame.css
 * Description: Reusable media frame component for future page image/video polish.
 *
 * MAGIDA HUMAN MEDIA FOUNDATION PASS 23.5.0 REDO:
 * - Adds inert component classes only.
 * - No existing template uses these classes yet, so locked layouts remain untouched.
 * - Future page passes can opt in one page/section at a time.
 */

.magida-media-frame {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 26px;
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.08),
			rgba(255, 255, 255, 0.025)
		),
		rgba(7, 10, 24, 0.78);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.magida-media-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(7, 10, 24, 0.03), rgba(7, 10, 24, 0.42)),
		radial-gradient(
			circle at 16% 10%,
			rgba(108, 92, 255, 0.18),
			transparent 34%
		),
		radial-gradient(
			circle at 85% 90%,
			rgba(36, 196, 255, 0.14),
			transparent 32%
		);
}

.magida-media-frame img,
.magida-media-frame video {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	transform: translateZ(0);
}

.magida-media-frame--soft img,
.magida-media-frame--soft video {
	filter: saturate(0.92) contrast(1.04) brightness(0.86);
}

.magida-media-frame--compact img,
.magida-media-frame--compact video {
	min-height: 220px;
}

.magida-media-frame--tall img,
.magida-media-frame--tall video {
	min-height: 420px;
}

.magida-media-frame__caption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: calc(100% - 36px);
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 999px;
	background: rgba(6, 9, 20, 0.68);
	backdrop-filter: blur(14px);
	color: var(--magida-text-soft);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 680px) {
	.magida-media-frame {
		border-radius: 20px;
	}

	.magida-media-frame img,
	.magida-media-frame video {
		min-height: 220px;
	}

	.magida-media-frame--tall img,
	.magida-media-frame--tall video {
		min-height: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.magida-media-frame video {
		animation: none;
	}
}