/* 
 * Scoped Frontend CSS for FC Annaberg Sponsor Magic 
 * Prefixed with .fca-sponsor-grid-wrap to avoid theme conflicts.
 */

.fca-sponsor-grid-wrap {
    width: 100%;
    padding: 40px 0;
    background: transparent;
    /* Parent container background usually black by theme */
}

.fca-sponsor-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.fca-sponsor-row {
    display: grid;
    /* Force exactly the number of columns defined by --cols, shrinking items to 0 if needed */
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.fca-sponsor-item {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 250px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
}

.fca-sponsor-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.fca-sponsor-img {
    width: 100%;
    height: 100%;
    display: block;
}

/* -------------------------------------------------------
   NORMALES RESPONSIVES VERHALTEN (Scale-Down AUS)
   Flexbox für gleichmäßigen Umbruch & zentrierte Orphans
   ------------------------------------------------------- */

/* Tablet (bis 768px): max 3 Spalten */
@media (max-width: 768px) {
    .fca-sponsor-grid-wrap:not(.fca-scale-mobile) .fca-sponsor-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .fca-sponsor-grid-wrap:not(.fca-scale-mobile) .fca-sponsor-item {
        /* Safari Height-Bug Fix: width fix statt flex-basis */
        width: calc(33.333% - 8px);
        flex: none;
        max-width: 250px;
    }

    /* Neu: 4er-Reihen sollen auf dem Tablet als 2x2 dargestellt werden statt 3+1 */
    .fca-sponsor-grid-wrap:not(.fca-scale-mobile) .fca-sponsor-row[data-cols="4"] .fca-sponsor-item {
        width: calc(50% - 6px);
    }

    /* Leere Slots ausblenden damit keine Lücken entstehen */
    .fca-sponsor-grid-wrap:not(.fca-scale-mobile) .fca-empty-slot {
        display: none;
    }
}

/* Smartphone (bis 480px): exakt 2 Spalten */
@media (max-width: 480px) {
    .fca-sponsor-grid-wrap:not(.fca-scale-mobile) .fca-sponsor-row {
        gap: 8px;
    }

    .fca-sponsor-grid-wrap:not(.fca-scale-mobile) .fca-sponsor-item {
        /* Safari Height-Bug Fix: width fix statt flex-basis */
        width: calc(50% - 4px);
    }
}



/* ============================================================
   MOBILE SCALE-DOWN MODUS (wie FC Bayern)
   Layout bleibt gleich – wird nur kleiner skaliert.
   ============================================================ */

/* Scale-Down: Verhindert Layout-Umbruch – überschreibt Media Queries */
@media (max-width: 768px) {
    .fca-sponsor-grid-wrap.fca-scale-mobile .fca-sponsor-row {
        grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
        gap: 15px;
    }

    .fca-sponsor-grid-wrap.fca-scale-mobile .fca-empty-slot {
        visibility: hidden;
        display: block;
        /* Leere Slots bleiben sichtbar, damit Layout-Struktur erhalten bleibt */
    }
}

@media (max-width: 480px) {
    .fca-sponsor-grid-wrap.fca-scale-mobile .fca-sponsor-row {
        grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
        gap: 15px;
    }
}

/* Skalierung: overflow:hidden am Wrapper verhindert horizontalen Scrollbal */
.fca-sponsor-grid-wrap.fca-scale-mobile {
    overflow: hidden;
}

@media (max-width: 768px) {
    .fca-sponsor-grid-wrap.fca-scale-mobile .fca-sponsor-grid {
        transform-origin: top center;
        transform: scale(0.6);
        /* Breite kompensieren damit die skalierte Ansicht zentriert bleibt */
        width: calc(100% / 0.6);
        margin-left: calc((100% - (100% / 0.6)) / 2);
        /* Höhe des Elements anpassen (nach dem Skalieren ist es kleiner) */
        margin-bottom: calc((1 - 0.6) * -100%);
    }
}

@media (max-width: 480px) {
    .fca-sponsor-grid-wrap.fca-scale-mobile .fca-sponsor-grid {
        transform: scale(0.38);
        width: calc(100% / 0.38);
        margin-left: calc((100% - (100% / 0.38)) / 2);
        margin-bottom: calc((1 - 0.38) * -100%);
    }
}