/**
 * MrStiff Product Gallery — front-end styles.
 *
 * Layout: a thumbnail rail (left/right/top/bottom) beside a large featured
 * media stage. Uses CSS custom properties fed by the renderer:
 *   --mspg-thumb-size, --mspg-thumbs-visible, --mspg-speed.
 */

.mspg-gallery {
	--mspg-gap: 10px;
	--mspg-thumb-size: 101px;
	--mspg-thumbs-visible: 5;
	--mspg-speed: 400ms;
	--mspg-border: #e6e6e6;
	--mspg-accent: #1f1f1f;
	--mspg-radius: 10px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.mspg-gallery *,
.mspg-gallery *::before,
.mspg-gallery *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Inner layout / positions
 * ---------------------------------------------------------------------- */
.mspg-gallery__inner {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* Left (default): thumbs then featured, side by side. */
.mspg-gallery--pos-left .mspg-gallery__inner {
	flex-direction: row;
}

/* Right: featured then thumbs. */
.mspg-gallery--pos-right .mspg-gallery__inner {
	flex-direction: row-reverse;
}

/* Top: thumbs above featured. */
.mspg-gallery--pos-top .mspg-gallery__inner {
	flex-direction: column;
}

/* Bottom: featured above thumbs. */
.mspg-gallery--pos-bottom .mspg-gallery__inner {
	flex-direction: column-reverse;
}

/* -------------------------------------------------------------------------
 * Thumbnail rail
 * ---------------------------------------------------------------------- */
.mspg-thumbs {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
}

.mspg-gallery--pos-left .mspg-thumbs,
.mspg-gallery--pos-right .mspg-thumbs {
	flex-direction: column;
	width: calc(var(--mspg-thumb-size) + 4px);
}

.mspg-gallery--pos-top .mspg-thumbs,
.mspg-gallery--pos-bottom .mspg-thumbs {
	flex-direction: row;
	width: 100%;
}

.mspg-thumbs__viewport {
	overflow: hidden;
	flex: 1 1 auto;
	max-width: 100%;
}

/* Vertical rail: fixed viewport height = N thumbnails. */
.mspg-gallery--pos-left .mspg-thumbs__viewport,
.mspg-gallery--pos-right .mspg-thumbs__viewport {
	width: 100%;
	height: calc(var(--mspg-thumbs-visible) * (var(--mspg-thumb-size) + var(--mspg-gap)) - var(--mspg-gap));
}

.mspg-thumbs__track {
	display: flex;
	gap: var(--mspg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform var(--mspg-speed) ease;
	will-change: transform;
}

.mspg-gallery--pos-left .mspg-thumbs__track,
.mspg-gallery--pos-right .mspg-thumbs__track {
	flex-direction: column;
}

.mspg-gallery--pos-top .mspg-thumbs__track,
.mspg-gallery--pos-bottom .mspg-thumbs__track {
	flex-direction: row;
}

/* -------------------------------------------------------------------------
 * Individual thumbnail
 * ---------------------------------------------------------------------- */
.mspg-thumb {
	position: relative;
	flex: 0 0 auto;
	width: var(--mspg-thumb-size);
	height: var(--mspg-thumb-size);
	cursor: pointer;
	outline: none;
}

.mspg-thumb__frame {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid var(--mspg-border);
	border-radius: var(--mspg-radius);
	overflow: hidden;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.mspg-thumb img,
.mspg-thumb__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	background: #000;
}

.mspg-thumb img {
	object-fit: contain;
	background: transparent;
}

.mspg-thumb:hover .mspg-thumb__frame {
	border-color: #b8b8b8;
}

.mspg-thumb.is-active .mspg-thumb__frame {
	border-color: var(--mspg-accent);
	box-shadow: 0 0 0 1px var(--mspg-accent);
}

.mspg-thumb:focus-visible .mspg-thumb__frame {
	border-color: var(--mspg-accent);
	box-shadow: 0 0 0 2px rgba(31, 31, 31, .35);
}

/* Video thumbnail play badge. */
.mspg-thumb__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.mspg-thumb__play svg {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

/* -------------------------------------------------------------------------
 * Navigation arrows
 * ---------------------------------------------------------------------- */
.mspg-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--mspg-border);
	border-radius: 8px;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.mspg-nav:hover {
	background: var(--mspg-accent);
	color: #fff;
}

.mspg-nav[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.mspg-nav[hidden] {
	display: none;
}

/* Horizontal rail arrows point left / right. */
.mspg-gallery--pos-top .mspg-nav,
.mspg-gallery--pos-bottom .mspg-nav {
	width: 26px;
	height: 34px;
}

.mspg-gallery--pos-top .mspg-nav--prev svg,
.mspg-gallery--pos-bottom .mspg-nav--prev svg {
	transform: rotate(-90deg);
}

.mspg-gallery--pos-top .mspg-nav--next svg,
.mspg-gallery--pos-bottom .mspg-nav--next svg {
	transform: rotate(-90deg);
}

/* -------------------------------------------------------------------------
 * Featured stage
 * ---------------------------------------------------------------------- */
.mspg-featured {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.mspg-featured__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid var(--mspg-border);
	border-radius: var(--mspg-radius);
	overflow: hidden;
}

.mspg-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--mspg-speed) ease;
}

.mspg-slide.is-active {
	opacity: 1;
	z-index: 2;
}

/* Slide (horizontal) transition variant. */
.mspg-effect-slide .mspg-slide {
	transition: opacity var(--mspg-speed) ease, transform var(--mspg-speed) ease;
	transform: translateX(30px);
}

.mspg-effect-slide .mspg-slide.is-active {
	transform: translateX(0);
}

.mspg-effect-slide .mspg-slide.is-leaving {
	transform: translateX(-30px);
}

.mspg-effect-none .mspg-slide {
	transition: none;
}

.mspg-featured__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	user-select: none;
}

/* First-frame poster for self-hosted videos without a poster image. */
.mspg-featured__poster {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
}

.mspg-has-zoom .mspg-zoomable {
	cursor: zoom-in;
	transition: transform .12s ease-out;
	will-change: transform;
}

.mspg-featured__stage.is-zooming {
	cursor: zoom-in;
}

/* Hover "+" affordance: hide the native cursor and follow the pointer. */
.mspg-featured__stage.mspg-cursor-none,
.mspg-featured__stage.mspg-cursor-none .mspg-featured__img,
.mspg-featured__stage.mspg-cursor-none .mspg-slide {
	cursor: none;
}

.mspg-plus {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #1f1f1f;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	pointer-events: none;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .15s ease, transform .15s ease;
}

.mspg-plus.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* Embedded / self-hosted video fills the stage. */
.mspg-slide iframe,
.mspg-slide video {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: #000;
}

.mspg-featured__videoholder {
	width: 100%;
	height: 100%;
	background: #000;
}

/* Featured play button (over a video poster). */
.mspg-featured__playbtn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: transform .15s ease;
}

.mspg-featured__playbtn:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

/* Lightbox expand button. */
.mspg-featured__expand {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .85);
	color: #222;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease, background .18s ease;
}

.mspg-featured:hover .mspg-featured__expand {
	opacity: 1;
}

.mspg-featured__expand:hover {
	background: #fff;
}

/* -------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */
.mspg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 15, 15, .92);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

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

.mspg-lightbox__stage {
	position: relative;
	max-width: 90vw;
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mspg-lightbox__stage img {
	max-width: 90vw;
	max-height: 88vh;
	object-fit: contain;
}

.mspg-lightbox__stage iframe,
.mspg-lightbox__stage video {
	width: min(90vw, 1100px);
	height: min(88vh, 620px);
	border: 0;
	background: #000;
}

.mspg-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.mspg-lightbox__btn:hover {
	background: rgba(255, 255, 255, .28);
}

.mspg-lightbox__close {
	top: 4vh;
	right: 4vw;
}

.mspg-lightbox__prev {
	left: 3vw;
	top: 50%;
	transform: translateY(-50%);
}

.mspg-lightbox__next {
	right: 3vw;
	top: 50%;
	transform: translateY(-50%);
}

/* -------------------------------------------------------------------------
 * Misc
 * ---------------------------------------------------------------------- */
.mspg-notice {
	padding: 14px 16px;
	border: 1px dashed var(--mspg-border);
	border-radius: var(--mspg-radius);
	color: #777;
	font-size: 14px;
	background: #fafafa;
}

.mspg-gallery .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.mspg-gallery.is-loading .mspg-featured__stage {
	opacity: .6;
}

/* -------------------------------------------------------------------------
 * Responsive — tablet & mobile force a stacked layout with a bottom rail.
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.mspg-gallery--pos-left .mspg-thumbs,
	.mspg-gallery--pos-right .mspg-thumbs {
		width: calc(var(--mspg-thumb-size) + 4px);
	}
}

@media (max-width: 768px) {
	.mspg-gallery__inner {
		flex-direction: column !important;
		gap: 12px;
	}

	.mspg-thumbs {
		flex-direction: row !important;
		width: 100% !important;
	}

	.mspg-thumbs__viewport {
		width: 100% !important;
		height: auto !important;
	}

	.mspg-thumbs__track {
		flex-direction: row !important;
	}

	.mspg-nav {
		width: 26px;
		height: 34px;
	}

	.mspg-nav svg {
		transform: rotate(-90deg);
	}

	.mspg-featured__expand {
		opacity: 1;
	}
}

@media (max-width: 480px) {
	.mspg-gallery {
		--mspg-thumb-size: 64px;
	}
}