/*
 * Listing gallery — na_listing_gallery() in inc/listing-gallery.php.
 *
 * Consumes the --na-* design tokens; declares nothing of its own beyond layout.
 * Listings scope resolves --na-accent to Deep Ocean #0A3D62.
 *
 * ⚠ EVERY BUTTON IN HERE RESTATES ITS OWN COLORS ON :hover/:focus/:active.
 * Kadence's global.min.css sets button:focus/:active from --global-palette-btn-*
 * (the retired brand green), and its INLINE per-page CSS adds button:hover. A
 * class+pseudo selector is (0,2,0) and beats Kadence's (0,1,1), so no !important
 * is needed — but the rules must exist, or green bleeds through on tap and hover.
 * Color AND border-color, on all three states. This has bitten three times.
 */

.na-lg { display: block; }

/* ---- stage -------------------------------------------------------------- */
/* The box is DECLARED. The feed carries no image dimensions, so without this
   the stage would resize to each photo and shift the page on every navigation. */
.na-lg__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--na-radius);
	overflow: hidden;
	background: var(--na-hair-soft);
}

/* No photos (Q51 #16): the same stage, its words centered. */
.na-lg--none .na-lg__stage { display: grid; place-items: center; }
.na-lg .na-lg__none { margin: 0; font: 500 var(--na-ui)/1.4 var(--na-sans); color: var(--na-ink-soft); }

.na-lg__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cross-fade on swap. The image element is reused, so this is a class toggle
   rather than two stacked layers. */
.na-lg__img { transition: opacity 160ms ease; }
.na-lg.is-swapping .na-lg__img { opacity: .55; }

/* ---- controls ----------------------------------------------------------- */
.na-lg__nav,
.na-lg__expand {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .55);
	background: rgba(26,24,20, .58);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	backdrop-filter: blur(2px);
}

/* The Kadence-leak guard. Do not remove; see the file header. */
.na-lg__nav:hover, .na-lg__nav:focus, .na-lg__nav:active,
.na-lg__expand:hover, .na-lg__expand:focus, .na-lg__expand:active {
	background: rgba(26,24,20, .82);
	color: #fff;
	border-color: #fff;
}


.na-lg__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: var(--na-radius-pill);
	font-size: 1.6rem;  /* ds-allow: glyph control — no scale step lands near it, and snapping would change the mark */
	line-height: 1;
}

.na-lg__nav--prev { left: 12px; }
.na-lg__nav--next { right: 12px; }

.na-lg__expand {
	right: 12px;
	bottom: 12px;
	width: 38px;
	height: 38px;
	border-radius: var(--na-radius-sm);
	font-size: 1.05rem;  /* ds-allow: glyph control — no scale step lands near it, and snapping would change the mark */
}

/* BOTTOM-LEFT, not top-right. Save + For Your Consideration overlay the stage
   at top:9px/right:9px — the corner they occupy on a card — and the counter
   collided with them. The action controls keep the card position; a status
   readout moves. Bottom-left also pairs it with the expand control at
   bottom-right, so the stage reads as: actions above, gallery controls below. */
.na-lg__count {
	position: absolute;
	bottom: 12px;
	left: 12px;
	margin: 0;
	background: rgba(26,24,20, .78);
	color: #fff;
	font-size: var(--na-eyebrow);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	padding: 5px 11px;
	border-radius: var(--na-radius-pill);
}

/* Visible to assistive tech only. */
.na-lg__live {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- thumbnails --------------------------------------------------------- */
.na-lg__thumbs {
	display: flex;
	gap: 8px;
	margin: 8px 0 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.na-lg__thumb {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.na-lg__thumblink {
	display: block;
	width: 108px;
	aspect-ratio: 4 / 3;
	border-radius: var(--na-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--na-hair-soft);
	line-height: 0;
}
/* The thumbnail strip scrolls (overflow:auto) with no room around it, which clips an
   outside ring — so the one focus ring is drawn inside the edge (2026-09-30). */
.na-lg__thumblink{ --na-focus-off: -4px; --na-focus-shadow: inset 0 0 0 2px var(--na-focus-band); }

.na-lg__thumblink img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.na-lg__thumb.is-active .na-lg__thumblink { border-color: var(--na-accent); }
.na-lg__thumblink:hover { border-color: var(--na-accent); }

/* ---- lightbox ----------------------------------------------------------- */
.na-lgbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(12, 14, 15, .96);
	display: flex;
	flex-direction: column;
	padding: 16px;
	gap: 12px;
}

.na-lgbox[hidden] { display: none; }

.na-lgbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: #fff;
	font-size: var(--na-eyebrow);
	font-variant-numeric: tabular-nums;
}

.na-lgbox__cap {
	flex: 1;
	min-width: 0;
	color: rgba(255, 255, 255, .78);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.na-lgbox__close {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
	border-radius: var(--na-radius-sm);
	padding: 7px 13px;
	font-size: var(--na-eyebrow);
	font-weight: 700;
	cursor: pointer;
	flex: 0 0 auto;
}

.na-lgbox__close:hover, .na-lgbox__close:focus, .na-lgbox__close:active {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border-color: #fff;
}

.na-lgbox__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.na-lgbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.na-lgbox .na-lg__nav { background: rgba(26,24,20, .72); }

/* ---- the phone viewer (Q52.27, his "Yes, build it" 2026-11-09) ----------------
   On a touch screen (na-listing-gallery.js adds the class): edge to edge on black, into
   the strips beside the notch (viewport-fit=cover while it is open), the controls float
   over the photo clear of the notch and fade when idle; the photo fills the width upright
   and the height sideways, never cropped. The script handles pinch, double-tap and the
   swipe down, so the browser's own touch handling is off inside it. */
.na-lgbox--immersive {
	padding: 0;
	gap: 0;
	background: #000;
	height: 100vh;
	height: 100dvh;
	touch-action: none;
	overscroll-behavior: contain;
}
.na-lgbox--immersive .na-lgbox__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.na-lgbox--immersive .na-lgbox__img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	will-change: transform;
}
.na-lgbox--immersive .na-lgbox__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left));
	background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}
.na-lgbox--immersive .na-lgbox__close { min-height: 44px; padding: 9px 16px; }
.na-lgbox--immersive .na-lg__nav--prev { left: max(8px, env(safe-area-inset-left)); }
.na-lgbox--immersive .na-lg__nav--next { right: max(8px, env(safe-area-inset-right)); }
.na-lgbox--immersive .na-lgbox__bar,
.na-lgbox--immersive .na-lg__nav {
	transition: opacity .25s ease;
}
.na-lgbox--immersive.is-idle .na-lgbox__bar,
.na-lgbox--immersive.is-idle .na-lg__nav {
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.na-lgbox--immersive .na-lgbox__bar,
	.na-lgbox--immersive .na-lg__nav { transition: none; }
}
/* True full screen (Android, iPad, computers): the element fills the screen itself. */
.na-lgbox:fullscreen { width: 100vw; height: 100vh; }

@media (max-width: 600px) {
	.na-lg__nav { width: 38px; height: 38px; }
	.na-lg__thumblink { width: 84px; }
}

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