/* Mark Vence - 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;
}

/* ADDED 1.23.0 (BP-05, Quick View image grid): the live Quick View shell's
 * placeholder ITEM in Grid mode (widget-gallery-carousel.php render(), one
 * src-less <img>) stays in the DOM - script.js clones it on the first fill -
 * but is never shown: no empty cell, no broken-image box. swapItems() removes
 * the class when it fills the item, which shows it. Carousel placeholders are
 * untouched (a 1-slide Swiper needs its slide laid out). */
.mv-gc-grid > .mv-gc-item.mv-gc-placeholder {
	display: none;
}

/* 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;
}

/* ADDED 1.26.0 (PDP PLAN §3.3 / §5 S-2): "RL pattern" - the rl_pattern
 * switcher (Grid mode) puts .mv-gc-rl-pattern-yes on the widget wrapper.
 * No class = none of this applies (default off). >= 768 = Elementor's mobile
 * cutoff on this site (kit viewport_md 768). Pure :nth-child, so the layout
 * re-flows by itself when script.js swapItems() adds/removes items on a
 * colour change. Specificity: Elementor compiles {{WRAPPER}} to
 * `.elementor-<post> .elementor-element.elementor-element-<id>` (3 classes,
 * read off the served post-143.css), so the per-instance grid_columns / grid
 * gap / grid_image_ratio rules are 0,4,0 (img 0,5,1). The prefix below is
 * 0,5,0 (img 0,6,1) and wins whatever the stylesheet load order. */
@media (min-width: 768px) {
	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-rl-pattern-yes .mv-gc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0;
		row-gap: 0;
		gap: 0;
	}

	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-rl-pattern-yes .mv-gc-grid > .mv-gc-item {
		grid-column: span 2;
		min-width: 0;
	}

	/* the pair: items 4 and 5, one column each */
	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-rl-pattern-yes .mv-gc-grid > .mv-gc-item:nth-child(4),
	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-rl-pattern-yes .mv-gc-grid > .mv-gc-item:nth-child(5) {
		grid-column: span 1;
	}

	/* exactly 4 items: no partner for item 4, so it stays full width */
	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-rl-pattern-yes .mv-gc-grid > .mv-gc-item:nth-child(4):last-child {
		grid-column: span 2;
	}

	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-rl-pattern-yes .mv-gc-grid > .mv-gc-item img {
		aspect-ratio: 3 / 4;
		object-fit: cover;
	}
}

/* ADDED 1.27.0 (PDP "b+", Lior 18.10 - Buck Mason mechanism): "fixed frame
 * with inner scroll" - the frame_scroll switcher puts .mv-gc-frame-yes on the
 * widget wrapper and render_grid() wraps the grid in .mv-gc-frame. Desktop
 * only: 1025 = kit viewport_lg (tablet max 1024). Below it no rule applies and
 * the grid is exactly as before.
 *
 * Height: the WRAPPER is taken out of flow (absolute, inset 0) against its
 * parent container - Elementor's `.e-con { position: var(--position) }` with
 * --position: relative by default (frontend.min.css, 4.3.5), so no extra
 * setting is needed for the containing block. Out of flow = the gallery adds
 * no height to the row, so the row is as tall as the info column; the gallery
 * container fills that height only when it stretches: native setting on the
 * container, Advanced -> Layout -> Align Self = Stretch (desktop). The row's own
 * align-items is flex-start (143 f4848f8), so without it the frame is 0px tall.
 * Same prefix as the RL pattern (0,5,0): beats `.elementor-widget
 * { position: relative }` and Elementor's per-instance rules regardless of
 * stylesheet order.
 *
 * Scroll: native overflow. No wheel/scroll listeners; overscroll-behavior auto
 * = at the frame's top/bottom the wheel chains to the page. scroll-behavior
 * auto = keyboard/programmatic scrolling is never animated (reduced motion).
 *
 * Scrollbar: follows the page direction - RTL puts it on the frame's LEFT,
 * i.e. the inner edge facing the info column, with no flip of the images.
 * WebKit/Blink get a thin always-visible custom bar (::-webkit-scrollbar).
 * The standard scrollbar-width/-color are given ONLY to browsers without
 * ::-webkit-scrollbar (Firefox): Chrome 121+ ignores ::-webkit-scrollbar on an
 * element that sets the standard properties. Width/colour come from the Style
 * controls as custom properties (--mv-gc-sb-w / --mv-gc-sb-thumb); fallbacks
 * 3px and the kit colour "טקסט משני" #636976 (5.5:1 on white).
 *
 * Focus: the child theme's ring (2px Navy, offset 2) is drawn outside the
 * box, and the frame touches the viewport's right edge - so here it is drawn
 * INSIDE (offset -2), fully visible on all four sides. Colour/width stay the
 * site rule's. */
@media (min-width: 1025px) {
	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-frame-yes {
		position: absolute;
		inset: 0;
	}

	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-frame-yes > .mv-gc-frame {
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: auto;
		scroll-behavior: auto;
	}

	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-frame-yes > .mv-gc-frame::-webkit-scrollbar {
		width: var(--mv-gc-sb-w, 3px);
	}

	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-frame-yes > .mv-gc-frame::-webkit-scrollbar-track {
		background: transparent;
	}

	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-frame-yes > .mv-gc-frame::-webkit-scrollbar-thumb {
		background-color: var(--mv-gc-sb-thumb, var(--e-global-color-5e183c4, #636976));
		border-radius: 0;
	}

	@supports not selector(::-webkit-scrollbar) {
		.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-frame-yes > .mv-gc-frame {
			scrollbar-width: thin;
			scrollbar-color: var(--mv-gc-sb-thumb, var(--e-global-color-5e183c4, #636976)) transparent;
		}
	}

	.elementor .elementor-element.elementor-widget-mv_gallery_carousel.mv-gc-frame-yes > .mv-gc-frame:focus-visible:not(.mv-focus-pointer) {
		outline-offset: -2px;
	}
}