/* ============================================================
   Powerful Performance Slider — style.css v2.7
   ============================================================ */

.pp-slider-wrap {
    position: relative;
    display: flex;
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
    align-items: stretch;
}

.pp-slider-wrap.pp-reverse { flex-direction: row-reverse; }

/* ── Left panel ── */
.pp-left {
    position: relative;
    z-index: 2;
    flex: 0 0 50%;
    min-width: 0;              /* prevent flex blowout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px 48px 48px;
    background: #ffffff;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pp-heading {
    font-size: clamp(28px, 3.5vw, 52px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #111;
    margin: 0 0 36px;
    text-transform: uppercase;
}

/* ── List ── */
.pp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    cursor: pointer;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    box-sizing: border-box;
    min-width: 0;
}

.pp-has-dividers .pp-item { border-bottom-width: 1px; border-bottom-style: solid; }
.pp-has-dividers .pp-item:first-child { border-top-width: 1px; border-top-style: solid; }

.pp-item-text {
    flex: 1;
    min-width: 0;
    font-size: clamp(13px, 1.1vw, 17px);
    font-weight: 400;
    color: #222;
    transition: color .3s;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pp-item-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color .3s, transform .3s;
}
.pp-item-icon i, .pp-item-icon svg {
    display: block; width: 1em; height: 1em;
    transition: color .3s, fill .3s, transform .3s;
}

.pp-item:hover .pp-item-text,
.pp-item.is-active .pp-item-text { color: #3b8de0; }

.pp-item:hover .pp-item-icon,
.pp-item.is-active .pp-item-icon,
.pp-item:hover .pp-item-icon i,
.pp-item.is-active .pp-item-icon i { color: #3b8de0; transform: translateX(4px); }

.pp-item:hover .pp-item-icon svg,
.pp-item.is-active .pp-item-icon svg { fill: #3b8de0; transform: translateX(4px); }

/* ── Right panel ── */
.pp-right {
    flex: 1;
    min-width: 0;
    position: relative;
    cursor: grab;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    align-self: flex-start;
}
.pp-right:active { cursor: grabbing; }

.pp-images-stack {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
}

.pp-image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(60px);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 500ms;
    overflow: hidden;
}
.pp-image.is-active { opacity: 1; transform: none !important; z-index: 1; }
.pp-image.is-leaving { opacity: 0; z-index: 0; }

.pp-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* ── Dots — hidden ── */
.pp-dots { display: none !important; }

/* ── Mobile-only text list (rendered in HTML after .pp-right) ── */
.pp-mobile-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 12px 20px 24px;
    /* inherits divider class from .pp-list if needed */
}

/* ============================================================
   RESPONSIVE BREAKPOINTS — desktop only (flex row)
   left-panel width overridden per breakpoint via Elementor selectors
   ============================================================ */

/* ≤ 1920 — handled by default Elementor responsive controls */
/* ≤ 1680 */
@media (max-width: 1680px) {
    /* Elementor injects its own selector here via left_panel_width_1680 */
}
/* ≤ 1366 */
@media (max-width: 1366px) { }
/* ≤ 1280 */
@media (max-width: 1280px) { }

/* ============================================================
   TABLET / MOBILE  ≤ 1024px  — vertical layout
   Order: heading → image → text list
   ============================================================ */
@media (max-width: 1024px) {

    .pp-slider-wrap {
        flex-direction: column !important;
        align-items: stretch;
    }

    /* Left panel: show ONLY heading on mobile */
    .pp-left {
        flex: none !important;
        width: 100%;
        padding: 28px 20px 16px;
        box-sizing: border-box;
    }
    .pp-heading { font-size: clamp(24px, 6vw, 38px); margin-bottom: 0; }

    /* Hide desktop list inside left panel */
    .pp-left .pp-list { display: none; }

    /* Right panel: full width, aspect-ratio preserved */
    .pp-right {
        width: 100%;
        align-self: auto;
        cursor: default;
        /* aspect-ratio stays from desktop setting or 1/1 default */
    }

    /* Mobile list: shown below the image */
    .pp-mobile-list { display: block; }
    .pp-mobile-list .pp-item { padding: 12px 0; }
    .pp-mobile-list .pp-item-text { font-size: 14px; }
}

@media (max-width: 600px) {
    .pp-left { padding: 20px 16px 10px; }
    .pp-mobile-list { padding: 8px 16px 20px; }
}