/**
 * Partner Logos Section Styles
 * Mobile-first responsive approach with relative units
 */

/* Partner logos section container */
.partner-logos-section {
    padding: 2rem 0;
    background-color: #fff;
    border-top: 0.0625rem solid #f0f0f0;
}

/* Logos container */
.partner-logos-container {
    max-width: 100%;
    width: 100%;
}

/* Logos grid - Mobile first (2 columns) */
.partner-logos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem; /* 20px equivalent */
    justify-items: center;
    align-items: center;
    padding: 0 1rem;
}

/* Individual logo item */
.partner-logo-item {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logo link styling */
.partner-logo-link {
    display: block;
    width: 100%;
    max-width: 100%;
    transition: opacity 0.3s ease;
}

.partner-logo-link:hover {
    opacity: 0.8;
}

/* Logo image styling */
.partner-logo-image {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Tablet breakpoint */
@media (min-width: 48rem) {
    .partner-logos-section {
        padding: 2.5rem 0;
    }
    
    .partner-logos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem; /* 24px equivalent */
        padding: 0 2rem;
    }
    
    .partner-logo-image {
        max-width: 7.5rem; /* 120px equivalent */
    }
}

/* Desktop breakpoint */
@media (min-width: 62rem) {
    .partner-logos-section {
        padding: 3rem 0;
    }
    
    .partner-logos-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        max-width: 75rem; /* 1200px equivalent */
        margin: 0 auto;
        gap: 1.25rem; /* 20px for desktop */
        padding: 0;
    }
    
    .partner-logo-item {
        max-width: 9.375rem; /* 150px max width as requested */
        flex-shrink: 0;
    }
    
    .partner-logo-image {
        max-width: 9.375rem; /* 150px max width as requested */
        width: auto;
        min-height: 3rem; /* Minimum height for consistency */
    }
}

/* Large desktop optimization */
@media (min-width: 75rem) {
    .partner-logos-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        max-width: 60rem; /* 960px equivalent */
        gap: 1.5rem; /* Increased gap for better spacing on large screens */
    }
    
    .partner-logo-item {
        max-width: 8.75rem; /* 140px for better spacing on large screens */
        flex-shrink: 0;
    }
    
    .partner-logo-image {
        max-width: 8.75rem; /* 140px for better spacing on large screens */
    }
}