/* Mark Vance - Gallery / Carousel
 *
 * Structural layout only. Grid gap is now a real Style-tab control
 * (grid_columns_gap / grid_rows_gap in widget-gallery-carousel.php) - no
 * hardcoded value here. Image border-radius etc. are still deferred to a
 * later phase, see site-build-log.md.
 */

.mv-gc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.mv-gc-item img,
.mv-gc-carousel-wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

/* Carousel slide-height jitter (FIXED 2026-09-05, see LOG - different
 * photos in the same gallery are never pixel-identical, so unconstrained
 * `height:auto` above sized each slide to its own dimensions and the card
 * visibly resized between slides) is fixed by locking the carousel to one
 * ratio with `object-fit: cover`. That rule now lives in
 * widget-gallery-carousel.php's `carousel_image_ratio` Style-tab control
 * (ADDED 2026-09-07, see LOG) instead of a hardcoded value here - the
 * hardcoded 4:5 stopped matching reality the first time photography
 * changed (new shoot at 1350x1800, a real 3:4). Grid mode is untouched -
 * it was never hardcoded and wasn't reported as jittering. */

/* Hover-swap "poster" cover (2026-09-06, see LOG) - structural/static part
 * only; the fade-vs-slide hover END STATE and the speed are per-instance
 * dynamic values (Style tab controls), handled in
 * widget-gallery-carousel.php's render_extra_css()/'selectors', not here.
 * `.mv-gc-carousel-wrapper` is already the positioned ancestor the
 * arrows/pagination rely on (see the Phase-3 comment below) - reused here,
 * not a new positioning context. `pointer-events: none` throughout (even at
 * rest) is deliberate: the hover TRIGGER lives on the wrapper itself
 * (`:hover` in render_extra_css()), not on this cover - so clicks/taps
 * always pass straight through to the real carousel underneath, never
 * blocked by whichever state the cover happens to be in.
 */
.mv-gc-hover-cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 1;
	pointer-events: none;
	transition-property: opacity, transform;
	transition-timing-function: ease;
	/* Fallback only - the real, live value is the hover_swap_speed
	 * Style-tab control's own 'selectors' rule (widget-gallery-carousel.php,
	 * unscoped so it drives both the entry and exit transition equally, per
	 * Lior's request - one number, both directions). This just covers the
	 * instant before Elementor's own per-instance CSS has loaded. */
	transition-duration: 200ms;
}

/* Phase 3: Swiper now initializes in JS (script.js). .swiper-button-prev/
 * -next sit OUTSIDE .swiper (siblings in .mv-gc-carousel-wrapper, not
 * children of it) so Swiper's own position:absolute needs a positioned
 * ancestor here, not just its own .swiper base rule. */
.mv-gc-carousel-wrapper {
	position: relative;
}

/* FIXED 2026-09-05 (see LOG - catalog Loop Grid, first time this widget
 * ever ran as N simultaneous instances instead of a single PDP instance):
 * confirmed live that the classic CSS Grid/Flexbox "min-width: auto"
 * blowout was the actual root cause of every Loop Grid card either
 * collapsing to 0 or ballooning to a nonsensical width (measured exactly
 * 16777215px = 0xFFFFFF, a numeric-underflow artifact) - NOT a Swiper
 * init-timing race, which was the first (wrong) hypothesis, tested and
 * ruled out live before this fix. Grid/flex items default to
 * `min-width: auto`, which sizes them to fit their content's own intrinsic
 * minimum - a Swiper track with no explicit width is exactly the kind of
 * unconstrained content that triggers this well-documented browser
 * behavior. `min-width: 0` is the standard, low-risk fix for this failure
 * class. Scoped via :has() to loop-items that actually contain this widget
 * (not every `.e-loop-item` site-wide, which is Elementor's own generic
 * class used by every Loop Grid on the site) - confirmed live this
 * narrower scope alone still fully fixes the bug, chosen over a blanket
 * site-wide override.
 */
.e-loop-item:has(.elementor-widget-mv_gallery_carousel) {
	min-width: 0;
}

/* Arrows/dots "inside" (the default for arrows) needs no extra CSS - that's
 * exactly where Swiper's own base stylesheet already places them. Only
 * "outside" needs an override. */
.mv-gc-arrows-position-outside .mv-gc-carousel-wrapper .swiper-button-prev {
	left: -40px;
}

.mv-gc-arrows-position-outside .mv-gc-carousel-wrapper .swiper-button-next {
	right: -40px;
}

/* FIXED 2026-09-06 (see LOG): dots clustered at the right edge instead of
 * centering, confirmed live via computed-style inspection - the pagination
 * container renders as `display:flex` from a source outside both this
 * stylesheet and Swiper v8's own bundled CSS (checked both directly, neither
 * sets it), with no `justify-content` set anywhere - the flex-start default
 * lands on the RTL "start" edge, which is the right side. `text-align:center`
 * alone (Swiper's inline-block-era centering method) has no effect once the
 * element is flex, which is exactly why it looked centered in computed
 * styles but wasn't visually. This rule pins BOTH properties so it's correct
 * regardless of which layout mode ends up winning - safe for the "line"
 * shape below too (`flex:1 1 0` bullets already fill 100% of the row there,
 * so justify-content is a no-op in that case, not a conflict).
 */
.mv-gc-carousel-wrapper .swiper-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.mv-gc-dots-position-outside .mv-gc-carousel-wrapper {
	padding-bottom: 30px;
}

.mv-gc-dots-position-outside .mv-gc-carousel-wrapper .swiper-pagination {
	bottom: 0;
}

/* "line" shape (2026-09-05, see LOG) - Stories-style segments that together
 * span the full image width, snug against its bottom edge - not small
 * fixed-width pills with gaps between them and the image. Segment width is
 * `flex:1 1 0` (equal share of the available width, however many slides
 * exist) rather than a panel-tunable number, since "the right width" here is
 * a function of slide count, not a single fixed value. Thickness stays a
 * real Style-tab control (dots_height) since that IS a meaningful single
 * number regardless of slide count.
 */
.mv-gc-dots-shape-line .mv-gc-carousel-wrapper .swiper-pagination {
	display: flex;
	gap: 0;
	width: 100%;
	left: 0;
}

.mv-gc-dots-shape-line .mv-gc-carousel-wrapper .swiper-pagination-bullet {
	flex: 1 1 0;
	margin: 0 !important;
	border-radius: 0;
}

/* Snug against the image's own bottom edge when placed outside it (was 30px
 * - visually floating, not "flush" - per live design feedback). */
.mv-gc-dots-shape-line.mv-gc-dots-position-outside .mv-gc-carousel-wrapper {
	padding-bottom: 8px;
}