/* The shared zoomable lightbox (handle `lwh-lightbox`, with js/lightbox.js)
   ---------------------------------------------------------------------------
   A native modal <dialog> showing one large picture that visitors can zoom
   and pan: acf/feature's alternate view (the Penthouse site plan) and
   acf/availability's floor plans. The markup is lwh_render_lightbox()
   (inc/lightbox.php). Moved here from blocks/feature/feature.css on
   2026-10-14 with the classes renamed (feature--lightbox-* -> lightbox--*)
   and nothing else changed. Notes: docs/feature-block.md ("Alternate view").

   Dmitriy, 2026-10-08: "a traditional lightbox", zoomable so a plan reads on
   a phone, with a blurred backdrop, at every screen size.

   Enqueued during block render, so like the block stylesheets it prints
   BEFORE reset.min.css and style.css: every rule here wins on specificity,
   never on order (header.md, "CSS order trap").
--------------------------------------------------------------------------- */

/* Trap: reset.min.css (a Bootstrap 4 reboot) lists `dialog` with the block
   elements as display: block, an author rule that beats the browser's own
   dialog:not([open]) { display: none } — every shut dialog would show. The
   reset line was corrected on 2026-10-08; this guard keeps the block safe
   whatever the reset says. */
.lightbox--dialog:not([open]) {
	display: none;
}

/* The dialog fills the screen, transparent, so the blurred backdrop shows all
   round the picture: a bar with the close button, the zoom viewport, the
   zoom controls. It sits in the top layer, so the section's z-index and
   overflow: clip don't reach it, but it still inherits the section's text
   styles (a panel centres its text on phones), hence the resets here. */
.lightbox--dialog {
	--lightbox-fg: var(--wp--preset--color--linen, #d7d0c7);
	--lightbox-bg: var(--wp--preset--color--deep-sea, #1b2632);
	/* Space kept clear either side of the picture at fit; js/lightbox.js
	   reads it when it measures the fit size. */
	--lightbox-gutter: 16px;

	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lightbox-fg);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: left;
	overflow: hidden;
	overscroll-behavior: contain;
}

.lightbox--dialog[open] {
	display: flex;
	flex-direction: column;
}

/* Deep Sea at 78%, blurred where backdrop-filter is supported; the tint
   alone carries it where it isn't. Literal colours: ::backdrop did not
   inherit custom properties in older engines. */
.lightbox--dialog::backdrop {
	background-color: rgba(27, 38, 50, 0.78);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.lightbox--bar {
	display: flex;
	flex: none;
	justify-content: flex-end;
	padding: 12px 12px 0;
}

.lightbox--close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--lightbox-fg);
	border-radius: 50%;
	background-color: rgba(27, 38, 50, 0.6);
	color: var(--lightbox-fg);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover only where there is a real hover: on a touch screen the tapped
   button stayed filled (Phase 7 audit NB-5, 2026-10-15). */
@media (hover: hover) {
	.lightbox--close:hover {
		background-color: var(--lightbox-fg);
		color: var(--lightbox-bg);
	}
}

.lightbox--close:focus-visible {
	outline: 2px solid var(--lightbox-fg);
	outline-offset: 3px;
}

.lightbox--icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

.lightbox--figure {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
}

/* The zoom viewport. Panning is its own native scrolling. touch-action:
   manipulation keeps panning and the browser's pinch, but drops its
   double-tap zoom, which js/lightbox.js takes over. overscroll-behavior stops
   a fling at the edge from chaining to the page. The stage is centred with
   auto margins rather than place-items: center, which would make the left
   and top of a zoomed picture unreachable. */
.lightbox--viewport {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	overflow: auto;
	overscroll-behavior: contain;
	touch-action: manipulation;
	scrollbar-width: thin;
	scrollbar-color: rgba(215, 208, 199, 0.5) transparent;
}

/* Keyboard focus only (it is focusable so the arrow keys pan): clear a ring
   on a click first, then add the theme's on :focus-visible. */
.lightbox--viewport:focus {
	outline: none;
}

.lightbox--viewport:focus-visible {
	outline: 2px solid var(--lightbox-fg);
	outline-offset: -4px;
}

/* js/lightbox.js sizes the stage (fit size x zoom); this is only its shape
   before the first measure. */
.lightbox--stage {
	flex: none;
	width: calc(100% - 2 * var(--lightbox-gutter));
	margin: auto;
}

.lightbox--image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	cursor: zoom-in;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

.lightbox--dialog.is-zoomed-mod .lightbox--image {
	cursor: grab;
}

.lightbox--viewport.is-dragging-mod .lightbox--image {
	cursor: grabbing;
}

/* The zoom controls: one pill in the arrow pill's shape (the small clipped
   corner), Linen on translucent Deep Sea, 48px targets. */
.lightbox--controls {
	display: flex;
	flex: none;
	justify-content: center;
	padding: 12px 16px 16px;
	padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.lightbox--zoom {
	display: flex;
	align-items: center;
	padding: 0 4px;
	border: 1px solid var(--lightbox-fg);
	border-radius: var(--lwh-clip-corner-sm, 10px) var(--lwh-clip-corner-sm, 10px) 0 var(--lwh-clip-corner-sm, 10px);
	background-color: rgba(27, 38, 50, 0.6);
}

.lightbox--btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.lightbox--btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.lightbox--btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
	border-radius: 4px;
}

.lightbox--level {
	display: block;
	min-width: 4.5ch;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
	text-align: center;
}

/* Page scroll lock while the dialog is open (js/lightbox.js). The gutter class
   is added only when the page has a classic scrollbar, so its width is kept
   and nothing shifts sideways. */
html.lwh-scroll-lock {
	overflow: hidden;
}

html.lwh-scroll-lock-gutter {
	scrollbar-gutter: stable;
}

/* A short fade in, only when motion is welcome; zoom steps are always
   instant. Without @starting-style support the dialog simply appears. */
@media (prefers-reduced-motion: no-preference) {
	.lightbox--dialog[open],
	.lightbox--dialog[open]::backdrop {
		transition: opacity 0.2s ease;
	}

	@starting-style {
		.lightbox--dialog[open],
		.lightbox--dialog[open]::backdrop {
			opacity: 0;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.lightbox--close {
		transition: none;
	}
}

@media (min-width: 992px) {
	/* The lightbox: a wider gutter at fit, and more air round the controls. */
	.lightbox--dialog {
		--lightbox-gutter: 48px;
	}

	.lightbox--bar {
		padding: 24px 24px 0;
	}

	.lightbox--controls {
		padding: 16px 24px 24px;
	}
}