/* ============================================================
   AKTUALNOŚCI SP44
   Wersja 2.0
============================================================ */

/* ===========================
   GŁÓWNY KONTENER
=========================== */

.news-wrapper{

    width:94%;
    margin:2vw auto;
    background:#ffffff;
    border-radius:1vw;
    box-shadow:0 .25vw .9vw rgba(0,0,0,.12);
    overflow:hidden;

}

.news-page{

    padding:2vw;

}


/* ===========================
   NAGŁÓWEK
=========================== */

.news-header{

    text-align:center;
    margin-bottom:2vw;

}

.news-header h1{

    margin:0;
    color:#1d3557;
    font-size:2vw;
    font-weight:700;
    letter-spacing:.08vw;

}

.news-header p{

    margin-top:.7vw;
    color:#666;
    font-size:.85vw;
    line-height:1.7;

}


/* ===========================
   TOOLBAR
=========================== */

.news-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:1vw;

    margin-bottom:2vw;

}

.news-toolbar-right{

    display:flex;

    align-items:center;

    gap:.5vw;

}

.news-search{

    flex:1;

}

.news-search input{

    width:100%;
    height:2.6vw;

    border:.08vw solid #d9dfe7;

    border-radius:.55vw;

    padding:0 1vw;

    font-size:.82vw;

    transition:.25s;

}

.news-search input:focus{

    outline:none;
    border-color:#1d4f91;
    box-shadow:0 0 .5vw rgba(0,87,184,.18);

}

.news-limit{

    display:flex;
    align-items:center;
    gap:.6vw;

}

.news-limit label{

    font-size:.78vw;
    color:#666;

}

.news-limit select{

    height:2.6vw;

    padding:0 .8vw;

    border:.08vw solid #d9dfe7;

    border-radius:.5vw;

    background:#fff;

    font-size:.78vw;

}


/* ===========================
   SIATKA
=========================== */

.news-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1.4vw;

}

/* ===========================
   KAFELKI
=========================== */

.news-tile{

    background:#ffffff;

    border:.06vw solid #e6ebf2;

    border-radius:.9vw;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    transition:.25s;

    box-shadow:

        0 .18vw .7vw rgba(0,0,0,.05),

        0 .45vw 1.5vw rgba(0,0,0,.06);

}

.news-tile:hover{

    transform:translateY(-.25vw);

    box-shadow:

        0 .6vw 1.8vw rgba(0,0,0,.15);

}

.news-tile a{

    display:flex;

    flex-direction:column;

    height:100%;

    color:inherit;

    text-decoration:none;

}


/* ===========================
   ZDJĘCIE
=========================== */

.news-thumb{

    position:relative;

    width:100%;

    aspect-ratio:4/3;

    overflow:hidden;

    background:#eef2f6;

}

.news-thumb img{

    position:absolute;

    left:0;

    top:0;

    width:100% !important;

    height:100% !important;

    object-fit:cover;

    transition:.45s;

}

.news-tile:hover .news-thumb img{

    transform:scale(1.06);

}


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

/*.news-category{

    position:absolute;

    left:.8vw;

    top:.8vw;

    padding:.28vw .75vw;

    border-radius:2vw;

    color:#fff;

    font-size:.62vw;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04vw;

    box-shadow:0 .18vw .5vw rgba(0,0,0,.25);

    z-index:20;

}*/


/* ===========================
   WAŻNY NEWS
=========================== */

.news-important{

    border:.08vw solid #ffbf00;

}

.news-important .news-category{

    animation:pulseBadge 2.8s infinite;

}

@keyframes pulseBadge{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}


/* ===========================
   CIAŁO KAFELKA
=========================== */

.news-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:1vw;

}

/* ===========================
   TYTUŁ
=========================== */

.news-title{

    margin:0;

    color:#173d6a;

    font-size:1.05vw;

    font-weight:700;

    line-height:1.35;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

    min-height:2.9vw;

    transition:.25s;

}

.news-tile:hover .news-title{

    color:#0058b8;

}


/* ===========================
   DATA
=========================== */

/*.news-date{

    margin-top:.7vw;

    margin-bottom:.8vw;

    color:#7a7a7a;

    font-size:.72vw;

    font-weight:500;

}*/


/* ===========================
   OPIS
=========================== */

.news-description{

    flex:1;

    color:#555;

    font-size:.78vw;

    line-height:1.55;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:4;

    overflow:hidden;

}


/* ===========================
   STOPKA KAFELKA
=========================== */

/*.news-footer{

    margin-top:auto;

    padding-top:.9vw;

    border-top:.06vw solid #edf1f5;

    display:flex;

    justify-content:space-between;

    align-items:center;

}*/


/* ===========================
   CZYTAJ WIĘCEJ
=========================== */

/*.news-more{

    color:#1d4f91;

    font-size:.78vw;

    font-weight:700;

    transition:.25s;

}*/

.news-tile:hover .news-more{

    color:#0b6fe5;

    transform:translateX(.25vw);

}



/* ===========================
   ANIMACJA PODŚWIETLENIA
=========================== */

.news-tile::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:.18vw;

    background:linear-gradient(
        90deg,
        #2b4f81,
        #5d90d8
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.news-tile{

    position:relative;

}

.news-tile:hover::before{

    transform:scaleX(1);

}

/* ==========================================================
   PAGINACJA
========================================================== */

.news-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:.7vw;

    margin-top:2.5vw;

    padding-top:1.8vw;

    border-top:.08vw solid #e8edf3;

}

.news-pagination a,
.news-pagination span{

    min-width:2.2vw;

    height:2.2vw;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:.45vw;

    text-decoration:none;

    font-size:.78vw;

    transition:.25s;

}

.news-pagination a{

    color:#2b4f81;

    background:#ffffff;

    border:.08vw solid #d9e1eb;

}

.news-pagination a:hover{

    background:#2b4f81;

    color:#ffffff;

}

.news-pagination .active{

    background:#2b4f81;

    color:#ffffff;

    border-color:#2b4f81;

    font-weight:700;

}


/* ==========================================================
   LICZNIK
========================================================== */

.news-counter{

    margin-top:2vw;

    text-align:center;

    color:#666;

    font-size:.78vw;

}


/* ==========================================================
   BRAK WYNIKÓW
========================================================== */

.news-empty{

    padding:4vw;

    text-align:center;

    color:#666;

    font-size:1vw;

    border:.08vw dashed #d5dde8;

    border-radius:.8vw;

    background:#fafbfd;

}


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

.news-tile:hover{

    border-color:#c8d8ea;

}

.news-tile:hover .news-date{

    color:#1d4f91;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.news-description::-webkit-scrollbar{

    width:.25vw;

}

.news-description::-webkit-scrollbar-thumb{

    background:#c7d4e5;

    border-radius:2vw;

}


/* ==========================================================
   DELIKATNY GRADIENT
========================================================== */

.news-wrapper{

    background:linear-gradient(

        180deg,

        #ffffff 0%,

        #fbfcfe 100%

    );

}


/* ==========================================================
   WYRÓWNANIE KAFELKÓW
========================================================== */

.news-grid{

    align-items:start;

}

/* ==========================================================
   WYRÓŻNIONE NEWSY
========================================================== */

.news-important{

    position:relative;

    overflow:hidden;

    border:.08vw solid #f1c644;

}

.news-important::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,193,7,.10),
        rgba(255,255,255,0)
    );

    pointer-events:none;

}


/* ==========================================================
   DELIKATNE ANIMACJE
========================================================== */

.news-thumb img{

    /*transition:
        transform .45s ease,
        filter .45s ease;*/
		
	transition:transform .45s ease;

}

.news-tile:hover .news-thumb img{

    /*transform:scale(1.05);*/

    filter:brightness(1.04);
	
	transform:scale(1.02) translateY(-.15vw);

}

.news-title,
.news-date,
.news-more{

    transition:.25s;

}

.news-tile:hover .news-date{

    color:#0d5fb5;

}

.news-tile:hover .news-more{

    letter-spacing:.02vw;

}


/* ==========================================================
   CIEŃ POD KAFELKIEM
========================================================== */

.news-tile{

    box-shadow:

        0 .15vw .5vw rgba(0,0,0,.06),

        0 .35vw 1vw rgba(0,0,0,.04);

}

.news-tile:hover{

    box-shadow:

        0 .6vw 1.6vw rgba(0,0,0,.12),

        0 0 .8vw rgba(32,81,148,.08);

}


/* ==========================================================
   LEKKIE ZAOKRĄGLENIA
========================================================== */

.news-thumb{

    border-bottom:.06vw solid #eef2f5;

}


/* ==========================================================
   HOVER DLA KATEGORII
========================================================== */

.news-category{

    transition:.25s;

}

.news-tile:hover .news-category{

    transform:translateY(-.08vw);

}


/* ==========================================================
   OSTATNIA LINIA
========================================================== */

.news-footer{

    min-height:2.2vw;

}


/* ==========================================================
   ODDZIELENIE TYTUŁU OD OPISU
========================================================== */

.news-description{

    margin-top:.2vw;

}


/* ==========================================================
   STANY FOCUS
========================================================== */

.news-tile a:focus{

    outline:none;

}

.news-tile a:focus-visible{

    box-shadow:0 0 0 .18vw rgba(0,91,187,.28);

    border-radius:.8vw;

}


/* ==========================================================
   WERSJA 3 KOLUMNY
========================================================== */

@media (max-width:1400px){

    .news-grid{

        grid-template-columns:repeat(3,1fr);

    }

}


/* ==========================================================
   WERSJA 2 KOLUMNY
========================================================== */

@media (max-width:900px){

    .news-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/* ==========================================================
   TELEFONY
========================================================== */

@media (max-width:650px){

    .news-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   DROBNE POPRAWKI
========================================================== */

/* Ładniejsza selekcja tekstu */

.news-page ::selection{

    background:#2b4f81;

    color:#ffffff;

}


/* Zdjęcia zawsze wypełniają cały kafelek */

.news-thumb img{

    display:block;

}


/* Kursor */

.news-tile{

    cursor:pointer;

}


/* Delikatniejszy opis */

.news-description{

    color:#5c6672;

}


/* Mocniejszy tytuł */

.news-title{

    font-weight:800;

}


/* Data */

.news-date{

    font-weight:600;

    letter-spacing:.02vw;

}


/* Czytaj więcej */

.news-more{

    display:flex;

    align-items:center;

    gap:.3vw;

}


.news-tile:hover .news-more::after{

    transform:translateX(.25vw);

}


/* Animacja zdjęcia */

.news-thumb{

    background:#f5f7fb;

}

.news-thumb::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.08),

        transparent 45%

    );

    pointer-events:none;

}


/* Delikatniejszy kolor tła */

.news-page{

    background:transparent;

}


/* Toolbar */

.news-toolbar{

    padding-bottom:1vw;

    border-bottom:.08vw solid #eef2f5;

}


/* Footer */

.news-footer{

    color:#888;

}


/* Paginacja */

.news-pagination{

    margin-bottom:1vw;

}


/* Ostatni kafelek */

.news-grid{

    margin-bottom:2vw;

}


/* Delikatny efekt pojawiania */

.news-tile{

    animation:fadeNews .35s ease;

}

@keyframes fadeNews{

    from{

        opacity:0;

        transform:translateY(.6vw);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.news-date-badge{

    position:absolute;

    top:.8vw;

    left:.8vw;

    background:#163d73;

    color:#fff;

    padding:.45vw .8vw;

    border-radius:.35vw;

    font-size:.68vw;

    font-weight:700;

    z-index:20;

}

.news-category-badge{

    position:absolute;

    top:.8vw;

    right:.8vw;

    color:#fff;

    padding:.45vw .8vw;

    border-radius:.35vw;

    font-size:.68vw;

    font-weight:700;

    text-transform:uppercase;

    z-index:20;

}

.news-body{

    display:flex;

    flex-direction:column;

    padding:1.3vw;

    flex:1;

}

.news-title{

    margin:0;

    color:#24364b;

    font-size:1.18vw;

    line-height:1.30;

    font-weight:800;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}

.news-description{

    margin-top:1vw;

    color:#556274;

    font-size:.82vw;

    line-height:1.7;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

    overflow:hidden;

    flex:1;

}

.news-footer{

    margin-top:1vw;

    border-top:.06vw solid #edf1f5;

    transition:.30s;

}

.news-more{

    display:flex;

    justify-content:center;

    align-items:center;

    height:3vw;

    font-size:.82vw;

    font-weight:700;

    color:#173d6a;

    transition:.30s;

}

.news-tile:hover .news-more{

    color:#0058b8;

    transform:translateX(.18vw);

}

.news-thumb{

    position:relative;

    aspect-ratio:4/3;

    overflow:hidden;

    background:#eef2f6;

}

.news-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.news-tile:hover img{

    transform:scale(1.03);

}

.news-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1.5vw;

}

.news-tile{

    position:relative;

    overflow:hidden;

}

.news-tile::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:.22vw;

    background:#174a86;

    transform:translateX(-100%);

    transition:transform .35s ease;

    z-index:30;

}

.news-tile:hover::before{

    transform:translateX(0);

}

.news-tile:hover .news-footer{

    background:#174a86;

}

.news-tile:hover .news-more{

    color:#ffffff;

}

.news-more::after{

    margin-left:.45vw;

    transition:.30s;

}

.news-tile:hover .news-more::after{

    transform:translateX(.35vw);

}

.page-numbers{

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    gap:.45vw;

}

.page-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 .9vw;

    height:2.2vw;

    border-radius:.45vw;

    text-decoration:none;

    background:#fff;

    color:#2b4f81;

    border:.08vw solid #d9e1eb;

    transition:.25s;

}

.page-arrow:hover{

    background:#2b4f81;

    color:#fff;

}