/**
 * MSH Media Coverage Slider
 * Colors/spacing pulled from the live theme's compiled style.css so this
 * is a visual match for the wdg/card-slider block:
 *   - accent / arrows: #0D6D5B   (hover: #083D33)
 *   - light-blue panel: #F3FAFD
 *   - card border: #CBCBCB (as a 1px box-shadow, same technique as live)
 */

.msh-mcs {
	position: relative;
	padding: 24px 20px 40px;
	margin: 0;
}

@media (min-width: 768px) {
	.msh-mcs {
		padding: 50px 20px;
	}
}

@media (min-width: 1024px) {
	.msh-mcs {
		padding: 70px 20px;
	}
}

@media (min-width: 1440px) {
	.msh-mcs {
		padding: 100px 40px;
	}
}

.msh-mcs--light-blue {
	background-color: #F3FAFD;
}

.msh-mcs--beige {
	background-color: #F5EFE6;
}

.msh-mcs--white {
	background-color: transparent;
}

.msh-mcs__wrap {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.msh-mcs__wrap {
		display: flex;
		align-items: center;
		gap: 5%;
	}
}

.msh-mcs__content {
	margin-bottom: 30px;
	flex: 0 0 30%;
}

@media (min-width: 1024px) {
	.msh-mcs__content {
		margin-bottom: 0;
	}
}

.msh-mcs__heading {
	position: relative;
	margin: 0 0 20px;
	padding-left: 18px;
	font-size: 28px;
	line-height: 1.2;
}

@media (min-width: 1024px) {
	.msh-mcs__heading {
		font-size: 36px;
	}
}

.msh-mcs__heading:before {
	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	bottom: 4px;
	width: 4px;
	background-color: #FFB649;
}

.msh-mcs__cta {
	display: inline-block;
	margin-bottom: 24px;
	padding: 14px 28px;
	background-color: #083D33;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: none;
	transition: background-color .3s ease;
}

.msh-mcs__cta:hover,
.msh-mcs__cta:focus {
	background-color: #0D6D5B;
	color: #ffffff;
}

.msh-mcs__arrows {
	display: flex;
	align-items: center;
	gap: 26px;
}

.msh-mcs__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-mcs__arrow:hover,
.msh-mcs__arrow:focus-visible {
	background-color: #083D33;
}

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

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

/* ---- Slider track --------------------------------------------------- */

.msh-mcs__slider {
	flex: 1 1 auto;
	min-width: 0;
}

.msh-mcs__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 12px;
	margin: 0 -4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.msh-mcs__track::-webkit-scrollbar {
	height: 6px;
}

.msh-mcs__track::-webkit-scrollbar-thumb {
	background-color: rgba(13, 109, 91, .3);
}

/* ---- Card ------------------------------------------------------------ */

.msh-mcs-card {
	position: relative;
	flex: 0 0 calc((100% - (var(--msh-mcs-visible, 2) - 1) * 20px) / var(--msh-mcs-visible, 2));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 27px;
	background-color: #ffffff;
	box-shadow: 0 0 0 1px #CBCBCB;
	scroll-snap-align: start;
	transition: background-color .4s ease, color .4s ease;
}

@media (min-width: 1024px) {
	.msh-mcs-card {
		min-height: 420px;
		padding: 40px;
	}
}

.msh-mcs-card:hover {
	background-color: #0D6D5B;
	color: #ffffff;
}

.msh-mcs-card:hover .msh-mcs-card__date {
	color: #ffffff;
}

.msh-mcs-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.msh-mcs-card__media {
	position: relative;
	height: 180px;
	margin: -27px -27px 20px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
}

@media (min-width: 1024px) {
	.msh-mcs-card__media {
		margin: -40px -40px 20px;
		height: 220px;
	}
}

.msh-mcs-card__image {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	object-position: center;
}

.msh-mcs-card__title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;
}

.msh-mcs-card__title svg {
	margin-left: 8px;
	width: 12px;
	height: 12px;
	vertical-align: middle;
}

.msh-mcs-card__title svg path {
	fill: currentColor;
}

.msh-mcs-card__date {
	margin: 0;
	color: #6B6B6B;
	font-size: 15px;
	transition: color .4s ease;
}

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