/* css/streams.css */


.stream-card {
    overflow: hidden; /* Zapobiega wychodzeniu zawartości poza zaokrąglone rogi */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.stream-card:hover {
    transform: translateY(-5px); /* Lekkie uniesienie karty po najechaniu */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.stream-thumbnail-link {
    position: relative;
    display: block; /* Ważne dla pozycjonowania absolutnego potomka */
    line-height: 0; /* Usuwa ewentualne dodatkowe miejsce pod obrazkiem */
}

.stream-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Popularny format wideo */
    object-fit: cover; /* Obrazek pokryje cały obszar, może być przycięty */
    display: block; /* Usuwa dodatkową przestrzeń pod obrazkiem */
    background-color: #1f1f23; /* Kolor tła dla obrazka, gdyby ładował się wolniej */
}

.streamer-avatar-overlay {
    position: absolute;
    bottom: 8px; /* Odstęp od dolnej krawędzi */
    left: 8px;   /* Odstęp od lewej krawędzi */
    width: 64px;  /* Szerokość awatara */
    height: 64px; /* Wysokość awatara */
    border-radius: 50%; /* Okrągły awatar */
    border: 2px solid #fff; /* Biała ramka wokół awatara */
    box-shadow: 0px 1px 3px rgba(0,0,0,0.3); /* Delikatny cień */
    z-index: 10; /* Upewnia się, że awatar jest nad miniaturką */
}

.status-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 1.15em;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 10; /* Aby było nad obrazkiem */
    line-height: 1.2;
}

.status-live {
    background-color: #e91e63; /* Kolor dla statusu "NA ŻYWO" (np. czerwony/różowy) */
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.7);
    font
}

.status-offline {
    background-color: #607d8b; /* Kolor dla statusu "OFFLINE" (np. szary) */
}

.stream-details {
    padding: 12px 15px;
    flex-grow: 1;
}

.stream-title {
    font-size: 1.05em; /* Nieco mniejszy niż domyślny h3 dla zwięzłości */
    font-weight: 600; /* Grubsza czcionka dla tytułu */
    margin: 0 0 4px 0;
    line-height: 1.3;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
}

.stream-title a {
    text-decoration: none;
    color: #eaeaeb; /* Jasny kolor linku */
}

.stream-title a:hover {
    color: #a970ff; /* Kolor fioletowy (Twitch) po najechaniu */
}

.streamer-name, .stream-game {
    font-size: 0.85em;
    color: #adadb8; /* Szarawy kolor dla mniej ważnych informacji */
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.streamer-name a, .stream-game a {
    text-decoration: none;
    color: #adadb8;
}

.streamer-name a:hover, .stream-game a:hover {
    color: #a970ff; /* Kolor fioletowy (Twitch) po najechaniu */
    text-decoration: underline;
}