/* BookSesh Card Gallery Preview — crossfade + swipe skin (PREVIEW-ONLY, pages 15188/15191)
 * Only ever applied to a card's photo <a> when JS has added .bksesh-cgp-enhanced to it
 * (i.e. that listing has a real Voxel gallery with >1 image). Single-image cards never
 * receive this class, so this stylesheet has zero visible effect on them. */

.bksesh-cgp-enhanced {
	position: relative;
	display: block;
	touch-action: pan-y;
}

/* The FIRST slide is the card's ORIGINAL <img> (same node, untouched src/attrs) and stays
   in normal flow, still inside the original <a>, so it keeps defining the card's photo box
   height exactly as before AND keeps that <a>'s click/navigation behaviour completely
   unchanged — nothing here needs to guess/duplicate the theme's own aspect-ratio rule.

   FIX (owner directive 2026-09-14, "still chopped" round): the first slide used to carry an
   UNCONDITIONAL `:first-child { opacity:1 !important }` rule that kept it fully opaque at ALL
   times, regardless of whether it was the active slide. For 2-image galleries that happened to
   look OK (the only other layer sat right on top of it), but for any gallery with 3+ images it
   meant slide #1 stayed permanently visible UNDERNEATH every other transition — so cycling from
   slide 2 -> slide 3 briefly blended slide 1 back into the mix as both overlays crossed through
   partial opacity, reading as a colour "chop"/flash every cycle. That rule is now REMOVED
   entirely: every slide (including the first) is driven purely by `.is-active`, so at any
   instant exactly one slide is at opacity 1 and the other N-1 are at opacity 0 (already settled,
   not mid-transition). JS (showSlide()) flips `.is-active` off the outgoing slide and onto the
   incoming slide in the SAME synchronous pass, so both opacity transitions below start on the
   same frame — a genuine simultaneous two-layer cross-dissolve, not a swap-then-fade.

   Fade is deliberately slow/gentle (owner directive): ease-in-out, tuned to feel like a soft,
   buttery dissolve rather than a snap — comfortably slower than half the autoplay interval so
   consecutive transitions never overlap. will-change:opacity hints the compositor to keep this
   on the GPU (opacity-only, no layout/paint work) for a smooth 60fps fade on mobile too.

   ROOT-CAUSE FIX (owner directive 2026-09-14, "STILL choppy 3x" round — diagnosed by
   frame-by-frame filmstrip + per-frame computed-opacity capture, mobile 402 + desktop 1440):
   the two-layer opacity mechanics were already flawless (per-frame opacity sum stayed exactly
   1.000, monotonic out 1->0 / in 0->1, no third-slide bleed, no layout shift, all slides
   pre-loaded), BUT the crossfade was completing in ~200ms, not the intended 1300ms — a
   near-instant SNAP, which is the "chop" the owner kept seeing (especially on mobile). CDP
   CSS.getMatchedStylesForNode proved the card template's OWN Elementor rule
   `.elementor-12428 .elementor-element.elementor-element-b6b2133 img { transition-duration:.2s }`
   (specificity 0,3,1) was OVERRIDING our `transition-duration:1300ms` (specificity 0,2,0):
   only `opacity` carried `!important` here, `transition` did not, so Elementor's longhand won
   and every dissolve collapsed to 0.2s. The single mid-frame 50/50 "proof" used before looks
   identical at ANY duration, so it never exposed this. FIX: make our transition win outright
   with `!important` (beats the non-important Elementor longhand regardless of specificity), and
   promote each slide to its own GPU layer (translateZ(0)+backface-visibility) so the genuinely
   longer 1300ms fade composites smoothly on mobile. Opacity-only transition — no layout/paint
   property is animated, so no jank. */
.bksesh-cgp-enhanced .bksesh-cgp-slide {
	opacity: 0 !important; /* !important: beats the theme's own ".elementor-element-b6b2133:hover img{opacity:.9}" rule so inactive slides never peek through on hover */
	/* !important on transition too: without it the card template's Elementor rule
	   `.elementor-12428 .elementor-element-b6b2133 img{transition-duration:.2s}` (0,3,1) beats
	   this (0,2,0) and snaps the fade to 200ms. This forces the intended gentle 1300ms dissolve. */
	transition: opacity 1300ms ease-in-out !important;
	will-change: opacity;
	transform: translateZ(0); /* own GPU compositing layer -> smooth opacity fade on mobile */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.bksesh-cgp-enhanced .bksesh-cgp-slide.is-active {
	opacity: 1 !important;
}

.bksesh-cgp-enhanced .bksesh-cgp-slide:not(:first-child) {
	position: absolute;
	inset: 0;
	pointer-events: none; /* overlay slides never intercept clicks/taps — the original <a>'s img underneath always gets them */
}

/* NOTE: the first (original) slide intentionally keeps its DEFAULT pointer-events (auto) —
   it's the one still living inside the real <a>, so tapping it must keep navigating there. */

.bksesh-cgp-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	z-index: 3;
	pointer-events: none;
}

/* NOTE (owner directive 2026-09-14): the story-style tap-zone rules (.bksesh-cgp-tapzone /
   --prev / --next) that lived here were REMOVED together with their JS (attachTapZones() in
   card-gallery-preview.js). Those zones were two full-height, 50%-width transparent <button>s
   stacked at z-index:4 — ABOVE the slides/dots — covering the entire thumbnail, so every tap
   was captured by them (preventDefault + stopPropagation) before it could ever reach the
   card's real <a href> underneath, which is what was blocking navigation to the listing. The
   dots indicator above stays passive (pointer-events:none) and the auto-crossfade is
   unaffected — thumbnail taps now fall straight through to the native card link. See the
   .bak-tapremoval-* backup alongside this file for the removed rules verbatim. */

.bksesh-cgp-dots .bksesh-cgp-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	transition: background 200ms ease, transform 200ms ease;
	transform: scale(1);
}

.bksesh-cgp-dots .bksesh-cgp-dot.is-active {
	background: #ffffff;
	transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
	.bksesh-cgp-enhanced .bksesh-cgp-slide {
		/* !important so it still wins now that the base rule above is !important — reduced-motion
		   users keep an effectively instant swap, never the 1300ms fade. */
		transition: opacity 1ms linear !important;
	}
}

/* ============================================================
 * MOBILE — BOOK NOW size + "Home-based venue" row placement
 * (owner directive, folded into this preview module — NOT a change
 * to booksesh-wfh-badge.php or the page's own cloned inline <style>,
 * both of which stay untouched; this is a scoped override loaded
 * ONLY on the two gated preview pages). Desktop (>820px) untouched:
 * no rules here apply above the breakpoint.
 * ============================================================ */
@media (max-width: 820px) {
	/* BOOK NOW: was font-size:18px / padding:10px 20px (page's own inline
	   <style>). Sweet spot between that chunky original and an
	   over-shrunk pill — comfortably tappable, still visibly a button.
	   box-shadow left as-is here (rgba(15,64,255,...), a blue glow) —
	   session-discovery-skin.css's body-gated §1 rule
	   (specificity 0,2,0 > this rule's 0,1,0) sets box-shadow:none
	   !important on Variant B (page 15191), which wins the cascade and
	   keeps the button flat there; this file's own rule is unchanged so
	   Variant A (page 15188, no such override) keeps its original glow. */
	.booksesh-btn {
		font-size: 15px !important;
		padding: 8px 16px !important;
		box-shadow: 0 3px 10px rgba(15, 64, 255, 0.32) !important;
		flex: 0 0 auto !important;
	}

	/* Home-based venue: keep on the SAME row as BOOK NOW (override the
	   badge plugin's own mobile flex-basis:100% rule that currently
	   forces it below), RIGHT-ALIGNED against the row's right edge
	   (BOOK NOW left / venue text right), vertically centred to the
	   button, truncating gracefully so it never clips off-screen. */
	.bksesh-wfh-row {
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
	}
	.bksesh-wfh-chip--card {
		flex: 0 1 auto !important;
		flex-basis: auto !important;
		min-width: 0 !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		margin-right: 2px !important; /* small safe right gutter, never hard against the edge */
		align-self: center !important;
		justify-content: flex-end !important; /* icon+text pair right-aligns within the chip */
		text-align: right !important;
		font-size: 0.82em !important;
	}
	.bksesh-wfh-chip--card .bksesh-wfh-txt {
		display: inline-block !important;
		max-width: 100% !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		vertical-align: middle !important;
		text-align: right !important;
	}
}