.newsy {
    --news-navy: #08295e;
    --news-red: #e30613;
    /*max-width: 79.1667vw;*/
    width: 100%;
    margin: 0 auto;
    padding: 2.8646vw 1.4583vw;
    color: var(--news-navy);
    font-family: Poppins, Arial, sans-serif;
}

.newsy * {
    box-sizing: border-box;
}

.newsy a {
    color: inherit;
    text-decoration: none;
}

.newsy__header {
    margin-bottom: 1.6667vw;
    text-align: center;
}

.newsy__header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.7708vw;
    margin: 0;
    font-size: 2.2917vw;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.newsy__header h2::before,
.newsy__header h2::after {
    width: 4.7917vw;
    height: 0.2083vw;
    background: var(--news-red);
    content: "";
}

.newsy__header p {
    margin: 0.4167vw 0 0;
    color: #778299;
    font-size: 1.0417vw;
}

.newsy__empty {
    padding: 1.8229vw;
    border-radius: 0.5208vw;
    background: #ffffff;
    color: #59677c;
    text-align: center;
}

.news-featured,
.news-card,
.news-older {
    border-radius: 0.5208vw;
    background: #ffffff;
    box-shadow: 0 0.3125vw 1.1979vw rgba(6, 38, 90, 0.11);
}

.news-featured {
    display: grid;
    grid-template-columns: 4fr 3fr;
    overflow: hidden;
    margin-bottom: 1.3021vw;
}

.news-featured__image,
.news-card__image {
    position: relative;
    display: block;
    overflow: hidden;
    background: #dfe7ee;
}

.news-featured__image {
    min-height: 22.3958vw;
}

.news-featured img,
.news-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-featured__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 2.7083vw 2.1875vw;
}

.news-category,
.news-badge {
    padding: 0.3646vw 0.5208vw;
    border-radius: 0.2604vw;
    background: #1476ba;
    color: #ffffff;
    font-size: 0.5729vw;
    font-weight: 800;
    text-transform: uppercase;
}

.news-badge {
    position: absolute;
    top: 0.7812vw;
    left: 0.7812vw;
    background: var(--news-red);
}

.news-date {
    position: absolute;
    top: 2.6562vw;
    left: 0.7812vw;
    padding: 0.3646vw 0.5208vw;
    border-radius: 0.2083vw;
    background: rgba(5, 38, 92, 0.94);
    color: #ffffff;
    font-size: 0.625vw;
    font-weight: 700;
}

.news-date::before {
    margin-right: 0.3125vw;
    content: "▣";
    font-size: 0.5208vw;
}

.news-featured h3,
.news-card h3 {
    margin: 0.9375vw 0 0.625vw;
    line-height: 1.28;
}

.news-featured h3 {
    font-size: 2.0vw;
}

.news-featured p,
.news-card p {
    margin: 0;
    color: #374561;
    font-family: Arial, sans-serif;
    font-size: 1.2vw;
    line-height: 1.55;
}

.news-read-more {
    margin-top: auto;
    padding-top: 1.25vw;
    font-size: 0.7812vw;
    font-weight: 800;
}

.news-read-more span,
.news-all span {
    margin-left: 0.4688vw;
    color: var(--news-red);
    font-size: 1.1458vw;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.0417vw;
}

.news-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.news-card__image {
    height: 11.7188vw;
    margin: 0.625vw 0.625vw 0;
    border-radius: 0.3125vw;
}

.news-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 1.0417vw 1.1458vw;
}

.news-card h3 {
    margin: 0.7292vw 0 0.4688vw;
    font-size: 0.9896vw;
}

.news-card p {
    font-size: 1.1vw;
}

.news-card .news-date {
    top: 0.4688vw;
    left: 0.4688vw;
    padding: 0.3125vw 0.4167vw;
    font-size: 0.5208vw;
}

.news-older {
    margin-top: 1.3021vw;
    padding: 1.3542vw 1.875vw 1.0417vw;
}

.news-older__heading {
    display: flex;
    align-items: center;
    gap: 0.625vw;
}

.news-older__heading span {
    font-size: 1.4583vw;
}

.news-older h3 {
    margin: 0;
    font-size: 0.9375vw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.news-older h3::after {
    display: inline-block;
    width: 2.7083vw;
    height: 0.1042vw;
    margin: 0 0 0.2604vw 0.8854vw;
    background: var(--news-red);
    content: "";
}

.news-older ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2.3438vw;
    margin: 0.625vw 0 0;
    padding: 0;
    list-style: none;
}

.news-older li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5208vw;
    padding: 0.5729vw 0;
    border-bottom: 0.0521vw solid #e7ebf0;
    font-size: 0.7292vw;
}

.news-older li a {
    font-weight: 700;
}

.news-older time {
    color: #8994a5;
    font-size: 0.625vw;
}

.news-all {
    display: table;
    margin: 1.0417vw auto 0;
    padding: 0.5729vw 1.1458vw;
    border: 0.0521vw solid var(--news-navy);
    border-radius: 0.2604vw;
    font-size: 0.7292vw;
    font-weight: 800;
}

@media (max-width: 41.6667vw) {
    .news-featured {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 28.125vw) {
    .newsy {
        padding: 1.8229vw 0.625vw;
    }

    .newsy__header h2 {
        gap: 0.6771vw;
        font-size: 1.3542vw;
    }

    .newsy__header h2::before,
    .newsy__header h2::after {
        width: 1.6667vw;
        height: 0.1562vw;
    }

    .news-grid,
    .news-older ul {
        grid-template-columns: 1fr;
    }

    .news-featured__image {
        min-height: 12.5vw;
    }

    .news-card__image {
        height: 10.9375vw;
    }
}

.newsy-panel {
    width: 90vw;
    margin: 0 auto;
    padding: 2.0833vw 1.5625vw;
    border-radius: 1.25vw;
    background: #ffffff;
    box-shadow: 0 0.7292vw 1.9792vw rgba(0, 20, 58, 0.18);
}

.newsy-panel .newsy {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
} 









/* Wymuszenie stałej wysokości dla tego konkretnego dużego zdjęcia */
/*.news-featured {
    height: 350px !important;
}

.news-featured__image {
    height: 100% !important;
    min-height: 100% !important;
}*/





/* Wymuszenie sztywnych proporcji 4:3 dla kontenera dużego zdjęcia */
/*.news-featured__image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
}*/

/* Sprawiamy, że cały wiersz dopasowuje swoją wysokość do zdjęcia, a nie do tekstu */
/*.news-featured {
    height: auto !important;
    align-items: stretch;
}*/

/* Zabezpieczenie na wypadek, gdyby tekst był zbyt długi i próbował uciekać dołem */
/*.news-featured__body {
    height: 100%;
    overflow: hidden;
}*/




/* WYMUSZENIE UKŁADU 2 KOLUMN DLA GÓRNYCH AKTUALNOŚCI */
.newsy .news-top-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.0417vw !important;
    margin-bottom: 2.0vw !important;
    align-items: stretch !important; /* Wymusza taką samą wysokość obu kafelków */
}

/* Ustawienie struktury pionowej: zdjęcie na górze, tekst na dole */
.newsy .news-top-grid .news-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 0.5208vw !important;
    overflow: hidden !important;
    box-shadow: 0 0.3125vw 1.1979vw rgba(6, 38, 90, 0.11) !important;
    height: 100% !important; /* Sprawia, że krótszy kafelek rozciąga się do dłuższego */
}

/* Wymuszenie idealnego kwadratu 1:1 dla obu górnych zdjęć */
.newsy .news-top-grid .news-card__image {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: 4 / 3 !important; /* Sztywny kwadrat */
}

/* Odpowiednie marginesy dla tekstów w górnych kafelkach */
.newsy .news-top-grid .news-card__body {
    padding: 1.5vw !important;
    flex: 1 !important; /* Zajmuje całą dostępną przestrzeń w pionie */
    display: flex !important;
    flex-direction: column !important; /* Pozwala kontrolować elementy wewnątrz */
}

.newsy .news-top-grid .news-card h3 {
    font-size: 1.4vw !important;
    margin: 0 0 0.8vw 0 !important;
}

.newsy .news-top-grid .news-card p {
    font-size: 0.95vw !important;
    line-height: 1.5 !important;
}

.newsy .news-top-grid .news-card .news-read-more {
    margin-top: auto !important; /* Automatyczny margines górny spycha przycisk na dół */
    padding-top: 1.25vw !important;
}

/* Ekran mobilny: Na telefonach układ automatycznie wraca jeden pod drugi */
@media (max-width: 41.6667vw) {
    .newsy .news-top-grid {
        grid-template-columns: 1fr !important;
    }
    .newsy .news-top-grid .news-card h3 {
        font-size: 4.5vw !important;
    }
    .newsy .news-top-grid .news-card p {
        font-size: 3.5vw !important;
    }
}










/* Wymuszenie proporcji kwadratu 1:1 dla dolnej siatki 6 newsów */
.newsy .news-grid .news-card__image {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important; /* Likwidujemy marginesy wokół zdjęcia, by wypełniało cały kafelek */
    border-radius: 0 !important; /* Usuwamy zaokrąglenie samego zdjęcia, jeśli kafelek je ucina */
    aspect-ratio: 4 / 3 !important; /* Wymuszenie idealnego formatu kwadratu 1:1 */
}

/* Dopasowanie dopełnienia tekstu pod kwadratowym zdjęciem w dolnej siatce */
.newsy .news-grid .news-card__body {
    padding: 1.2vw !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Wyrównanie wysokości kafelków w dolnej siatce, aby przyciski też były w jednej linii */
.newsy .news-grid {
    align-items: stretch !important;
}

.newsy .news-grid .news-card {
    height: 100% !important;
}

.newsy .news-grid .news-card .news-read-more {
    margin-top: auto !important; /* Spychamy "Czytaj dalej" na dół również w dolnych kartach */
    padding-top: 1.0vw !important;
}
