/**
 * Client Logos Block Styles
 */

.zonkey-client-logos {
    width: 100%;
}

/* ========================================
   Grid Layout
   ======================================== */

.zonkey-client-logos.display-grid .logos-grid {
    display: grid;
    grid-template-columns: repeat(var(--logos-columns, 5), 1fr);
    gap: var(--logos-gap, 2rem);
}

/* Vertical Alignment - Grid */
.zonkey-client-logos.display-grid.valign-top .logos-grid {
    align-items: flex-start;
}

.zonkey-client-logos.display-grid.valign-center .logos-grid {
    align-items: center;
}

.zonkey-client-logos.display-grid.valign-bottom .logos-grid {
    align-items: flex-end;
}

/* Logo Item - Grid */
.zonkey-client-logos.display-grid .logo-item {
    display: flex;
    justify-content: center;
}

/* ========================================
   Carousel Layout (uses Splide)
   ======================================== */

.zonkey-client-logos.display-carousel {
    position: relative;
}

/* Vertical Alignment - Carousel */
.zonkey-client-logos.display-carousel.valign-top .splide__list {
    align-items: flex-start;
}

.zonkey-client-logos.display-carousel.valign-center .splide__list {
    align-items: center;
}

.zonkey-client-logos.display-carousel.valign-bottom .splide__list {
    align-items: flex-end;
}

.zonkey-client-logos.display-carousel .splide__slide {
    display: flex;
    justify-content: center;
}

/* Carousel Arrows */
.zonkey-client-logos .splide__arrow {
    background: var(--color-primary, #2563eb);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.8;
}

.zonkey-client-logos .splide__arrow:hover {
    opacity: 1;
}

.zonkey-client-logos .splide__arrow svg {
    color: #ffffff;
}

.zonkey-client-logos .splide__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Hide arrows when disabled */
.zonkey-client-logos.no-arrows .splide__arrows {
    display: none;
}

/* Carousel Pagination */
.zonkey-client-logos .splide__pagination {
    padding: 1rem 0 0;
}

.zonkey-client-logos .splide__pagination__page {
    background: var(--color-neutral-400, #9ca3af);
    border: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.zonkey-client-logos .splide__pagination__page:hover {
    background: var(--color-neutral-600, #4b5563);
}

.zonkey-client-logos .splide__pagination__page.is-active {
    background: var(--color-primary, #2563eb);
    transform: scale(1.2);
}

/* Hide pagination when disabled */
.zonkey-client-logos.no-pagination .splide__pagination {
    display: none;
}

/* Pause Button */
.zonkey-client-logos .carousel-pause-button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    transition: background-color 0.2s ease;
    z-index: 10;
}

.zonkey-client-logos .carousel-pause-button:hover {
    background: rgba(0, 0, 0, 0.8);
}

.zonkey-client-logos .carousel-pause-button:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

/* ========================================
   Logo Wrapper & Image
   ======================================== */

.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.logo-link {
    display: block;
    text-decoration: none;
}

.logo-link:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 4px;
    border-radius: 4px;
}

.logo-image {
    display: block;
    max-width: var(--logo-max-width, 150px);
    max-height: var(--logo-max-height, 80px);
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* ========================================
   Grayscale Effects
   ======================================== */

/* Grayscale to Color on Hover */
.zonkey-client-logos.grayscale-grayscale-to-color .logo-image {
    filter: grayscale(100%);
    opacity: 0.7;
}

.zonkey-client-logos.grayscale-grayscale-to-color .logo-wrapper:hover .logo-image,
.zonkey-client-logos.grayscale-grayscale-to-color .logo-link:hover .logo-image,
.zonkey-client-logos.grayscale-grayscale-to-color .logo-link:focus .logo-image {
    filter: grayscale(0%);
    opacity: 1;
}

/* Color to Grayscale on Hover */
.zonkey-client-logos.grayscale-color-to-grayscale .logo-image {
    filter: grayscale(0%);
    opacity: 1;
}

.zonkey-client-logos.grayscale-color-to-grayscale .logo-wrapper:hover .logo-image,
.zonkey-client-logos.grayscale-color-to-grayscale .logo-link:hover .logo-image,
.zonkey-client-logos.grayscale-color-to-grayscale .logo-link:focus .logo-image {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 1024px) {
    .zonkey-client-logos.display-grid .logos-grid {
        grid-template-columns: repeat(var(--logos-columns-tablet, 3), 1fr);
    }
}

@media (max-width: 600px) {
    .zonkey-client-logos.display-grid .logos-grid {
        grid-template-columns: repeat(var(--logos-columns-mobile, 2), 1fr);
    }

    /* Adjust logo size on mobile */
    .logo-image {
        max-width: calc(var(--logo-max-width, 150px) * 0.8);
        max-height: calc(var(--logo-max-height, 80px) * 0.8);
    }

    /* Hide pause button on mobile - too small */
    .zonkey-client-logos .carousel-pause-button {
        display: none;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .logo-image,
    .zonkey-client-logos .splide__pagination__page,
    .zonkey-client-logos .splide__arrow {
        transition: none;
    }
}