/* ============================================================
   BLOCK: logo-wall — colocated CSS
   Datei: page-builder/components/organisms/logo-wall/block.css
   Geladen vom Loader (page-builder.php), Frontend + Editor.

   Variante A: RUHIGE, MODERNE Graustufen-Logo-Wall.
   - Logos im Ruhezustand: grayscale + reduzierte Opazität,
     beim Hover Farbe + volle Opazität.
   - KEINE Bewegung/Animation außer dem Hover-Übergang,
     kein Scroller — bewusst dezent und ruhig.
   - Namen (figcaption) immer sichtbar, kleine muted Schrift.
   ============================================================ */

/* DESIGN TOKENS (self-contained, gegen Cache-Inlining-Reihenfolge) */
@import "../../../assets/tokens.css" layer(sdc-tokens);

.as-logo-wall {
    padding: var(--as-space-section) 0;
    background: var(--as-color-white);
}

/* Abstand Kopfbereich → Logo-Raster */
.as-logo-wall .as-section-head {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* ============================================================
   Grid: Basis = 2 Spalten (mobil), ab 768 px die gewählte Anzahl
   ============================================================ */
.as-logo-wall__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    align-items: center;
    justify-items: center;
}

@media (min-width: 768px) {
    .as-logo-wall__grid--3 { grid-template-columns: repeat(3, 1fr); }
    .as-logo-wall__grid--4 { grid-template-columns: repeat(4, 1fr); }
    .as-logo-wall__grid--5 { grid-template-columns: repeat(5, 1fr); }
    .as-logo-wall__grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* Sehr breite Raster (6 Spalten): Raster etwas schmaler als der
   Container, damit die Logos ruhig und luftig stehen. */
.as-logo-wall__grid--6 {
    max-width: 1080px;
    margin-inline: auto;
}

/* ============================================================
   Einzelnes Logo (figure) bzw. Link-Wrapper
   ============================================================ */
.as-logo-wall__item {
    margin: 0; /* figure-Reset */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}

.as-logo-wall__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    outline: none;
}

/* ============================================================
   Graustufen-Ästhetik: ruhiger Ruhezustand, Farbe beim Hover.
   Einheitliche Logo-Höhe für ein aufgeräumtes Raster.
   ============================================================ */
.as-logo-wall__image {
    width: auto;
    max-width: 100%;
    height: 56px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.3s var(--as-ease), opacity 0.3s var(--as-ease);
}

.as-logo-wall__item:hover .as-logo-wall__image,
.as-logo-wall__link:focus-visible .as-logo-wall__image {
    filter: grayscale(0);
    opacity: 1;
}

/* Name unter dem Logo: klein, muted, immer sichtbar (dezente
   Bildunterschrift — bewusste Design-Entscheidung). */
.as-logo-wall__name {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--as-color-text-muted);
}

/* ============================================================
   Dark-Variante (Navy-Gradient-Look): weiße Schrift, Logos
   auf dunklem Grund — gleiche Graustufen-Behandlung wie oben.
   ============================================================ */
.as-logo-wall--bg-dark {
    background: var(--as-gradient-dark);
    color: var(--as-color-white);
}

.as-logo-wall--bg-dark .as-eyebrow,
.as-logo-wall--bg-dark .as-headline,
.as-logo-wall--bg-dark .as-section-head__intro,
.as-logo-wall--bg-dark .as-section-head__sub {
    color: var(--as-color-white);
}

.as-logo-wall--bg-dark .as-logo-wall__name {
    color: var(--as-color-light);
    opacity: 0.8;
}

.as-logo-wall--bg-dark .as-logo-wall__image {
    /* Gleiche Graustufen-Behandlung wie in der hellen Variante;
       die Opazität hält dunkle Logos auf dem Navy-Grund ruhig. */
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.3s var(--as-ease), opacity 0.3s var(--as-ease);
}

.as-logo-wall--bg-dark .as-logo-wall__item:hover .as-logo-wall__image,
.as-logo-wall--bg-dark .as-logo-wall__link:focus-visible .as-logo-wall__image {
    filter: grayscale(0);
    opacity: 1;
}