/* ==========================================================================
   LQ Image Slider Widget
   ========================================================================== */

.lq-is-wrapper {
    position: relative;
}

/* ── Swiper container ─────────────────────────────────────────────────── */
.lq-is {
    overflow: unset;
}

/* ── Individual slide ─────────────────────────────────────────────────── */
.lq-is .lq-is-slide {
    --lq-is-height: 480px;
    --lq-is-skew: 0deg;
    --lq-is-distance: calc(tan(abs(var(--lq-is-skew))) * var(--lq-is-height));
    height: var(--lq-is-height);
    transform: skewX(var(--lq-is-skew));
    overflow: unset;
    flex-shrink: 0;
}

/* ── Image ────────────────────────────────────────────────────────────── */
.lq-is .lq-is-slide .lq-is-img {
    position: relative;
    display: block;
    left: calc(var(--lq-is-distance) * -0.5);
    width: calc(100% + var(--lq-is-distance));
    max-width: unset;
    height: 100%;
    transform: skewX(calc(var(--lq-is-skew) * -1));
    /* object-fit & object-position are set via Elementor selectors */
    object-fit: cover;
    object-position: center center;
}

/* ── Controls ─────────────────────────────────────────────────────────── */
.lq-is-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lq-is-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    transition: opacity 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.lq-is-btn:hover {
    opacity: 0.6;
}

.lq-is-btn svg {
    display: block;
    width: 48px;
    height: auto;
}

.lq-is-btn.swiper-button-disabled {
    opacity: 0.2;
    pointer-events: none;
}