/* Mavan Gallery Carousel — base styles (override in the widget's Style tab) */

.mavan-gallery-carousel {
	--mavan-gallery-arrow-size: 44px;
	--mavan-gallery-arrow-offset: 12px;
	--mavan-gallery-dot-size: 8px;
	position: relative;
}

.mavan-gallery-carousel__stage {position: relative;}
.mavan-gallery-carousel__swiper {overflow: hidden;}

/* Before Swiper starts: lay slides out in a row so the page doesn't jump. */
.mavan-gallery-carousel__swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-wrapper {display: flex; gap: 20px; overflow: hidden;}
.mavan-gallery-carousel__swiper:not(.swiper-initialized):not(.swiper-container-initialized) .swiper-slide {flex: 0 0 calc((100% - 40px) / 3);}

.mavan-gallery-carousel__slide {position: relative; height: auto; margin: 0;}
.mavan-gallery-carousel__image {position: relative; display: block; overflow: hidden; isolation: isolate;}
.mavan-gallery-carousel__image::after {content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-color: var(--mgc-overlay, transparent); transition: background-color .3s ease;}
.mavan-gallery-carousel__image img {display: block; width: 100%; height: auto;}

/* Hover zoom: own GPU layer + ease-out curve = smooth, no shimmer.
   The mask keeps rounded corners clipped cleanly while scaling (Safari). */
.mavan-gallery-zoom-yes .mavan-gallery-carousel__image {-webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0);}
.mavan-gallery-zoom-yes .mavan-gallery-carousel__image img {transform: translateZ(0) scale(1); backface-visibility: hidden; will-change: transform; transition: transform .7s cubic-bezier(.22, .61, .36, 1);}
.mavan-gallery-zoom-yes .mavan-gallery-carousel__image:is(:hover, :focus-visible) img {transform: translateZ(0) scale(1.05);}

@media (prefers-reduced-motion: reduce) {
	.mavan-gallery-zoom-yes .mavan-gallery-carousel__image img {transition: none;}
}

/* Title & caption — below the image, or over it (Position control sets the variables) */
.mavan-gallery-carousel__content {position: var(--mgc-pos, static); inset: auto 0 0 0; z-index: 2; margin-top: 12px; padding: var(--mgc-pad, 0); color: var(--mgc-text, inherit); background: var(--mgc-shade, none); pointer-events: var(--mgc-pe, auto); transition: opacity .3s ease;}
.mavan-gallery-carousel__content a {pointer-events: auto;}
.mavan-gallery-carousel__title {color: inherit;}
@media (hover: hover) {
	.mavan-gallery-reveal-yes .mavan-gallery-carousel__content {opacity: var(--mgc-hidden, 1);}
	.mavan-gallery-reveal-yes .mavan-gallery-carousel__slide:is(:hover, :focus-within) .mavan-gallery-carousel__content {opacity: 1;}
}
.mavan-gallery-carousel__title {margin: 0; font-size: 1rem;}
.mavan-gallery-carousel__caption {margin: 4px 0 0; font-size: .875rem; opacity: .8;}

/* Arrows */
:where(.mavan-gallery-carousel) button.mavan-gallery-carousel__arrow {position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--mavan-gallery-arrow-size); height: var(--mavan-gallery-arrow-size); padding: 0; font-size: 16px; line-height: 1; color: #0F0F0F; background: rgba(255, 255, 255, .9); border: 0; border-radius: 50%; cursor: pointer; transform: translateY(-50%); transition: opacity .2s ease, color .2s ease, background-color .2s ease;}
:where(.mavan-gallery-carousel) button.mavan-gallery-carousel__arrow:is(:hover, :focus) {color: #0F0F0F; background: #fff;}
.mavan-gallery-carousel .mavan-gallery-carousel__arrow svg {width: 1em; height: 1em;}
.mavan-gallery-carousel .mavan-gallery-carousel__arrow svg.e-font-icon-svg {fill: currentColor;}
.mavan-gallery-carousel .mavan-gallery-carousel__arrow svg:not(.e-font-icon-svg) :is(path, line, polyline, polygon, circle, rect, ellipse) {stroke: currentColor;}
.mavan-gallery-carousel__arrow--prev {left: var(--mavan-gallery-arrow-offset);}
.mavan-gallery-carousel__arrow--next {right: var(--mavan-gallery-arrow-offset);}
.mavan-gallery-carousel__arrow.swiper-button-disabled {opacity: .35; pointer-events: none;}
.mavan-gallery-carousel__arrow.swiper-button-lock {display: none;}

/* Dots */
.mavan-gallery-carousel .mavan-gallery-carousel__dots {position: static; display: flex; justify-content: center; gap: 8px; margin-top: 20px; width: auto; transform: none;}
.mavan-gallery-carousel .mavan-gallery-carousel__dots .swiper-pagination-bullet {width: var(--mavan-gallery-dot-size); height: var(--mavan-gallery-dot-size); margin: 0; background: currentColor; opacity: .3; transition: opacity .2s ease, width .3s ease;}
.mavan-gallery-carousel .mavan-gallery-carousel__dots .swiper-pagination-bullet-active {opacity: 1;}
.mavan-gallery-carousel__dots.swiper-pagination-lock {display: none;}

.mavan-gallery-carousel__empty {padding: 20px; text-align: center; border: 1px dashed currentColor; opacity: .6;}