/**
 * Partner Logo Display - Enhanced Grid Mode Styles
 * 
 * Modern, responsive grid layout for logo showcase
 * Optimized for all screen sizes with smooth transitions
 * 
 * @package Partner_Logo_Display
 * @since 2.0.0
 */

/* ========================================
   Grid Layout - Flexible & Responsive
   ======================================== */

.partner-logo-display__grid {
    display: grid;
    grid-template-columns: repeat(var(--partner-logo-display-cols, 5), 1fr);
    row-gap: var(--partner-logo-display-row-gap, 16px);
    column-gap: var(--partner-logo-display-column-gap, 16px);
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: var(--partner-logo-display-justify, center);
    align-items: var(--partner-logo-display-align, center);
    width: 100%;
}

.partner-logo-display__grid .partner-logo-display__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--partner-logo-display-min-width, 100px);
    max-width: var(--partner-logo-display-max-width, 280px);
    width: 100%;
}

.partner-logo-display__grid .partner-logo-display__link,
.partner-logo-display__grid .partner-logo-display__static {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo-display__grid .partner-logo-display__img {
    max-height: calc(var(--partner-logo-display-max-h, 64) * 1px);
    height: auto;
    width: auto;
    max-width: 100%;
}

/* ========================================
   Responsive Grid - Smooth Breakpoints
   ======================================== */

/* Large Desktop (> 1400px) - Extra breathing room */
@media (min-width: 1400px) {
    .partner-logo-display__grid {
        row-gap: var(--partner-logo-display-row-gap, 20px);
        column-gap: var(--partner-logo-display-column-gap, 20px);
    }
}

/* Desktop (1200px - 1400px) - Standard layout */
@media (min-width: 1200px) and (max-width: 1399px) {
    .partner-logo-display__grid {
        row-gap: var(--partner-logo-display-row-gap, 16px);
        column-gap: var(--partner-logo-display-column-gap, 16px);
    }
}

/* Tablet Landscape (992px - 1199px) - Moderate columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .partner-logo-display__grid {
        grid-template-columns: repeat(var(--partner-logo-display-cols-tablet, 4), 1fr);
        row-gap: var(--partner-logo-display-gutter-tablet, 14px);
        column-gap: var(--partner-logo-display-gutter-tablet, 14px);
    }
}

/* Tablet Portrait (768px - 991px) - Comfortable viewing */
@media (min-width: 768px) and (max-width: 991px) {
    .partner-logo-display__grid {
        grid-template-columns: repeat(var(--partner-logo-display-cols-tablet, 3), 1fr);
        row-gap: var(--partner-logo-display-gutter-tablet, 12px);
        column-gap: var(--partner-logo-display-gutter-tablet, 12px);
    }
    
    .partner-logo-display__grid .partner-logo-display__item {
        min-width: 80px;
    }
}

/* Mobile Landscape (576px - 767px) - Balanced layout */
@media (min-width: 576px) and (max-width: 767px) {
    .partner-logo-display__grid {
        grid-template-columns: repeat(var(--partner-logo-display-cols-mobile, 2), 1fr);
        row-gap: var(--partner-logo-display-gutter-mobile, 10px);
        column-gap: var(--partner-logo-display-gutter-mobile, 10px);
    }
    
    .partner-logo-display__grid .partner-logo-display__item {
        min-width: 70px;
    }
    
    .partner-logo-display__grid .partner-logo-display__img {
        max-height: calc(var(--partner-logo-display-max-h, 64) * 0.9px);
    }
}

/* Mobile Portrait (< 576px) - Optimized for small screens */
@media (max-width: 575px) {
    .partner-logo-display__grid {
        grid-template-columns: repeat(var(--partner-logo-display-cols-mobile, 2), 1fr);
        row-gap: var(--partner-logo-display-gutter-mobile, 10px);
        column-gap: var(--partner-logo-display-gutter-mobile, 10px);
    }
    
    .partner-logo-display__grid .partner-logo-display__item {
        min-width: 60px;
    }
    
    .partner-logo-display__grid .partner-logo-display__img {
        max-height: calc(var(--partner-logo-display-max-h, 64) * 0.8px);
    }
    
    .partner-logo-display__grid .partner-logo-display__link,
    .partner-logo-display__grid .partner-logo-display__static {
        padding: 12px;
        min-height: 64px;
    }
}

/* Very Small Devices (< 400px) - Single column option */
@media (max-width: 399px) {
    .partner-logo-display__grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }
}

/* ========================================
   Accessibility & Performance
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .partner-logo-display__grid .partner-logo-display__link,
    .partner-logo-display__grid .partner-logo-display__static {
        border-width: 2px;
    }
}

/* Reduced motion - Disable grid animations */
@media (prefers-reduced-motion: reduce) {
    .partner-logo-display__grid .partner-logo-display__item {
        transition: none !important;
        animation: none !important;
    }
}

/* Fallback for older browsers without CSS Grid support */
@supports not (display: grid) {
    .partner-logo-display__grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .partner-logo-display__grid .partner-logo-display__item {
        flex: 0 1 calc(20% - 16px);
    }
    
    @media (max-width: 1199px) {
        .partner-logo-display__grid .partner-logo-display__item {
            flex: 0 1 calc(33.333% - 16px);
        }
    }
    
    @media (max-width: 767px) {
        .partner-logo-display__grid .partner-logo-display__item {
            flex: 0 1 calc(50% - 16px);
        }
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .partner-logo-display__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        page-break-inside: avoid;
    }
    
    .partner-logo-display__grid .partner-logo-display__item {
        page-break-inside: avoid;
    }
}