/* ============================================
   SPONSOR LOGOS STYLING
   Add this to src/css/style.css
   ============================================ */

/* Sponsor logos in content */
.sponsors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
    padding: 2rem 0;
    border-top: 1px solid var(--grey);
}

.sponsors img {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.sponsors img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Footer sponsors */
.sponsors-footer {
    margin: 2rem 0 1rem;
    text-align: center;
}

.sponsors-footer p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: var(--white);
}

.sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.sponsor-logos img {
    height: 35px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(200%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.sponsor-logos img:hover {
    filter: grayscale(0%) brightness(100%);
    opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sponsors {
        gap: 1.5rem;
    }
    
    .sponsors img {
        height: 30px;
    }
    
    .sponsor-logos {
        gap: 1rem;
    }
    
    .sponsor-logos img {
        height: 25px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .sponsors img {
        height: 25px;
    }
    
    .sponsor-logos img {
        height: 20px;
    }
}