/* Play button overlay on room slides + hidden Fancybox group anchors. */

.slider-banner-image figure.image,
.room-hero { position: relative; }

.room-gallery-trigger { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

/* Hero overlay on single-room pages sits at z-index: 9, so lift ours above it. */
.room-hero .room-gallery-trigger { z-index: 10; }

/* Larger button on the single-room hero. */
.room-hero .room-gallery-item--play { width: 120px; height: 120px; }

@media (max-width: 767px) {
	.room-hero .room-gallery-item--play { width: 80px; height: 80px; }
}

.room-gallery-item--play {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 96px;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	opacity: 0.92;
	transition: transform 0.2s ease, opacity 0.2s ease;
	outline: none;
}

.room-gallery-item--play:hover,
.room-gallery-item--play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
	opacity: 1;
	text-decoration: none;
}

.room-gallery-item--play svg { width: 100%; height: 100%; display: block; }

.room-gallery-item--play svg circle {
	fill: rgba(0, 0, 0, 0.55);
	stroke: #fff;
	stroke-width: 2;
}

.room-gallery-item--play svg polygon { fill: #fff; }

.room-gallery-item--hidden { display: none !important; }

/* Visually hidden label for screen readers. */
.room-gallery-trigger .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.room-gallery-item--play { width: 72px; height: 72px; }
}

/* ── Fancybox HTML5 video sizing ─────────────────────────────── */
.fancybox-slide--video > video {
	max-width: calc(100% - 88px);
	max-height: calc(100% - 88px);
	width: auto;
	height: auto;
	padding: 0;
	margin: auto;
	background: #000;
	object-fit: contain;
}

@media (max-width: 767px) {
	.fancybox-slide--video > video {
		max-width: calc(100% - 24px);
		max-height: calc(100% - 64px);
	}
}
