/*
 * [machine_detail_gallery] — STRUCTURAL overlay layer ONLY.
 *
 * This does NOT restyle the slider. It reuses the theme's RoyalSlider verbatim
 * (Impreza's Image Slider element) and only changes two structural things that a
 * stock slider can't do on its own:
 *
 *   1) Thumbnails (or dots) are lifted OUT of the reserved strip below the slide
 *      and OVERLAID inside the image, near the bottom.
 *   2) With thumbnails, the slide reclaims the full 4:3 box (the thumbs no longer
 *      push the image up), so every image keeps the fixed 4:3 ratio.
 *
 * Everything else — navigation, slide animation, fullscreen, lazy loading, the
 * active-state border, arrows — is the theme's own RoyalSlider, untouched.
 *
 * The fixed 4:3 ratio + object-fit:cover come from the shortcode itself
 * (has_ratio="1" ratio="4x3" img_fit="cover"), not from here.
 *
 * Look-and-feel is meant to be tuned in the builder / child theme via these vars
 * (set them on .bsc-detail-gallery):
 *   --bsc-ds-inset      distance of the thumbnail row from the bottom edge
 *   --bsc-ds-dim        resting opacity of inactive thumbnails
 *   --bsc-ds-radius     thumbnail corner radius
 *   --bsc-ds-scrim      translucent backdrop behind the thumbnail row
 */

.bsc-detail-gallery {
	--bsc-ds-inset: 0.75rem;
	--bsc-ds-dim: 0.55;
	--bsc-ds-radius: 6px;
	--bsc-ds-scrim: rgba(0, 0, 0, 0.28);

	position: relative;
	width: 100%;
}

/* The slider already clips to its border-radius (.has_border_radius / .has_ratio
   set overflow:hidden), so any overlay we position inside is clipped to the same
   rounded corners automatically. */

/* ---- Thumbnails overlaid inside the image (nav="thumbs") ---- */

/* Reclaim the strip RoyalSlider reserves below the slide so the image fills the
   whole 4:3 box; the thumbnails then sit on top of it instead of beside it. */
.bsc-detail-gallery .w-slider.nav_thumbs .rsOverflow {
	height: 100% !important;
}
.bsc-detail-gallery .w-slider.nav_thumbs .w-slider-h > img,
.bsc-detail-gallery .w-slider.nav_thumbs .w-slider-h > picture {
	margin-bottom: 0 !important;
}

/* Lift the thumbnail row out of normal flow and pin it to the bottom, centred. */
.bsc-detail-gallery .rsThumbsHor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--bsc-ds-inset);
	width: 100% !important;
	height: var(--thumbs-width, 4rem);
	padding-top: 0 !important;
	margin: 0 !important;
	float: none !important;
	z-index: 22;
	pointer-events: none;          /* clicks pass to the strip itself, below */
}

/* The moving strip: shrink-to-fit and centre it; give it the discreet pill
   backdrop so the thumbnails stay legible over any image. */
.bsc-detail-gallery .rsThumbsContainer {
	position: relative;
	box-sizing: content-box;
	width: -moz-max-content !important;
	width: max-content !important;
	max-width: calc(100% - 2 * var(--bsc-ds-inset));
	height: 100%;
	margin: 0 auto !important;
	padding: 4px;
	border-radius: calc(var(--bsc-ds-radius) + 4px);
	background: var(--bsc-ds-scrim);
	pointer-events: auto;
}

/* Discreet by default; the active one is fully opaque and keeps the theme's
   2px active border (we only round its corners to match). */
.bsc-detail-gallery .rsThumb {
	border-radius: var(--bsc-ds-radius);
	overflow: hidden;
	opacity: var(--bsc-ds-dim);
	transition: opacity 0.2s ease;
}
.bsc-detail-gallery .rsThumb:hover {
	opacity: 0.85;
}
.bsc-detail-gallery .rsThumb.rsNavSelected {
	opacity: 1;
}
.bsc-detail-gallery .rsThumb.rsNavSelected::after {
	border-radius: var(--bsc-ds-radius);
}

/* ---- Dots overlaid inside the image (nav="dots") — the default ---- */
/* With a fixed ratio the slider clips overflow, so the bullets (which normally
   sit below) would be hidden — pull them up over the image, centred. The theme
   already flex-centres .rsBullets; we only reposition and set the dot colours so
   the active dot is a filled accent and the rest are a quiet grey (per design).
   Tunable: --bsc-ds-dot / --bsc-ds-dot-active / --bsc-ds-dot-size. */
.bsc-detail-gallery.nav_dots {
	--bsc-ds-dot: #c7ccd4;
	--bsc-ds-dot-active: #1f7ae0;
	--bsc-ds-dot-size: 9px;
}
.bsc-detail-gallery.nav_dots .rsBullets {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--bsc-ds-inset);
	margin-top: 0;
	z-index: 22;
}
.bsc-detail-gallery.nav_dots .rsBullet span {
	width: var(--bsc-ds-dot-size);
	height: var(--bsc-ds-dot-size);
	background: var(--bsc-ds-dot);
	box-shadow: none;
}
.bsc-detail-gallery.nav_dots .rsBullet.rsNavSelected span {
	background: var(--bsc-ds-dot-active) !important;   /* filled, not a ring */
	box-shadow: none;
}
.bsc-detail-gallery .w-slider {
	border-radius: 15px;
}