/**
 * THE SHARED LIGHTBOX — the dialog chrome, promoted 2026-08-14.
 *
 * PROMOTED BYTE-FOR-BYTE from `mykish-deal-template/style.css`. Every declaration below is that
 * file's, unchanged: this is a move, not a redesign, and a diff against the deal stylesheet should
 * show the rules identical.
 *
 * ⛔ WHAT IS DELIBERATELY **NOT** HERE: `.mk-villa-gallery`, `.mk-villa-gallery-count`,
 * `.mk-villa-media`, `.mk-feature-*` and `.mk-gallery-caption`. Those are the DEAL TEMPLATE's own
 * gallery strip — a horizontal scroll-snap carousel sized to a villa card — and they are not
 * lightbox chrome. Promoting them would have moved a deal-shaped component onto every future
 * surface and called it sharing. **The boundary is: what the OVERLAY needs travels; what the PAGE's
 * gallery needs stays with the page.** The activities gallery is a thumbnail grid and will bring its
 * own layout to this same overlay.
 *
 * ⛔ The deal and resort templates keep their own copies and must not be "cleaned up" — see the
 * header of `lightbox.js` and GLASS-PANEL LAW's note on the resort stylesheet.
 *
 * Colours are literal rather than tokenised, exactly as promoted: this overlay is a full-viewport
 * blackout that sits above every surface's palette, so it is not expressing brand colour and the
 * tokens would only add indirection.
 */

.mk-lightbox {
	position: fixed; inset: 0; z-index: 200; display: none;
	background: rgba(12,14,16,0.92); align-items: center; justify-content: center;
	padding: clamp(16px, 4vw, 56px);
}
.mk-lightbox.is-open { display: flex; }
.mk-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.mk-lightbox-close, .mk-lightbox-prev, .mk-lightbox-next {
	position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.26);
	width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.mk-lightbox-close { top: 18px; right: 18px; }
.mk-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.mk-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.mk-lightbox-close:focus-visible, .mk-lightbox-prev:focus-visible, .mk-lightbox-next:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mk-lightbox-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.8); font-size: 0.8rem; }
.mk-lightbox-caption {
	position: absolute; bottom: 44px; left: 0; right: 0; text-align: center;
	color: #fff; font-size: 0.98rem; font-weight: 600; padding: 0 64px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.mk-lightbox-caption[hidden] { display: none; }

/* The zoom affordance, so a surface consuming this component does not have to invent one. */
.mk-zoomable { cursor: zoom-in; }

/* ==================================================================================================
   LIGHTBOX CONTROLS OFF THE PHOTOGRAPH — PO ruling 2026-09-01.

   MEASURED DEFECT (390x844, gallery open): the photograph occupied x 16→374, y 288→556, while
   `.mk-lightbox-prev` sat at x 18→107 / y 399→445 and `.mk-lightbox-next` at x 283→372 / y 399→445 —
   BOTH INSIDE THE PHOTO ON BOTH AXES — and `1 of 4` sat at y 783→812, on top of the page's sticky
   ENQUIRE NOW bar showing through the overlay.

   ⛔ NOT INTERMITTENT, AND NOT A TUNING PROBLEM. The controls are positioned against the FULL-SCREEN
   OVERLAY, not against the image. On a phone the image is nearly viewport-width, so `left:18px` and
   `right:18px` are GUARANTEED to land on it, and `top:50%` of the overlay coincides with the
   vertically-centred image. It is deterministic on every phone.

   THE FIX: reserve a control band at the foot of the overlay, keep the image out of it, and put
   prev / count / next in it. The band clears the page's sticky CTA (~70px) so the counter no longer
   lands on ENQUIRE NOW.

   Scoped to <=700px, where the image approaches viewport width. On desktop the arrows already sit
   outside the image and that surface is unchanged.
   ================================================================================================== */
@media (max-width: 700px) {
	/* Reserve the band. The overlay centres its image, so padding-bottom lifts the photo clear. */
	.mk-lightbox { padding-bottom: 150px; }

	/* prev / next drop to the band, flanking the counter. `top`/`transform` are explicitly reset —
	   the base rules set both, and leaving either would keep the button on the photograph. */
	.mk-lightbox-prev,
	.mk-lightbox-next { top: auto; transform: none; bottom: 88px; }
	.mk-lightbox-prev { left: 24px; right: auto; }
	.mk-lightbox-next { right: 24px; left: auto; }

	/* Counter centred between them, optically aligned to the 46px buttons at 88–134px. */
	.mk-lightbox-count { bottom: 101px; left: 92px; right: 92px; }

	/* Caption sits ABOVE the control band rather than across it. */
	.mk-lightbox-caption { bottom: 150px; padding: 0 24px; }
}