/**
 * Gear single page — image/video carousel + lightbox.
 *
 * Extracted from an inline <style> block in single-rentl_gear.php
 * (2026-08-15) — moving it to a real, conditionally-enqueued file (only
 * on is_singular('rentl_gear'), see rentl_enqueue_assets() in
 * functions.php) makes it cacheable across every gear page a visitor
 * views instead of being re-downloaded raw on every single one, and
 * takes it off the render-blocking inline critical path. Deliberately
 * NOT folded into the theme's main numbered CSS chain (00-tokens.css
 * etc, combined+minified by rentl_get_css_bundle_url()) — that bundle
 * loads sitewide, and this is gear-single-specific; bundling it in
 * would bloat every other page's first load instead of only the pages
 * that actually need it, same reasoning as flatpickr's own conditional
 * enqueue right above this one in functions.php.
 */

.rentl-carousel__main { position: relative; border-radius: var(--rentl-radius); overflow: hidden; aspect-ratio: 4/3; background-color: var(--rentl-color-image-bg); }
.rentl-carousel__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; color: #fff; border: none;
	font-size: 48px; font-weight: 300; line-height: 1;
	cursor: pointer; padding: 0 var(--rentl-space-3);
	opacity: 0.35; transition: opacity 0.2s ease;
	text-shadow: 0 1px 6px rgba(0,0,0,0.7);
	z-index: 2; user-select: none;
}
.rentl-carousel__main:hover .rentl-carousel__arrow { opacity: 1; }
.rentl-carousel__arrow--prev { left: 0; }
.rentl-carousel__arrow--next { right: 0; }
#rentl-carousel-main-img { cursor: zoom-in; }
.rentl-carousel__zoom-hint {
	position: absolute; bottom: var(--rentl-space-3); left: var(--rentl-space-3);
	width: 30px; height: 30px; border-radius: 50%;
	background: rgba(0,0,0,0.45); color: #fff;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 2;
}
.rentl-carousel__main:hover .rentl-carousel__zoom-hint { opacity: 1; }

/* Overlaid on the image itself (a figure child, absolutely positioned)
   rather than a block line below it - this is what actually solves the
   thumbnail-row jump an earlier min-height version was working around:
   an overlay never participates in layout flow at all, tagged or not,
   so there's nothing for toggling its content to ever shift.
   A dark scrim bar rather than text-shadow/stroke on bare text -
   neither held up against every photo, since both only add contrast at
   the glyph edge and can still wash out against a background that's
   already dark or busy right where the text sits. A solid background
   behind the text guarantees contrast regardless of what's in the
   photo. Flush with the bottom edge and full-width - safe to run under
   the counter pill/zoom hint now, since z-index (below, both z-index:2)
   keeps them painted on top of this bar rather than needing to dodge
   them by position. The figure's own overflow:hidden + border-radius
   clips this bar's bottom corners to match automatically. */
.rentl-carousel__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	margin: 0; padding: var(--rentl-space-2) var(--rentl-space-3);
	/* The comment above this rule is right that z-index alone keeps the
	   counter pill/zoom hint painted on top, so nothing here structurally
	   breaks by running underneath them - but that's only true for pixels,
	   not for legibility. A caption long enough to reach the bottom-right
	   corner gets its actual words hidden under the counter badge
	   (single-rentl_gear.php's own inline-styled div, z-index: 2), not
	   just some empty margin - confirmed live, a real caption ("...item's
	   actual current condition...") lost several words that way. This
	   padding keeps caption text out of that always-covered strip in the
	   first place, rather than relying on it never reaching that far.
	   72px clears the badge's widest realistic width (two-digit counts on
	   both sides, e.g. "12 / 15") plus its own right offset, with a little
	   room to spare. Applied unconditionally rather than only when the
	   counter is actually present (a gallery of exactly 1 item has no
	   counter at all) - the caption wrapping very slightly earlier than
	   strictly necessary in that rare case is a fine trade for not needing
	   this rule to coordinate with item count. */
	padding-right: 72px;
	font-size: 12px; line-height: 1.4;
	color: #fff; background: rgba(0,0,0,0.5);
	pointer-events: none; z-index: 1; display: none;
}

/* Gallery video states on the main figure - three states, one class
   each: default (a plain image), .is-video-active (a video's own
   static thumbnail + a play button, cursor swapped from zoom-in to
   pointer since clicking plays rather than zooms), .is-playing (the
   real player - iframe for YouTube, video for a self-hosted file -
   injected only on click, see gear-carousel.js, with the thumbnail/
   button hidden underneath it). */
.rentl-carousel__play-btn {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(0,0,0,0.55); color: #fff; border: 2px solid rgba(255,255,255,0.85);
	display: none; align-items: center; justify-content: center;
	cursor: pointer; z-index: 2; transition: background 0.2s ease;
}
.rentl-carousel__play-btn svg { margin-left: 3px; }
.rentl-carousel__main:hover .rentl-carousel__play-btn { background: rgba(0,0,0,0.75); }
.rentl-carousel__main.is-video-active .rentl-carousel__play-btn { display: flex; }
.rentl-carousel__main.is-video-active .rentl-carousel__zoom-hint { display: none; }
.rentl-carousel__main.is-video-active #rentl-carousel-main-img { cursor: pointer; }
.rentl-carousel__main.is-playing #rentl-carousel-main-img,
.rentl-carousel__main.is-playing .rentl-carousel__play-btn { display: none; }
.rentl-carousel__main iframe, .rentl-carousel__main video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }

.rentl-carousel__thumb-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(0,0,0,0.6); color: #fff;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.rentl-carousel__thumb-play svg { margin-left: 1px; }

/* Thumbnail scroll nav - the strip itself is already swipeable on
   touch, but had no click-based way to reach thumbnails past the
   visible edge on desktop (scrollbar hidden via scrollbar-width:none).
   Hidden entirely when the strip doesn't actually overflow (see JS). */
/* display:flex always, visibility toggled by JS instead of display - see
   updateThumbNav() in gear-carousel.js. Used to be display:none/flex,
   which was harmless back when this ran as part of the original
   synchronous inline script (effectively before first paint either
   way). Now that the logic lives in a deferred external script, first
   paint happens sooner but this toggle now runs *after* it - flipping
   display post-paint measurably shifts the thumbnail strip's siblings
   (28px + gap on each side), where flipping visibility doesn't, since
   the space stays reserved in the flex row regardless of whether the
   strip actually overflows on a given viewport. */
.rentl-carousel__thumb-nav {
	flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
	border-radius: 50%; border: 1px solid var(--rentl-color-border-strong);
	background: var(--rentl-color-surface); color: var(--rentl-color-heading);
	font-size: 18px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	visibility: hidden;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.rentl-carousel__thumb-nav:hover:not(:disabled) { border-color: var(--rentl-orange); color: var(--rentl-orange); }
.rentl-carousel__thumb-nav:disabled { opacity: 0.3; cursor: default; }

/* Lightbox - native <dialog> for built-in focus trap + Escape-to-close,
   opened only from the active main image, never the thumbnails. Prev/
   next/swipe here call the exact same goTo() the carousel uses, so
   whichever image is showing when the lightbox closes is also what the
   main carousel and thumbnails are left on. */
.rentl-lightbox {
	border: none; padding: 0; background: transparent;
	width: fit-content; height: fit-content; max-width: 92vw; max-height: 92vh;
	/* 01-base.css's *{margin:0} reset kills the browser's own
	   dialog:modal auto-centering, so it's re-declared explicitly
	   here rather than relying on the UA default. */
	position: fixed; inset: 0; margin: auto;
}
.rentl-lightbox::backdrop { background: rgba(10,10,10,0.9); }
/* margin: 0 auto - the dialog's own width: fit-content (above) normally
   sizes to match this image, its usual widest child, which makes centering
   here invisible almost all the time. Breaks down the moment
   .rentl-lightbox__caption's own text (a full sentence, unwrapped) is wider
   than the image itself - a narrow/portrait photo especially - since the
   box then stretches to the caption's width instead, and this element,
   with no centering rule of its own, sat flush against the box's left edge
   rather than centered within it. Confirmed live via getBoundingClientRect:
   dialog and caption both centered exactly on the true viewport center,
   image measurably left of it. */
.rentl-lightbox__img { display: block; margin: 0 auto; max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--rentl-radius); }
/* Below the image here (normal flow, not an overlay like the main
   carousel's own) - the dialog's width/height:fit-content grows to
   include this line same as it already does for the <img>, so it just
   sits under the photo rather than needing any special positioning. No
   background scrim needed either: unlike the main carousel (where the
   caption sits over unpredictable photo content), this text renders
   against the lightbox's own near-black ::backdrop, which is
   consistently dark enough on its own for plain white text to read
   clearly. */
.rentl-lightbox__caption {
	display: none; margin: var(--rentl-space-2) auto 0; max-width: 92vw;
	font-size: 13px; line-height: 1.4; color: #fff; text-align: center;
}
.rentl-lightbox__close, .rentl-lightbox__arrow {
	position: fixed; background: rgba(0,0,0,0.5); color: #fff; border: none;
	cursor: pointer; z-index: 3; transition: opacity 0.2s ease; opacity: 0.85;
}
.rentl-lightbox__close:hover, .rentl-lightbox__arrow:hover { opacity: 1; }
.rentl-lightbox__close {
	top: var(--rentl-space-4); right: var(--rentl-space-4);
	width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1;
}
.rentl-lightbox__arrow {
	top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; border-radius: 50%; font-size: 30px; font-weight: 300; line-height: 1;
}
.rentl-lightbox__arrow--prev { left: var(--rentl-space-6); }
.rentl-lightbox__arrow--next { right: var(--rentl-space-6); }
.rentl-lightbox__counter {
	position: fixed; bottom: var(--rentl-space-4); left: 50%; transform: translateX(-50%);
	background: rgba(0,0,0,0.5); color: #fff; font-size: 13px; padding: 4px 12px; border-radius: 20px; z-index: 3;
}
@media (max-width: 40rem) {
	.rentl-lightbox__arrow { width: 42px; height: 42px; font-size: 22px; }
	.rentl-lightbox__arrow--prev { left: var(--rentl-space-2); }
	.rentl-lightbox__arrow--next { right: var(--rentl-space-2); }
}

/* Lightbox video states - same three-state shape as the main figure's
   own (.is-video-active / .is-playing), reusing rentl-lightbox__img
   itself for both a photo and a video's static thumbnail so there's
   only ever one <img> to manage, same as the main viewer's own
   #rentl-carousel-main-img. position: fixed to match the lightbox's
   other chrome (close/arrows/counter above), not position: absolute -
   those are already fixed to the viewport, not the dialog's own
   content box. */
.rentl-lightbox__play-btn {
	position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 72px; height: 72px; border-radius: 50%;
	background: rgba(0,0,0,0.55); color: #fff; border: 2px solid rgba(255,255,255,0.85);
	display: none; align-items: center; justify-content: center;
	cursor: pointer; z-index: 4;
}
.rentl-lightbox__play-btn svg { margin-left: 3px; }
.rentl-lightbox.is-video-active .rentl-lightbox__play-btn { display: flex; }
.rentl-lightbox.is-video-active .rentl-lightbox__img { cursor: pointer; }
/* rentl-lightbox__img's normal sizing (width/height: auto, capped by
   max-width/max-height) renders at each image's own real pixel
   dimensions - fine for a photo, since a real product photo is large
   enough to fill most of that space anyway, but wrong for a video's
   thumbnail: YouTube's hqdefault.jpg is a fixed small 480x360 file, so
   it rendered at that tiny native size instead of looking "regular"
   next to the photos. Sized explicitly to match the iframe's own
   footprint below instead, so there's no size jump the moment
   playback actually starts. */
.rentl-lightbox.is-video-active .rentl-lightbox__img {
	width: min(92vw, 960px); height: min(88vh, 540px);
	object-fit: contain;
}
.rentl-lightbox__iframe {
	display: block; width: min(92vw, 960px); height: min(88vh, 540px);
	border: 0; border-radius: var(--rentl-radius);
	/* object-fit/background do nothing for an <iframe> (YouTube handles
	   its own internal scaling) but matter for a <video> - this class
	   is shared by both, see playLightboxVideo() in gear-carousel.js. */
	object-fit: contain; background: #000;
}
.rentl-lightbox.is-playing .rentl-lightbox__img,
.rentl-lightbox.is-playing .rentl-lightbox__play-btn { display: none; }