/* =====================================================
   NEWS / BLOG
   ===================================================== */

.news-section{

    padding:100px 0;

    background:
        radial-gradient(circle at 95% 5%,rgba(37,99,235,.06),transparent 30%),
        linear-gradient(180deg,#fff 0%,#f8fbff 100%);

}

.news-section__header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:48px;

}

.news-section__lead{

    max-width:620px;

    margin-top:18px;

    color:var(--muted);

    line-height:1.75;

}

.news-section__all{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--blue);

    text-decoration:none;

    transition:
        transform .25s ease,
        color .25s ease;

}

.news-section__all:hover{

    transform:translateX(4px);

}

.news-section__all:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:4px;

    border-radius:8px;

}

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

.news-grid{

    display:grid;

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

    gap:22px;

    align-items:stretch;

}

/* =====================================================
   CARD
   ===================================================== */

.news-card{

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;

    border:1px solid rgba(15,23,42,.08);

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 10px 35px rgba(15,23,42,.05);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;

}

.news-card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.25);

    box-shadow:
        0 24px 55px rgba(15,23,42,.12);

}

/* =====================================================
   IMAGE
   ===================================================== */

.news-card__image-link{

    display:block;

    text-decoration:none;

}

.news-card__image-link:focus-visible{

    outline:3px solid rgba(37,99,235,.28);

    outline-offset:-3px;

}

.news-card__image{

    position:relative;

    height:220px;

    overflow:hidden;

    background:
        linear-gradient(135deg,#dbeafe,#eff6ff);

}

.news-card__image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.08)
        );

}

.news-card__image-label{

    position:absolute;

    left:18px;

    top:18px;

    z-index:2;

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:50px;

    background:#fff;

    color:var(--blue);

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    box-shadow:
        0 8px 20px rgba(15,23,42,.06);

}

/* =====================================================
   CONTENT
   ===================================================== */

.news-card__content{

    display:flex;

    flex:1;

    flex-direction:column;

    padding:26px;

}

.news-card__meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

    color:#64748b;

    font-size:13px;

    line-height:1.4;

}

.news-card__meta a{

    color:var(--blue);

    font-weight:600;

    text-decoration:none;

}

.news-card__meta a:hover{

    text-decoration:underline;

    text-underline-offset:3px;

}

.news-card h3{

    margin:0 0 16px;

    font-size:24px;

    line-height:1.28;

}

.news-card h3 a{

    color:#0f172a;

    text-decoration:none;

    transition:color .25s ease;

}

.news-card h3 a:hover{

    color:var(--blue);

}

.news-card h3 a:focus-visible{

    outline:3px solid rgba(37,99,235,.24);

    outline-offset:4px;

    border-radius:6px;

}

.news-card p{

    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.8;

}

/* =====================================================
   TAGI
   Tagi są zawsze przyklejone do dołu każdej karty.
   ===================================================== */

.news-card__tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:auto;

    padding-top:22px;

}

.news-card__tags a{

    display:inline-flex;

    align-items:center;

    min-height:36px;

    padding:8px 12px;

    border-radius:999px;

    background:#f3f7ff;

    color:var(--blue);

    font-size:12px;

    font-weight:600;

    line-height:1;

    text-decoration:none;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}

.news-card__tags a:hover{

    transform:translateY(-2px);

    background:var(--blue);

    color:#fff;

}

.news-card__tags a:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:3px;

}

/* =====================================================
   READ MORE
   ===================================================== */

.news-card__read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:18px;

    padding-top:0;

    font-weight:700;

    color:var(--blue);

    text-decoration:none;

    transition:gap .25s ease;

}

.news-card__read-more:hover{

    gap:16px;

}

.news-card__read-more:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:4px;

    border-radius:6px;

}

/* =====================================================
   KATEGORIE
   ===================================================== */

.news-categories{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    margin-top:44px;

}

.news-categories__label,

.news-categories > span:first-child{

    color:#64748b;

    font-weight:600;

}

.news-categories a{

    padding:10px 16px;

    border:1px solid rgba(15,23,42,.08);

    border-radius:999px;

    color:#334155;

    background:#fff;

    text-decoration:none;

    transition:
        border-color .25s ease,
        color .25s ease,
        background .25s ease,
        transform .25s ease;

}

.news-categories a:hover{

    transform:translateY(-2px);

    border-color:var(--blue);

    color:var(--blue);

    background:#f5f9ff;

}

.news-categories a:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:3px;

}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width:1100px){

    .news-grid{

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

    }

}

@media (max-width:760px){

    .news-section{

        padding:70px 0;

    }

    .news-section__header{

        flex-direction:column;

        align-items:flex-start;

        margin-bottom:34px;

    }

    .news-grid{

        grid-template-columns:1fr;

    }

    .news-card__image{

        height:200px;

    }

    .news-card__content{

        padding:22px;

    }

    .news-card h3{

        font-size:22px;

    }

}

@media (max-width:480px){

    .news-section{

        padding:56px 0;

    }

    .news-card{

        border-radius:20px;

    }

    .news-card__image{

        height:180px;

    }

    .news-card__content{

        padding:20px;

    }

    .news-card__meta{

        gap:7px;

        font-size:12px;

    }

    .news-card__tags{

        gap:7px;

        padding-top:20px;

    }

    .news-card__tags a{

        min-height:34px;

        padding:7px 10px;

        font-size:11px;

    }

}

@media (prefers-reduced-motion:reduce){

    .news-section *,
    .news-section *::before,
    .news-section *::after{

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

    }

}.news-card__image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.news-empty{grid-column:1/-1;padding:42px;border:1px solid #dce6f3;border-radius:18px;background:#fff;text-align:center}.news-empty p{margin:0 0 12px;color:#536783}.news-empty a{font-weight:800;color:var(--blue)}
