/* --- Globalne ustawienia (Ciemny motyw) --- */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #121212; /* Bardzo ciemne tło */
    color: #e0e0e0; /* Jasny kolor tekstu */
}

/* --- Banner --- */
.banner {
    width: 100%;
    text-align: center; /* Wyśrodkowanie obrazka, jeśli jest mniejszy */
}

.banner img {
    width: 100%; /* Obrazek bannera na całą szerokość */
    max-height: 400px; /* Ograniczenie wysokości, żeby nie zajął całego ekranu */
    object-fit: cover; /* Kadruje obrazek, zamiast go rozciągać */
    display: block; /* Usuwa ewentualne małe odstępy pod obrazkiem */
}

/* --- Kontener na zawartość --- */
.container {
    max-width: 900px; /* Ogranicza szerokość treści na dużych ekranach */
    margin: 40px auto; /* Wyśrodkowanie i odstęp od góry/dołu */
    padding: 0 20px; /* Mały padding po bokach na telefonach */
}

/* --- Pojedynczy element (obrazek + link) --- */
.item {
    display: flex; /* Układa obrazek i tekst obok siebie */
    align-items: center; /* Wyrównuje w pionie do środka */
    background-color: #1e1e1e; /* Trochę jaśniejsze tło "karty" */
    border-radius: 10px; /* Nowoczesne, zaokrąglone rogi */
    margin-bottom: 30px; /* Odstęp między elementami */
    overflow: hidden; /* Trzyma zaokrąglone rogi obrazka */
    
    /* Płynne przejście dla efektu najechania */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* --- Obrazek w elemencie --- */
.item img {
    width: 250px; /* Stała szerokość obrazka */
    height: 180px; /* Stała wysokość obrazka */
    object-fit: cover; /* Kadrowanie */
    flex-shrink: 0; /* Zapobiega kurczeniu się obrazka */
}

/* --- Treść obok obrazka (linki, tekst) --- */
.item-content {
    padding: 25px;
}

.item-content h2 {
    margin-top: 0;
    font-size: 1.6rem; /* Większy tytuł linku */
}

.item-content p {
    font-size: 1rem;
    color: #aaaaaa; /* Szary tekst opisu */
    line-height: 1.5;
}

/* --- Styl linków --- */
.item-content a {
    text-decoration: none; /* Usuwa podkreślenie */
    color: #00aaff; /* Jasny, nowoczesny niebieski */
    transition: color 0.2s ease;
}

.item-content a:hover {
    color: #40c4ff; /* Lekka zmiana koloru linku po najechaniu */
}

/* --- EFEKT NAJECHANIA MYSZĄ (HOVER) --- */
.item:hover {
    background-color: #2a2a2a; /* Rozjaśnienie tła karty */
    transform: translateY(-5px); /* Lekkie uniesienie karty */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Subtelny cień */
}

/* --- Responsywność (na małych ekranach) --- */
@media (max-width: 600px) {
    .item {
        flex-direction: column; /* Układa obrazek nad tekstem */
        align-items: stretch; /* Rozciąga elementy */
    }

    .item img {
        width: 100%; /* Obrazek na całą szerokość */
        height: 200px; /* Zmienna wysokość */
    }
}