/* Applied only once the companion script confirms (via matchMedia) that
   the current viewport is at or below the row's own configured
   breakpoint — see script.js. No breakpoint is hard-coded here on
   purpose: each row can set its own, so this file can't hard-code one
   media query and still support that. */

/* Salient's own mobile column-stacking CSS at this breakpoint targets
   the same elements via compound, chained-class selectors (e.g.
   `.vc_row.vc_row-flex > span_12 > vc_column_container`), which beats a
   plain attribute selector on specificity alone even with no
   !important on either side — the flex layout below needs !important
   to reliably win, exactly the lesson learned the hard way with this
   plugin's accordion element. */

[data-cl-mobile-slider="1"].cl-mobile-slider-active {
	position: relative;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* The row's own nearest outer row is constrained directly in JS (see
   sync() in script.js), not here — a CSS :has() rule for that ends up
   matching every qualifying ancestor rather than only the nearest one,
   and this row commonly sits inside a much larger outer section
   wrapper that also happens to carry a .vc_row-like class. closest()
   in JS naturally returns only the one nearest match, which :has()
   has no equivalent way to express. */

[data-cl-mobile-slider="1"].cl-mobile-slider-active > [class*="row_col_wrap_"] {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Salient's grid commonly gives the row a negative left/right margin
	   to offset each column's own padding (a standard gutter technique)
	   — harmless in the normal stacked layout, since a column's padding
	   visually cancels it out, but this element is now the scroll
	   container itself, and that same negative margin would make it
	   genuinely wider than the viewport. The slide columns below are
	   already forced to width: 100%, replacing Salient's original grid
	   math entirely, so there is nothing left for this margin to
	   offset against. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

[data-cl-mobile-slider="1"].cl-mobile-slider-active > [class*="row_col_wrap_"]::-webkit-scrollbar {
	display: none;
	height: 0;
}

/* Each direct child of the track becomes one full-width "slide". This
   targets *any* direct child rather than a specific column class (e.g.
   [class*="vc_col-"]) on purpose — a top-level row's column class
   turned out not to match the same way an inner row's does (that's
   what broke this the first time), and by WPBakery's own structural
   convention, a row wrapper's direct children are always its columns
   regardless of whatever they happen to be named in a given context.
   Scoped tightly to only the track's own direct children, so this
   can't reach anything outside the slider. */
[data-cl-mobile-slider="1"].cl-mobile-slider-active > [class*="row_col_wrap_"] > * {
	display: block !important;
	float: none !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Controls */
.cl-mobile-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

.cl-mobile-slider-arrow:hover,
.cl-mobile-slider-arrow:focus-visible {
	opacity: 1;
}

.cl-mobile-slider-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.cl-mobile-slider-arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

.cl-mobile-slider-arrow--prev {
	left: 8px;
}

.cl-mobile-slider-arrow--next {
	right: 8px;
}

.cl-mobile-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin-top: 6px;
}

/* The button is a 24px tap target (Lighthouse's minimum); the visible
   8px dot is drawn by ::before, so it looks the same as before. */
.cl-mobile-slider-dot {
	position: relative;
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.cl-mobile-slider-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cl-mobile-slider-dot.is-active::before {
	background: rgba(0, 0, 0, 0.8);
	transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
	[data-cl-mobile-slider="1"].cl-mobile-slider-active > [class*="row_col_wrap_"] {
		scroll-behavior: auto;
	}
}