/* =======================================================================
 * ax-reels — video reels carousel (Figma 2415-106)
 *
 * Centred, looping video carousel: active clip full opacity (reel/portrait
 * keeps natural width, landscape fills), neighbours peek at 40% opacity. Title
 * label top-left, glass play/pause (bottom-left) + mute (bottom-right), and a
 * zoom-style pill pagination below. #top-prefixed to beat Enfold.
 * ===================================================================== */

#top .ax-reels {
	--ax-purple: #444192;
	--ax-green: #00bd87;
	font-family: "Montserrat", sans-serif;
	margin: 0 auto;
	z-index: 100;
	position: relative;
}

#top .ax-reels__splide {
	position: relative;
}

/* prev / next nav — grouped top-right, glass circle + purple border/chevron */
#top .ax-reels__nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 0 0 72px;
    margin-top: -106px;
}

#top .ax-reels__arrow {
	width: 49px;
	height: 49px;
	border-radius: 77px;
	background: rgba(255,255,255,.15);
	border: 1px solid var(--ax-purple);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	transition: background .2s ease;
}

#top .ax-reels__arrow svg {
	width: 15px;
	height: 18px;
}

#top .ax-reels__arrow svg path {
	fill: var(--ax-purple);
	transition: fill .2s ease;
}

#top .ax-reels__arrow:hover {
	background: var(--ax-purple);
}

#top .ax-reels__arrow:hover svg path {
	fill: #fff;
}

#top .ax-reels__splide .splide__track {
	overflow: visible;
}

/* centre the clip; neighbours shrink + fade back */
#top .ax-reels .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content !important;
}

#top .ax-reels .splide__slide .ax-reels__slide {
	transform: scaleY(0.95);
	opacity: .4;
	transition: transform .35s ease, opacity .35s ease;
}

#top .ax-reels .splide__slide.is-active .ax-reels__slide {
	transform: scale(1);
	opacity: 1;
}

#top .ax-reels__slide {
	position: relative;
	height: 551px;
	border-radius: 25px;
	overflow: hidden;
	background: #c6c6c6;
}

/* reel/portrait keeps its natural width; landscape fills */
#top .ax-reels__slide--video {
	width: auto;
}

#top .ax-reels__slide video {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Label (logo + title), top-left
 * ------------------------------------------------------------------- */
#top .ax-reels__label {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 36px);
}

#top .ax-reels__logo {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

#top .ax-reels__title {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14px;
	line-height: 1.21;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------------
 * Glass controls
 * ------------------------------------------------------------------- */
#top .ax-reels__btn {
	position: absolute;
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 77px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.52);
	backdrop-filter: blur(5px);
	box-shadow: 0 4px 4px rgba(0,0,0,.05);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}

#top .ax-reels__btn svg {
	width: 14px;
	height: 14px;
}

#top .ax-reels__btn--play {
	left: 16px;
	bottom: 16px;
}

#top .ax-reels__btn--mute {
	right: 16px;
	bottom: 16px;
}

#top .ax-reels__slide.is-playing .ax-reels__ico-play {
	display: none;
}

#top .ax-reels__slide:not(.is-playing) .ax-reels__ico-pause {
	display: none;
}

#top .ax-reels__slide.is-muted .ax-reels__ico-unmute {
	display: none;
}

#top .ax-reels__slide:not(.is-muted) .ax-reels__ico-mute {
	display: none;
}

/* ---------------------------------------------------------------------
 * Pagination — zoom-style pill, below the carousel
 * ------------------------------------------------------------------- */
#top .ax-reels .splide__pagination {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 0;
	margin: 30px 0 0;
}

#top .ax-reels .splide__pagination li {
	line-height: 0;
}

#top .ax-reels .splide__pagination__page {
	width: 12px;
	height: 12px;
	margin: 0;
	border-radius: 16px;
	background: #d9d9d9;
	opacity: 1;
	transform: none;
	transition: width .3s ease-in-out, background .3s ease-in-out;
}

#top .ax-reels .splide__pagination__page.is-active {
	width: 31px;
	background: var(--ax-purple);
}

/* ---------------------------------------------------------------------
 * Thumbnail overlay — visible whenever the clip isn't playing
 * ------------------------------------------------------------------- */
#top .ax-reels__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;                 /* above the video, below label/controls (z-index: 3) */
	pointer-events: none;       /* clicks pass through to the play button */
	opacity: 1;
	transition: opacity .25s ease;
}
#top .ax-reels__slide.is-playing .ax-reels__poster {
	opacity: 0;
}

/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------- */
@media (max-width: 989px) {
	#top .ax-reels {
		padding: 0 20px;
	}

	#top .ax-reels__slide {
		height: 460px;
	}
	
	#top .ax-reels__nav {
		display: none !important;
	}
}

@media (max-width: 640px) {
	#top .ax-reels__slide {
		height: 420px;
	}
}