/* ==========================================================================
   Image Box Slider – Child Theme Styles
   /wp-content/themes/atamisa-child/assets/css/image-box-slider.css
   ========================================================================== */

/* ---------- Swiper container ---------- */
/*
 * KEY FIX: overflow must be visible so the partial next-slide peeks
 * out on mobile. The parent .elementor-widget-container clips nothing.
 */
.ibs-wrapper.atamisa-swiper {
    position: relative;
    overflow: visible !important;  /* allow partial slide peek on mobile */
}

/*
 * On non-carousel (grid) mode the wrapper is just a block div —
 * no overflow issue there.
 */
.ibs-wrapper:not(.atamisa-swiper) {
    overflow: hidden;
}

/* ---------- Swiper inner row ---------- */
.ibs-wrapper .swiper-wrapper {
    align-items: stretch;
}

/* ---------- Slides ---------- */
.ibs-wrapper .swiper-slide {
    height: auto;           /* equal-height cards */
    box-sizing: border-box;
}

/* ---------- Card ---------- */
.ibs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: 0.5s ease;
}


/* ---------- Content ---------- */
.ibs-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ibs-image-wrap {
    margin-bottom: 1rem;
}



/* ---------- Grid mode (carousel disabled) ---------- */
.ibs-wrapper .d-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
}

/* ---------- Pagination ---------- */
.ibs-wrapper .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* ---------- Navigation arrows ---------- */
.ibs-wrapper .elementor-swiper-button {
    cursor: pointer;
}

/* ---------- Mobile clip fix ---------- */
/*
 * Some themes set overflow:hidden on .elementor-widget or section wrappers.
 * This padding+negative-margin trick keeps the partial slide visible
 * without causing horizontal scroll on the page.
 */
@media (max-width: 767px) {
    .ibs-wrapper.atamisa-swiper {
        /* add right padding so the partial slide has breathing room */
        padding-right: 40px;
        box-sizing: border-box;
    }

    /* pull the whole widget to the left edge inside its section */
    .elementor-widget-atamisa-child-image-box-slider {
        overflow: visible !important;
    }
}