/**
 * Triptych Slider — Frontend Styles v2.1
 *
 * Faithful recreation of Aigli Zappeiou triptych by BusyBuilding.
 * - Side panels shorter than center (fixed height vs aspect-ratio)
 * - Scale(1.2) on non-active / scale(1) on active = "drag" parallax
 * - Full-bleed layout, golden controls bar
 * - 6 responsive breakpoints + mobile swipe carousel
 */

:root {
	--tri-gap: 40px;
	--tri-speed: 1200ms;
	--tri-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
	--tri-color-accent: #b5a07c;
	--tri-color-accent-hover: #8a7a5a;
	--tri-color-bg: #0a0a0a;
	--tri-controls-mb: 20px;
	--tri-radius: 10px;
	--tri-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--tri-side-height: 560px;
	--tri-side-padding: 40px;
	--tri-center-ratio: 66.667%;
}

/* Full-bleed: break out of any parent content container */
.triptych {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	font-family: var(--tri-font);
}

/* TOP CONTROLS — arrows only, right-aligned */
.triptych__controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: var(--tri-controls-mb);
	padding: 0 var(--tri-side-padding);
	position: relative;
	z-index: 10000;
}

/* BOTTOM PAGINATION — centered below panels */
.triptych__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 24px;
	color: var(--tri-color-accent);
	font-family: var(--tri-counter-font, var(--tri-font));
	font-size: var(--tri-counter-size, 0.8125rem);
	font-weight: 300;
	letter-spacing: 0.06em;
	user-select: none;
	transition: color 0.3s ease;
}

.triptych__pag-current { min-width: 13px; text-align: right; }
.triptych__pag-total { min-width: 13px; }

.triptych__pag-divider {
	width: var(--tri-divider-width, 94px);
	height: 0;
	border-top: var(--tri-divider-height, 1px) var(--tri-divider-style, solid) var(--tri-color-accent);
	display: var(--tri-divider-display, block);
	position: relative;
	overflow: hidden;
}
.triptych__pag-divider::after {
	content: '';
	position: absolute;
	left: 0;
	top: calc(-1 * var(--tri-divider-height, 1px));
	width: 100%;
	height: var(--tri-divider-height, 1px);
	background: var(--tri-color-accent);
	transform-origin: left;
	transform: scaleX(0);
}
.triptych.is-animating .triptych__pag-divider::after {
	animation: tri-progress var(--tri-speed) var(--tri-easing) forwards;
}
@keyframes tri-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.triptych__nav { display: flex; align-items: center; gap: 16px; }
.triptych__arrow {
	width: 50px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; padding: 0;
	cursor: pointer;
	color: var(--tri-color-accent);
	transition: color 0.3s ease;
}
.triptych__arrow:hover,
.triptych__arrow:focus,
.triptych__arrow:active {
	color: var(--tri-color-hover, #000);
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none;
}
.triptych__arrow svg { width: var(--tri-arrow-size, 50px); height: auto; }
.triptych__arrow img { display: block; }
.triptych__arrow i { line-height: 1; }

/* Pagination: no hover effect — it's informational, not interactive */

/* Panel drop shadow (only applied when --tri-shadow is set) */
.triptych__panel { box-shadow: var(--tri-shadow, none); }

/* ==========================================================================
   PANELS CONTAINER — align-items:center so sides are shorter than center
   ========================================================================== */
.triptych__panels {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	overflow: hidden;
	gap: var(--tri-gap);
	background: transparent;
}

.triptych__panel {
	overflow: hidden;
}

.triptych__panel .swiper-wrapper {
	transition-timing-function: var(--tri-easing) !important;
}

/* CENTER: width from vw, height from aspect ratio — tallest panel */
.triptych__center {
	width: 46.87vw;
	flex-shrink: 0;
	aspect-ratio: 3 / 2;
	margin: 30px 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--tri-radius);
}

/* SIDES: fixed height, shorter than center. flex:1 splits remaining width */
.triptych__left,
.triptych__right {
	flex: 1 0 0;
	overflow: hidden;
	height: var(--tri-side-height);
}
.triptych__left {
	border-top-right-radius: var(--tri-radius);
	border-bottom-right-radius: var(--tri-radius);
}
.triptych__right {
	border-top-left-radius: var(--tri-radius);
	border-bottom-left-radius: var(--tri-radius);
}

/* ==========================================================================
   SLIDE IMAGES + PARALLAX DRAG EFFECT
   The key to the "drag" animation:
   - Non-active slides (prev/next): scale(1.2) — zoomed in
   - Active slide: scale(1) — normal
   - data-swiper-parallax="100%" shifts the bg during transition
   Combined = image appears to physically drag between panels
   ========================================================================== */
.triptych__panel .swiper-slide {
	overflow: hidden;
	position: relative;
}

.triptych__slide-inner {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/* Images: background-size:cover + center ensures any aspect ratio
   fills the panel and crops from the center. No manual cropping needed. */
.triptych__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	will-change: transform;
	border-radius: var(--tri-radius);
}

/* NON-ACTIVE slides: zoomed to 1.2x (the "coiled spring" state) */
.triptych__panel .swiper-slide-next .triptych__image,
.triptych__panel .swiper-slide-prev .triptych__image {
	transform: scale(1.2) !important;
}

/* ACTIVE slide: scale back to 1.0 (the "released" state) */
.triptych__panel .swiper-slide-active .triptych__image {
	transform: scale(1) !important;
}

/* Subtle vignette on side panels for depth */
.triptych__left .triptych__image::after,
.triptych__right .triptych__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.06);
	pointer-events: none;
	border-radius: var(--tri-radius);
}

/* ENTRANCE — JS-controlled to avoid theme GSAP conflicts */
.triptych__panels,
.triptych__controls {
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.triptych__controls {
	transition-delay: 0.15s;
}

/* ==========================================================================
   RESPONSIVE — 6 breakpoints matching the original
   Center height scales via aspect-ratio automatically.
   Side heights step down at each breakpoint.
   ========================================================================== */

@media ( max-width: 1920px ) {
	:root { --tri-side-height: 420px; }
}
@media ( max-width: 1375px ) {
	:root { --tri-side-height: 350px; }
}
@media ( max-width: 1180px ) {
	:root { --tri-side-height: 300px; }
}
@media ( max-width: 915px ) {
	:root {
		--tri-side-height: 191px;
		--tri-gap: 20px;
	}
	.triptych__pagination { gap: 6px; }
	.triptych__pag-divider { width: 43px; }
	.triptych__arrow { width: 30px; }
}

@media ( orientation: landscape ) and ( min-width: 451px ) and ( max-width: 932px ) {
	.triptych__panels { justify-content: center; }
	.triptych__center { width: 60vw; }
}

/* MOBILE: padded carousel with rounded images and next-slide peek */
@media ( max-width: 768px ) {
	.triptych__panels {
		display: block;
		overflow: hidden;
		gap: 0;
	}
	.triptych__left,
	.triptych__right { display: none; }
	.triptych__center {
		width: 100%;
		aspect-ratio: auto;
		margin: 0;
		border-radius: 0;
		padding: 0 0 0 20px;
		overflow: visible;
	}
	.triptych__center .swiper-slide {
		width: 85%;
		max-width: 340px;
	}
	.triptych__center .triptych__slide-inner {
		border-radius: var(--tri-radius);
		overflow: hidden;
		aspect-ratio: 3 / 2;
	}
	.triptych__center .triptych__image {
		border-radius: 0;
	}
	.triptych__panel .swiper-slide-next .triptych__image,
	.triptych__panel .swiper-slide-prev .triptych__image,
	.triptych__panel .swiper-slide-active .triptych__image {
		transform: scale(1) !important;
	}
	.triptych__controls {
		margin-bottom: 12px;
		padding: 0 20px;
	}
	.triptych__nav { justify-content: space-between; }
	.triptych__arrow { width: 30px; }
	.triptych__pag-divider { width: 43px; }
	.triptych__pagination { gap: 8px; }
}