/* ==========================================================
   SP44MS
   NEWS.CSS
   ========================================================== */

#news{

    background:var(--bg-light);

    overflow:hidden;

}

/* ==========================================
   GRID
   ========================================== */

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.0417vw;

    align-items:start;
}


/* ==========================================
   KARTA
   ========================================== */

.news-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    border-radius:1.6667vw;

    background:#ffffff;

    box-shadow:var(--shadow-sm);

    transition:.45s;
	
	align-self:start;

}

.news-card:hover{

    transform:translateY(-0.625vw);

    box-shadow:var(--shadow-xl);
	

}

/* ==========================================
   DUŻA KARTA
   ========================================== */

.news-card.featured{

    grid-row:span 2;

}

/* ==========================================
   OBRAZ
   ========================================== */

.news-image{

    position:relative;

    overflow:hidden;

    height:14.0625vw;

}

.news-card.featured .news-image{

    height:27.0833vw;

}

.news-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.1s;

}

.news-card:hover img{

    transform:scale(1.08);

}

/* ==========================================
   KATEGORIA
   ========================================== */

.news-category{

    position:absolute;

    top:1.25vw;

    left:1.25vw;

    padding:0.5208vw 0.9375vw;

    border-radius:52.0312vw;

    background:rgba(255,255,255,.92);

    color:var(--primary);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================================
   ZAWARTOŚĆ
   ========================================== */

.news-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:1.7708vw;

}

.news-date{

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    margin-bottom:0.9375vw;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.news-content h3{

    margin-bottom:0.9375vw;

    font-size:1vw;

    line-height:1.25;

}

.news-card:not(.featured) h3{

    font-size:1.3vw;

}

.news-content p{

    flex:1;

    margin-bottom:1.5625vw;

}

.news-content a{

    display:inline-flex;

    align-items:center;

    gap:0.5208vw;

    font-weight:700;

    color:var(--primary);
	

}

.news-content a::after{

    content:"→";

    transition:.35s;

}

.news-content a:hover::after{

    transform:translateX(0.5208vw);

}

/* ==========================================
   HOVER
   ========================================== */

.news-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        transparent,

        rgba(0,0,0,.04)

    );

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.news-card:hover::before{

    opacity:1;

}

/* ==========================================
   RESPONSIVE
   ========================================== */
/*
@media(max-width:62.5vw){

.news-grid{

grid-template-columns:1fr 1fr;

}

.news-card.featured{

grid-row:auto;

grid-column:1 / -1;

}

.news-card.featured .news-image{

height:21.875vw;

}

}

@media(max-width:40.0vw){

.news-grid{

grid-template-columns:1fr;

}

.news-card.featured .news-image{

height:13.5417vw;

}

.news-image{

height:12.5vw;

}

.news-content{

padding:1.3542vw;

}

.news-content h3{

font-size:1vw;

}

}
*/


/* Wymuszenie proporcji 4:3 oraz 15.625vw wysokości na komputerach */
.news-featured__image {
   /* width: 20.8333vw !important;  *//* Szerokość dla proporcji 4:3 przy 15.625vw wysokości */
    height: 30vw !important; /* Stała wysokość */
    flex-shrink: 0;           /* Blokuje zwężanie zdjęcia przez tekst obok */
}

/* Dostosowanie samego obrazka wewnątrz kontenera */
.news-featured__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Idealne przycięcie bez zniekształceń */
}

/* Zabezpieczenie dla urządzeń mobilnych (ekrany mniejsze niż szerokość zdjęcia + tekst) */
@media (max-width: 50rem) {
    .news-featured {
        grid-template-columns: 1fr; /* Przełączenie układu na pionowy (zdjęcie nad tekstem) */
        height: auto !important;
    }
    .news-featured__image {
        width: 100% !important;     /* Na telefonie zdjęcie zajmie całą szerokość ekranu */
        height: auto !important;    /* Wysokość dostosuje się automatycznie */
        aspect-ratio: 4 / 3 !important; /* Nowoczesna reguła pilnująca proporcji 4:3 na każdym ekranie */
    }
}