/*
 * Image lightbox (CC-Prompt-43, 8-28-26): the prototype's click-to-enlarge
 * overlay, rebuilt in the house design system.
 *
 * WHAT THE PROTOTYPE DID (src/app/components/Lightbox.tsx, identical in the
 * 8-5 and 8-11 trees): a Radix dialog mounted once at the root; any capture
 * opted in by wrapping itself in <Zoomable>, which rendered a real button
 * with a quiet zoom-in badge that appeared on hover and focus. Clicking
 * opened a full-viewport overlay over a black 85 percent backdrop with a
 * blur, a mono caption line carrying the image's alt text at top left, a
 * bordered close button at top right, and the picture centred at 80vh by
 * 80vw with a 2px radius. A click anywhere on the picture or the space
 * around it closed. The overlay faded in over 180ms ease-out and did not
 * animate at all under prefers-reduced-motion (theme.css tw-lightbox-in).
 * Nothing else about the prototype crossed over: no copy, no data, no tract.
 *
 * COLOR. A lightbox is a dark room in BOTH themes, so the backdrop and the
 * chrome CANNOT ride the live cadastral tokens, which invert. They are
 * pinned here as component tokens to the LIGHT-theme value of
 * --e-global-color-cadastral-ink (oklch(20.3% 0.008 248.2), kit 7) plus an
 * alpha, so the surface is still the design system's ink rather than an
 * invented black, and it stays dark when the reader flips to dark mode.
 * Everything else (radius, the close affordance's border and focus ring)
 * uses the house 2px radius and the survey red.
 */

.bl-lb {
	/* Component tokens. See the COLOR note above for why these do not
	   re-declare under html[data-bl-theme="dark"]. */
	--bl-lb-backdrop: oklch(20.3% 0.008 248.2 / 0.88);
	--bl-lb-chrome: oklch(100% 0 0 / 0.72);
	--bl-lb-chrome-strong: oklch(100% 0 0);
	--bl-lb-chrome-line: oklch(100% 0 0 / 0.28);
	--bl-lb-radius: 2px;

	position: fixed;
	inset: 0;
	z-index: 100000; /* over the sticky header and the progress bar (document layer 3) */
	display: flex;
	flex-direction: column;
	background: var(--bl-lb-backdrop);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	cursor: zoom-out;
}

.bl-lb[hidden] {
	display: none;
}

/* The bar is the one region that does not close on click. */
.bl-lb-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	cursor: default;
}

.bl-lb-cap {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--e-global-typography-bl-label-font-family), ui-monospace, monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bl-lb-chrome);
}

/*
 * DOUBLE-CLASSED ON PURPOSE. Hello Elementor's reset.css styles bare buttons,
 * and its `button:focus, button:hover` rule is (0,1,1), so a single-class rule
 * loses to it. Measured before this was fixed: the close control opened with a
 * solid #cc3366 background because it takes focus the moment the overlay
 * opens. This is the house quirk already recorded for kit button rules; the
 * answer is the same one, clear the specificity and state the background in
 * every state rather than leaving it to be inherited.
 */
.bl-lb .bl-lb-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	background-color: transparent;
	border: 1px solid var(--bl-lb-chrome-line);
	border-radius: var(--bl-lb-radius);
	color: var(--bl-lb-chrome);
	cursor: pointer;
	transition: border-color 120ms ease-out, color 120ms ease-out;
}

.bl-lb .bl-lb-close:hover,
.bl-lb .bl-lb-close:focus,
.bl-lb .bl-lb-close:focus-visible {
	background-color: transparent;
	border-color: var(--bl-lb-chrome-strong);
	color: var(--bl-lb-chrome-strong);
}

.bl-lb .bl-lb-close:focus-visible {
	outline: 2px solid var(--bl-lb-chrome-strong);
	outline-offset: 2px;
}

.bl-lb .bl-lb-close svg {
	display: block;
	width: 16px;
	height: 16px;
}

.bl-lb-stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0 20px 20px;
	min-height: 0;
}

/*
 * NEVER UPSCALE. Width and height stay auto, so the picture renders at its
 * natural size and the max-* pair only ever shrinks it. A small figure opens
 * small rather than being stretched into softness.
 */
.bl-lb-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 80vw;
	max-height: 80vh;
	border-radius: var(--bl-lb-radius);
	object-fit: contain;
}

/*
 * DELIBERATE DEVIATION FROM THE PROTOTYPE, phone only. At 375px the
 * prototype's 80vw is 300px, which is NARROWER than the figure already is in
 * the article, so an 80vw lightbox on a phone shows less than the page does.
 * Below the tablet breakpoint the stage opens up instead.
 */
@media (max-width: 767px) {
	.bl-lb-stage {
		padding: 0 8px 12px;
	}

	.bl-lb-img {
		max-width: 94vw;
		max-height: 86vh;
	}
}

/* House animation system: the overlay arrives and gets out of the way.
   Matches the prototype's 180ms ease-out opacity beat exactly. */
@keyframes bl-lb-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.bl-lb {
	animation: bl-lb-in 180ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.bl-lb {
		animation: none;
	}

	.bl-lb-close {
		transition: none;
	}
}

/* ------------------------------------------------- the page-side trigger --- */

/*
 * bl-lightbox.js stamps .bl-lb-ready on every figure it has bound and makes
 * the visible image itself the control (role=button, tabindex 0), so NO POST
 * BODY IS EDITED and CC-38 can keep writing figures underneath this.
 */
.bl-lb-ready {
	position: relative;
}

.bl-lb-ready img[role="button"] {
	cursor: zoom-in;
}

.bl-lb-ready img[role="button"]:focus-visible {
	outline: 2px solid var(--e-global-color-cadastral-red);
	outline-offset: 2px;
}

/* The quiet zoom-in badge, per the prototype: invisible until hover or
   keyboard focus, so a page of captures does not read as a page of buttons.
   Painted on the figure because a replaced element cannot carry ::after. */
.bl-lb-ready::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: var(--bl-lb-radius, 2px);
	background-color: var(--e-global-color-cadastral-panel);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	/* lucide zoom-in, inlined so the badge costs no request. currentColor is
	   not available to a background image, so the stroke is the graphite
	   token's light value; the panel behind it flips with the theme. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease-out;
}

html[data-bl-theme="dark"] .bl-lb-ready::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b0bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	html:not([data-bl-theme="light"]) .bl-lb-ready::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b0bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
	}
}

.bl-lb-ready:hover::after,
.bl-lb-ready:focus-within::after {
	opacity: 1;
}

/* A touch device has no hover, so the badge would never appear and the
   affordance would be invisible. Show it steadily but quietly there. */
@media (hover: none) {
	.bl-lb-ready::after {
		opacity: 0.7;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-lb-ready::after {
		transition: none;
	}
}

/*
 * SCROLL LOCK WITHOUT LAYOUT SHIFT. Hiding the document's overflow removes
 * the scrollbar, which widens the viewport and shoves every centred column
 * and every right-aligned header control sideways. bl-lightbox.js measures
 * the scrollbar into --bl-lb-sbw and the padding below gives the width back.
 * The header needs its own copy because it is position:fixed and therefore
 * sized from the viewport, not from the padded root box.
 */
html.bl-lb-open {
	overflow: hidden;
	padding-right: var(--bl-lb-sbw, 0px);
}

html.bl-lb-open [data-elementor-type="header"],
html.bl-lb-open .bl-progress {
	padding-right: var(--bl-lb-sbw, 0px);
}