/* Lets_Survival */

/*
 * Channel-Kacheln: linksbündiger Inhalt statt zentriert, breiter und dadurch
 * flacher (Querformat) auf Desktop/Tablet. Das jeweilige Marken-Logo liegt
 * groß und halbtransparent als Wasserzeichen im Hintergrund rechts unten -
 * das kleine runde Icon oben bleibt als klares, scharfes Erkennungszeichen
 * zusätzlich bestehen. YouTube und Twitch haben beide sehr markante,
 * einzeln erkennbare Logos - eignen sich dafür gut.
 */
.channel-grid {
    display: flex;
    flex-wrap: wrap;
    /*
     * 31.08.2026: standen zentriert und damit unabhaengig vom Textkopf.
     * Jetzt linksbuendig, sodass YouTube und Twitch genau unter "Gaming"
     * beginnen - dieselbe Kante wie Kicker und Ueberschrift.
     */
    justify-content: flex-start;
    gap: 16px;
}

.channel-card {
    position: relative;
    overflow: hidden;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 8px;
    width: min(280px, 100%);
    padding: 20px 22px;
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    /* Kein eigener Hintergrund mehr - die Kachel nutzt das zentrale
       .card-Glas aus base.css (Angleichung 31.08.2026). */
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.channel-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--ink);
}

.channel-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 78%;
    color: var(--muted);
    font-size: .85rem;
}

.channel-logo {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 50%;
    /* Weisse Scheibe bleibt bewusst - die Marken-Logos brauchen einen
       neutralen Grund, sonst gehen sie auf Glas unter. */
    background: #fff;
    border: 1px solid var(--line);
}

/* Großes, halbtransparentes Marken-Logo als Wasserzeichen, bewusst rechts unten anschneidend. */
.channel-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 130px;
    height: 130px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.channel-youtube::after {
    background-image: url('../../images/icons/youtube.svg');
}

.channel-twitch::after {
    background-image: url('../../images/icons/twitch.svg');
}

/*
 * TIEFE (Wunsch Lars, 19.09.2026): Das Logo in der Ecke liegt hinter
 * Ueberschrift und Text (z-index 0) und bleibt beim Scrollen leicht
 * zurueck - die Kachel bekommt Boden. Kleiner Weg, weil die Kachel klein
 * ist. Mechanik: components.css, Abschnitt TIEFENEBENEN.
 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .channel-card {
            view-timeline: --tiefe-ebene block;
        }

        .channel-card::after {
            --tiefe: 16px;
            animation: tiefe linear both;
            animation-timeline: --tiefe-ebene;
            animation-range: cover 0% cover 100%;
        }
    }
}

/* Markenfarbe nur noch als dezenter Akzent bei Hover, nicht mehr als Fläche. */
@media (hover: hover) and (pointer: fine) {
    .channel-card:hover {
        transform: var(--glas-lage) translateY(-4px);
        box-shadow: var(--glas-kante-hover);
    }

    .channel-youtube:hover {
        border-color: #e60023;
    }

    .channel-youtube:hover h3 {
        color: #e60023;
    }

    .channel-twitch:hover {
        border-color: #6f2bd1;
    }

    .channel-twitch:hover h3 {
        color: #6f2bd1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .channel-card {
        transition: none;
    }

    .channel-card:hover {
        transform: var(--glas-lage);
    }
}