/**
 * WordPress Logos Group - Frontend Styles
 * Modern SaaS-inspired responsive logo grid
 */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
    --wlg-spacing-xs: 8px;
    --wlg-spacing-sm: 16px;
    --wlg-spacing-md: 28px;
    --wlg-spacing-lg: 40px;
    --wlg-spacing-xl: 60px;
    
    --wlg-logo-max-width: 120px;
    --wlg-logo-opacity: 0.85;
    --wlg-logo-opacity-hover: 1;
    
    --wlg-transition-duration: 0.25s;
    --wlg-transition-timing: ease;
}

/* ========================================
   Logo Group Container
   ======================================== */
.wlg-group {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.wlg-group *,
.wlg-group *::before,
.wlg-group *::after {
    box-sizing: border-box;
}

/* ========================================
   Logo Grid
   ======================================== */
.wlg-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--wlg-spacing-md);
    align-items: center;
    justify-items: center;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================
   Individual Logo
   ======================================== */
.wlg-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    outline: none;
    padding: var(--wlg-spacing-sm);
    border-radius: 8px;
    transition: all var(--wlg-transition-duration) var(--wlg-transition-timing);
}

.wlg-logo:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.wlg-logo img {
    max-width: var(--wlg-logo-max-width);
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: var(--wlg-logo-opacity);
    transition: all var(--wlg-transition-duration) var(--wlg-transition-timing);
    filter: grayscale(var(--grayscale, 0));
}

.wlg-logo:hover img,
.wlg-logo:focus img {
    opacity: var(--wlg-logo-opacity-hover);
    transform: scale(1.08);
    filter: grayscale(0);
}

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

/* Large Desktop: 5-6 columns */
@media (min-width: 1200px) {
    .wlg-logos {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Desktop: 5 columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .wlg-logos {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Tablet: 3-4 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .wlg-logos {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--wlg-spacing-sm);
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .wlg-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--wlg-spacing-sm);
    }
}

/* Mobile: 2 columns */
@media (max-width: 575px) {
    .wlg-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wlg-spacing-sm);
        padding: 0 var(--wlg-spacing-sm);
    }
    
    .wlg-logo {
        padding: 10px;
    }
    
    .wlg-logo img {
        max-width: 100px;
        max-height: 60px;
    }
}

/* ========================================
   Rolling/Marquee Animation
   ======================================== */
.wlg-rolling {
    overflow: hidden;
    position: relative;
    text-align: left;
}

/* Edge fade effect - only when enabled */
.wlg-rolling.wlg-rolling-fade::before,
.wlg-rolling.wlg-rolling-fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.wlg-rolling.wlg-rolling-fade::before {
    left: 0;
    background: linear-gradient(to right, var(--wlg-rolling-bg, #000) 0%, transparent 100%);
}

.wlg-rolling.wlg-rolling-fade::after {
    right: 0;
    background: linear-gradient(to left, var(--wlg-rolling-bg, #000) 0%, transparent 100%);
}

.wlg-rolling-wrapper {
    overflow: hidden;
    width: 100%;
}

.wlg-rolling-track {
    display: flex;
    width: max-content;
    animation-duration: var(--wlg-rolling-duration, 30s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    justify-content: flex-start;
}

.wlg-rolling:hover .wlg-rolling-track {
    animation-play-state: paused;
}

.wlg-rolling .wlg-logos {
    display: flex;
    flex-shrink: 0;
    gap: var(--wlg-spacing-md);
    padding: 0;
    padding-right: var(--wlg-spacing-md);
    max-width: none;
    margin: 0;
    grid-template-columns: none;
    justify-content: flex-start;
}

.wlg-rolling .wlg-logo {
    flex-shrink: 0;
    animation: none;
}

/* Rolling Speed Variations */
.wlg-speed-slow {
    --wlg-rolling-duration: 45s;
}

.wlg-speed-normal {
    --wlg-rolling-duration: 30s;
}

.wlg-speed-fast {
    --wlg-rolling-duration: 15s;
}

/* Rolling Direction Variations */

/* Left direction (default) - scrolls from right to left */
.wlg-dir-left .wlg-rolling-track {
    animation-name: wlg-scroll-left;
}

/* Right direction - scrolls from left to right */
.wlg-dir-right .wlg-rolling-track {
    animation-name: wlg-scroll-right;
}

/* Alternate - back and forth */
.wlg-dir-alternate .wlg-rolling-track {
    animation-name: wlg-scroll-alternate;
    animation-timing-function: ease-in-out;
}

/* Alternate reverse - starts going right then alternates */
.wlg-dir-alternate-reverse .wlg-rolling-track {
    animation-name: wlg-scroll-alternate;
    animation-timing-function: ease-in-out;
    animation-direction: reverse;
}

@keyframes wlg-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%);
    }
}

@keyframes wlg-scroll-right {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes wlg-scroll-alternate {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Smaller fade on mobile */
@media (max-width: 575px) {
    .wlg-rolling.wlg-rolling-fade::before,
    .wlg-rolling.wlg-rolling-fade::after {
        width: 40px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .wlg-rolling-track {
        animation: none;
    }
    
    .wlg-rolling .wlg-logos {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   Animation Enhancements
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
    .wlg-group:not(.wlg-rolling) .wlg-logo {
        animation: wlg-fadeIn 0.5s ease-out backwards;
    }
    
    .wlg-group:not(.wlg-rolling) .wlg-logo:nth-child(1) { animation-delay: 0.05s; }
    .wlg-group:not(.wlg-rolling) .wlg-logo:nth-child(2) { animation-delay: 0.1s; }
    .wlg-group:not(.wlg-rolling) .wlg-logo:nth-child(3) { animation-delay: 0.15s; }
    .wlg-group:not(.wlg-rolling) .wlg-logo:nth-child(4) { animation-delay: 0.2s; }
    .wlg-group:not(.wlg-rolling) .wlg-logo:nth-child(5) { animation-delay: 0.25s; }
    .wlg-group:not(.wlg-rolling) .wlg-logo:nth-child(6) { animation-delay: 0.3s; }
    .wlg-group:not(.wlg-rolling) .wlg-logo:nth-child(n+7) { animation-delay: 0.35s; }
}

@keyframes wlg-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .wlg-group {
        padding: 20px 0;
    }
    
    .wlg-logo img {
        opacity: 1;
        filter: none !important;
    }
    
    .wlg-logos {
        grid-template-columns: repeat(4, 1fr);
    }
}