/* ============================================================
   Swiper Engine — Frontend Styles
   ============================================================ */

/*
 * .is-swiper.se-initialized — the Divi row that triggered the carousel.
 * Must be overflow:visible so nav buttons that extend beyond the swiper
 * track edge are not clipped.
 */
.is-swiper.se-initialized {
    overflow: visible;
    position: relative;
}

/*
 * .se-swiper-wrap — positioning context for nav buttons.
 * Nav buttons are appended here (not inside .swiper) to avoid being
 * clipped by Swiper's own overflow:hidden on the .swiper element.
 */
.se-swiper-wrap {
    position: relative;
    width: 100%;
}

/*
 * .se-swiper — the actual Swiper.js container.
 * Keeps overflow:hidden so slides clip correctly during transitions.
 * Padding gives room for card box-shadows not to clip.
 */
.se-swiper {
    width: 100%;
    overflow: hidden;
    padding: 8px 0 24px;
}

/* Slides fill the column height evenly */
.se-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: stretch;
}

/* Ensure direct children of slides stretch to full height (covers Divi modules) */
.se-swiper .swiper-slide > * {
    width: 100%;
}

/* ── Navigation Buttons (shared) ─────────────────────────── */

.se-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--se-nav-bg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    /* Swiper sets position:absolute — ensure it layers above content */
    z-index: 10;
}

.se-nav-btn:hover {
    background: color-mix(in srgb, var(--se-nav-bg, #fff) 88%, #000 12%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

/* Remove Swiper's default arrow icons (v11 ::after, v12 injected SVG) */
.se-nav-btn::after,
.se-nav-btn .swiper-navigation-icon,
.se-nav-btn svg {
    display: none;
}

/* Chevron via mask-image — no icon font dependency */
.se-nav-btn::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--se-nav-color, #333);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* chevron-left */
.swiper-button-prev.se-nav-btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* chevron-right */
.swiper-button-next.se-nav-btn::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Disabled state */
.se-nav-btn.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Nav Placement: Horizontal (sides) ───────────────────── */

/*
 * Buttons are positioned on .se-swiper-wrap (the overflow:visible parent).
 * Swiper sets top:50% / translateY(-50%) on them by default which still applies.
 *
 * --se-nav-offset direction:
 *   Positive value → pushes button OUTWARD (further outside the slider edge).
 *   Negative value → pulls button INWARD (overlapping the slide content).
 *
 * Achieved by negating the offset on the left/right property:
 *   left:  calc(-1 * offset)  — positive offset → more negative left → further out
 *   right: calc(-1 * offset)  — same logic for the right side
 */
.se-nav--horizontal .swiper-button-prev {
    left: calc(-1 * var(--se-nav-offset-mobile, var(--se-nav-offset, 0px)));
}
.se-nav--horizontal .swiper-button-next {
    right: calc(-1 * var(--se-nav-offset-mobile, var(--se-nav-offset, 0px)));
}

@media (min-width: 768px) {
    .se-nav--horizontal .swiper-button-prev {
        left: calc(-1 * var(--se-nav-offset, 0px));
    }
    .se-nav--horizontal .swiper-button-next {
        right: calc(-1 * var(--se-nav-offset, 0px));
    }
}

/* ── Nav Placement: Below slider ─────────────────────────── */

/*
 * Adds padding-bottom to .se-swiper-wrap to make room for the buttons,
 * then repositions them centred beneath the swiper track.
 * --se-nav-offset controls the gap between track bottom and the buttons.
 * Positive = more space below. Negative = tighter gap.
 */
.se-nav--below {
    padding-bottom: calc(52px + var(--se-nav-offset-mobile, var(--se-nav-offset, 0px)));
}

@media (min-width: 768px) {
    .se-nav--below {
        padding-bottom: calc(52px + var(--se-nav-offset, 0px));
    }
}

.se-nav--below .swiper-button-prev,
.se-nav--below .swiper-button-next {
    top: auto;
    bottom: 0;
    transform: none;
}

/* Centre both buttons below — prev left of centre, next right of centre */
.se-nav--below .swiper-button-prev {
    left: calc(50% - 52px);
    right: auto;
}

.se-nav--below .swiper-button-next {
    right: calc(50% - 52px);
    left: auto;
}

/* ── Disabled breakpoint — full layout transparency ──────────────── */

/*
 * When se-swiper--disabled is present every wrapper between the Divi row and
 * the actual .et_pb_column nodes is set to `display:contents`, making them
 * phantom elements with no layout box.
 *
 * Why the full chain matters:
 *   Divi's column width formula is:
 *     width: calc(25% - var(--horizontal-gap-parent, 5.5%) * 0.75)
 *   The percentage AND the CSS variable are both resolved against the FLEX
 *   PARENT. That flex parent must be .et_pb_row.et_flex_row for the numbers
 *   to be correct. Applying display:contents to every intermediate wrapper
 *   (.se-swiper-wrap, .swiper, .swiper-wrapper, .swiper-slide) causes the
 *   browser to skip those boxes entirely — the .et_pb_column elements become
 *   direct flex children of the Divi row, exactly as Divi designed them.
 *
 *   display:contents also voids all inline styles Swiper sets on .swiper-slide
 *   (width / margin-right) and .swiper-wrapper (transform) because elements
 *   with no box have no geometry to apply those properties to.
 *
 * Nav buttons are explicitly hidden; their positioning context becomes moot.
 */
.se-swiper-wrap.se-swiper--disabled,
.se-swiper-wrap.se-swiper--disabled .se-swiper,
.se-swiper-wrap.se-swiper--disabled .swiper-wrapper,
.se-swiper-wrap.se-swiper--disabled .swiper-slide {
    display: contents;
}

.se-swiper-wrap.se-swiper--disabled .se-nav-btn,
.se-swiper-wrap.se-swiper--disabled .swiper-pagination {
    display: none !important;
}

/* ── Pagination Dots ─────────────────────────────────────── */

.se-swiper .swiper-pagination {
    bottom: 4px;
}

.se-swiper .swiper-pagination-bullet {
    background: var(--se-dot-color, #bbb);
    opacity: 1;
}

.se-swiper .swiper-pagination-bullet-active {
    background: var(--se-dot-active, #333);
}

/* ── Fade Effect ───────────────────────────────────────────── */

/*
 * Fade stacks slides with absolute positioning. Override the default
 * flex/auto-height slide rules so the active slide defines container height.
 */
.se-swiper-wrap.se-effect-fade .se-swiper {
    position: relative;
}

.se-swiper-wrap.se-effect-fade .swiper-slide {
    display: block;
    height: auto;
}

.se-swiper-wrap.se-effect-fade .swiper-slide > * {
    width: 100%;
}

.se-swiper-wrap.se-effect-fade .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}