/**
 * MSH CPT Blog Slider — Styles
 *
 * All slider-mechanics rules are scoped to .msh-cbs so they never bleed
 * into the theme's other blog widgets (.blog-wrapper is shared, but only
 * as a marker class here — no grid/row/col rules are used, since this is
 * a slider, not a grid).
 *
 * Card typography (.entry-title, .post-thumb, .top-meta, .bottom-meta)
 * intentionally has NO rules here — it inherits from the theme's existing
 * global blog styles, same as msh-cpt-posts.css does.
 *
 * @package subsidy-child
 */

.msh-cbs {
	position: relative;
}

/* ---- Reset for reused theme class names ---------------------------------
 * .blog-wrapper / .blog-inner / .post-thumb / .entry-title / .post-excerpt /
 * .top-meta / .bottom-meta are the SAME class names Subsidy Core's own Blog
 * widget uses, reused here so this widget's typography matches the theme.
 * That comes at a cost: it also inherits every existing rule targeting
 * those names — borders, margins, list-item spacing, none of which this
 * slider's layout expects. Rather than chase each leaking rule one at a
 * time, this resets the whole set up front. !important matches the
 * established pattern for overriding parent-theme specificity on this
 * project (see msh-cpt-posts.css, accessibility.css).
 * ------------------------------------------------------------------------ */
.msh-cbs.blog-wrapper,
.msh-cbs .blog-inner,
.msh-cbs .post-thumb,
.msh-cbs .entry-title,
.msh-cbs .post-excerpt,
.msh-cbs .top-meta,
.msh-cbs .bottom-meta,
.msh-cbs .post-more,
.msh-cbs .nav,
.msh-cbs .nav-item {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	list-style: none !important;
	box-shadow: none !important;
}

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

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

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

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

.msh-cbs__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. Matches the pattern
 * already shipped in msh-media-coverage-slider.
 * ------------------------------------------------------------------------ */

.msh-cbs__track {
	--msh-cbs-visible: 3;
	--msh-cbs-gap: 20px;

	display: flex;
	gap: var(--msh-cbs-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 16px;
	margin: 0 -4px;
	-webkit-overflow-scrolling: touch;

	/* Native scrollbar hidden — the arrows + dots are the intended
	   navigation UI (matches how the theme's own owl-carousel-based
	   sliders behave: no visible browser scrollbar). Scroll still works
	   via touch, mouse wheel, and keyboard (the track has tabindex="0"). */
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* legacy Edge/IE */
}

/* Visible focus indicator on the scrollable region itself — required
   because it carries tabindex="0" for keyboard scrolling (WCAG 2.4.7). */
.msh-cbs__track:focus-visible {
	outline: 0px solid #0D6D5B;
	outline-offset: 0px;
}

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

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

/* ---- Card --------------------------------------------------------------
 * Sized off --msh-cbs-visible so "Visible Cards" (responsive control)
 * changes how many fit on screen without a JS resize handler.
 * ------------------------------------------------------------------------ */

.msh-cbs-card {
	position: relative;
	flex: 0 0 calc((100% - (var(--msh-cbs-visible) - 1) * var(--msh-cbs-gap)) / var(--msh-cbs-visible));
	min-width: 240px;
	scroll-snap-align: start;
	overflow: hidden; /* contains long titles/excerpts — see .post-title-head / .post-excerpt clamps below */
}

.msh-cbs-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;
}

/* ---- Card visuals — full-bleed image with an overlapping content panel.
 * Per the annotated reference screenshot: the OUTER card has no border —
 * only the white content panel does. The panel is pulled up over the
 * bottom of the image with a negative margin (not absolute positioning,
 * so the image keeps contributing real height to the layout), and the
 * date badge sits at the panel's own top edge, straddling the seam.
 * ------------------------------------------------------------------------ */

.msh-cbs .blog-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.msh-cbs--slider.blog-style-classic .post-thumb {
	flex: 0 0 auto;
	overflow: hidden;
	margin-bottom: -56px !important; /* pulls the panel below up over the image — must beat the reset block's margin:0 above */
}

.msh-cbs .post-thumb a {
	display: block;
	overflow: hidden;
	height: 220px;
}

.msh-cbs .post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.msh-cbs--slider.blog-style-classic .post-details-outer {
	position: relative; /* positioning context for the date badge below */
	z-index: 1;          /* stacks above the image it's overlapping */
	flex: 1 1 auto;
	min-width: 0;
	padding: 44px 24px 24px;
	background-color: #ffffff;
	border: 1px solid #E5E5E5; /* the only border in this component — on the panel, not the outer card */
	border-radius: 4px;
	width: 95%;
	margin: 0 auto;
}

.msh-cbs--slider .post-thumb-date {
	position: absolute;
	top: 0;
	left: 20px;
	transform: translateY(-50%); /* straddles the panel's own top border */
	z-index: 2;
	display: inline-block;
	padding: 10px 20px;
	background-color: #1B6E76; /* override via the widget's "Date Badge Color" style control */
	color: #ffffff;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
}

.msh-cbs .entry-title {
	margin-bottom: 12px !important;
}

.msh-cbs .entry-title .post-title-head {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	/* Clamp to 2 lines instead of letting a long title push the card taller
	   than its neighbors (that unevenness is what was spilling into the
	   dots/next row). The full title is still in the DOM and in the <a>'s
	   text — screen readers and page search still see all of it; only the
	   visual line count is capped. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.msh-cbs-card__designation {
	margin: 0 0 12px;
	color: #6B6B6B;
	font-size: 14px;
	line-height: 1.4;
}

.msh-cbs .post-excerpt p {
	margin: 0 0 16px;
	color: #6B6B6B;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.msh-cbs .bottom-meta .read-more {
	display: inline-block;
	border: 0 !important;
	font-weight: 700;
	color: #0D6D5B;
	text-decoration: none;
	text-underline-offset: 3px;
}

.msh-cbs .bottom-meta .read-more::before,
.msh-cbs .bottom-meta .read-more::after {
	content: none !important; /* strips any dash/arrow pseudo-element the theme's own .read-more rules add */
	border: 0 !important;
}

/* ---- Dot pagination ------------------------------------------------------
 * Built client-side by msh-cpt-blog-slider.js — see render() in the widget
 * class for why the count can't be computed in PHP.
 * ------------------------------------------------------------------------ */

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

.msh-cbs__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-cbs__dot.is-active {
	background-color: #0D6D5B;
	border-color: #0D6D5B;
	transform: scale(1.15);
}

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

/* ---- Grid mode -----------------------------------------------------------
 * Static CSS grid, no scroll/arrows/dots. Plain stacked card: image, then
 * a plain icon+text date row (.post-date-row), title, excerpt, read more —
 * no overlap, no border, no badge-on-image trick. Matches a static
 * "News & Articles" layout rather than the slider's card style.
 * ------------------------------------------------------------------------ */

.msh-cbs__grid {
	--msh-cbs-grid-cols: 3;
	--msh-cbs-gap: 24px;

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

.msh-cbs--grid .post-thumb {
	margin-bottom: 0; /* no overlap in grid mode — the reset block above already zeroes this, this just documents it */
}

.msh-cbs--grid .post-details-outer {
	background-color: transparent;
	border: 0;
	width: 100%;
	margin: 0;
	padding: 16px 0 0;
}

.msh-cbs--grid .post-date-row {
	margin-bottom: 10px;
}

.msh-cbs--grid .post-date-row .post-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #6B6B6B;
	font-size: 13px;
}

.msh-cbs--grid .post-date-row .before-icon {
	color: #0D6D5B;
}

/* ---- List variant: image beside content instead of on top ------------- */

.msh-cbs.blog-style-list .blog-inner {
	flex-direction: row;
	align-items: stretch;
	gap: 16px;
}

.msh-cbs.blog-style-list .post-thumb {
	flex: 0 0 140px;
	width: 140px;
}

.msh-cbs.blog-style-list .post-thumb a {
	height: 100%;
	min-height: 140px;
}

.msh-cbs.blog-style-list .post-details-outer {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 34px;
	
}

.msh-cbs-card__badge--country {
	background-color: #F0F7F4;
	color: #1B6E76;
	margin-left: 6px;
}

.msh-cbs-card__badge--warning {
	background-color: #FDEDED;
	color: #B32D2E;
}

/* JS sets [hidden] when all cards fit (card count <= --msh-cbs-visible).
   Needed because the display:flex above outranks the UA [hidden] rule. */
.msh-cbs__arrows[hidden],
.msh-cbs__dots[hidden] {
	display: none;
}

/* ============================================================
   Focus indicators (WCAG 2.4.7) — Multi-CPT Blog Slider, all pages.
   ============================================================ */

/* GRID: ring the whole card when its title link has keyboard focus */
.msh-cbs--grid .blog-inner:has( .post-title-head a:focus-visible ) {
	outline: 2px solid #343434;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff;
}
.msh-cbs--grid .post-title-head a:focus-visible {
	outline: none !important;
}

/* SLIDER + other links in the widget */
.msh-cbs--slider .post-title-head a:focus-visible {
	outline: 2px solid #343434 !important;
	outline-offset: -3px !important;
	box-shadow: 0 0 0 4px #fff !important;
}
.msh-cbs .top-meta a:focus-visible,
.msh-cbs a.read-more:focus-visible,
.msh-cbs__arrow:focus-visible {
	outline: 2px solid #343434 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px #fff !important;
}

@media (max-width: 767px) {
	.msh-cbs.blog-style-list .blog-inner {
		flex-direction: column;
	}

	.msh-cbs.blog-style-list .post-thumb {
		flex: 0 0 auto;
		width: 100%;
	}

	.msh-cbs.blog-style-list .post-thumb a {
		height: 220px;
	}
}

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