/**
 * Festival Manager — Sponsoren-Grid (öffentlich)
 *
 * Passt sich dem Thunfest-Theme an:
 *   Schrift:   Inter (via Theme gelade)
 *   Farben:    --tf-orange, --tf-brown, --tf-cream (Customizer-Variablen)
 *   Grid:      Border-Box-Muster wie .tf-sponsors__grid im Theme
 *   Standard:  Logos grau + gedämpft, Hover = Farbe + volle Deckkraft
 *
 * Klassen-Übersicht:
 *   .fm-sponsors                         Wrapper
 *   .fm-sponsors__filter                 Filter-Button-Leiste (stil="beide")
 *   .fm-sponsors__category               Kategorie-Sektion
 *   .fm-sponsors__category--small/medium/large   Logo-Grösse
 *   .fm-sponsors__category--filter-*     CSS-Filter-Überlagerungen
 *   .fm-sponsors__category-title         Kategorie-Überschrift (tf-label-Stil)
 *   .fm-sponsors__grid                   Border-Box-Grid
 *   .fm-sponsor                          Einzel-Sponsor (<a> oder <div>)
 *   .fm-sponsor__logo                    Logo-Bild
 *   .fm-sponsor__name                    Fallback-Text
 *
 * @package FestivalManager
 * @since   4.1.0
 */

/* ── CSS Custom Properties ──────────────────────────────────────── */
.fm-sponsors {
    /* Logo-Grössen (max. innerhalb der Zelle) */
    --fsm-logo-sm:   80px;
    --fsm-logo-md:   140px;
    --fsm-logo-lg:   220px;

    /* Zellen-Dimensionen pro Kategorie (alle Sponsoren = gleich grosse Kacheln) */
    --fsm-cell-sm:   120px;
    --fsm-cell-md:   180px;
    --fsm-cell-lg:   260px;
    --fsm-cell-h-sm: 80px;
    --fsm-cell-h-md: 110px;
    --fsm-cell-h-lg: 150px;

    /* Zellenabstand (Padding) */
    --fsm-pad-y:     28px;
    --fsm-pad-x:     40px;

    /* Trennlinien — gleiches Braun-Warmton wie das Theme */
    --fsm-border:    rgba(240, 120, 40, 0.12);

    /* Kategorietitel */
    --fsm-label-size:    11px;
    --fsm-label-spacing: 0.28em;
    --fsm-label-color:   var(--tf-orange, #F07828);

    /* Übergang */
    --fsm-transition: 0.25s ease;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.fm-sponsors {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    width: 100%;
}

/* ── Kategorien ─────────────────────────────────────────────────── */
.fm-sponsors__category {
    margin-bottom: 3rem;
}

.fm-sponsors__category:last-child {
    margin-bottom: 0;
}

/* Kategorie-Titel — font-family explizit setzen damit kein Fallback-Font greift */
.fm-sponsors .fm-sponsors__category-title {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* ── Grid ───────────────────────────────────────────────────────── */
.fm-sponsors__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--fsm-pad-y) var(--fsm-pad-x);
}

/* ── Einzel-Sponsor (Kachel) ───────────────────────────────────── */
/* Jede Zelle hat feste Dimensionen pro Kategorie -> einheitliches Raster.
   Spezifität 0-2-0 schlägt .entry-content a (0-1-1) */
.fm-sponsors .fm-sponsor {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Kachel-Defaults (greifen wenn keine Grössen-Klasse gesetzt ist) */
    width:  var(--fsm-cell-md);
    height: var(--fsm-cell-h-md);

    /* Der Blend-Modus sitzt bewusst auf der KACHEL, nicht auf dem Logo:
       Safari/WebKit ignoriert mix-blend-mode, sobald dasselbe Element
       auch einen filter hat. Das Logo trägt den filter (Graustufen/
       Dämpfung), die Kachel (ohne filter) trägt das multiply -> Weiss
       verschwindet auch im Ruhezustand, nicht erst beim Hover.
       Ausserdem KEIN opacity auf der Kachel (würde eine Isolations-
       gruppe bilden); gedämpft wird via Logo-filter opacity(). */
    mix-blend-mode: multiply;

    text-decoration: none !important;
    color: var(--tf-brown, #1A0A00) !important;
}

/* Kachelgrösse pro Kategorie */
.fm-sponsors__category--small  .fm-sponsor { width: var(--fsm-cell-sm); height: var(--fsm-cell-h-sm); }
.fm-sponsors__category--medium .fm-sponsor { width: var(--fsm-cell-md); height: var(--fsm-cell-h-md); }
.fm-sponsors__category--large  .fm-sponsor { width: var(--fsm-cell-lg); height: var(--fsm-cell-h-lg); }

/* ── Logos ──────────────────────────────────────────────────────── */

/* Logo füllt die Kachel mit Erhalt der Proportionen */
.fm-sponsor__logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Graustufen + Dämpfung via filter. Der Blend-Modus liegt auf der
       Kachel .fm-sponsor (siehe oben) — NICHT hier, sonst ignoriert
       Safari das multiply (filter + mix-blend-mode am selben Element). */
    filter: grayscale(1) opacity(0.55);
    transition: filter var(--fsm-transition), transform var(--fsm-transition);
}

.fm-sponsor:hover .fm-sponsor__logo {
    filter: none;
}

/* Dezenter Hover-Zoom — separat (nur transform), damit er unabhängig
   von den per-Stil gesetzten filter-Regeln für ALLE Varianten greift
   (Standard, Per-Kategorie-Filter, Footer, weiss). */
.fm-sponsors .fm-sponsor:hover .fm-sponsor__logo {
    transform: scale(1.06);
}

/* Optionale, härtere Logo-Obergrenzen (verhindern dass kleine
   Logos den ganzen Cell-Slot füllen, wenn Cell > Logo-Max). */
.fm-sponsors__category--small  .fm-sponsor__logo { max-width: var(--fsm-logo-sm); }
.fm-sponsors__category--medium .fm-sponsor__logo { max-width: var(--fsm-logo-md); }
.fm-sponsors__category--large  .fm-sponsor__logo { max-width: var(--fsm-logo-lg); }

/* ── CSS-Filter pro Kategorie ───────────────────────────────────── */

/* Immer Graustufen (kein Farb-Hover) */
.fm-sponsors__category--filter-grayscale .fm-sponsor__logo {
    filter: grayscale(100%) opacity(0.55);
}
.fm-sponsors__category--filter-grayscale .fm-sponsor:hover .fm-sponsor__logo {
    filter: grayscale(100%);
}

/* Grau → Farbe beim Hover (entspricht dem Standard) */
.fm-sponsors__category--filter-grayscale_hover .fm-sponsor__logo {
    filter: grayscale(100%) opacity(0.55);
}
.fm-sponsors__category--filter-grayscale_hover .fm-sponsor:hover .fm-sponsor__logo {
    filter: none;
}

/* Sepia → klar beim Hover */
.fm-sponsors__category--filter-sepia .fm-sponsor__logo {
    filter: sepia(80%) opacity(0.55);
}
.fm-sponsors__category--filter-sepia .fm-sponsor:hover .fm-sponsor__logo {
    filter: sepia(0%);
}

/* Ausgeblichen → klarer beim Hover */
.fm-sponsors__category--filter-fade .fm-sponsor__logo {
    filter: grayscale(40%) opacity(45%);
}
.fm-sponsors__category--filter-fade .fm-sponsor:hover .fm-sponsor__logo {
    filter: grayscale(0%) opacity(100%);
}

/* Markenfarbe — Standard: in Markenfarbe, Hover: Original
   Hue via CSS-Variable überschreibbar: --fsm-brand-hue */
.fm-sponsors__category--filter-brand_overlay .fm-sponsor__logo {
    filter: grayscale(100%) sepia(1) hue-rotate(var(--fsm-brand-hue, 200deg)) saturate(3) brightness(0.9) opacity(0.55);
}
.fm-sponsors__category--filter-brand_overlay .fm-sponsor:hover .fm-sponsor__logo {
    filter: none;
}

/* ── Stil: Weiss (für dunkle Hintergründe) ──────────────────────
   Macht Logos für dunkle Footer/Sektionen hell sichtbar — OHNE sie
   zu einer flachen weissen Silhouette zu zerstören.

   grayscale(1) invert(1) statt brightness(0) invert(1):
   - brightness(0) crusht ALLE Pixel auf Schwarz -> invert -> alles
     Weiss = Detail/Graustufen weg (Logo wird ein weisser Klumpen).
   - grayscale(1) invert(1) entsättigt nur und KEHRT die Helligkeit um:
     dunkles Logo -> hell, mit allen Abstufungen/Konturen erhalten.
   Funktioniert für transparente Logos (saubere helle Version) genauso
   wie für (noch) weiss-hinterlegte (Box wird schwarz -> via screen weg).

   screen liegt auf der Kachel (ohne filter), der filter auf dem Logo
   — sonst ignoriert Safari den Blend (filter + blend am selben Element).
   Dämpfen via opacity() im Logo-filter. */
.fm-sponsors[data-style="weiss"] .fm-sponsor {
    color: #fff !important;
    mix-blend-mode: screen;
}
.fm-sponsors[data-style="weiss"] .fm-sponsor__logo {
    filter: grayscale(1) invert(1) opacity(0.85);
}
.fm-sponsors[data-style="weiss"] .fm-sponsor:hover .fm-sponsor__logo {
    filter: grayscale(1) invert(1);
}

.fm-sponsors[data-style="weiss"] .fm-sponsor .fm-sponsor__name,
.fm-sponsors[data-style="weiss"] .fm-sponsor:hover .fm-sponsor__name {
    color: #fff !important;
}

.fm-sponsors[data-style="weiss"] .fm-sponsors__category-title {
    color: #fff;
}

/* ── Footer-Variante (kompakt, Kategorien nebeneinander) ────────
   Aktiviert via Shortcode [festival_sponsoren_footer] oder
   manuell durch zusätzliche Klasse .fm-sponsors--footer. */
.fm-sponsors--footer {
    --fsm-logo-sm:   48px;
    --fsm-logo-md:   64px;
    --fsm-logo-lg:   88px;
    /* Engere Kacheln für den Footer */
    --fsm-cell-sm:   84px;
    --fsm-cell-md:   110px;
    --fsm-cell-lg:   150px;
    --fsm-cell-h-sm: 40px;
    --fsm-cell-h-md: 56px;
    --fsm-cell-h-lg: 76px;
    --fsm-pad-y:     12px;
    --fsm-pad-x:     28px;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    gap: 2rem 3rem;
    text-align: center;
}

.fm-sponsors--footer .fm-sponsors__category--footer {
    margin: 0;
    flex: 0 1 auto;
}

.fm-sponsors__category-title--footer {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    margin: 0 0 1.25rem;
    opacity: 0.85;
}

.fm-sponsors__grid--footer {
    flex-wrap: wrap;
    gap: var(--fsm-pad-y) var(--fsm-pad-x);
}

.fm-sponsors--footer .fm-sponsor__logo {
    max-height: 50px;
    max-width: var(--fsm-logo-md);
}

.fm-sponsors--footer .fm-sponsor .fm-sponsor__name {
    font-size: 0.85rem !important;
}

@media (max-width: 640px) {
    .fm-sponsors--footer {
        --fsm-pad-x:     18px;
        --fsm-cell-sm:   72px;
        --fsm-cell-md:   90px;
        --fsm-cell-lg:   120px;
        --fsm-cell-h-sm: 36px;
        --fsm-cell-h-md: 44px;
        --fsm-cell-h-lg: 58px;
        gap: 1.75rem 1.5rem;
    }
    .fm-sponsors__category-title--footer {
        font-size: 13px;
        margin-bottom: 0.85rem;
    }
}

/* ── Fallback-Textname ──────────────────────────────────────────── */
.fm-sponsors .fm-sponsor .fm-sponsor__name {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    color: var(--tf-brown, #1A0A00) !important;
    text-decoration: none !important;
    transition: color var(--fsm-transition);
}

.fm-sponsors .fm-sponsor:hover .fm-sponsor__name {
    color: var(--tf-orange, #F07828) !important;
}

/* ── Filter-Buttons (stil="beide") ─────────────────────────────── */
.fm-sponsors__filter {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.fm-sponsors__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    border: 1.5px solid var(--tf-brown, #1A0A00);
    border-radius: 4px;
    color: var(--tf-brown, #1A0A00);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity var(--fsm-transition), background var(--fsm-transition), color var(--fsm-transition), border-color var(--fsm-transition);
}

.fm-sponsors__filter-btn--active,
.fm-sponsors__filter-btn:hover {
    opacity: 1;
    background: var(--tf-orange, #F07828);
    border-color: var(--tf-orange, #F07828);
    color: #fff;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .fm-sponsors {
        --fsm-logo-sm:    56px;
        --fsm-logo-md:    96px;
        --fsm-logo-lg:    140px;
        --fsm-cell-sm:    90px;
        --fsm-cell-md:    130px;
        --fsm-cell-lg:    180px;
        --fsm-cell-h-sm:  60px;
        --fsm-cell-h-md:  80px;
        --fsm-cell-h-lg:  110px;
        --fsm-pad-y:      20px;
        --fsm-pad-x:      20px;
    }
}