/**
 * DIVEIN Image Slider Styles
 *
 * 16:9 aspect ratio container, thumbnail 50% overlap,
 * zoom icon, captions, and responsive breakpoints.
 * Uses DIVEIN design tokens throughout.
 *
 * @since 1.24.0
 */

/* ─── Header (headline + nav arrows) ──────────── */
.divein-slider__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--space-sm);
	gap: var(--space-sm);
}

.divein-slider__headline {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-strong);
	margin: 0;
	line-height: var(--leading-tight);
}

/* ─── Navigation Arrows ───────────────────────── */
.divein-slider__nav {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.divein-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border: 0.5px solid var(--color-border, #d0d0d0);
	border-radius: 10px;
	background: transparent;
	color: var(--color-text-muted, #666);
	cursor: pointer;
	transition: border-color var(--transition-fast),
	            color var(--transition-fast),
	            background var(--transition-fast);
	padding: 0;
	line-height: 1;
}

.divein-slider__arrow:hover {
	border-color: var(--color-text-strong, #222);
	color: var(--color-text-strong, #222);
	background: var(--color-surface, #f5f5f5);
}

.divein-slider__arrow svg {
	width: 10px;
	height: 10px;
}

/* ─── Container ────────────────────────────────── */
.divein-slider {
	position: relative;
	width: 100%;
	padding-bottom: 15px;
	overflow: visible;
}

/* ─── Main Area (positioning context for overlapping elements) ── */
.divein-slider__area {
	position: relative;
}

/* ─── Main Slider ──────────────────────────────── */
.divein-slider__main {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
}

.divein-slider__main .swiper-wrapper {
	align-items: stretch;
}

.divein-slider__slide {
	position: relative;
	height: auto;
}

.divein-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── Video Slide ──────────────────────────────── */
.divein-slider__slide--video {
	background: #000;
}

.divein-slider__video-wrap {
	width: 100%;
	height: 100%;
}

/*
 * Presto Player fills the video slide container.
 * The output hierarchy is:
 *   .divein-slider__video-wrap
 *     .wp-block-presto-player-reusable-edit   (light DOM)
 *       figure.wp-block-video                 (light DOM)
 *         presto-player                       (web component host)
 *           shadow DOM → .presto-player__wrapper (inherits from host)
 *
 * We size the light DOM elements; the shadow DOM fills its host automatically.
 */
.divein-slider__video-wrap .wp-block-presto-player-reusable-edit {
	width: 100%;
	height: 100%;
}

.divein-slider__video-wrap .wp-block-video {
	width: 100%;
	height: 100%;
	margin: 0;
}

.divein-slider__video-wrap presto-player {
	display: block;
	width: 100%;
	height: 100%;
}

/* ─── Video Thumbnail ──────────────────────────── */
.divein-slider__thumb--video {
	position: relative;
	background: #000;
}

.divein-slider__thumb--video .divein-slider__thumb-img {
	opacity: 0.7;
}

.divein-slider__thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	pointer-events: none;
}

.divein-slider__thumb-play svg {
	width: 10px;
	height: 10px;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* ─── Wide Mode (2 images per view) ───────────── */
.divein-slider--wide .divein-slider__main {
	aspect-ratio: auto;
}

.divein-slider--wide .divein-slider__slide {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
}

/* ─── Lock Video Mode (fixed video + image swiper side by side) ── */
.divein-slider__lock-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.divein-slider__lock-video {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}

.divein-slider__lock-images {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
}

/* Override wide-mode rules inside lock layout */
.divein-slider--lock-video .divein-slider__main {
	aspect-ratio: auto;
	border-radius: 0;
	height: 100%;
}

.divein-slider--lock-video .divein-slider__main .swiper-wrapper {
	height: 100%;
}

.divein-slider--lock-video .divein-slider__slide {
	aspect-ratio: auto;
	border-radius: 0;
}

/* ─── Captions ─────────────────────────────────── */
.divein-slider__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-sm) var(--space-md);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	pointer-events: none;
}

/* ─── Thumbnail Navigation ─────────────────────── */
.divein-slider__thumbs {
	position: absolute;
	bottom: 0;
	right: var(--space-md);
	transform: translateY(50%);
	z-index: var(--z-sticky);
	max-width: calc(5 * 45px + 4 * 8px); /* 257px — show max 5 thumbs */
	overflow: hidden;
}

/* ─── Arrows at Thumbnails (optional position) ─── */
.divein-slider__thumbs-nav {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-shrink: 0;
}

.divein-slider--arrows-at-thumbs .divein-slider__thumbs-nav .divein-slider__arrow {
	background: var(--color-white, #fff);
	box-shadow: var(--shadow-sm);
}

.divein-slider__thumbs-row {
	position: absolute;
	bottom: 0;
	right: var(--space-md);
	transform: translateY(50%);
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	gap: 8px;
}

.divein-slider--arrows-at-thumbs .divein-slider__thumbs {
	position: static;
	transform: none;
}

/* Slide wrapper: auto-width so slidesPerView:'auto' sizes correctly */
.divein-slider__thumb-slide {
	width: auto !important;
}

.divein-slider__thumb {
	border: 2.5px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	width: 45px;
	height: 45px;
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
	background: var(--color-background);
}

/* Override Elementor kit global img border-radius */
img.divein-slider__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: unset;
}

/* Active thumbnail */
.swiper-slide-thumb-active .divein-slider__thumb {
	border-color: var(--beige-300);
	box-shadow: var(--shadow-md);
}

.divein-slider__thumb:hover {
	border-color: var(--color-secondary);
}

/* ─── Zoom Icon ────────────────────────────────── */
.divein-slider__zoom {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: calc(var(--z-sticky) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.4);
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transition: background var(--transition-fast),
	            color var(--transition-fast);
	padding: 0;
	line-height: 1;
}

.divein-slider__zoom:hover {
	background: rgba(0, 0, 0, 0.7);
	color: var(--color-white);
}

.divein-slider__zoom svg {
	width: 16px;
	height: 16px;
}

/* ─── Elementor Lightbox Anchors (visually hidden, triggered by JS) ── */
.divein-slider__lightbox-data {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	pointer-events: none;
}

/* ─── Pre-init state ───────────────────────────── */
.divein-slider:not(.divein-slider--ready) .divein-slider__thumbs,
.divein-slider:not(.divein-slider--ready) .divein-slider__zoom {
	opacity: 0;
	transition: opacity var(--transition-base);
}

.divein-slider--ready .divein-slider__thumbs,
.divein-slider--ready .divein-slider__zoom {
	opacity: 1;
}

/* ─── Area-level zoom hidden on video slide (not inline per-slide zooms) ── */
.divein-slider--ready.divein-slider--video-active .divein-slider__zoom:not(.divein-slider__zoom--inline) {
	display: none;
}

/* ─── Responsive ───────────────────────────────── */
@media (max-width: 767px) {
	.divein-slider {
		padding-bottom: 32px;
	}

	.divein-slider__thumbs {
		right: var(--space-sm);
		max-width: calc(3 * 45px + 2 * 8px); /* 151px — show max 3 thumbs on mobile */
	}

	.divein-slider__thumbs-row {
		right: var(--space-sm);
	}

	.divein-slider__zoom {
		left: 10px;
		bottom: 10px;
		width: 28px;
		height: 28px;
	}

	.divein-slider__zoom svg {
		width: 14px;
		height: 14px;
	}

	.divein-slider__headline {
		font-size: var(--text-lg);
	}

	/* Wide mode falls back to single image on mobile */
	.divein-slider--wide .divein-slider__main {
		aspect-ratio: 16 / 9;
	}

	/* Lock video: stack vertically on mobile */
	.divein-slider__lock-grid {
		grid-template-columns: 1fr;
	}

	/* Mobile video peek: remove container rounding so peek isn't clipped */
	.divein-slider--has-video .divein-slider__main {
		border-radius: 0;
	}

	/* Mobile video peek: individual slide rounding for the visible gap */
	.divein-slider--has-video .divein-slider__slide {
		border-radius: var(--radius);
		overflow: hidden;
	}
}

@media (max-width: 479px) {
	.divein-slider__thumb {
		width: 40px;
		height: 40px;
	}

	.divein-slider__thumbs {
		max-width: calc(3 * 40px + 2 * 8px); /* 136px — show max 3 thumbs on mobile */
	}
}