/* Kontener główny listy */
.wp-block-latest-posts__list.has-dates {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Kapsułka pojedynczego artykułu - precyzyjne mapowanie Grid */
.wp-block-latest-posts__list.has-dates li {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: min-content min-content 1fr; /* Jawne wiersze dla Tytułu, Daty i Opisu */
    row-gap: 15px; /* Odstęp w pionie między elementami tekstowymi */
    column-gap: 30px; /* Odstęp w poziomie między zdjęciem a tekstem */
    align-items: start;
    
    background-color: var(--high-contrast-bg-color);
    border-radius: var(--post-cards-main-card-radius, 50px);
    padding: var(--post-cards-card-padding, 35px);
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.wp-block-latest-posts__list.has-dates li:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Wymuszenie pokrycia całej wysokości kolumny przez zdjęcie */
.wp-block-latest-posts__featured-image.alignleft {
    float: none;
    margin: 0;
    width: 100%;
    height: 100%;
    max-height: 250px;
    border-radius: var(--post-cards-sub-card-radius, 35px);
    overflow: hidden;
    
    grid-column: 1;
    grid-row: 1 / -1; /* Kluczowa poprawka: zdjęcie zajmuje od 1 do ostatniego wiersza */
}

.wp-block-latest-posts__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pozycjonowanie warstwy tekstowej we właściwych komórkach Grida */
.wp-block-latest-posts__post-title {
    grid-column: 2;
    grid-row: 1; /* Tytuł zawsze w wierszu 1 */
    font-family: var(--font-primary);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight, 600);
    color: var(--contact-text-main-inverted, #1a1a1a);
    text-decoration: none;
    line-height: 1.3;
    margin: 0; /* Reset marginesów, używamy gap z grida */
    transition: color 0.2s ease;
}
/*
.wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts__post-title:focus {
    color: var(--button-action-bg-color, #793DFF);
}
*/
.wp-block-latest-posts__post-date {
    grid-column: 2;
    grid-row: 2; /* Data zawsze w wierszu 2 */
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: var(--footer-color-text-muted, #7e7e7e);
    margin: 0;
    display: block;
}

.wp-block-latest-posts__post-excerpt {
    grid-column: 2;
    grid-row: 3; /* Zajawka w wierszu 3 */
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--footer-color-text-dark, #1c1a1a);
    line-height: var(--p-line-heght, 1.5);
    margin: 0;
}

/* Link 'Czytaj więcej' we wtyczce wp-block *//*
.wp-block-latest-posts__read-more {
    display: inline-block;
    margin-top: 10px;
    font-weight: var(--button-font-weight, 500);
    color: var(--button-action-bg-color, #793DFF);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.wp-block-latest-posts__read-more:hover,
.wp-block-latest-posts__read-more:focus {
    color: var(--contact-btn-hover, #5d25cd);
    text-decoration: underline;
}*/



/* 1. Aktualizacja istniejącego kontenera kapsułki */
.wp-block-latest-posts__list.has-dates li {
    position: relative; /* KLUCZOWE: Ustanawia kontekst pozycjonowania dla nakładki */
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: min-content min-content 1fr;
    row-gap: 15px;
    column-gap: 30px;
    align-items: start;
    
    background-color: var(--high-contrast-bg-color);
    border-radius: var(--post-cards-main-card-radius, 50px);
    padding: var(--post-cards-card-padding, 35px);
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    
    /* Zmiana kursora na wskaźnik, by zasygnalizować klikalność całego obszaru */
    cursor: pointer; 
}

/* 2. DODAJ NOWĄ REGUŁĘ: Wzorzec Block Link Overlay */
.wp-block-latest-posts__post-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; /* Zapewnia, że link przykrywa wszystkie inne elementy wewnątrz <li> */
}

/* 3. Zabezpieczenie z-index dla linku "Dowiedz się więcej" */
/* Jeśli użytkownik najedzie myszą, chcemy by interakcje (np. podkreślenie) nadal działały */
.wp-block-latest-posts__read-more {
    position: relative;
    z-index: 11; /* Musi być wyżej niż ::after z tytułu, aby można było go naturalnie kliknąć */
    
    display: inline-block;
    margin-top: 10px;
    font-weight: var(--button-font-weight, 500);
    color: var(--button-action-bg-color, #793DFF);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}


/* ==========================================================================
   Responsive Design (RWD) - Reset pozycjonowania dla urządzeń mobilnych
   ========================================================================== */
@media (max-width: 992px) {
    .wp-block-latest-posts__list.has-dates li {
        grid-template-columns: 250px 1fr;
    }
}

@media (max-width: 768px) {
    .wp-block-latest-posts__list.has-dates li {
        grid-template-columns: 1fr;
        grid-template-rows: auto; /* Reset sztywnych wierszy dla mobile */
        padding: var(--post-cards-mobile-card-padding, 25px);
        border-radius: var(--post-cards-sub-card-radius, 35px);
        row-gap: 15px;
    }
    
    .wp-block-latest-posts__featured-image.alignleft,
    .wp-block-latest-posts__post-title,
    .wp-block-latest-posts__post-date,
    .wp-block-latest-posts__post-excerpt {
        grid-column: 1;
        grid-row: auto; /* Elementy układają się naturalnie jeden pod drugim */
    }

    .wp-block-latest-posts__post-title {
        font-size: var(--mobile-h3-font-size);
    }

    .wp-block-latest-posts__featured-image.alignleft {
        max-height: 200px;
    }
}