/* =========================================================
   28. BLOG PAGE (featured post, filters, article cards)
   ========================================================= */
.fbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.8rem
}

.fbtns {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.fbt {
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 99px;
    padding: .5rem 1.1rem;
    cursor: pointer;
    color: var(--ink)
}

    .fbt:hover {
        border-color: var(--amber)
    }

    .fbt.on {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy)
    }

.srch {
    width: min(18rem,100%);
    border-radius: 99px;
    padding: .6rem 1.1rem
}

.feat {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    overflow: hidden;
    background: #fff;
    margin-bottom: 2.5rem
}

    .feat .pt {
        height: 100%;
        min-height: 18rem;
        font-size: 1.6rem;
        padding: 2rem
    }

    .feat .pbd {
        padding: 2rem;
        justify-content: center;
        gap: .8rem
    }

    .feat h2 {
        font-size: clamp(1.4rem,2.2vw,2rem);
        margin: 0
    }

.post {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform .25s,box-shadow .25s
}

    .post[hidden] {
        display: none
    }

    .post:hover {
        transform: translateY(-.3rem);
        box-shadow: 0 18px 36px rgba(10,31,61,.1)
    }

.pt {
    --a: #1b4a8a;
    position: relative;
    overflow: hidden;
    height: 9rem;
    background: linear-gradient(135deg,var(--a),var(--navy));
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem
}

    .pt::after {
        content: "";
        position: absolute;
        right: -1.5rem;
        top: -1.5rem;
        width: 7rem;
        height: 7rem;
        border-radius: 50%;
        background: #ffffff14
    }

    .pt.a2 {
        --a: #0e7c66
    }

    .pt.a3 {
        --a: #c2410c
    }

    .pt.a4 {
        --a: #6d28d9
    }

    .pt.a5 {
        --a: #b45309
    }

    .pt.a6 {
        --a: #0369a1
    }

.pbd {
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1
}

    .pbd h3 {
        font-size: 1.12rem
    }

    .pbd p {
        color: var(--mut);
        font-size: .92rem
    }

    .pbd .more {
        margin-top: auto;
        padding-top: .4rem
    }

.empty {
    text-align: center;
    color: var(--mut);
    padding: 2rem 0
}

@media(max-width:1000px) {
    .feat {
        grid-template-columns: 1fr
    }

        .feat .pt {
            min-height: 10rem;
            height: 10rem
        }
}

@media(max-width:640px) {
    .feat .pbd {
        padding: 1.4rem
    }
}