/* ==========================================================
   Clients carousel: consistent sizing and vertical centering
   for logos of mixed aspect ratios (square and rectangular)
   ========================================================== */

/* Every logo gets the same fixed-size box */
.clients-carousel .client-item {
    padding: 0 20px;
    box-sizing: border-box;
}

.clients-carousel .client-logo {
    display: flex;
    align-items: center;      /* vertical centering */
    justify-content: center;  /* horizontal centering */
    width: 100%;
    height: 90px;             /* box height: adjust to taste */
}

/* Scale each logo to fit inside the box without stretching or cropping.
   Wide logos fill the width; square logos are limited by the height. */
.clients-carousel .client-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Slick: keep all slides aligned on the same centre line */
.clients-carousel .slick-track {
    display: flex;
    align-items: center;
}

.clients-carousel .slick-slide {
    float: none;
    height: auto;
}

/* Slick wraps each slide in a div with an inline display, so this needs !important */
.clients-carousel .slick-slide > div {
    display: block !important;
}

/* Mobile (slider is turned off below 768px in site.js):
   show the logos as a single vertical list, one per row, centered */
@media (max-width: 767px) {
    .clients-carousel .carousel-inner:not(.slick-initialized) {
        display: block;
    }

    .clients-carousel .carousel-inner:not(.slick-initialized) .client-item {
        width: 100%;
        padding: 12px 20px;
    }

    .clients-carousel .client-logo {
        height: 70px;         /* every row is the same height */
    }

    .clients-carousel .client-logo img {
        max-width: 200px;     /* stops wide logos from spanning the full screen */
    }
}