/* =========================================================================
 * MSH – Image Slider
 * Native CSS scroll-snap track — same mechanics as msh-video-slider /
 * msh-manual-slider / msh-cpt-blog-slider / msh-media-coverage-slider.
 * No Swiper/owl-carousel dependency.
 * ========================================================================= */

.msh-imgs {
	--msh-imgs-visible: 1;
	--msh-imgs-gap: 20px;
	position: relative;
	width: 100%;
}

.msh-imgs__stage {
	overflow: hidden;
}

.msh-imgs__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: var(--msh-imgs-gap);
	/* Hide native scrollbar; arrows/dots are the intended controls. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.msh-imgs__track::-webkit-scrollbar {
	display: none;
}

.msh-imgs__track:focus-visible {
	outline: 3px solid #00695f;
	outline-offset: -3px;
}

.msh-imgs__slide {
	flex: 0 0 calc((100% - (var(--msh-imgs-visible) - 1) * var(--msh-imgs-gap)) / var(--msh-imgs-visible));
	/* No min-width hard floor — matches the proven msh-media-coverage-slider
	   pattern; this is what caused the "1.5 cards visible" bug on
	   msh-manual-slider when a min-width was present. */
	scroll-snap-align: start;
}

.msh-imgs__img-wrap {
	position: relative;
	width: 100%;
	background-color: #f2f2f2;
	overflow: hidden;
	border-radius: 4px;
}

.msh-imgs__img-wrap--ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.msh-imgs__img-wrap--ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.msh-imgs__img-wrap--ratio-1-1 {
	aspect-ratio: 1 / 1;
}

.msh-imgs__img-wrap--ratio-3-2 {
	aspect-ratio: 3 / 2;
}

.msh-imgs__img-wrap--ratio-auto {
	aspect-ratio: auto;
}

.msh-imgs__img-wrap--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	text-align: center;
	padding: 20px;
	min-height: 120px;
}

.msh-imgs__img-link {
	display: block;
	width: 100%;
	height: 100%;
}

.msh-imgs__img-link:focus-visible {
	outline: 3px solid #00695f;
	outline-offset: -3px;
}

.msh-imgs__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msh-imgs__img-wrap--ratio-auto .msh-imgs__img {
	height: auto;
	object-fit: initial;
}

.msh-imgs__title {
	margin: 16px 0 4px;
}

.msh-imgs__content {
	margin-top: 8px;
	padding: 4px 20px;
	border-left: 3px solid #e0a13a;
	font-size: 15px;
	line-height: 1.6;
	color: #333;
}

.msh-imgs__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background-color: #00695f;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background-color 0.15s ease;
}

.msh-imgs__nav:hover {
	background-color: #004d43;
}

.msh-imgs__nav svg {
	stroke: #fff;
}

/* Keyboard-only outline — mirrors msh-video-slider.css. The
 * mshUsingKeyboard JS flag is the reliable signal for "was this focus
 * caused by Tab, not a click"; --focused is the class it toggles. Plain
 * :focus-visible isn't used here because Safari does move keyboard focus
 * onto a clicked <button> in some cases, which would let it match right
 * after a mouse click. */
.msh-imgs__nav:focus-visible:not(.msh-imgs__nav--focused) {
	outline: none;
}

.msh-imgs__nav:focus-visible:not(.msh-imgs__nav--focused),
.msh-imgs__nav:focus-within:not(.msh-imgs__nav--focused) {
	outline: none !important;
}

.msh-imgs__nav--focused {
	outline: 3px solid #00695f;
	outline-offset: 2px;
}

.msh-imgs__nav--prev {
	left: -60px;
}

.msh-imgs__nav--next {
	right: -60px;
}

.msh-imgs__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.msh-imgs__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background-color: #cccccc;
	cursor: pointer;
}

.msh-imgs__dot.is-active {
	background-color: #00695f;
}

.msh-imgs__dot:focus-visible {
	outline: 2px solid #00695f;
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (max-width: 768px) {
	.msh-imgs__nav--prev {
		left: 8px;
	}

	.msh-imgs__nav--next {
		right: 8px;
	}
}

/* =========================================================================
 * Elementor width-reset fix — applied proactively, same root cause as
 * msh-video-slider: Elementor assigns `elementor-widget__width-initial` to
 * a widget's outermost wrapper, which sizes it to its own unclamped content
 * instead of its column slot. With a scroll-container track and no definite
 * parent width to clip against, that wrapper (and everything inside it) can
 * balloon wider than the page.
 * ========================================================================= */
.elementor-widget-msh_image_slider {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.elementor-column:has(.elementor-widget-msh_image_slider),
.elementor-widget-wrap:has(.elementor-widget-msh_image_slider),
.e-con:has(.elementor-widget-msh_image_slider),
.e-con-inner:has(.elementor-widget-msh_image_slider) {
	min-width: 0;
}