/**
 * Media Mentions — Carousel Styles
 */

/* =========================================================
   Wrapper
   ========================================================= */

.mm-carousel-wrap {
	width: 100%;
	user-select: none;
}

/* =========================================================
   Viewport & Track
   ========================================================= */

.mm-carousel__viewport {
	overflow: hidden;
	width: 100%;
	/* Clip the track so off-screen slides cannot intercept pointer events */
	position: relative;
}

.mm-carousel__track {
	display: flex;
	align-items: stretch;
	transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	/* Disable pointer events on the track itself — it extends beyond the
	   viewport on desktop and intercepts clicks on visible cards otherwise */
	pointer-events: none;
}

.mm-carousel__track--no-transition {
	transition: none !important;
}

/* =========================================================
   Slides
   ========================================================= */

.mm-carousel__slide {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 4px;
	position: relative;
	z-index: 1;
	/* Re-enable pointer events that the track disables */
	pointer-events: auto;
}

.mm-carousel__slide .mm-card {
	height: 100%;
}

/* JS sets padding-bottom for aspect ratio — disable the CSS one */
.mm-carousel__slide .mm-card__image-wrap {
	aspect-ratio: unset;
}

/* =========================================================
   Elementor editor preview constraints
   ========================================================= */

.elementor-editor-active .mm-carousel__viewport {
	overflow: hidden;
}

.elementor-editor-active .mm-carousel__track {
	flex-wrap: nowrap;
}

.elementor-editor-active .mm-carousel__slide {
	max-width: 33.333%;
	min-width: 0;
}

/* =========================================================
   Controls — ALWAYS below the cards, ALWAYS a flex row
   No absolute positioning anywhere in this file.
   ========================================================= */

.mm-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 1.25rem;
}

/* =========================================================
   Arrows
   ========================================================= */

.mm-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/* Static in document flow — never absolute */
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #2563eb;
	border: none;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background-color 0.18s ease, opacity 0.18s ease;
	outline: none;
}

.mm-carousel__arrow:hover {
	background-color: #1d4ed8;
}

.mm-carousel__arrow:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.mm-carousel__arrow svg {
	display: block;
	stroke: #ffffff;
	flex-shrink: 0;
}

.mm-carousel__arrow path {
	stroke: currentColor;
}

.mm-carousel__arrow--hidden {
	opacity: 0;
	pointer-events: none;
}

/* =========================================================
   Dots
   ========================================================= */

.mm-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex: 1;
	max-width: 200px;
	min-height: 14px;
}

.mm-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #cbd5e1;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease;
	flex-shrink: 0;
}

.mm-carousel__dot--active {
	background-color: #2563eb;
	width: 24px;
	border-radius: 4px;
}

.mm-carousel__dot:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* =========================================================
   Empty state
   ========================================================= */

.mm-carousel-empty {
	padding: 2rem;
	background: #f8fafc;
	border: 2px dashed #e2e8f0;
	border-radius: 8px;
	text-align: center;
	color: #94a3b8;
	font-size: 14px;
}

/* =========================================================
   Elementor editor
   ========================================================= */

.elementor-editor-active .mm-carousel__arrow {
	pointer-events: none;
}

/* =========================================================
   Elementor click-interception fix
   Ensure card links are always clickable inside Elementor widgets
   ========================================================= */

.elementor-widget-media_mentions_carousel .mm-card__link,
.elementor-widget-media_mentions_carousel .mm-card__link * {
	pointer-events: auto !important;
}

.elementor-widget-media_mentions_carousel .mm-card {
	position: relative;
}

.elementor-widget-media_mentions_carousel .mm-card__link {
	position: relative;
	z-index: 2;
	cursor: pointer;
}