/*
 * Media Gallery Pro — Frontend Styles
 * Aesthetic: "Studio Dark" — Luxury / Refined
 * Uses CSS custom properties injected by PHP render_callback.
 */

/* ─────────────────────────────────────────────────────────────────
   Google Font Import
────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=Syne:wght@400;600&display=swap');

/* ─────────────────────────────────────────────────────────────────
   Design Tokens
────────────────────────────────────────────────────────────────── */
.mgp-gallery-wrap {
	--mgp-bg-deep: #0a0a0c;
	--mgp-bg-pane: #111114;
	--mgp-bg-thumb: #17171b;
	--mgp-bg-thumb-hover: #1e1e24;
	--mgp-border: rgba(255, 255, 255, 0.07);
	--mgp-border-active: rgba(138, 110, 255, 0.9);
	--mgp-accent: #8a6eff;
	--mgp-accent-soft: rgba(138, 110, 255, 0.15);
	--mgp-text: #e8e8ee;
	--mgp-text-dim: rgba(232, 232, 238, 0.5);
	--mgp-arrow-bg: rgba(10, 10, 12, 0.65);
	--mgp-arrow-hover: rgba(138, 110, 255, 0.85);
	--mgp-radius-pane: 12px;
	--mgp-radius-thumb: 8px;
	--mgp-thumb-size: 112px;
	--mgp-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
	--mgp-font-ui: 'DM Sans', system-ui, sans-serif;
	--mgp-font-display: 'Syne', system-ui, sans-serif;

	/* Injected by PHP: --mgp-container-width, --mgp-preview-width, --mgp-preview-height, --mgp-columns, --mgp-gap */
	font-family: var(--mgp-font-ui);
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mgp-container-width, 1000px);
	margin: 0 auto;
}

.mgp-gallery-wrap *,
.mgp-gallery-wrap *::before,
.mgp-gallery-wrap *::after {
	box-sizing: inherit;
}

/* ─────────────────────────────────────────────────────────────────
   Preview Pane
────────────────────────────────────────────────────────────────── */
.mgp-preview-pane {
	position: relative;
	width: 100%;
	max-width: var(--mgp-preview-width, 900px);
	aspect-ratio: var(--mgp-preview-aspect-ratio, 900 / 500);
	height: auto;
	margin: 0 auto 20px;
	background: var(--mgp-bg-pane);
	border: 1px solid var(--mgp-border);
	border-radius: var(--mgp-radius-pane);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Subtle grain texture via pseudo-element */
}

.mgp-preview-pane::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	border-radius: inherit;
	pointer-events: none;
	z-index: 5;
	opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────
   Media Elements inside Preview
────────────────────────────────────────────────────────────────── */
.mgp-preview-media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mgp-media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: opacity var(--mgp-transition);
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: none !important;
}

.mgp-media-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000 !important;
	display: block;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.mgp-media-iframe {
	width: 100%;
	height: 100%;
	border: none !important;
	display: block;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Fade-in animation when switching items */
.mgp-preview-media.mgp-is-switching {
	opacity: 0;
	transform: translateY(6px);
}

.mgp-preview-media {
	transition: opacity var(--mgp-transition), transform var(--mgp-transition);
}

/* ─────────────────────────────────────────────────────────────────
   Navigation Arrows
────────────────────────────────────────────────────────────────── */
.mgp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: var(--mgp-arrow-bg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--mgp-transition), border-color var(--mgp-transition), transform 200ms ease, opacity var(--mgp-transition);
	opacity: 0;
}

.mgp-preview-pane:hover .mgp-arrow,
.mgp-preview-pane:focus-within .mgp-arrow {
	opacity: 1;
}

.mgp-arrow:hover {
	background: var(--mgp-arrow-hover);
	border-color: var(--mgp-accent);
	transform: translateY(-50%) scale(1.08);
}

.mgp-arrow:focus-visible {
	outline: 2px solid var(--mgp-accent);
	outline-offset: 2px;
	opacity: 1;
}

.mgp-arrow-prev {
	left: 14px;
}

.mgp-arrow-next {
	right: 14px;
}

.mgp-arrow svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Preview Caption
────────────────────────────────────────────────────────────────── */
.mgp-preview-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 28px 20px 14px;
	font-family: var(--mgp-font-ui);
	font-size: 13px;
	font-weight: 400;
	color: var(--mgp-text);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
	pointer-events: none;
	z-index: 6;
	opacity: 0;
	transition: opacity var(--mgp-transition);
	line-height: 1.4;
}

.mgp-preview-caption:not(:empty) {
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   Thumbnails Strip
   ────────────────────────────────────────────────────────────────── */
.mgp-thumbnails-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mgp-gap, 8px);
	width: 100%;
	max-width: 100%;
	justify-content: center;
	margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────
   Individual Thumbnails
   ────────────────────────────────────────────────────────────────── */
.mgp-thumbnail {
	position: relative;
	width: var(--mgp-thumb-width, 112px);
	height: var(--mgp-thumb-height, 70px);
	border-radius: var(--mgp-radius-thumb);
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		border-color var(--mgp-transition),
		transform var(--mgp-transition),
		box-shadow var(--mgp-transition);
	outline: none;
	flex-shrink: 0;
	/* Corrigir vazamento de bordas arredondadas com transformações GPU em navegadores Webkit/Blink */
	will-change: transform;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
}

.mgp-thumbnail img,
.mgp-thumbnail video,
.mgp-thumbnail .mgp-thumb-video-element,
.mgp-thumbnail .mejs-container,
.mgp-thumbnail .mejs-inner,
.mgp-thumbnail .mejs-mediaelement,
.mgp-thumbnail .mejs-mediaelement video {
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}

.mgp-thumbnail:hover img,
.mgp-thumbnail:hover video,
.mgp-thumbnail:hover .mgp-thumb-video-element,
.mgp-thumbnail:hover .mejs-container {
	transform: scale(1.06) !important;
}

/* Hide MediaElement overlays/controls inside the small thumbnail */
.mgp-thumbnail .mejs-controls,
.mgp-thumbnail .mejs-layers,
.mgp-thumbnail .mejs-overlay,
.mgp-thumbnail .mejs-overlay-play {
	display: none !important;
}

.mgp-thumbnail .mejs-container,
.mgp-thumbnail .mejs-container * {
	box-sizing: border-box !important;
}

.mgp-thumbnail:hover {
	transform: translateY(-2px);
	border-color: rgba(138, 110, 255, 0.45);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(138, 110, 255, 0.2);
}

/* Active state — glow ring */
.mgp-thumbnail--active {
	border-color: var(--mgp-border-active);
	box-shadow:
		0 0 0 3px var(--mgp-accent-soft),
		0 8px 32px rgba(138, 110, 255, 0.25),
		0 4px 12px rgba(0, 0, 0, 0.5);
	transform: translateY(-2px);
}


.mgp-thumbnail:focus-visible {
	border-color: var(--mgp-accent);
	box-shadow: 0 0 0 3px var(--mgp-accent-soft);
}

/* ─────────────────────────────────────────────────────────────────
   Type Badges on Thumbnails
────────────────────────────────────────────────────────────────── */
.mgp-thumb-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 3;
	transition: opacity var(--mgp-transition);
}

.mgp-thumb-badge svg {
	width: 13px;
	height: 13px;
	fill: #fff;
	flex-shrink: 0;
}

.mgp-badge--image {
	background: rgba(30, 30, 36, 0.75);
	display: none;
}

/* Hide for images — cleaner look */
.mgp-badge--video {
	background: rgba(138, 110, 255, 0.75);
}

.mgp-badge--youtube {
	background: rgba(255, 0, 0, 0.80);
}

.mgp-badge--vimeo {
	background: rgba(26, 183, 234, 0.80);
}

.mgp-badge--google-drive {
	background: rgba(66, 133, 244, 0.80);
}

.mgp-badge--external_video {
	background: rgba(138, 110, 255, 0.75);
}

.mgp-badge--external_image {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────
   Placeholder (no thumbnail) — video-only
────────────────────────────────────────────────────────────────── */
.mgp-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	flex-direction: column;
	gap: 6px;
}

.mgp-thumb-placeholder svg {
	opacity: 0.7;
}

/* Image contain mode — object-fit: contain instead of cover */
.mgp-image-contain .mgp-media-img {
	object-fit: contain;
	background: #000;
}

/* Video fill mode — object-fit: cover instead of contain */
.mgp-video-fill .mgp-media-video {
	object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────
   Loading State on Preview
────────────────────────────────────────────────────────────────── */
.mgp-preview-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 8;
	background: var(--mgp-bg-pane);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.mgp-preview-loading.mgp-is-visible {
	opacity: 1;
}

.mgp-spinner {
	width: 28px;
	height: 28px;
	border: 2.5px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--mgp-accent);
	border-radius: 50%;
	animation: mgp-spin 0.7s linear infinite;
}

@keyframes mgp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ─────────────────────────────────────────────────────────────────
   Responsive
────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.mgp-preview-pane {
		border-radius: 8px;
	}

	.mgp-thumbnails-strip {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		gap: 6px;
	}

	.mgp-arrow {
		width: 38px;
		height: 38px;
		opacity: 1;
		/* Always visible on mobile */
	}

	.mgp-arrow svg {
		width: 16px;
		height: 16px;
	}

	.mgp-arrow-prev {
		left: 8px;
	}

	.mgp-arrow-next {
		right: 8px;
	}
}

@media (max-width: 480px) {
	.mgp-thumbnails-strip {
		grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
	}
}

/* ─────────────────────────────────────────────────────────────────
   Reduced Motion Accessibility
────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

	.mgp-thumbnail,
	.mgp-thumbnail img,
	.mgp-arrow,
	.mgp-preview-media,
	.mgp-preview-caption {
		transition: none;
		animation: none;
	}
}