/* Sponsors gallery styles */
.sponsors-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 20px;
    gap: 0;
    align-items: center;
}

.sponsor-column {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.sponsor-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    cursor: pointer;
    text-decoration: none;
}

.sponsor-logo {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.sponsor-logo.active {
    opacity: 1;
    pointer-events: auto;
}

.sponsor-logo img {
    max-width: 150px;
    height: auto;
    filter: grayscale(100%);
    mix-blend-mode: darken;
}

.sponsor-logo img.is-svg {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    mix-blend-mode: darken;
}

/* Static gallery styles (logos_galerie_complete) */
.sponsors-grid {
    display: grid;
    width: 100%;
    padding: 20px;
    gap: 20px;
    align-items: center;
    justify-items: center;
}

.sponsor-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    max-width: 100%;
    overflow: hidden;
}

.sponsor-item img {
    max-width: 150px;
    width: 100%;
    height: auto;
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    mix-blend-mode: darken !important;
}

.sponsor-item img.is-svg {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    mix-blend-mode: darken !important;
}

/* Images plus petites pour sponsors_flex */
.sponsors-flex .sponsor-item img {
    max-width: 120px !important;
    width: 100%;
}

/* Images plus grandes pour logos_galerie_complete (20% plus grand = 180px) */
.logos-complete .sponsor-item img {
    max-width: 180px !important;
}

/* Dynamic columns for sponsors-grid */
.sponsors-grid.cols-1 {
    grid-template-columns: 1fr;
    justify-content: center;
}

.sponsors-grid.cols-1 .sponsor-item {
    grid-column: 1;
    justify-self: center;
}

.sponsors-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
}

.sponsors-grid.cols-2 .sponsor-item {
    justify-self: center;
}

.sponsors-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
}

.sponsors-grid.cols-3 .sponsor-item {
    justify-self: center;
}

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

/* Last row centering for incomplete rows in cols-4 grid */
.sponsors-grid.cols-4.last-row-cols-1 {
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
}

.sponsors-grid.cols-4.last-row-cols-1 .sponsor-item:nth-last-child(1) {
    grid-column: 1 / 5;
    justify-self: center;
}

.sponsors-grid.cols-4.last-row-cols-2 {
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
}

.sponsors-grid.cols-4.last-row-cols-2 .sponsor-item:nth-last-child(-n+2) {
    grid-column: span 2;
    justify-self: center;
}

.sponsors-grid.cols-4.last-row-cols-3 {
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
}

.sponsors-grid.cols-4.last-row-cols-3 .sponsor-item:nth-last-child(3) {
    grid-column: 1 / 2;
    justify-self: center;
}

.sponsors-grid.cols-4.last-row-cols-3 .sponsor-item:nth-last-child(2) {
    grid-column: 2 / 3;
    justify-self: center;
}

.sponsors-grid.cols-4.last-row-cols-3 .sponsor-item:nth-last-child(1) {
    grid-column: 3 / 4;
    justify-self: center;
}

.sponsors-container.sponsors-container--center-cols {
    grid-template-columns: auto;
    justify-items: center;
    justify-content: center;
}

.sponsors-container.sponsors-container--center-cols .sponsor-link {
    justify-self: center;
}

/* Dynamic column classes based on visible images count */
.sponsors-container.cols-1 {
    grid-template-columns: 1fr;
    justify-items: center;
    justify-content: center;
}

.sponsors-container.cols-1 .sponsor-link:nth-child(2),
.sponsors-container.cols-1 .sponsor-link:nth-child(3),
.sponsors-container.cols-1 .sponsor-link:nth-child(4) {
    display: none;
}

.sponsors-container.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    justify-content: center;
}

.sponsors-container.cols-2 .sponsor-link:nth-child(3),
.sponsors-container.cols-2 .sponsor-link:nth-child(4) {
    display: none;
}

.sponsors-container.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    justify-content: center;
}

.sponsors-container.cols-3 .sponsor-link:nth-child(4) {
    display: none;
}

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

.sponsors-container.cols-1 .sponsor-link,
.sponsors-container.cols-2 .sponsor-link,
.sponsors-container.cols-3 .sponsor-link {
    justify-self: center;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .sponsors-container {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 16px;
    }

    /* Masquer les placeholders vides en mobile */
    .sponsor-logo.placeholder {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .sponsor-column,
    .sponsor-link {
        min-height: 100px;
    }

    /* Mobile adaptations for cols-N classes (max 2 columns) */
    .sponsors-container.cols-1 {
        grid-template-columns: 1fr;
        justify-items: center;
        justify-content: center;
    }

    .sponsors-container.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sponsors-container.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sponsors-container.cols-3 .sponsor-link:nth-child(3) {
        grid-column: 1 / 3;
        justify-self: center;
    }

    .sponsors-container.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Mobile grid responsiveness for sponsors-grid (logos_galerie_complete & sponsors_flex) */
    .sponsors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 16px !important;
        gap: 16px !important;
    }

    .sponsors-grid.cols-1 {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        justify-content: center !important;
    }

    .sponsors-grid.cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sponsors-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: center !important;
    }

    .sponsors-grid.cols-3 .sponsor-item:nth-last-child(1) {
        grid-column: 1 / 3;
        justify-self: center;
    }

    .sponsors-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .sponsors-grid.cols-4.last-row-cols-1 {
        justify-content: center !important;
    }

    .sponsors-grid.cols-4.last-row-cols-1 .sponsor-item:nth-last-child(1) {
        grid-column: 1 / 3;
        justify-self: center;
    }

    /* Si 2 images dans la dernière ligne, laisser sur 2 colonnes normales */
    .sponsors-grid.cols-4.last-row-cols-2 .sponsor-item {
        grid-column: auto !important;
        justify-self: auto !important;
    }
}