/* Snipe Media Gallery */
.smg {
	--smg-columns: 3;
	--smg-gap: 12px;
	--smg-ratio: 1 / 1;
	--smg-overlay: rgba(0, 0, 0, .25);
	--smg-play-size: 64px;
	--smg-play-color: #fff;
	--smg-play-bg: rgba(0, 0, 0, .55);
}

/* Layouts */
.smg--grid {
	display: grid;
	grid-template-columns: repeat(var(--smg-columns), minmax(0, 1fr));
	gap: var(--smg-gap);
}
.smg--masonry {
	column-count: var(--smg-columns);
	column-gap: var(--smg-gap);
}
.smg--masonry .smg__item {
	break-inside: avoid;
	margin-bottom: var(--smg-gap);
}

.smg .smg__item { margin: 0; }

/* Trigger: reset, ook tegen theme-buttonstijlen (bv. Hello Elementor) */
.smg .smg__trigger,
.smg .smg__trigger:hover,
.smg .smg__trigger:focus {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}
.smg .smg__trigger--static { cursor: default; }
.smg .smg__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Media */
.smg__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #000;
	isolation: isolate;
}
.smg--grid .smg__media { aspect-ratio: var(--smg-ratio); }

.smg .smg__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	transition: transform .45s ease;
}
.smg--grid .smg__img {
	height: 100%;
	object-fit: cover;
}
.smg__img--empty { aspect-ratio: 16 / 9; }

/* Hover */
.smg__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--smg-overlay);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.smg .smg__trigger:not(.smg__trigger--static):hover .smg__media::after,
.smg .smg__trigger:not(.smg__trigger--static):focus-visible .smg__media::after { opacity: 1; }
.smg--hover-zoom .smg__trigger:not(.smg__trigger--static):hover .smg__img { transform: scale(1.05); }

/* Play-icoon */
.smg__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--smg-play-size);
	height: var(--smg-play-size);
	border-radius: 50%;
	background: var(--smg-play-bg);
	color: var(--smg-play-color);
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
	pointer-events: none;
}
.smg__play svg {
	width: 45%;
	height: 45%;
	margin-left: 8%;
	fill: currentColor;
}
.smg .smg__trigger:hover .smg__play { transform: translate(-50%, -50%) scale(1.08); }

.smg__caption { margin-top: .5em; }

/* Inline afspelen (lightbox uit) */
.smg--masonry .smg__item.is-playing .smg__media { aspect-ratio: 16 / 9; }
.smg__media .smg__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: #000;
}

/* ------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------- */
html.smg-lb-open { overflow: hidden; }

.smg-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 72px 24px;
	background: var(--smg-lb-bg, rgba(12, 12, 12, .94));
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.smg-lb.is-open {
	opacity: 1;
	visibility: visible;
}

.smg-lb__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	max-width: 1400px;
}
.smg-lb__stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
}
.smg-lb__stage img,
.smg-lb__stage video {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.smg-lb__stage iframe {
	display: block;
	width: 100%;
	max-width: calc((100vh - 140px) * 16 / 9);
	aspect-ratio: 16 / 9;
	border: 0;
	background: #000;
}

.smg-lb__meta {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	min-height: 2.5rem;
	padding-top: .75rem;
	color: rgba(255, 255, 255, .85);
	font-size: .95rem;
	line-height: 1.4;
}
.smg-lb__caption { margin: 0; }
.smg-lb__count {
	margin-left: auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	opacity: .7;
}

/* Knoppen, met reset tegen theme-stijlen */
.smg-lb .smg-lb__btn,
.smg-lb .smg-lb__btn:hover,
.smg-lb .smg-lb__btn:focus {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}
.smg-lb .smg-lb__btn:hover { background: rgba(255, 255, 255, .2); }
.smg-lb .smg-lb__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.smg-lb__btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.smg-lb .smg-lb__close { top: 12px; right: 12px; }
.smg-lb .smg-lb__prev { top: 50%; left: 12px; transform: translateY(-50%); }
.smg-lb .smg-lb__next { top: 50%; right: 12px; transform: translateY(-50%); }
.smg-lb.is-single .smg-lb__prev,
.smg-lb.is-single .smg-lb__next { display: none; }

@media (max-width: 767px) {
	.smg-lb { padding: 60px 8px 16px; }
	.smg-lb .smg-lb__prev,
	.smg-lb .smg-lb__next {
		top: auto;
		bottom: 12px;
		transform: none;
	}
	.smg-lb__meta { padding-bottom: 56px; }
	.smg-lb__stage iframe { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.smg .smg__img,
	.smg__media::after,
	.smg__play,
	.smg-lb { transition: none; }
	.smg--hover-zoom .smg__trigger:hover .smg__img { transform: none; }
}