/* ============================================================
   Reel Slider — Public Styles
   Premium dark TikTok / Reels aesthetic
   ============================================================ */

/* ── CSS Custom Properties ───────────────────────────────── */
.reel-slider-wrap {
	/* These can be overridden by the shortcode's inline style */
	--reel-video-w: 405px;
	--reel-video-h: 720px;

	/* Design tokens */
	--reel-gap:         16px;
	--reel-radius:      16px;
	--reel-ctrl-bg:     rgba(0, 0, 0, .55);
	--reel-ctrl-hover:  rgba(0, 0, 0, .80);
	--reel-ctrl-size:   38px;
	--reel-transition:  400ms cubic-bezier(.4, 0, .2, 1);
	--reel-nav-size:    48px;

	/* Accent — white-hot highlight */
	--reel-accent:      #ffffff;
	--reel-dot-active:  #ffffff;
	--reel-dot-idle:    rgba(255,255,255,.35);

	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 0 0 24px;     /* space for dots */
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ── Viewport & Track ────────────────────────────────────── */
.reel-slider-viewport {
	overflow: visible;
	width: 100%;
}

.reel-slider-track {
	display: flex;
	gap: var(--reel-gap);
	/* JS sets transform for sliding */
	transition: transform var(--reel-transition);
	will-change: transform;
}

/* Single-video: centre the lone slide, no transform needed */
.reel-slider-track.is-single {
	justify-content: center;
	transform: none !important;
	transition: none !important;
}

/* ── Slides ──────────────────────────────────────────────── */
.reel-slide {
	flex: 0 0 var(--reel-video-w);
	width: var(--reel-video-w);
	/* Keep aspect-ratio tight */
}

.reel-slide-inner {
	position: relative;
	width: 100%;
	height: var(--reel-video-h);
	border-radius: var(--reel-radius);
	overflow: hidden;
	background: #0a0a0a;
	box-shadow: 0 8px 32px rgba(0,0,0,.5);

	/* Subtle inner glow on active */
	transition: box-shadow .3s;
}
.reel-slide.is-active .reel-slide-inner {
	box-shadow:
		0 8px 32px rgba(0,0,0,.5),
		0 0 0 2px rgba(255,255,255,.18);
}

/* ── Video Element ───────────────────────────────────────── */
.reel-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

/* ── Gradient overlay (bottom-to-top) ───────────────────── */
.reel-slide-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0,0,0,.72) 0%,
		rgba(0,0,0,.18) 40%,
		transparent 70%
	);
	pointer-events: none;
	border-radius: inherit;
}

/* ── Title ───────────────────────────────────────────────── */
.reel-title {
	position: absolute;
	bottom: 56px;
	left: 0;
	right: 0;
	padding: 0 16px;
	font-size: clamp(13px, 1.6vw, 15px);
	font-weight: 600;
	color: #fff;
	letter-spacing: .01em;
	line-height: 1.4;
	z-index: 4;
	text-shadow: 0 1px 6px rgba(0,0,0,.7);
	/* Fade out when slide not active */
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s, transform .3s;
}
.reel-slide.is-active .reel-title {
	opacity: 1;
	transform: translateY(0);
}

/* ── Controls (mute + play) ──────────────────────────────── */
.reel-controls {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	gap: 8px;
	z-index: 5;
}

.reel-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width:  var(--reel-ctrl-size);
	height: var(--reel-ctrl-size);
	border-radius: 50%;
	background: var(--reel-ctrl-bg);
	border: none;
	cursor: pointer;
	padding: 0;
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background .2s, transform .15s;
	line-height: 1;
}
.reel-btn:hover {
	background: var(--reel-ctrl-hover);
	transform: scale(1.08);
}
.reel-btn:active {
	transform: scale(.95);
}
.reel-btn svg {
	width:  18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
	flex-shrink: 0;
}

/* ── Navigation Arrows ───────────────────────────────────── */
.reel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width:  var(--reel-nav-size);
	height: var(--reel-nav-size);
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,.28);
	transition: background .2s, transform .15s, opacity .2s;
	color: #111;
	padding: 0;
}
.reel-nav svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none;
}
.reel-nav:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.08);
}
.reel-nav:active {
	transform: translateY(-50%) scale(.96);
}
.reel-nav--prev {
	left: 6px;
}
.reel-nav--next {
	right: 6px;
}
.reel-nav.is-disabled {
	opacity: .35;
	pointer-events: none;
}

/* ── Dot Pagination ──────────────────────────────────────── */
.reel-dots {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 6px 0;
}

.reel-dot {
	width:  8px;
	height: 8px;
	border-radius: 4px;
	border: none;
	padding: 0;
	background: var(--reel-dot-idle);
	cursor: pointer;
	transition: background .25s, width .25s, transform .2s;
}
.reel-dot.is-active {
	background: var(--reel-dot-active);
	width: 22px;   /* pill shape for active */
}
.reel-dot:hover:not(.is-active) {
	background: rgba(255,255,255,.6);
	transform: scale(1.2);
}

/* ── Loading Skeleton ────────────────────────────────────── */
.reel-slide-inner.is-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		#1a1a1a 25%,
		#2a2a2a 50%,
		#1a1a1a 75%
	);
	background-size: 200% 100%;
	animation: reel-shimmer 1.4s infinite;
	z-index: 2;
}
@keyframes reel-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Play indicator (big play icon on pause) ─────────────── */
.reel-play-indicator {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 6;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
}
.reel-play-indicator.is-visible {
	opacity: 1;
	animation: reel-pulse .35s ease-out forwards;
}
.reel-play-indicator svg {
	width: 64px;
	height: 64px;
	fill: rgba(255,255,255,.85);
	filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
@keyframes reel-pulse {
	0%   { opacity: 0; transform: scale(.7);  }
	50%  { opacity: 1; transform: scale(1.1); }
	100% { opacity: 0; transform: scale(1.3); }
}

/* ── Empty notice (admin only) ───────────────────────────── */
.reel-empty-notice {
	padding: 12px 18px;
	background: #fff3cd;
	border: 1px solid #f0c36d;
	border-radius: 6px;
	font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────── */

/* Tablet: ≤ 768px */
@media ( max-width: 768px ) {
	.reel-slider-wrap {
		--reel-nav-size: 40px;
		--reel-ctrl-size: 34px;
	}
	.reel-nav {
		display: none; /* rely on swipe/dots on touch devices */
	}
}

/* Mobile: ≤ 480px */
@media ( max-width: 480px ) {
	.reel-title {
		font-size: 13px;
		bottom: 48px;
	}
}

/* ── Touch swipe support via CSS scroll-snap fallback hint ── */
@media ( hover: none ) {
	.reel-slider-viewport {
		/* Do NOT set overflow-x:scroll here; JS handles snapping */
	}
}