/**
 * MSH Manual Slider — Styles
 *
 * Deliberately an INDEPENDENT visual style from msh-cpt-blog-slider — own
 * "msh-ms" namespace throughout, no reused theme post-card classes
 * (.blog-inner / .entry-title / etc.), since this widget's content is
 * hand-authored slides, not posts. Flat card, rounded corners, subtle
 * hover lift, button-style CTA instead of a plain text "read more" link.
 *
 * Slider-mechanics rules (track/arrows/dots) reuse the same proven native
 * CSS scroll-snap approach as the project's other sliders, just
 * re-namespaced so nothing bleeds into or out of them.
 *
 * @package subsidy-child
 */

.msh-ms {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* ---- Containment fix ------------------------------------------------------
 * Root cause of two earlier bugs (arrows clipped off-screen, cards showing
 * ~1.5 instead of 3): .msh-ms-card originally carried a hard min-width:240px
 * floor. With "Visible Cards" set to 3 that's an 816px content minimum
 * (3 cards + 2 gaps), and nested flex items refuse to shrink below their
 * content's min size unless min-width:0 is set explicitly up the chain —
 * without it, that 816px floor forced the WHOLE section wider than the
 * viewport instead of the cards shrinking to fit a narrower column. Fixed
 * two ways: (1) the card's min-width floor was removed entirely — it now
 * sizes purely off the calc() flex-basis, matching the proven pattern
 * already used in msh-media-coverage-slider.css, which has no card
 * min-width at all; (2) min-width:0 added up the ancestor chain as a
 * defensive backstop. Scoped to this widget only via
 * .elementor-widget-msh_manual_slider, so it can't affect other content.
 * ------------------------------------------------------------------------ */
.elementor-widget-msh_manual_slider,
.elementor-widget-msh_manual_slider .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
}

/* ---- The actual root cause -------------------------------------------
 * DevTools ancestor walk showed: .elementor-widget-wrap (the real column,
 * display:flex) = 702px, correct. But .elementor-widget-msh_manual_slider
 * — our widget's own OUTER wrapper, and a direct flex-child of that column
 * — measured 2113px. Elementor gives every widget a utility class
 * controlling how it behaves as a flex item in a flex column/container;
 * this page's widget carries elementor-widget__width-initial, which tells
 * it "don't stretch or shrink — size yourself to your own content"
 * (flex-shrink: 0 behavior). Combined with .msh-ms__track being a
 * scroll container with no definite width to clip against, the widget
 * sized itself to the UNCLAMPED total width of all cards laid out at
 * full natural width, instead of filling its actual 702px column slot.
 * Every element below it (.elementor-widget-container, .msh-ms,
 * .msh-ms__track) was just inheriting that same wrong 2113px — they were
 * never the bug themselves, which is why min-width:0 on them alone
 * (added in the previous fix) had no visible effect.
 * ------------------------------------------------------------------------ */
.elementor-widget-msh_manual_slider {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Broader net: any Elementor column/container/wrap that CONTAINS our
   widget anywhere in its descendant tree also needs min-width:0, or the
   same overflow bug reappears one level higher than the widget's own
   wrapper. :has() lets us target the actual ancestor without needing to
   know the exact nesting depth Elementor's flex Container system uses on
   this page. Modern-browser only (Chrome/Edge/Safari/Firefox all support
   :has() as of 2023+) — safe for this project's tested browser set. */
.elementor-column:has(.elementor-widget-msh_manual_slider),
.elementor-widget-wrap:has(.elementor-widget-msh_manual_slider),
.e-con:has(.elementor-widget-msh_manual_slider),
.e-con-inner:has(.elementor-widget-msh_manual_slider) {
	min-width: 0;
}

/* ---- Arrows ------------------------------------------------------------- */

.msh-ms__arrows {
	display: flex !important;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 16px;
}

.msh-ms__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #0D6D5B;
	color: #ffffff;
	cursor: pointer;
	transition: background-color .3s ease, opacity .3s ease;
}

.msh-ms__arrow:hover,
.msh-ms__arrow:focus-visible {
	background-color: #083D33;
}

.msh-ms__arrow[disabled] {
	background-color: rgba(13, 109, 91, .15);
	color: #0D6D5B;
	cursor: default;
}

.msh-ms__arrow svg {
	width: 16px;
	height: 15px;
}

/* ---- Track ---------------------------------------------------------------
 * Native CSS scroll-snap — keyboard-scrollable (tabindex="0" + role="region"
 * in the markup), no JS carousel library required.
 * ------------------------------------------------------------------------ */

.msh-ms__track {
	--msh-ms-visible: 3;
	--msh-ms-gap: 24px;

	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--msh-ms-gap) !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 20px;
	margin: 0 -4px;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;

	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* legacy Edge/IE */
}

.msh-ms__track:focus-visible {
	outline: 3px solid #0D6D5B;
	outline-offset: 2px;
}

.msh-ms__track::-webkit-scrollbar {
	display: none; /* Chrome / Safari / Edge (Chromium) */
}

@media (prefers-reduced-motion: reduce) {
	.msh-ms__track {
		scroll-behavior: auto;
	}
}

/* ---- Card ----------------------------------------------------------------
 * Flat card: rounded corners, subtle border + shadow, hover lift. Full-
 * width image on top with a fixed aspect ratio, body below.
 * ------------------------------------------------------------------------ */

.msh-ms-card {
	position: relative;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: calc((100% - (var(--msh-ms-visible) - 1) * var(--msh-ms-gap)) / var(--msh-ms-visible)) !important;
	max-width: calc((100% - (var(--msh-ms-visible) - 1) * var(--msh-ms-gap)) / var(--msh-ms-visible));
	box-sizing: border-box;
	scroll-snap-align: start;
}

.msh-ms-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #ffffff;
	border: 1px solid #E5E5E5;
	border-radius: 10px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.msh-ms-card__inner:hover,
.msh-ms-card__inner:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.msh-ms-card__media {
	flex: 0 0 auto;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.msh-ms-card__media img,
.msh-ms-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.msh-ms-card__badge {
	display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    background-color: #F3FAFD;
    color: #0D6D5B;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 3px;
}
.msh-ms-card__inner:hover .msh-ms-card__img {
	transform: scale(1.05);
}

.msh-ms-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 22px 24px;
}

.msh-ms-card__title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
	/* Clamp to 2 lines so uneven title lengths don't push cards to
	   different heights within the same row/page. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.msh-ms-card__title a {
	color: #1A1A1A;
	text-decoration: none;
}

.msh-ms-card__title a:hover {
	color: #0D6D5B;
}

.msh-ms-card__content {
	margin: 0 0 18px;
	color: #6B6B6B;
	font-size: 15px;
	line-height: 1.6;
	/* display: -webkit-box;
	-webkit-line-clamp: 3; */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.msh-ms-card__content p:first-child {
	margin-top: 0;
}

.msh-ms-card__content p:last-child {
	margin-bottom: 0;
}

/* Button-style CTA — deliberately distinct from the plain text
   "read more" link used in the CPT blog slider. */
.msh-ms-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 10px 20px;
	align-self: flex-start;
	background-color: #0D6D5B;
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color .25s ease, gap .25s ease;
}

.msh-ms-card__link:hover,
.msh-ms-card__link:focus-visible {
	background-color: #083D33;
	gap: 12px;
	color: #ffffff;
}

.msh-ms-card__link svg {
	width: 14px;
	height: 13px;
	flex: 0 0 auto;
}

/* ---- Dot pagination ------------------------------------------------------
 * Built client-side by msh-manual-slider.js — dot count depends on how
 * many cards fit per screen width, which PHP can't know at render time.
 * ------------------------------------------------------------------------ */

.msh-ms__dots {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.msh-ms__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid #C9C9C9;
	border-radius: 50%;
	background-color: #ffffff;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.msh-ms__dot.is-active {
	background-color: #0D6D5B;
	border-color: #0D6D5B;
	transform: scale(1.15);
}

.msh-ms__dot:focus-visible {
	outline: 3px solid #0D6D5B;
	outline-offset: 2px;
}

/* ---- Grid mode ------------------------------------------------------------
 * Static CSS grid, no scroll/arrows/dots — same card style as the slider.
 * ------------------------------------------------------------------------ */

.msh-ms__grid {
	--msh-ms-grid-cols: 3;
	--msh-ms-gap: 24px;

	display: grid;
	grid-template-columns: repeat(var(--msh-ms-grid-cols), 1fr);
	gap: var(--msh-ms-gap);
}

.msh-ms__grid .msh-ms-card {
	min-width: 0; /* grid items shouldn't inherit the slider card's min-width floor */
}

.msh-ms__empty-notice {
	margin: 0;
	color: #6B6B6B;
}

@media (max-width: 767px) {
	.msh-ms-card__body {
		padding: 18px 18px 20px;
	}
}