/* ==========================================================================
   NAPRAWA POZIOMEGO PRZEWIJANIA (OVERFLOW) NA SMARTFONACH
   ========================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

* {
    box-sizing: border-box !important;
}

/* ==========================================================================
   1. USTAWIENIA GLOBALNE I CZYTNIK ARTYKUŁÓW
   ========================================================================== */

/* Zmiana domyślnej czcionki na całej stronie */
body {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 14px !important;
}

/* Gradient górnego nagłówka (belka pod logo) */
.container-header {
   background-image: linear-gradient(135deg, rgba(24, 24, 36, 1) 0%, rgba(48, 48, 126, 1) 32%, rgba(255, 255, 255, 1) 100%);
}

/* Automatyczne środkowanie obrazów i wideo wewnątrz czytanego artykułu */
.com-content-article__body img, 
.com-content-article__body figure,
.com-content-article__body iframe,
.com-content-article__body video {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 15px !important;
}

/* Wyśrodkowanie głównego zdjęcia (Ilustracji tekstu) na górze artykułu */
.view-article .item-image {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 25px !important;
}

.view-article .item-image img {
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 15px !important;
    border-radius: 5px;
}

/* --------------------------------------------------------------------------
   UKRYWANIE ZBĘDNYCH ELEMENTÓW NA STRONIE GŁÓWNEJ:
   Ukrywamy tekst wprowadzający i "Czytaj więcej", zostawiamy Tytuł i Szczegóły
   -------------------------------------------------------------------------- */
.strona-kafelki .blog-item .item-content > *:not(h1):not(h2):not(h3):not(.page-header):not(.article-info):not(.tags),
.strona-kafelki .blog-item .readmore,
.strona-kafelki .blog-item [itemprop="articleBody"] {
    display: none !important;
}

/* Usunięcie podkreślenia z linków w tytułach i ustawienie granatowego koloru */
.strona-kafelki .blog-item .page-header h2 a,
.strona-kafelki .blog-item h2 a {
    text-decoration: none !important;
    font-size: inherit !important;
    color: #1a2b5c !important; 
    font-weight: bold !important;
}

/* ==========================================================================
   2. WYGLĄD NA KOMPUTERACH (Szeroki ekran - Inteligentna Siatka)
   ========================================================================== */
@media (min-width: 992px) {
    
    /* 3 kolumny dla średnich monitorów (992px - 1199px) */
    .strona-kafelki .blog-items {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }

    /* 4 kolumny dla dużych monitorów (od 1200px) */
    @media (min-width: 1200px) {
        .strona-kafelki .blog-items {
            grid-template-columns: repeat(4, 1fr) !important;
        }
    }

    /* Budowa pionowego kafelka */
    .strona-kafelki .blog-item {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        border: 1px solid #f0f0f0 !important;
        padding: 10px !important;
        border-radius: 8px !important;
        position: relative !important;
        padding-bottom: 120px !important; /* Rezerwuje miejsce na szczegóły na dole */
    }

    .strona-kafelki .item-image {
        margin-bottom: 10px !important;
    }

    .strona-kafelki .item-image img {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }

    /* Tytuł artykułu na środku kafelka */
    .strona-kafelki .blog-item h2,
    .strona-kafelki .blog-item .page-header {
        font-size: 1.1rem !important;
        text-align: center !important;
        margin: 0 0 10px 0 !important;
        line-height: 1.3 !important;
    }

    .strona-kafelki .blog-item .item-content {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    /* SZCZEGÓŁY (Data, Kategoria) - Układ: Etykieta nad wartością, wyśrodkowane */
    .strona-kafelki .blog-item .article-info {
        margin-top: auto !important;
        padding-top: 15px !important;
        font-size: 0.85rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .strona-kafelki .blog-item .article-info dt {
        display: block !important; 
        font-weight: bold;
        margin-bottom: 2px;
    }

    .strona-kafelki .blog-item .article-info dd {
        display: block !important; 
        margin: 0 0 10px 0 !important;
    }

    /* Miejsce na tagi na samym dole kafelka */
    .strona-kafelki .blog-item .tags {
        position: absolute !important;
        bottom: 10px !important;
        width: calc(100% - 20px) !important;
        text-align: center !important; 
        margin: 0 !important;
    }
}

/* ==========================================================================
   3. WYGLĄD NA SMARTFONACH (Wąski ekran - Lista i Menu na górze)
   ========================================================================== */
@media (max-width: 991px) {
    .site-grid { display: flex; flex-direction: column; }
    
    /* Główne kontenery z marginesem bocznym 15px */
    .container-component, 
    .container-breadcrumb { 
        order: 2; 
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* Ramka menu na samej górze strony mobilnej */
    .container-sidebar-right { 
        order: 1; 
        margin: 0 auto 25px auto !important;
        width: calc(100% - 30px) !important;
        background: #f9f9f9;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-sizing: border-box !important;
    }

    .container-sidebar-right .module-title {
        font-size: 1rem;
        margin: 0;
        padding: 5px;
        color: #1a2b5c;
        font-weight: bold;
    }

    /* Wyłączenie siatki i przejście na listę pionową */
    .strona-kafelki .blog-items { display: block !important; }

    /* Układ artykułu: Miniaturka lewa, Tytuł prawa */
    .strona-kafelki .blog-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; 
        padding: 0 0 15px 0 !important;
        margin: 0 0 15px 0 !important;
        border-bottom: 1px solid #eee !important;
        height: auto !important;
        border-radius: 0 !important;
    }

    .strona-kafelki .item-image {
        width: 110px !important;
        flex-shrink: 0 !important;
        margin-right: 15px !important;
        margin-bottom: 0 !important;
    }

    .strona-kafelki .item-image img {
        width: 110px !important;
        height: 80px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        display: block !important;
    }

    .strona-kafelki .blog-item .item-content {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    .strona-kafelki .blog-item h2,
    .strona-kafelki .blog-item .page-header {
        font-size: 1.05rem !important;
        margin: 0 0 5px 0 !important;
        text-align: left !important;
        line-height: 1.3 !important;
    }

    /* Szczegóły na mobile: mniejsza czcionka, ukryte słowa etykiet */
    .strona-kafelki .blog-item .article-info {
        display: block !important;
        font-size: 0.75rem !important;
        color: #777 !important;
    }

    .strona-kafelki .blog-item .article-info dt { display: none !important; }
    .strona-kafelki .blog-item .article-info dd { margin: 0 0 3px 0 !important; display: block !important; }
    
    .strona-kafelki .blog-item .tags { display: none !important; }
}