/* Mocha Slider — base styles. Per-instance colors/height are injected by Elementor controls. */

.mocha-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.mocha-slider__main {
	position: relative;
	z-index: 1;
}

.mocha-slider__main,
.mocha-slider__main .swiper-wrapper,
.mocha-slider__main .swiper-slide {
	height: 100%;
}

.mocha-slider__bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.mocha-slider__overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 60%);
}

.mocha-slider__content {
	position: absolute;
	left: 4%;
	bottom: 7%;
	z-index: 6;
	max-width: 62%;
}

.mocha-slider__badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.mocha-badge {
	font-size: 13px;
	font-weight: 600;
	padding: 5px 13px;
	border-radius: 999px;
	line-height: 1.3;
	background: #FEF3C6;
    color: #C4622D;
}

.mocha-badge--difficulty {
	background: #FEF3C6;
    color: #C4622D;
}

.mocha-slider__title {
	margin: 0 0 14px;
	font-size: clamp(34px, 5vw, 68px);
	line-height: 1.05;
	font-weight: 700;
	color: #fff;
}

.mocha-slider__meta {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	font-size: 15px;
	align-items: center;
	color: #f2f2f2;
}

.mocha-slider__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.mocha-slider__meta-item i,
.mocha-slider__meta-item svg {
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	line-height: 1;
}

.mocha-slider__meta-item svg {
	fill: currentColor;
}

.mocha-slider__thumbs {
	position: absolute;
	right: 2.5%;
	bottom: 7%;
	z-index: 7;
	width: 320px;
	max-width: 42%;
}

.mocha-slider__thumbs .swiper-slide {
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.65;
	border: 2px solid transparent;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
	box-sizing: border-box;
}

.mocha-slider__thumb-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.mocha-slider__thumbs .swiper-slide:hover {
	opacity: 0.9;
}

.mocha-slider__thumbs .swiper-slide-thumb-active {
	opacity: 1;
	border-color: #fff;
	transform: translateY(-2px);
}

/* Pagination dots — hidden on desktop, shown on mobile where thumbs are hidden. */
.mocha-slider__pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 7;
	display: none;
	justify-content: center;
	gap: 8px;
}

.mocha-slider__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.6);
	opacity: 1;
	border-radius: 999px;
	transition: width 0.2s, background 0.2s;
}

.mocha-slider__pagination .swiper-pagination-bullet-active {
	width: 22px;
	background: #fff;
}

/* Tablet: shrink the thumbnail strip. */
@media (max-width: 1024px) {
	.mocha-slider__thumbs {
		width: 240px;
	}
	.mocha-slider__thumbs .swiper-slide {
		height: 48px;
	}
}

/* Mobile: hide the thumb strip, show dots, widen content. */
@media (max-width: 767px) {
	.mocha-slider__content {
		max-width: 90%;
		left: 5%;
		bottom: 10%;
	}
	.mocha-slider__thumbs {
		display: none;
	}
	.mocha-slider__pagination {
		display: flex;
	}
	.mocha-slider__meta {
		gap: 14px 18px;
		font-size: 14px;
	}
}