/**
 * Logo Grid Component Styles - With Rows Support
 * 
 * Clean logo grid with multi-row support for sliders
 */

/* ===== BASE COMPONENT STRUCTURE ===== */

.logo-grid {
    position: relative;
    width: 100%;
    padding: 3rem 0;
}

/* ===== CONTAINER ===== */

.logo-grid__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    overflow: hidden; /* Prevent content from extending outside */
    position: relative;
}

/* ===== TITLE ===== */

.logo-grid__title {
    text-align: center;
    color: var(--gray-50);
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .logo-grid__title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}

/* ===== GRID LAYOUT ===== */

.logo-grid__items {
    display: grid;
    gap: 2rem;
    align-items: center;
}

/* Column variations */
.logo-grid--cols-3 .logo-grid__items {
    grid-template-columns: repeat(3, 1fr);
}

.logo-grid--cols-4 .logo-grid__items {
    grid-template-columns: repeat(4, 1fr);
}

.logo-grid--cols-5 .logo-grid__items {
    grid-template-columns: repeat(5, 1fr);
}

/* Row variations for sliders */
.logo-grid--slider.logo-grid--rows-1 .logo-grid__items {
    grid-template-rows: 1fr;
}

.logo-grid--slider.logo-grid--rows-2 .logo-grid__items {
    grid-template-rows: repeat(2, 1fr);
    min-height: 300px; /* Ensure adequate height for 2 rows */
}

.logo-grid--slider.logo-grid--rows-3 .logo-grid__items {
    grid-template-rows: repeat(3, 1fr);
    min-height: 450px; /* Ensure adequate height for 3 rows */
}

/* For non-slider grids, use flexbox for better centering control */
.logo-grid:not(.logo-grid--slider) .logo-grid__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

/* Set flex basis based on column count */
.logo-grid:not(.logo-grid--slider).logo-grid--cols-3 .logo-grid__item {
    flex: 0 0 calc(33.333% - 1.333rem);
    max-width: calc(33.333% - 1.333rem);
}

.logo-grid:not(.logo-grid--slider).logo-grid--cols-4 .logo-grid__item {
    flex: 0 0 calc(25% - 1.5rem);
    max-width: calc(25% - 1.5rem);
}

.logo-grid:not(.logo-grid--slider).logo-grid--cols-5 .logo-grid__item {
    flex: 0 0 calc(20% - 1.6rem);
    max-width: calc(20% - 1.6rem);
}

/* Responsive overrides */
@media (max-width: 1024px) {
    .logo-grid--cols-4 .logo-grid__items,
    .logo-grid--cols-5 .logo-grid__items {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .logo-grid:not(.logo-grid--slider) .logo-grid__item {
        flex: 0 0 calc(33.333% - 1.333rem) !important;
        max-width: calc(33.333% - 1.333rem) !important;
    }
    
    /* Adjust min-height for responsive */
    .logo-grid--slider.logo-grid--rows-2 .logo-grid__items {
        min-height: 250px;
    }
    
    .logo-grid--slider.logo-grid--rows-3 .logo-grid__items {
        min-height: 375px;
    }
}

@media (max-width: 768px) {
    /* Keep 3 columns at 768px for all grids */
    .logo-grid__items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem;
    }
    
    /* Maintain proper sizing for non-slider items at 768px */
    .logo-grid:not(.logo-grid--slider) .logo-grid__item {
        flex: 0 0 calc(33.333% - 1rem) !important;
        max-width: calc(33.333% - 1rem) !important;
    }
    
    /* On mobile, reduce rows to maintain readability */
    .logo-grid--slider .logo-grid__items {
        grid-template-rows: auto !important;
        min-height: auto !important;
    }
    
    /* Reduce padding at 768px for better logo sizing */
    .logo-grid__image-wrapper {
        padding: 1rem !important; /* Override all column-specific padding */
    }
}

/* Mobile only - switch to 2 columns */
@media (max-width: 600px) {
    .logo-grid__items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    /* Force non-slider grids to use grid layout on mobile */
    .logo-grid:not(.logo-grid--slider) .logo-grid__items {
        display: grid !important; /* Override flexbox */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
        justify-items: center; /* Center items within grid cells */
        align-items: center;
    }
    
    /* Remove flex properties on mobile for non-slider items */
    .logo-grid:not(.logo-grid--slider) .logo-grid__item {
        flex: unset !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Ensure proper sizing on mobile */
    .logo-grid__item {
        min-height: 100px; /* Increased from 80px */
        aspect-ratio: 16 / 9; /* Back to original ratio */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Reduce padding on mobile to prevent tiny logos */
    .logo-grid__image-wrapper {
        padding: 0.75rem !important; /* Reduced from 1rem */
        width: 100%;
        height: 100%;
    }
    
    /* Ensure logos maintain size on mobile */
    .logo-grid__image {
        max-width: 100%;
        max-height: 80px; /* Increased from 60px */
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .logo-grid__items {
        gap: 1rem;
    }
    
    /* Remove the flex overrides that were breaking the layout */
}

/* ===== LOGO ITEMS ===== */

.logo-grid__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    min-height: 100px; /* Ensure minimum height to prevent tiny logos */
}

/* Empty placeholder items */
.logo-grid__item--empty {
    visibility: hidden;
    pointer-events: none;
}

.logo-grid__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* ===== IMAGE WRAPPER ===== */

.logo-grid__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem; /* Default padding for 3 columns */
    background: transparent;
    border: none;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced padding for 4 column grids */
.logo-grid--cols-4 .logo-grid__image-wrapper {
    padding: 2rem;
}

/* Even less padding for 5 column grids */
.logo-grid--cols-5 .logo-grid__image-wrapper {
    padding: 1.5rem;
}

/* Adjust padding based on rows as well */
.logo-grid--rows-3 .logo-grid__image-wrapper {
    padding: 1.5rem;
}

/* ===== LOGO IMAGES ===== */

.logo-grid__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* SVG specific styles */
.logo-grid__image--svg {
    width: 100%;
    height: 100%;
}

/* Simple scale on hover for linked items */
.logo-grid__item--linked:hover .logo-grid__image {
    transform: scale(1.1);
}

/* ===== SLIDER INTEGRATION ===== */

.logo-grid--slider .logo-grid__slider-wrapper {
    position: relative;
    overflow: hidden; /* Prevent content from extending outside on mobile */
    padding-bottom: 60px; /* Space for dots */
    width: 100%;
    box-sizing: border-box;
}

/* Allow overflow on desktop for controls */
@media (min-width: 769px) {
    .logo-grid--slider .logo-grid__slider-wrapper {
        overflow: visible;
    }
}

.logo-grid--slider .logo-grid__slider {
    position: relative;
}

/* Slider item styles */
.logo-grid--slider .slider-item {
    width: 100%;
}

/* Reset grid styles for slider items to ensure proper layout */
.logo-grid--slider .slider-item .logo-grid__items {
    display: grid !important;
    gap: 2rem;
    justify-content: center; /* Center the grid items */
    justify-items: center; /* Center items within grid cells */
    width: 100%; /* Ensure grid doesn't exceed container */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* For slider grids with partial rows, center the items */
.logo-grid--slider .logo-grid__items {
    place-content: center; /* Centers both horizontally and vertically */
    place-items: center; /* Centers items within their cells */
}

/* When used with universal slider */
.logo-grid--slider .universal-slider {
    margin: 0;
}

/* Center the slider controls */
.logo-grid--slider .slider-controls {
    position: absolute !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10 !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Center the dots container */
.logo-grid--slider .slider-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px;
}

/* Ensure slider wrapper doesn't cut off controls */
.logo-grid {
    overflow: visible;
}

.logo-grid__container {
    overflow: visible;
}

/* Slider arrows - position them properly */
.logo-grid--slider .slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important; /* Higher than dots */
}

/* Position arrows to the sides of the content */
.logo-grid--slider .slider-prev {
    display:none;
}

.logo-grid--slider .slider-next {
    right: -40px !important;
}

.logo-grid__slider.universal-slider {
    overflow:visible;
}



/* Ensure arrows are positioned relative to the slider wrapper */
.logo-grid--slider .logo-grid__slider-wrapper {
    position: relative;
}

/* ===== BACKGROUND VARIANTS ===== */

.logo-grid.bg-light {
    background-color: #f9fafb;
}

.logo-grid.bg-dark {
    background-color: #111827;
}

.logo-grid.bg-dark .logo-grid__title {
    color: white;
}

/* ===== SPECIAL STATES ===== */

/* Loading state */
.logo-grid__item.loading .logo-grid__image-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error state */
.logo-grid-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin: 2rem auto;
    max-width: 600px;
}

.logo-grid__error-placeholder,
.logo-grid__placeholder {
    color: #9ca3af;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ===== ACCESSIBILITY ===== */

.logo-grid__link:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 12px;
}

.screen-reader-text {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Focus state */
.logo-grid__item.has-focus .logo-grid__image-wrapper {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo-grid__item,
    .logo-grid__image-wrapper,
    .logo-grid__image,
    .slider-dot,
    .slider-arrow {
        transition: none;
    }
    
    .logo-grid__item--linked:hover .logo-grid__image {
        transform: none;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    .logo-grid__link:focus {
        outline-width: 3px;
    }
    
    .logo-grid__image-wrapper {
        border: 1px solid #000;
    }
}

/* Print styles */
@media print {
    .slider-controls {
        display: none;
    }
    
    .logo-grid--slider .slider-item {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        page-break-inside: avoid;
    }
}