/*
Block Name: Simple Slider
Description: A content slider where each slide uses a two-column layout - image on one side, content on the other. Based on the Columns block structure. Uses Swiper JS with no swiper.css dependency.
*/

/* =============================================
   ADMIN / EDITOR STYLES
   Give the block a visible outline in the
   WordPress block editor so editors can see
   where it starts and ends.
   ============================================= */
body.wp-admin section.block-simple-slider {
    border: 1px solid #ccc;
}

/* =============================================
   SWIPER CORE OVERRIDES
   Swiper normally relies on swiper.css for its
   structural styles (flex layout, overflow, etc.)
   We replicate only what we need here so we can
   avoid loading the full swiper.css file.
   ============================================= */

/* The Swiper container needs overflow:hidden so slides
   that are off-screen are not visible. */
.block-simple-slider .simple-slider-swiper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* Swiper renders slides in a flex row. This replicates
   the core layout normally provided by swiper.css. */
.block-simple-slider .simple-slider-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    /* Swiper JS controls the transform on this element to slide between items */
}

/* Each slide takes up 100% of the container width */
.block-simple-slider .simple-slider-swiper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
}

/* =============================================
   SLIDE INNER GRID
   Two-column layout matching the Columns block.
   Each slide has an image column and a content column.
   ============================================= */
.block-simple-slider .slide-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    /*align-items: center;*/
   /* background: #fff;*/
}

/* When no image is present, content spans full width */
.block-simple-slider .slide-content.no-image {
    grid-column: 1 / -1;
}

/* Image-right variant: CSS order flips the two columns
   without changing the HTML source order (good for accessibility) */
.block-simple-slider .slide-inner.image-right .slide-image {
    order: 2;
}

.block-simple-slider .slide-inner.image-right .slide-content {
    order: 1;
}

/* =============================================
   SLIDE IMAGE
   ============================================= */


.block-simple-slider .slide-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /*min-height: 320px;
    align-self: stretch;*/
}


.block-simple-slider .slide-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* =============================================
   SLIDE CONTENT
   ============================================= */
.block-simple-slider .slide-content .button-block {
    margin-top: 24px;
}

/* =============================================
   CONTROLS BAR
   Sits directly below the Swiper element.
   Flex row: [prev btn] [dots] [next btn]
   The buttons are flush left and right,
   dots are centred between them.
   ============================================= */
.block-simple-slider .simple-slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
	margin-top: 2rem;
}

/* =============================================
   PREV / NEXT BUTTONS
   Solid brand-1 fill, white arrow, no border.
   ============================================= */
.block-simple-slider .simple-slider-prev,
.block-simple-slider .simple-slider-next {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border: none;
	border-radius: 10rem;
    background: var(--brand-1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    transition: background 0.2s ease;
}

.block-simple-slider .simple-slider-prev:hover,
.block-simple-slider .simple-slider-next:hover {
    background: var(--brand-2);
}

/* Disabled state - Swiper adds this class when loop:false
   and the slider is at the first or last slide */
.block-simple-slider .simple-slider-prev.swiper-button-disabled,
.block-simple-slider .simple-slider-next.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

/* =============================================
   PAGINATION DOTS
   Centred in the controls bar between the buttons.
   Custom styles replace those normally in swiper.css.
   ============================================= */
.block-simple-slider .simple-slider-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 0 16px;
}

/* Individual dot - rendered by Swiper JS */
.block-simple-slider .simple-slider-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

/* Active dot */
.block-simple-slider .simple-slider-pagination .swiper-pagination-bullet-active {
    background: var(--brand-1);
    transform: scale(1.3);
}

/* =============================================
   RESPONSIVE
   Stack columns on smaller screens
   ============================================= */
@media screen and (max-width: 768px) {

    .block-simple-slider .slide-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    /* Reset order on mobile so image always appears first
       regardless of the image-right setting */
    .block-simple-slider .slide-inner.image-right .slide-image,
    .block-simple-slider .slide-inner.image-right .slide-content {
        order: unset;
    }

    .block-simple-slider .simple-slider-prev,
    .block-simple-slider .simple-slider-next {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }
}