/* ============================================================
   LoopMosaic – Carousel Layout
   ============================================================ */

/* Outer wrapper: holds the stage (card + nav) and the pagination below it */
.loopmosaic-carousel-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    --lm-carousel-nav-gap: 84px;
}

/* Stage: card + side nav. The arrows sit in the reserved gap on the right;
   we mirror that gap on the LEFT too so the slide stays visually centered
   within the section instead of being pushed left by the right-only padding.
   isolation: isolate creates a local stacking context so Swiper's
   composited layers never bleed through the stacked card.
   transition: none overrides any blanket "transition: all" the theme may set —
   if the stage transitions any property during Swiper's animation it glitches. */
.loopmosaic-carousel-stage {
    position: relative;
    padding-left: var(--lm-carousel-nav-gap, 62px);
    padding-right: var(--lm-carousel-nav-gap, 62px);
    box-sizing: border-box;
    isolation: isolate;
    transition: none !important;
}

/* Stacked card peek — real DOM element, no transition so the
   theme's "transition: all" doesn't animate it during slide changes. */
.lm-stack-card {
    position: absolute;
    top: -18px;
    left: calc(var(--lm-carousel-nav-gap, 62px) + 20px);
    right: calc(var(--lm-carousel-nav-gap, 62px) + 20px);
    height: 72px;
    border-radius: 24px 24px 0 0;
    background: #184e4e;
    z-index: 0;
    pointer-events: none;
    transition: none !important;
}

/* Hide stacked card on the last slide when loop is disabled */
.loopmosaic-carousel-wrap.lm-carousel-end .lm-stack-card {
    opacity: 0;
    visibility: hidden;
}

/* Swiper container — z-index 1 paints it above .lm-stack-card (z-index 0).
   No transform/will-change: promoting to a GPU composite layer breaks the
   z-index ordering, letting the stack card bleed over slide content.
   Opaque background is insurance: if a slide's image is momentarily
   unloaded (lazy clones during a loop wrap), the swiper's own background
   covers the stack card behind it instead of revealing the green bar. */
.loopmosaic-carousel-wrap .loopmosaic-swiper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--lm-carousel-height, 520px);
    border-radius: 24px;
    overflow: hidden;
    background: var(--lm-carousel-bg, #072a2a);
}

/* Each slide fills the container */
.loopmosaic-carousel-wrap .swiper-wrapper,
.loopmosaic-carousel-wrap .swiper-slide {
    height: 100%;
}

/* Default card inside carousel – fill the slide */
.loopmosaic-carousel-wrap .loopmosaic-item {
    height: 100% !important;
    margin: 0 !important;
    border-radius: 24px;
    overflow: hidden;
}

/* Featured-image background fallback. Elementor loop templates that use the
   Featured Image as a CONTAINER background don't resolve that dynamic URL
   when rendered outside Elementor's own Loop Grid (see class-renderer.php).
   The renderer exposes the post's featured image as --lm-featured-bg; paint
   it behind the template here. A real container background in the template
   (opaque) covers this; a transparent/failed one lets the photo show, with
   the heading/text rendering on top. */
.loopmosaic-carousel-wrap .loopmosaic-item[style*="--lm-featured-bg"] {
    background-image: var(--lm-featured-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Disable ALL hover-lift effects inside the carousel.
   The grid CSS lifts .loopmosaic-item; Elementor loop templates lift
   via .e-con (transform + box-shadow). Cover both properties. */
.loopmosaic-carousel-wrap .swiper-slide:hover,
.loopmosaic-carousel-wrap .loopmosaic-item:hover,
.loopmosaic-carousel-wrap .e-con:hover,
.loopmosaic-carousel-wrap .elementor-widget-wrap:hover,
.loopmosaic-carousel-wrap .jet-listing-grid__item:hover {
    transform: none !important;
    box-shadow: none !important;
}

.loopmosaic-carousel-wrap .loopmosaic-item__media,
.loopmosaic-carousel-wrap .loopmosaic-item__media img,
.loopmosaic-carousel-wrap .loopmosaic-item__image,
.loopmosaic-carousel-wrap .loopmosaic-item__media .loopmosaic-bg-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    border-radius: 0;
}

/* Slide images render as inline-block by default, which leaves baseline
   "leading" whitespace above the image — that gap exposed the swiper
   background as a strip at the top of the card. Force block so the
   image (Elementor loop template or default card) sits flush to the top.
   Also overrides any custom theme/page animations (like .img_gal scale/opacity)
   that would scale down the image and create border-like side gaps. */
.loopmosaic-carousel-wrap .swiper-slide img,
.loopmosaic-carousel-wrap img {
    display: block;
    vertical-align: top;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Force loop-template CONTENT visible inside slides. Swiper translates slides
   horizontally, so any entrance / scroll-reveal animation that starts content
   at opacity:0 (Elementor "entrance animation" or the theme's scroll-reveal)
   never triggers for non-active or cloned slides — the heading, description
   and button would disappear after sliding to them. Override the hidden start
   state so all slide content is always shown. */
.loopmosaic-carousel-wrap .swiper-slide .elementor-element,
.loopmosaic-carousel-wrap .swiper-slide .elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
}
.loopmosaic-carousel-wrap .swiper-slide .elementor-widget {
    animation: none !important;
    transform: none !important;
}

/* Elementor loop template in carousel – fill the slide height ONLY at the
   root level, so the container's own flex / justify-content / alignment
   settings have full height to work against. We deliberately do NOT force
   heights or flex on inner widgets — that would override the template's own
   layout (e.g. justify-content: flex-end / center stops working when a child
   widget is given flex-grow and eats all the free space). The template owns
   its internal layout; we only guarantee it has the full slide to lay out in. */
.loopmosaic-carousel-wrap .swiper-slide .elementor,
.loopmosaic-carousel-wrap .swiper-slide .elementor > .e-con,
.loopmosaic-carousel-wrap .swiper-slide .elementor > .e-con > .e-con-inner,
.loopmosaic-carousel-wrap .swiper-slide .jet-listing-grid__item {
    height: 100%;
}

/* Minimal image safety: keep image widgets from busting the slide width
   without stealing flex space (which would disable justify-content). */
.loopmosaic-carousel-wrap .swiper-slide .elementor-widget-image img {
    max-width: 100%;
}

/* ── Navigation (right side, vertical) ─────────────────────── */

.loopmosaic-carousel-nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 50px;
    z-index: 20;
}

.lm-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(8, 28, 28, 0.52);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.22s ease, transform 0.18s ease;
    outline: none;
    box-shadow: none;
    padding: 0;
    flex-shrink: 0;
}

.lm-nav-btn:hover,
.lm-nav-btn:focus-visible {
    background: rgba(8, 28, 28, 0.82);
    transform: scale(1.08);
    box-shadow: none;
}

.lm-nav-btn svg {
    display: block;
    pointer-events: none;
}

/* Swiper disabled state */
.lm-nav-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* ── Pagination switches (BELOW the card, not on the photo) ──── */

.loopmosaic-carousel-wrap .swiper-pagination {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 30px 0 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 15;
}

/* Slide counter (current / total) below the pagination switches. */
.loopmosaic-carousel-counter {
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
}

.loopmosaic-carousel-counter .lm-counter-current {
    color: #ffffff;
}

.loopmosaic-carousel-wrap .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.25s ease;
}

.loopmosaic-carousel-wrap .swiper-pagination-bullet:hover {
    background: rgba(255, 255, 255, 0.75);
}

/* Active switch elongates into a teal-cyan pill (design reference) */
.loopmosaic-carousel-wrap .swiper-pagination-bullet-active,
.loopmosaic-carousel-wrap .swiper-pagination-bullet-active:hover {
    width: 46px;
    background: #5FC2C2 !important;
}

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

@media (max-width: 768px) {
    .loopmosaic-carousel-wrap {
        --lm-carousel-nav-gap: 0px;
    }

    .loopmosaic-carousel-nav {
        right: 10px;
        flex-direction: row;
        top: auto;
        bottom: 14px;
        transform: none;
        width: auto;
        gap: 8px;
    }

    .lm-nav-btn {
        width: 38px;
        height: 38px;
    }
}