/* Coqpit Pinned Gallery widget - structural styles (colors/spacing/typography come from Elementor controls) */

.coqpit-pinned-gallery {
    position: relative;
    width: 100%;
}

.coqpit-pinned-gallery__spacer {
    position: relative;
    width: 100%;
}

/* GSAP's ScrollTrigger applies position:fixed to this element itself at
   runtime (pin:true) and inserts its own spacer - no manual position:fixed
   needed here. Before JS runs, height:100vh keeps layout stable. */
.coqpit-pinned-gallery__pin {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.coqpit-pinned-gallery__bg,
.coqpit-pinned-gallery__stage,
.coqpit-pinned-gallery__captions {
    position: absolute;
    inset: 0;
}

.coqpit-pinned-gallery__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coqpit-pinned-gallery__overlay {
    position: absolute;
    inset: 0;
}

.coqpit-pinned-gallery__fade {
    position: absolute;
    left: 0;
    right: 0;
    height: 25vh;
    pointer-events: none;
}

.coqpit-pinned-gallery__fade--top {
    top: 0;
    background: linear-gradient(180deg, #191C2A 0%, rgba(19, 21, 38, 0.00) 100%);
}

.coqpit-pinned-gallery__fade--bottom {
    bottom: 0;
    background: linear-gradient(0deg, #191C2A 0%, rgba(19, 21, 38, 0.00) 100%);
}

/* Sits between .bg and .stage in the DOM (no z-index needed) so the sliding
   images - which do carry their own z-index for their left/right stacking -
   naturally paint on top of it as they grow/cross the screen. */
.coqpit-pinned-gallery__heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 28%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 5%;
    text-align: center;
}

.coqpit-pinned-gallery__stage {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Vertically centered via top:50%/translateY(-50%) - safe to use transform
   here because GSAP's z/x/scale tween targets the <img> child, not this
   element; this box's own "transform" is free for the static centering
   offset. Horizontally, "left" is computed with calc() rather than
   left:0/right:0 + margin:auto: the auto-margin
   trick only centers correctly while the box fits inside the leftover
   space, and silently collapses to a plain left-edge anchor once the
   width is wide enough (e.g. a 90% image_width plus any offset) to
   over-constrain it. calc() has no such breakdown - it centers (or
   centers-then-shifts) at any width. The GSAP x-tween (0 -> +-exit-
   distance, on the <img> below) still composes on top of it cleanly
   either way, since this is plain layout, not transform.

   Perspective lives HERE (per slide) rather than once on the shared
   .stage: a shared perspective means every slide's translateZ projects
   toward the same perspective-origin point, so at a small scale (entry)
   an off-center slide's projected position still collapses toward that
   one shared point - it only visibly reaches its own left/right offset
   once it has grown close to full size. Giving each slide its own
   perspective makes ITS default origin (50% 50% of itself) the slide's
   own already-offset position, so growth radiates from there at every
   scale, including the very start.

   No overflow:hidden here anymore either - the growing image needs to
   escape this box's own footprint; .pin's overflow:hidden further up is
   what ultimately clips it to the viewport. */
.coqpit-pinned-gallery__slide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% - (var(--pg-width, 45%) / 2));
    aspect-ratio: var(--pg-aspect-ratio, 3 / 4);
    width: var(--pg-width, 45%);
    opacity: 0;
    perspective: var(--pg-perspective, 1000px);
}

.coqpit-pinned-gallery__slide--left {
    left: calc(50% - (var(--pg-width, 45%) / 2) - var(--pg-offset, 20%));
}

.coqpit-pinned-gallery__slide--right {
    left: calc(50% - (var(--pg-width, 45%) / 2) + var(--pg-offset, 20%));
}

/* Elementor's own base stylesheet ships ".elementor img { height: auto;
   max-width: 100%; }" - a class+type selector that outranks our single
   class selector below regardless of source order, so it was clobbering
   height:100% and leaving the image sized to its own intrinsic ratio
   instead of filling the (portrait, taller-than-tall) slide box. Scoping
   through the parent class raises our specificity above it. */
/* object-fit:contain (rather than cover) was tried first to avoid cropping,
   but Chrome/WebKit both fail to clip border-radius on an <img> whose
   object-fit is "contain" - the corners render square no matter what the
   border-radius control is set to. cover avoids that engine bug entirely
   (confirmed: same border-radius clips correctly with cover/fill, not with
   contain) and also fills the portrait box instead of letterboxing landscape
   source photos inside it. */
.coqpit-pinned-gallery__slide .coqpit-pinned-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coqpit-pinned-gallery__captions {
    display: flex;
    align-items: center;
    justify-content: center;
    top: auto;
    height: 3.6rem;
    overflow: hidden;
    pointer-events: none;
}

.coqpit-pinned-gallery__caption {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
}

.coqpit-pinned-gallery__empty {
    text-align: center;
    opacity: 0.6;
    padding: 40px 0;
}