/*
 * Media Carousel Slider – Frontend CSS  v6.0
 *
 * BANNER SIZING MODEL
 * ───────────────────
 * Professional WordPress landing-page banners follow a strict 3-layer model:
 *
 *   .mcs-banner-outer   — full container width (100% of the column/page)
 *   .mcs-banner-ratio   — holds the aspect ratio with a reliable CSS technique
 *   .mcs-banner-inner   — position:absolute; fills the ratio box exactly
 *
 * Inside .mcs-banner-inner, Swiper's container (.swiper) is given
 * width:100%; height:100% so it inherits the definite pixel height resolved
 * by the ratio layer. Without a definite height at init time, Swiper falls
 * back to 300px.
 *
 * ASPECT RATIO TECHNIQUE
 * ──────────────────────
 * Primary:  aspect-ratio CSS property (Chrome 88+, Firefox 89+, Safari 15+).
 * Fallback: padding-bottom % trick inside @supports not (aspect-ratio:1) for
 *           Safari 14 and older browsers.
 *
 * PHP passes --mcs-ratio (e.g. "16 / 9") and --mcs-ratio-pct (e.g. "56.25%")
 * as inline CSS custom properties on .mcs-banner-ratio.
 *
 * IMAGE / VIDEO SIZING
 * ────────────────────
 * Every media element (img, video, iframe) uses:
 *   width:100%;  height:100%;  object-fit:cover;
 * This fills the slide completely, crops gracefully, and never distorts.
 * iframes cannot use object-fit, so they fill via position:absolute; inset:0.
 */

/* ── Custom properties (easy theme tokens) ────────────────────────────────── */
:root {
	--mcs-arrow-bg           : rgba(0, 0, 0, .45);
	--mcs-arrow-bg-hover     : rgba(0, 0, 0, .78);
	--mcs-arrow-size         : 44px;
	--mcs-arrow-icon-size    : 14px;
	--mcs-arrow-border       : rgba(255, 255, 255, .25);
	--mcs-dot-size           : 8px;
	--mcs-dot-active-w       : 24px;
	--mcs-dot-color          : rgba(255, 255, 255, .55);
	--mcs-dot-active-color   : #fff;
	--mcs-scrim              : linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.18) 65%, rgba(0,0,0,.72) 100%);
	--mcs-overlay-pad        : clamp(16px, 4vw, 40px);
	--mcs-focus-ring         : 0 0 0 3px rgba(255, 255, 255, .88);
	--mcs-ctrl-h             : 44px;
	--mcs-ease               : .2s ease;
}

/* ── Outer wrapper — constrains max-width and centres ─────────────────────── */
.mcs-banner-outer {
	position   : relative;
	width      : 100%;
	/* max-width comes from inline style injected by PHP */
}

/* ── Ratio holder — establishes the definite height ──────────────────────── */
.mcs-banner-ratio {
	position   : relative;
	width      : 100%;

	/* Primary: modern browsers */
	aspect-ratio: var(--mcs-ratio, 16 / 9);
}

/*
 * Fallback for Safari 14 and older browsers that don't support aspect-ratio.
 * We use @supports not to avoid double-applying the padding on modern browsers.
 */
@supports not (aspect-ratio: 1) {
	.mcs-banner-ratio {
		aspect-ratio : unset;
		height       : 0;
		padding-bottom: var(--mcs-ratio-pct, 56.25%);
		overflow     : hidden;
	}
}

/* ── Inner container — sits inside the ratio, fills it absolutely ─────────── */
.mcs-banner-inner {
	position   : absolute;
	inset      : 0;
	overflow   : hidden;
	background : #000;
}

/* ── Auto-height mode (no ratio) ─────────────────────────────────────────── */
.mcs-auto-height .mcs-banner-inner {
	position : relative;
	inset     : auto;
}
.mcs-auto-height .mcs-swiper,
.mcs-auto-height .swiper-wrapper,
.mcs-auto-height .swiper-slide {
	height : auto !important;
}

/* ── Override Swiper's default 300px height ──────────────────────────────── */
/*
 * Swiper sets .swiper { height: 300px } as a built-in default.
 * We override it here so the wrapper drives the height, not Swiper.
 */
.mcs-banner-inner .swiper,
.mcs-banner-inner .swiper-wrapper,
.mcs-banner-inner .swiper-slide {
	height : 100% !important;
}

/* ── Swiper container ─────────────────────────────────────────────────────── */
.mcs-swiper {
	width        : 100%;
	height       : 100%;
	overflow     : hidden;
	user-select  : none;
	touch-action : pan-y;  /* allow vertical scroll, enable horizontal swipe */
}

/* ── Slide media container ─────────────────────────────────────────────────── */
/*
 * position:relative creates the stacking context for overlays, control bars,
 * and scrim layers. height:100% works because every ancestor now has a
 * definite height from the ratio layer.
 */
.mcs-slide-media {
	position   : relative;
	width      : 100%;
	height     : 100%;
	overflow   : hidden;
	background : #000;
	display    : block;
}

/* ── Images ───────────────────────────────────────────────────────────────── */
.mcs-img {
	display          : block;
	width            : 100%;
	height           : 100%;
	object-fit       : cover;
	object-position  : center;
	pointer-events   : none;   /* soft block on right-click drag */
}
/* Clickable slides — the link wraps the image */
.mcs-slide-link {
	display  : block;
	width    : 100%;
	height   : 100%;
}
.mcs-slide-link:focus-visible {
	outline    : none;
	box-shadow : inset var(--mcs-focus-ring);
}
/* Auto-height: natural image height */
.mcs-auto-height .mcs-img {
	height     : auto;
	max-width  : 100%;
	object-fit : unset;
}

/* ── Video wrap ───────────────────────────────────────────────────────────── */
/*
 * Absolutely positioned inside the slide media container.
 * This means the video fills the slide box regardless of how height was
 * established (ratio layer, or auto).
 */
.mcs-video-wrap {
	position   : absolute;
	inset      : 0;
	background : #000;
}
.mcs-auto-height .mcs-video-wrap {
	position : relative;
	inset    : auto;
}
/*
 * No-poster fallback: while metadata loads (or if the video fails),
 * show a soft neutral gradient instead of a jarring solid-black rectangle.
 * This is especially important on wide banner ratios where a video's native
 * aspect ratio rarely matches the banner and some letterbox space is normal.
 */
.mcs-video-wrap.mcs-no-poster {
	background: linear-gradient(135deg, #2a2a2e 0%, #1a1a1d 100%);
}

/* ── Video element ────────────────────────────────────────────────────────── */
.mcs-video {
	display : block;
	width   : 100%;
	height  : 100%;
	border  : 0;
}
/* Local <video>: cover-crop like an image */
.mcs-local-video {
	object-fit      : cover;
	object-position : center;
	background      : #000;
}
/* iframe embeds (YouTube / Vimeo) — fill via absolute positioning */
.mcs-youtube,
.mcs-vimeo {
	position : absolute;
	inset    : 0;
	width    : 100%;
	height   : 100%;
}

/* ── Gradient scrim (only when text overlay exists) ───────────────────────── */
.mcs-slide-media::after {
	content        : '';
	position       : absolute;
	inset          : 0;
	background     : var(--mcs-scrim);
	pointer-events : none;
	z-index        : 5;
	opacity        : 0;
	transition     : opacity var(--mcs-ease);
}
.mcs-slide-media.mcs-has-overlay::after {
	opacity : 1;
}

/* ── Text overlay ─────────────────────────────────────────────────────────── */
.mcs-overlay {
	position       : absolute;
	bottom         : 0;
	left           : 0;
	right          : 0;
	padding        : var(--mcs-overlay-pad);
	z-index        : 10;
	pointer-events : none;
}
.mcs-overlay-title {
	display        : block;
	margin         : 0 0 .4em;
	color          : #fff;
	font-size      : clamp(1.1rem, 2.5vw, 1.75rem);
	font-weight    : 700;
	line-height    : 1.2;
	letter-spacing : -.02em;
	text-shadow    : 0 1px 6px rgba(0,0,0,.6);
}
.mcs-overlay-caption {
	display     : block;
	margin      : 0;
	color       : rgba(255, 255, 255, .9);
	font-size   : clamp(.85rem, 1.5vw, 1.05rem);
	line-height : 1.55;
	text-shadow : 0 1px 4px rgba(0,0,0,.5);
}

/* ── Navigation arrows ────────────────────────────────────────────────────── */
.mcs-swiper .swiper-button-prev,
.mcs-swiper .swiper-button-next {
	width            : var(--mcs-arrow-size);
	height           : var(--mcs-arrow-size);
	border-radius    : 50%;
	background       : var(--mcs-arrow-bg);
	backdrop-filter  : blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color            : #fff;
	border           : 1.5px solid var(--mcs-arrow-border);
	top              : 50%;
	transform        : translateY(-50%);
	margin-top       : 0;
	z-index          : 20;
	transition       : background var(--mcs-ease), transform var(--mcs-ease), border-color var(--mcs-ease), opacity var(--mcs-ease), visibility var(--mcs-ease);
}
.mcs-swiper .swiper-button-prev { left: 16px; }
.mcs-swiper .swiper-button-next { right: 16px; }

/* Optional setting: keep navigation unobtrusive until intentional interaction. */
@media (hover: hover) and (pointer: fine) {
	.mcs-swiper.mcs-arrows-hover .swiper-button-prev,
	.mcs-swiper.mcs-arrows-hover .swiper-button-next {
		opacity        : 0;
		visibility     : hidden;
		pointer-events : none;
	}

	.mcs-swiper.mcs-arrows-hover:hover .swiper-button-prev,
	.mcs-swiper.mcs-arrows-hover:hover .swiper-button-next,
	.mcs-swiper.mcs-arrows-hover:focus-within .swiper-button-prev,
	.mcs-swiper.mcs-arrows-hover:focus-within .swiper-button-next {
		opacity        : 1;
		visibility     : visible;
		pointer-events : auto;
	}
}


.mcs-swiper .swiper-button-prev:hover,
.mcs-swiper .swiper-button-next:hover {
	background   : var(--mcs-arrow-bg-hover);
	border-color : rgba(255, 255, 255, .5);
	transform    : translateY(-50%) scale(1.08);
}
.mcs-swiper .swiper-button-prev:focus-visible,
.mcs-swiper .swiper-button-next:focus-visible {
	outline    : none;
	box-shadow : var(--mcs-focus-ring);
}
.mcs-swiper .swiper-button-prev::after,
.mcs-swiper .swiper-button-next::after {
	font-size   : var(--mcs-arrow-icon-size);
	font-weight : 800;
}

/* Disabled state — hide rather than leave greyed-out when loop is off */
.mcs-swiper .swiper-button-disabled {
	opacity        : 0;
	pointer-events : none;
}

/* ── Pagination dots ──────────────────────────────────────────────────────── */
.mcs-swiper .swiper-pagination {
	bottom  : 16px;
	z-index : 20;
}
.mcs-swiper .swiper-pagination-bullet {
	width         : var(--mcs-dot-size);
	height        : var(--mcs-dot-size);
	background    : var(--mcs-dot-color);
	opacity       : 1;
	border-radius : 4px;
	transition    : background var(--mcs-ease), width var(--mcs-ease);
}
.mcs-swiper .swiper-pagination-bullet-active {
	background    : var(--mcs-dot-active-color);
	width         : var(--mcs-dot-active-w);
	border-radius : 4px;
}

/* ── Slide counter badge ──────────────────────────────────────────────────── */
.mcs-counter {
	position         : absolute;
	top              : 14px;
	right            : 16px;
	z-index          : 20;
	background       : rgba(0, 0, 0, .5);
	backdrop-filter  : blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color            : #fff;
	font-size        : .72rem;
	font-weight      : 600;
	letter-spacing   : .06em;
	padding          : 4px 12px;
	border-radius    : 20px;
	border           : 1px solid rgba(255, 255, 255, .2);
	pointer-events   : none;
	user-select      : none;
	line-height      : 1.4;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   CUSTOM VIDEO CONTROLS
   ========================================================================== */

/* Big centred play button overlay */
.mcs-play-btn {
	position        : absolute;
	inset           : 0;
	display         : flex;
	align-items     : center;
	justify-content : center;
	cursor          : pointer;
	z-index         : 25;
	background      : transparent;
	border          : 0;
	padding         : 0;
	transition      : opacity var(--mcs-ease);
}
.mcs-play-btn svg {
	width      : 64px;
	height     : 64px;
	filter     : drop-shadow(0 2px 8px rgba(0,0,0,.55));
	opacity    : .92;
	transition : opacity var(--mcs-ease), transform var(--mcs-ease);
}
.mcs-play-btn:hover svg { opacity:1; transform:scale(1.08); }

/* Hidden entirely while playing — resume/pause happens via the bottom bar's
 * play/pause button instead, so there's no big semi-opaque icon sitting over
 * the frame while the video is running. Reappears once paused/ended (see
 * .mcs-paused below) or, obviously, in the untouched idle state. */
.mcs-video-wrap.mcs-playing .mcs-play-btn { opacity: 0; pointer-events: none; }

/* Control bar — a light bottom-edge scrim for legibility, not a full dulling
 * wash. Visibility is driven by the JS state machine via .mcs-show-controls:
 *   - idle (never played): no bar-related class present at all → hidden.
 *   - playing: JS adds/removes .mcs-show-controls on mousemove + auto-hide.
 *   - paused/ended after having played: JS keeps .mcs-show-controls on
 *     persistently so there's always a way to resume.
 * :focus-within is kept as a no-JS-required accessibility fallback. */
.mcs-ctrl-bar {
	position    : absolute;
	left:0; right:0; bottom:0;
	height      : var(--mcs-ctrl-h);
	display     : flex;
	align-items : center;
	gap         : 6px;
	padding     : 0 12px;
	background  : linear-gradient(transparent, rgba(0,0,0,.55));
	z-index     : 30;
	opacity     : 0;
	transform   : translateY(4px);
	transition  : opacity var(--mcs-ease), transform var(--mcs-ease);
	pointer-events: none;
}
.mcs-video-wrap.mcs-show-controls .mcs-ctrl-bar,
.mcs-video-wrap:focus-within      .mcs-ctrl-bar {
	opacity       : 1;
	transform     : translateY(0);
	pointer-events: auto;
}

/* Icon buttons inside the control bar */
.mcs-ctrl-btn {
	flex-shrink  : 0;
	background   : transparent;
	border       : 0;
	padding      : 5px;
	color        : #fff;
	cursor       : pointer;
	line-height  : 0;
	border-radius: 3px;
	transition   : background var(--mcs-ease);
}
.mcs-ctrl-btn:hover { background: rgba(255,255,255,.15); }
.mcs-ctrl-btn svg   { width:18px; height:18px; fill:currentColor; display:block; }

/* Progress bar */
.mcs-progress {
	flex         : 1;
	padding      : 8px 0;
	margin       : -8px 0;
	box-sizing   : content-box;
	cursor       : pointer;
}
.mcs-progress-track {
	width        : 100%;
	height       : 4px;
	background   : rgba(255,255,255,.3);
	border-radius: 2px;
	position     : relative;
	overflow     : hidden;
}
.mcs-progress-fill {
	height        : 100%;
	width         : 0%;
	background    : #fff;
	border-radius : 2px;
	pointer-events: none;
	transition    : width .08s linear;
}
.mcs-progress-handle {
	position   : absolute;
	top        : 50%;
	left       : 0%;
	transform  : translate(-50%, -50%);
	width      : 12px;
	height     : 12px;
	background : #fff;
	border-radius: 50%;
	box-shadow : 0 1px 4px rgba(0,0,0,.4);
	opacity    : 0;
	transition : opacity var(--mcs-ease);
	pointer-events: none;
}
.mcs-progress:hover .mcs-progress-handle { opacity:1; }

/* Time display */
.mcs-time {
	font-size            : .7rem;
	color                : rgba(255,255,255,.9);
	white-space          : nowrap;
	flex-shrink          : 0;
	font-variant-numeric : tabular-nums;
	letter-spacing       : .02em;
}

/* Volume */
.mcs-vol-wrap { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.mcs-vol-slider {
	width        : 60px;
	height       : 4px;
	cursor       : pointer;
	accent-color : #fff;
	flex-shrink  : 0;
}
@media (max-width:600px) { .mcs-vol-slider { display:none; } }

/* ── Error notice ─────────────────────────────────────────────────────────── */
.mcs-error {
	padding      : 10px 14px;
	background   : #fef2f2;
	border-left  : 4px solid #dc2626;
	color        : #991b1b;
	font-size    : .9rem;
	border-radius: 0 3px 3px 0;
	margin       : 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 1024px) {
	:root { --mcs-arrow-size: 40px; --mcs-arrow-icon-size: 13px; }
	.mcs-overlay { padding: clamp(12px, 3vw, 24px); }
}

@media screen and (max-width: 768px) {
	:root { --mcs-arrow-size: 34px; --mcs-arrow-icon-size: 12px; }
	.mcs-swiper .swiper-button-prev { left: 10px; }
	.mcs-swiper .swiper-button-next { right: 10px; }
	.mcs-play-btn svg { width: 52px; height: 52px; }
}

@media screen and (max-width: 480px) {
	:root { --mcs-arrow-size: 30px; --mcs-arrow-icon-size: 10px; }
	.mcs-swiper .swiper-button-prev { left: 6px; }
	.mcs-swiper .swiper-button-next { right: 6px; }
	.mcs-swiper .swiper-pagination-bullet { margin: 0 3px !important; }
	.mcs-play-btn svg { width: 42px; height: 42px; }
	.mcs-ctrl-bar { gap: 3px; padding: 0 6px; }
	.mcs-time { font-size: .62rem; }
	.mcs-counter { font-size: .66rem; padding: 3px 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.mcs-slide-media::after,
	.mcs-ctrl-bar,
	.mcs-play-btn,
	.mcs-play-btn svg,
	.mcs-swiper .swiper-button-prev,
	.mcs-swiper .swiper-button-next,
	.mcs-swiper .swiper-pagination-bullet,
	.mcs-progress-fill {
		transition : none !important;
	}
	.mcs-swiper {
		--swiper-transition-timing-function: step-end;
	}
}

/* ── Poster-first video facades ────────────────────────────────────── */
.mcs-remote-video-wrap,
.mcs-local-video-wrap {
	position: absolute;
	inset: 0;
	background: #000;
}
.mcs-video-facade {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	background: #000;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	overflow: hidden;
}
.mcs-video-facade .mcs-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--mcs-ease), filter var(--mcs-ease);
}
.mcs-video-facade:hover .mcs-video-poster,
.mcs-video-facade:focus-visible .mcs-video-poster {
	transform: scale(1.015);
	filter: brightness(.96);
}
.mcs-video-facade:focus-visible {
	outline: none;
	box-shadow: inset var(--mcs-focus-ring);
}
.mcs-play-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(56px, 8vw, 82px);
	height: clamp(56px, 8vw, 82px);
	border-radius: 999px;
	background: rgba(0,0,0,.48);
	border: 1px solid rgba(255,255,255,.35);
	box-shadow: 0 8px 28px rgba(0,0,0,.35);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: transform var(--mcs-ease), background var(--mcs-ease);
	pointer-events: none;
}
.mcs-play-icon svg {
	width: 46%;
	height: 46%;
	fill: #fff;
	margin-left: 4px;
}
.mcs-video-facade:hover .mcs-play-icon,
.mcs-video-facade:focus-visible .mcs-play-icon {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(0,0,0,.62);
}