/* MC Wear — Moments
 *
 * Plain Swiper carousel of 5 lookbook image cards with alternating heights
 * (tall 496 / short 400 on desktop). Slider bleeds to the right viewport
 * edge while the container's inner stays flush-left with the rest of the
 * plugin (80/32/16px gutters).
 *
 * Specificity bumped (.mcw-moments.mcw-moments ...) to beat Elementor Site
 * Settings (0,1,1) without using !important.
 */

.mcw-moments.mcw-moments {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	color: #000000;
}

.mcw-moments.mcw-moments *,
.mcw-moments.mcw-moments *::before,
.mcw-moments.mcw-moments *::after {
	box-sizing: border-box;
}

.mcw-moments.mcw-moments .mcw-moments__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 80px;
}

/* ---------- Slider ---------- */
.mcw-moments.mcw-moments .mcw-moments__slider {
	/* Bleed right to the viewport edge while staying flush-left with the
	 * container. Grow width by 80px (container right padding) + extra
	 * centering gutter when viewport > 1440. Negative margin-right reclaims
	 * layout space so following siblings still flow correctly.
	 */
	width: calc(100% + 80px + max(0px, (100vw - 1440px) / 2));
	margin-right: calc(-80px - max(0px, (100vw - 1440px) / 2));
	overflow: hidden;
}

/* Align slides to the top so the alternating 400/496 heights create the
 * staggered baseline rhythm rather than centering each card vertically. */
.mcw-moments.mcw-moments .mcw-moments__slider .swiper-wrapper {
	align-items: flex-start;
	display: flex;
}

/* ---------- Slides ---------- */
.mcw-moments.mcw-moments .mcw-moments__slide {
	position: relative;
	flex: 0 0 auto;
	width: 305px;
	background: #f2f2f2;
	overflow: hidden;
}

.mcw-moments.mcw-moments .mcw-moments__slide--tall {
	height: 496px;
}

.mcw-moments.mcw-moments .mcw-moments__slide--short {
	height: 400px;
}

/* Anchor wrapper must fill the slide; default <a> is inline and would
 * collapse to image natural size, leaking white space and letting the
 * image overflow during drag. */
.mcw-moments.mcw-moments .mcw-moments__link {
	display: block;
	width: 100%;
	height: 100%;
}

.mcw-moments.mcw-moments .mcw-moments__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---------- Variant: start from screen left (full bleed both edges) ----------
 * Default keeps the slider flush-left with the container (right bleed only).
 * This variant additionally bleeds left by the same gutter so the first slide
 * sits flush to the viewport's left edge. Specificity (0,3,1) beats the base
 * slider rule (0,2,1) without !important. margin-right is inherited from base. */
.mcw-moments.mcw-moments.mcw-moments--from-left .mcw-moments__slider {
	width: calc(100% + (80px + max(0px, (100vw - 1440px) / 2)) * 2);
	margin-left: calc(-80px - max(0px, (100vw - 1440px) / 2));
}

/* ---------- Responsive: Tablet (≤1499px) ---------- */
@media screen and (max-width: 1499px) {
	.mcw-moments.mcw-moments .mcw-moments__inner {
		padding: 0 32px;
	}

	.mcw-moments.mcw-moments .mcw-moments__slider {
		width: calc(100% + 32px);
		margin-right: -32px;
	}

	.mcw-moments.mcw-moments.mcw-moments--from-left .mcw-moments__slider {
		width: calc(100% + 64px);
		margin-left: -32px;
	}

	.mcw-moments.mcw-moments .mcw-moments__slide {
		width: 260px;
	}

	/* Scale heights proportionally (~85% of desktop) */
	.mcw-moments.mcw-moments .mcw-moments__slide--tall {
		height: 423px;
	}

	.mcw-moments.mcw-moments .mcw-moments__slide--short {
		height: 341px;
	}
}

/* ---------- Responsive: Mobile (≤767px) ---------- */
@media screen and (max-width: 767px) {
	.mcw-moments.mcw-moments .mcw-moments__inner {
		padding: 0 16px;
	}

	.mcw-moments.mcw-moments .mcw-moments__slider {
		width: calc(100% + 16px);
		margin-right: -16px;
	}

	.mcw-moments.mcw-moments.mcw-moments--from-left .mcw-moments__slider {
		width: calc(100% + 32px);
		margin-left: -16px;
	}

	/* One dominant card with a small peek of the next, instead of two narrow
	 * cards side by side. */
	.mcw-moments.mcw-moments .mcw-moments__slide {
		width: min(80vw, 360px);
	}

	/* Heights stay at the desktop scale (tall 496 / short 400). */
}