/*
Block Name: Logo Slider
Description: A responsive logo carousel using Swiper JS. No Swiper stylesheet is loaded - all structural and design CSS is written here.
*/


/* ============================================================
   SWIPER STRUCTURAL CSS
   These are the only rules Swiper JS actually requires to
   function. Writing them ourselves means we can skip loading
   swiper.min.css entirely, saving ~30kb of unused stylesheet.
============================================================ */

.block-logo-slider .swiper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.block-logo-slider .swiper-wrapper {
    display: flex;
    align-items: center;
    /* transition-duration and transform are set inline by Swiper JS at runtime */
    transition-property: transform;
    width: 100%;
}

.block-logo-slider .swiper-slide {
    /* Width is set inline by Swiper JS based on slidesPerView and spaceBetween */
    flex-shrink: 0;
}


/* ============================================================
   SLIDER OUTER WRAPPER
   Provides relative positioning so the arrow buttons can be
   positioned absolutely at the left and right edges.
============================================================ */

.block-logo-slider .logo-swiper-wrapper {
    position: relative;
    padding: 0 3.5rem; /* Makes room for the arrow buttons */
}


/* ============================================================
   LOGO SLIDE
   Centers the logo image within its slide cell.
============================================================ */

.block-logo-slider .logo-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
}

.block-logo-slider .logo-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 8rem;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Greyscale state - applied when data-greyscale="1" is set on the swiper element.
   The JS adds the class 'greyscale-logos' to the .logo-swiper element. */
.block-logo-slider .logo-swiper.greyscale-logos .logo-slide img {
    filter: grayscale(100%);
    opacity: 0.55;
}

.block-logo-slider .logo-swiper.greyscale-logos .logo-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}


/* ============================================================
   NAVIGATION ARROWS
============================================================ */

.block-logo-slider .logo-slider-prev,
.block-logo-slider .logo-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--brand-1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    padding: 0;
}

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

.block-logo-slider .logo-slider-prev { left: 0; }
.block-logo-slider .logo-slider-next { right: 0; }

.block-logo-slider .logo-slider-prev svg,
.block-logo-slider .logo-slider-next svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* Swiper adds swiper-button-disabled when loop is off and you reach the end */
.block-logo-slider .logo-slider-prev.swiper-button-disabled,
.block-logo-slider .logo-slider-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}


/* ============================================================
   PAGINATION DOTS
============================================================ */

.block-logo-slider .logo-slider-pagination {
    text-align: center;
    margin-top: 1.75rem;
    line-height: 1;
}

/* Swiper injects <span class="swiper-pagination-bullet"> for each dot */
.block-logo-slider .logo-slider-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--brand-2);
    opacity: 0.3;
    margin: 0 0.3rem;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.block-logo-slider .logo-slider-pagination .swiper-pagination-bullet-active {
    background: var(--brand-1);
    opacity: 1;
}


/* ============================================================
   ADMIN EDITOR - empty state notice
============================================================ */

.block-logo-slider .logo-slider-empty-notice {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 2rem 0;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 768px) {
    .block-logo-slider .logo-slide img {
        height: 5rem;
    }

    /* Tighten the arrow padding on small screens */
    .block-logo-slider .logo-swiper-wrapper {
        padding: 0 2.75rem;
    }
}

@media (max-width: 550px) {
    section.block-logo-slider .container {
        max-width: 90%;
    }
}