/* ============================================
   Pretpot Sticky Horizontal Scroll Multisection Panels
   ============================================

   STICKY FIX
   The outer .pretpot-shsmp MUST NOT have overflow:hidden — that would
   cancel position:sticky on its child .pretpot-shsmp__sticky-wrapper.
   Clipping is handled only on the sticky wrapper itself.
   ============================================ */

/* ── Outer scroll-distance wrapper ── */
.pretpot-shsmp {
    position: relative;
    width: 100%;
    /* NO overflow:hidden here — it would break position:sticky */
}

/* ── Sticky viewport ── */
.pretpot-shsmp__sticky-wrapper {
    position: sticky;
    top: 0;          /* overridden by Elementor selector / inline style */
    height: 100vh;   /* overridden by Elementor responsive selector */
    overflow: hidden; /* clip the sliding track here, not on the outer div */
    width: 100%;
}

/* ── Sliding track ── */
.pretpot-shsmp__track {
    display: flex;
    height: 100%;
    will-change: transform;
    backface-visibility: hidden;
}

/* RTL: panels slide in from the right */
.pretpot-shsmp--rtl .pretpot-shsmp__track {
    flex-direction: row-reverse;
}

/* ── Individual panel ── */
.pretpot-shsmp__panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;   /* overridden by Elementor responsive selector */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ════════════════════════════════════════════
   BACKGROUND LAYER
   ════════════════════════════════════════════ */
.pretpot-shsmp__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.pretpot-shsmp__bg-image,
.pretpot-shsmp__bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

.pretpot-shsmp__bg-video {
    pointer-events: none;
}

.pretpot-shsmp__bg-color {
    position: absolute;
    inset: 0;
}

/* Parallax background media */
.pretpot-shsmp__bg--parallax .pretpot-shsmp__bg-image,
.pretpot-shsmp__bg--parallax .pretpot-shsmp__bg-video {
    will-change: transform;
    height: 120%;
    top: -10%;
    position: absolute;
    width: 100%;
}


/* ════════════════════════════════════════════
   CONTENT LAYER (sits above background)
   ════════════════════════════════════════════ */
.pretpot-shsmp__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    /* gap controlled per-panel via Elementor selectors */
}

/* ── Typography elements ── */
.pretpot-shsmp__heading {
    margin: 0;
    position: relative;
    z-index: 2;
}

.pretpot-shsmp__description {
    margin: 0;
    position: relative;
    z-index: 2;
}

.pretpot-shsmp__text {
    margin: 0;
    position: relative;
    z-index: 2;
}

.pretpot-shsmp__button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}


/* ════════════════════════════════════════════
   MEDIA AREAS — shared rules
   ════════════════════════════════════════════ */
.pretpot-shsmp__media-area {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.pretpot-shsmp__media-area img,
.pretpot-shsmp__media-area video {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

/* Parallax media */
.pretpot-shsmp__media-area--parallax img,
.pretpot-shsmp__media-area--parallax video {
    will-change: transform;
    height: 120%;
    top: -10%;
    position: absolute;
}


/* ════════════════════════════════════════════
   LAYOUT 1 — Full Media + Centred Caption
   ════════════════════════════════════════════ */
.pretpot-shsmp__panel--layout-1 .pretpot-shsmp__content {
    align-items: center;
    justify-content: center;
}

.pretpot-shsmp__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    /* gap controlled by Elementor selector */
}


/* ════════════════════════════════════════════
   LAYOUT 2 — Heading Left + 3-Media Row
   ════════════════════════════════════════════ */
.pretpot-shsmp__panel--layout-2 .pretpot-shsmp__content {
    align-items: flex-start;
    justify-content: center;
}

.pretpot-shsmp__media-row {
    display: flex;
    gap: 30px;        /* overridden by Elementor gap selector */
    align-items: flex-end;
    flex-wrap: nowrap;
}


/* ════════════════════════════════════════════
   LAYOUT 3 — Corner Media + Centre Content
   ════════════════════════════════════════════ */
.pretpot-shsmp__panel--layout-3 {
    align-items: center;
    justify-content: center;
}

.pretpot-shsmp__corner-media {
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

.pretpot-shsmp__corner-media img,
.pretpot-shsmp__corner-media video {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

.pretpot-shsmp__corner-media--tl {
    top: 40px;
    left: 40px;
    /* dimensions & inset overridden by Elementor selectors */
}

.pretpot-shsmp__corner-media--br {
    bottom: 40px;
    right: 40px;
}

.pretpot-shsmp__center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    /* gap controlled by Elementor selector */
}


/* ════════════════════════════════════════════
   LAYOUT 4 — Heading Top + Offset Media
   ════════════════════════════════════════════ */
.pretpot-shsmp__panel--layout-4 .pretpot-shsmp__content {
    justify-content: flex-start;
    align-items: center;
    padding-top: 80px;
}

.pretpot-shsmp__media-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 40px;           /* overridden by Elementor gap selector */
    margin-top: auto;
    margin-bottom: 60px;
    flex-wrap: nowrap;
}

/* Named size classes for layout-4 slots */
.pretpot-shsmp__media-area--small {
    width: 160px;
    height: 140px;
}

.pretpot-shsmp__media-area--large {
    width: 400px;
    height: 300px;
}


/* ════════════════════════════════════════════
   LAYOUT 5 — Top Media + Heading Below
   ════════════════════════════════════════════ */
.pretpot-shsmp__panel--layout-5 .pretpot-shsmp__content {
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
}

.pretpot-shsmp__top-media {
    width: 85%;
    height: 35vh;
    overflow: hidden;
    flex-shrink: 0;
    /* width/height overridden by Elementor selectors */
}

.pretpot-shsmp__top-media img,
.pretpot-shsmp__top-media video {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}


/* ════════════════════════════════════════════
   LAYOUT 6 — Heading + Description + Button
   ════════════════════════════════════════════ */
.pretpot-shsmp__panel--layout-6 .pretpot-shsmp__content {
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* ════════════════════════════════════════════
   RESPONSIVE DEFAULTS
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .pretpot-shsmp__content {
        padding: 30px;
    }
    .pretpot-shsmp__media-row {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .pretpot-shsmp__content {
        padding: 20px;
    }
    .pretpot-shsmp__media-row {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pretpot-shsmp__media-wrapper {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pretpot-shsmp__corner-media--tl {
        top: 20px;
        left: 20px;
    }
    .pretpot-shsmp__corner-media--br {
        bottom: 20px;
        right: 20px;
    }
}


/* ════════════════════════════════════════════
   ELEMENTOR EDITOR — preview mode fix
   Stack panels vertically so they're editable
   ════════════════════════════════════════════ */
.elementor-editor-active .pretpot-shsmp {
    height: auto !important;
}

.elementor-editor-active .pretpot-shsmp__sticky-wrapper {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.elementor-editor-active .pretpot-shsmp__track {
    flex-wrap: wrap;
    transform: none !important;
}

.elementor-editor-active .pretpot-shsmp__panel {
    flex: 0 0 100%;
    width: 100%;
    min-height: 600px;
    height: auto !important;
    position: relative !important;
}

/* Fix sticky horizontal scroll: remove overflow:hidden from theme wrapper */
#page {
    overflow: visible !important;
}