/**
 * MauveStudio Instagram feed — layouts (grid extras, collage, marquee),
 * aspect-ratio variants, video badge and lightbox bits.
 */

.mauve-instagram .ms-ig-item {
	position: relative;
}

.mauve-instagram .ms-ig-item img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------
 * Aspect ratios (work in every layout)
 * ---------------------------------------------------------------- */
.ms-ig-ratio-square .ms-ig-item img   { aspect-ratio: 1 / 1;  object-fit: cover; }
.ms-ig-ratio-portrait .ms-ig-item img { aspect-ratio: 4 / 5;  object-fit: cover; }
.ms-ig-ratio-tall .ms-ig-item img     { aspect-ratio: 2 / 3;  object-fit: cover; }
.ms-ig-ratio-wide .ms-ig-item img     { aspect-ratio: 3 / 2;  object-fit: cover; }
.ms-ig-ratio-original .ms-ig-item img { aspect-ratio: auto;   object-fit: unset; height: auto; }

/* ------------------------------------------------------------------
 * Video badge (play icon in the corner)
 * ---------------------------------------------------------------- */
.mauve-instagram .ms-ig-play {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(17, 19, 26, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: none;
}

.mauve-instagram .ms-ig-play::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 9px;
	border-style: solid;
	border-width: 8px 0 8px 12px;
	border-color: transparent transparent transparent #fff;
}

/* ------------------------------------------------------------------
 * Collage — scattered, slightly rotated photos (editorial look)
 * ---------------------------------------------------------------- */
.ms-ig-collage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--ms-ig-gap, 0px);
	padding: 40px 0;
}

.ms-ig-collage .ms-ig-item {
	width: 17%;
	min-width: 150px;
	margin: 0;
	box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .35);
	background: #fff;
	transition: transform .35s ease, box-shadow .35s ease;
	will-change: transform;
}

.ms-ig-collage .ms-ig-item:nth-child(6n+1) { transform: translateY(28px) rotate(-4deg);  width: 16%; }
.ms-ig-collage .ms-ig-item:nth-child(6n+2) { transform: translateY(-20px) rotate(2.5deg); width: 20%; margin-left: -2%; }
.ms-ig-collage .ms-ig-item:nth-child(6n+3) { transform: translateY(36px) rotate(-2deg);  width: 15%; margin-left: -1.5%; }
.ms-ig-collage .ms-ig-item:nth-child(6n+4) { transform: translateY(-32px) rotate(3.5deg); width: 21%; margin-left: -2%; }
.ms-ig-collage .ms-ig-item:nth-child(6n+5) { transform: translateY(14px) rotate(-3deg);  width: 17%; margin-left: -1.5%; }
.ms-ig-collage .ms-ig-item:nth-child(6n+6) { transform: translateY(-12px) rotate(1.5deg); width: 14%; margin-left: -1%; }

.ms-ig-collage .ms-ig-item:hover {
	transform: translateY(0) rotate(0) scale(1.05);
	z-index: 5;
	box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .45);
}

@media (max-width: 767px) {
	.ms-ig-collage {
		padding: 24px 0;
	}

	.ms-ig-collage .ms-ig-item,
	.ms-ig-collage .ms-ig-item:nth-child(n) {
		width: 38%;
		min-width: 130px;
		margin-left: 0;
	}
}

/* ------------------------------------------------------------------
 * Marquee — continuous scrolling strip (pause on hover)
 * ---------------------------------------------------------------- */
.ms-ig-marquee {
	--ms-ig-gap: 18px;
	--ms-ig-size: 300px;
	position: relative;
	display: flex;
	overflow: hidden;
	width: 100%;
}

/* edge fade — gradient veils in the section background color,
   photos slide out from behind them */
.ms-ig-marquee.ms-ig-has-fade::before,
.ms-ig-marquee.ms-ig-has-fade::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--ms-ig-fade-w, 120px);
	z-index: 2;
	pointer-events: none;
}

.ms-ig-marquee.ms-ig-has-fade::before {
	left: 0;
	background: linear-gradient(to right, var(--ms-ig-fade-color, #fff), transparent);
}

.ms-ig-marquee.ms-ig-has-fade::after {
	right: 0;
	background: linear-gradient(to left, var(--ms-ig-fade-color, #fff), transparent);
}

.ms-ig-marquee .ms-ig-track {
	display: flex;
	width: max-content;
	animation: ms-ig-scroll var(--ms-ig-duration, 35s) linear infinite;
}

/* two identical halves; the trailing padding makes -50% land exactly
   on the start of the second half = seamless loop */
.ms-ig-marquee .ms-ig-half {
	display: flex;
	flex: 0 0 auto;
	gap: var(--ms-ig-gap);
	padding-right: var(--ms-ig-gap);
}

.ms-ig-marquee .ms-ig-item {
	flex: 0 0 auto;
	width: var(--ms-ig-size);
	margin: 0;
}

.ms-ig-marquee:hover .ms-ig-track {
	animation-play-state: paused;
}

.rtl .ms-ig-marquee .ms-ig-track {
	animation-direction: reverse;
}

@keyframes ms-ig-scroll {
	to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	.ms-ig-marquee {
		--ms-ig-size: 220px;
		--ms-ig-gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-ig-marquee {
		overflow-x: auto;
	}

	.ms-ig-marquee .ms-ig-track {
		animation: none;
	}

	.ms-ig-marquee .ms-ig-half[aria-hidden] {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Lightbox (Magnific) — video popup + caption bar
 * ---------------------------------------------------------------- */
.ms-ig-video-pop {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
}

.ms-ig-video-pop video {
	display: block;
	width: 100%;
	max-height: 80vh;
	background: #000;
}

.ms-ig-video-pop .ms-ig-pop-caption {
	padding: 10px 2px;
	font-size: 13px;
	color: #f3f4f6;
}

.ms-ig-mfp .mfp-title a.ms-ig-open,
.ms-ig-video-pop .ms-ig-pop-caption a.ms-ig-open {
	color: #fff;
	text-decoration: underline;
	white-space: nowrap;
}