@charset "UTF-8";
/**
 * gc-lightbox.css — Cairnstone free image lightbox (the "Classic"
 * visual function: dark scrim, framed centred image, bottom caption,
 * circular close + previous / next controls).
 *
 * Frontend overlay only. Namespaced under `.gc-lightbox` so it cannot
 * collide with theme or other-plugin lightbox styles.
 *
 * @package Gillish\Cairnstone
 */

/* The native <dialog> backdrop: a calm dark scrim, not pure black. */
.gc-lightbox::backdrop {
	background: rgba( 24, 26, 31, 0.82 );
}

dialog.gc-lightbox {
	/* Fill the viewport so the frame can be centred in it. A modal
	 * <dialog> gets `inset: 0` from the UA stylesheet, so a `width:auto`
	 * box stretches edge-to-edge and the inline-block frame falls to the
	 * top-left. Filling explicitly + flex-centring the frame (below) is
	 * the robust fix across browsers. */
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

/* Centre the frame both axes. Scoped to [open] so it never overrides the
 * UA `dialog:not([open]) { display: none }` for a closed dialog. */
dialog.gc-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gc-lightbox__frame {
	position: relative;
	display: inline-block;
	max-width: 92vw;
	max-height: 90vh;
	margin: 0;
	/* The thin white frame around the image (the "Classic" look). */
	border: 3px solid #fff;
	border-radius: 2px;
	box-shadow: 0 12px 48px rgba( 0, 0, 0, 0.55 );
	line-height: 0;
}

.gc-lightbox__image {
	display: block;
	max-width: 92vw;
	/* Leave room for the frame border + caption breathing space. */
	max-height: calc( 90vh - 6px );
	width: auto;
	height: auto;
	object-fit: contain;
}

.gc-lightbox__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin: 0;
	padding: 2.25rem 1rem 0.75rem;
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: start;
	/* Gradient scrim so the caption stays legible over any image. */
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.7 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
	pointer-events: none;
}

/* Circular controls: close (top-right) + previous / next (mid-side). */
.gc-lightbox__btn {
	position: fixed;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba( 20, 22, 27, 0.72 );
	color: #fff;
	cursor: pointer;
	transition: background-color 150ms ease-out, transform 150ms ease-out;
}

.gc-lightbox__btn:hover {
	background: rgba( 20, 22, 27, 0.92 );
}

.gc-lightbox__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* These four stay PHYSICAL on purpose, with an explicit RTL mirror below.
 * `env( safe-area-inset-* )` is a physical viewport value with no logical twin,
 * so `inset-inline-end` would pair the correct SIDE with the wrong notch: in RTL
 * the inline-end edge is the left one, and it would still be padded by the RIGHT
 * safe area. Swapping side and env var together is the only way to keep both
 * right. Close sits at inline-end; previous is inline-start and next inline-end,
 * so both nav arrows mirror — in RTL "previous" belongs on the right. */
.gc-lightbox__close {
	top: max( 1rem, env( safe-area-inset-top ) );
	right: max( 1rem, env( safe-area-inset-right ) );
}

[dir="rtl"] .gc-lightbox__close {
	right: auto;
	left: max( 1rem, env( safe-area-inset-left ) );
}

.gc-lightbox__nav {
	top: 50%;
	transform: translateY( -50% );
}

.gc-lightbox__nav:hover {
	transform: translateY( -50% ) scale( 1.06 );
}

.gc-lightbox__prev {
	left: max( 1rem, env( safe-area-inset-left ) );
}

[dir="rtl"] .gc-lightbox__prev {
	left: auto;
	right: max( 1rem, env( safe-area-inset-right ) );
}

.gc-lightbox__next {
	right: max( 1rem, env( safe-area-inset-right ) );
}

[dir="rtl"] .gc-lightbox__next {
	right: auto;
	left: max( 1rem, env( safe-area-inset-left ) );
}

/* Mirroring the buttons is only half of it: the chevrons inside are directional
 * glyphs, and an unflipped one points away from the way its button travels — in
 * RTL "next" sits on the left showing an arrow to the right. Flip the glyph, not
 * the button: `.gc-lightbox__nav` already carries `translateY( -50% )` for its
 * vertical centring, and overwriting that here would drop both arrows half their
 * height down the viewport. */
[dir="rtl"] .gc-lightbox__nav svg {
	transform: scaleX( -1 );
}

/* The trigger link wrapping a clickable image. */
.gc-lightbox-link {
	display: inline-block;
	cursor: zoom-in;
}

/* Entrance: a quiet fade. */
@media ( prefers-reduced-motion: no-preference ) {
	dialog.gc-lightbox[open] {
		animation: gc-lightbox-in 180ms cubic-bezier( 0.22, 1, 0.36, 1 );
	}

	dialog.gc-lightbox[open]::backdrop {
		animation: gc-lightbox-fade 180ms ease-out;
	}
}

@keyframes gc-lightbox-in {
	from { opacity: 0; transform: scale( 0.98 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

@keyframes gc-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Honour a reduced-motion request. The library rule - enforced by
 * ReducedMotionGateTest since 2026-08-28, whose first sweeps found this sheet
 * among the ungated or under-gated - is that every front-end sheet with motion
 * switches it off for visitors who ask. Placed AFTER the declarations it kills
 * and with selectors at least as specific as theirs: a gate above its target
 * loses on source order, a weaker one loses on specificity, and both read as
 * protection while doing nothing. */
@media (prefers-reduced-motion: reduce) {
    .gc-lightbox__btn {
        transition: none;
    }
}