/**
 * Matrix Collage Slider
 *
 * Instance settings arrive as inline --mcs-*-lg / --mcs-*-sm custom properties
 * on .mcs-collage. The stylesheet reads those into the working variables, so
 * media queries can still change the layout without fighting inline styles.
 */

.mcs-collage {
	--paper: var(--mcs-paper, #ffffff);
	--ink: #151515;
	--accent: var(--mcs-accent, #f2a81d);
	--line: #e5e3df;

	--per: var(--mcs-per-lg, 5);
	--stage-h: var(--mcs-h-lg, 420px);
	--tilt: var(--mcs-tilt, -9deg);
	--seam: var(--mcs-seam, 7px);
	--gap: var(--mcs-gap, 2px);
	--bleed: 80px;
	--ease: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--paper);
}

.mcs-collage *,
.mcs-collage *::before,
.mcs-collage *::after {
	box-sizing: border-box;
}

/* ---------- viewport + track ---------- */

.mcs-collage__viewport {
	position: relative;
	height: var(--stage-h);
	overflow: hidden;
	touch-action: pan-y;
}

.mcs-collage[data-drag="1"] .mcs-collage__viewport {
	cursor: grab;
}

.mcs-collage__viewport.is-dragging {
	cursor: grabbing;
}

.mcs-collage__track {
	display: flex;
	gap: var(--gap);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.mcs-collage__track.is-animating {
	transition: transform .75s var(--ease);
}

.mcs-slide {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
	position: relative;
	height: 100%;
	margin: 0;
	list-style: none;
}

.mcs-slide__link {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.mcs-slide__link:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: -3px;
}

/* ---------- the slanted panel ---------- */

.mcs-slide__media {
	position: relative;
	height: 100%;
	overflow: hidden;
	transform: skewX(var(--tilt));
	box-shadow: 0 0 0 var(--seam) var(--paper);
	background: linear-gradient(150deg, #dcdad6, #f2f1ee 55%, #cfcdc8);
}

/* Counter-skewed and overfilled, so the photo reads upright edge to edge. */
.mcs-collage .mcs-slide__img {
	display: block;
	width: calc(100% + (var(--bleed) * 2));
	max-width: none;
	height: 100%;
	margin-left: calc(var(--bleed) * -1);
	object-fit: cover;
	transform: skewX(calc(var(--tilt) * -1));
	transition: transform .7s var(--ease), filter .7s var(--ease);
	filter: saturate(.92);
}

.mcs-slide:hover .mcs-slide__img,
.mcs-slide:focus-within .mcs-slide__img {
	transform: skewX(calc(var(--tilt) * -1)) scale(1.06);
	filter: saturate(1.05);
}

/* ---------- caption ---------- */

.mcs-slide__caption {
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 26px;
	text-align: center;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .45s var(--ease), transform .45s var(--ease);
	pointer-events: none;
}

.mcs-slide:hover .mcs-slide__caption,
.mcs-slide:focus-within .mcs-slide__caption {
	opacity: 1;
	transform: none;
}

.mcs-slide__caption span {
	display: inline-block;
	padding: 7px 12px;
	background: var(--ink);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--accent);
}

/* ---------- top fade into the section above ---------- */

.mcs-collage__fade {
	position: absolute;
	inset: 0 0 auto 0;
	height: 46%;
	background: linear-gradient(to bottom, var(--paper) 4%, transparent 100%);
	pointer-events: none;
	z-index: 2;
}

/* ---------- arrows ---------- */

.mcs-collage__nav {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 46px !important;
	height: 46px !important;
	padding: 0 !important;
	display: grid !important;
	place-items: center !important;
	border: 1px solid var(--line) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .9) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
	color: var(--ink) !important;
	cursor: pointer !important;
	transition: background .25s, border-color .25s, color .25s !important;
}

.mcs-collage__nav:hover {
	background: var(--ink) !important;
	color: #fff !important;
	border-color: var(--ink) !important;
}

.mcs-collage__nav:focus-visible {
	outline: 2px solid var(--accent) !important;
	outline-offset: 3px !important;
}

.mcs-collage__nav--prev {
	left: 18px;
}

.mcs-collage__nav--next {
	right: 18px;
}

.mcs-collage__nav svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
	.mcs-collage {
		--per: var(--mcs-per-md, 4);
		--stage-h: calc(var(--mcs-h-lg, 420px) * .9);
	}
}

@media (max-width: 900px) {
	.mcs-collage {
		--per: var(--mcs-per-sm, 3);
		--stage-h: calc(var(--mcs-h-lg, 420px) * .8);
		--bleed: 60px;
	}
}

@media (max-width: 640px) {
	.mcs-collage {
		--per: var(--mcs-per-xs, 2);
		--stage-h: var(--mcs-h-sm, 280px);
		--seam: 5px;
	}

	.mcs-collage__nav {
		width: 38px;
		height: 38px;
	}

	.mcs-collage__nav--prev {
		left: 10px;
	}

	.mcs-collage__nav--next {
		right: 10px;
	}

	.mcs-slide__caption {
		display: none;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.mcs-collage__track.is-animating {
		transition-duration: .01ms;
	}

	.mcs-collage .mcs-slide__img {
		transition: none;
	}

	.mcs-slide:hover .mcs-slide__img,
	.mcs-slide:focus-within .mcs-slide__img {
		transform: skewX(calc(var(--tilt) * -1));
	}
}