/* White Desert-style home gallery slider. */

.bekaa-gallery-slider {
	--bekaa-gallery-white: #fff;
	--bekaa-gallery-radius: 4px;
	--bekaa-gallery-thumb-small: 2.5em;
	--bekaa-gallery-thumb-active: 5em;
	--bekaa-gallery-thumb-gap: 0.3125em;
	--bekaa-gallery-controls-width: calc(var(--bekaa-gallery-thumb-active) + (var(--bekaa-gallery-thumb-small) * 4) + (var(--bekaa-gallery-thumb-gap) * 4));
	--bekaa-gallery-controls-height: 3.75em;
	position: relative;
	z-index: 2;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	color: var(--bekaa-gallery-white);
}

.bekaa-gallery-slider__wrap {
	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	border-radius: var(--bekaa-gallery-radius);
	background: #e8e2da;
	cursor: pointer;
}

.bekaa-gallery-slider--has-bottom .bekaa-gallery-slider__wrap::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: min(34vh, 19em);
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.08) 34%,
		rgba(0, 0, 0, 0.28) 68%,
		rgba(0, 0, 0, 0.46) 100%
	);
	content: "";
	pointer-events: none;
}

.bekaa-gallery-slider__zone {
	position: absolute;
	top: 0;
	z-index: 4;
	width: 50%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.bekaa-gallery-slider__zone--left {
	left: 0;
}

.bekaa-gallery-slider__zone--right {
	right: 0;
}

.bekaa-gallery-slider__item {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

.bekaa-gallery-slider__item.is-active {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.bekaa-gallery-slider__image,
picture.bekaa-gallery-slider__image,
.bekaa-gallery-slider__image > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	transform-origin: center center;
	will-change: transform;
}

picture.bekaa-gallery-slider__image {
	overflow: hidden;
}

picture.bekaa-gallery-slider__image > img {
	position: absolute;
	inset: 0;
}

.bekaa-gallery-slider__ui {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	color: var(--bekaa-gallery-white);
	pointer-events: none;
}

.bekaa-gallery-slider__contain {
	width: 100%;
	height: 100%;
	padding: 0 clamp(16px, 1.25vw, 22px);
}

.bekaa-gallery-slider__layout {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding-bottom: clamp(16px, 1.25vw, 22px);
	pointer-events: none;
}

.bekaa-gallery-slider__info {
	position: relative;
	display: flex;
	align-items: center;
	width: var(--bekaa-gallery-controls-width);
	height: var(--bekaa-gallery-controls-height);
	padding: 0;
	overflow: clip;
	border-radius: var(--bekaa-gallery-radius);
	background: transparent;
	pointer-events: auto;
}

.bekaa-gallery-slider__info--empty {
	pointer-events: none;
}

.bekaa-gallery-slider__info-title {
	color: var(--bekaa-gallery-white);
	font-family: gilda-display, "Gilda Display", Georgia, serif;
	font-size: clamp(19px, 1.125vw, 21px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.36),
		0 8px 24px rgba(0, 0, 0, 0.36);
}

.bekaa-gallery-slider__title-dot {
	color: var(--bekaa-red, #ec1d25);
}

.bekaa-gallery-slider__thumbs {
	display: flex;
	gap: var(--bekaa-gallery-thumb-gap);
	pointer-events: auto;
}

.bekaa-gallery-slider__thumb {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--bekaa-gallery-thumb-small);
	height: var(--bekaa-gallery-controls-height);
	padding: 0;
	overflow: hidden;
	border: 0 solid rgba(255, 255, 255, 1);
	border-radius: var(--bekaa-gallery-radius);
	background: transparent;
	cursor: pointer;
	pointer-events: all;
}

.bekaa-gallery-slider__thumb.is-active {
	width: var(--bekaa-gallery-thumb-active);
	border-width: 1px;
}

.bekaa-gallery-slider__thumb-image,
picture.bekaa-gallery-slider__thumb-image,
.bekaa-gallery-slider__thumb-image > img {
	position: absolute;
	inset: 0 !important;
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	opacity: 1;
}

picture.bekaa-gallery-slider__thumb-image {
	overflow: hidden;
}

picture.bekaa-gallery-slider__thumb-image > img {
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
}

.bekaa-gallery-slider__thumb.is-active .bekaa-gallery-slider__thumb-image {
	opacity: 0;
}

@media (min-width: 961px) {
	body.page-id-6390 #mk-page-id-6390 .page-section-content:has(.bekaa-gallery-slider) {
		padding-bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	.bekaa-gallery-slider {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		padding: 0;
	}

	.bekaa-gallery-slider__wrap {
		display: flex;
		flex-direction: column;
		gap: 0;
		height: auto;
		overflow: visible;
		border-radius: 0;
		background: transparent;
		cursor: default;
	}

	.bekaa-gallery-slider__wrap::after {
		display: none;
	}

	.bekaa-gallery-slider__zone,
	.bekaa-gallery-slider__ui {
		display: none !important;
	}

	.bekaa-gallery-slider__item,
	.bekaa-gallery-slider__item.is-active {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		overflow: visible;
		clip-path: none !important;
	}

	.bekaa-gallery-slider__image,
	picture.bekaa-gallery-slider__image,
	.bekaa-gallery-slider__image > img {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bekaa-gallery-slider__item,
	.bekaa-gallery-slider__image,
	.bekaa-gallery-slider__thumb,
	.bekaa-gallery-slider__thumb-image {
		transition: none !important;
	}
}