/* =================================
   Wrapper
================================= */

.dnb-wrap{
    margin:0;
}

/* =================================
   Grid
================================= */

.dnb-grid{
    display:grid;
    gap:var(--dnb-gap,30px);
    grid-template-columns:repeat(var(--dnb-cols,3),1fr);
    margin-bottom:30px;
}

/* =================================
   Card
================================= */

.dnb-post{
    background:var(--dnb-card-bg,#dbd8fc);
    border-radius:var(--dnb-radius,30px);
    overflow:hidden;
    padding:16px;
    box-shadow:0 4px 14px rgba(0,0,0,0.05);
    transition:transform .15s ease, box-shadow .15s ease;

    display:flex;
    flex-direction:column;
}

/* Hover effect */

.dnb-post:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* =================================
   Image
================================= */

.dnb-post a{
    display:block;

    /* makes image touch card edges */
    margin:-16px -16px 12px -16px;
}

.dnb-post img{
    width:100%;
    height:260px;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* =================================
   Title
================================= */

.dnb-title{
    font-size:var(--dnb-title-size,20px);
    margin-top:25px;
    line-height:1.25;
    letter-spacing:0.04em;
    font-weight:500;
    font-variant:small-caps;
    word-break:break-word;
}

.dnb-title a{
    text-decoration:none;
}

/* =================================
   Meta
================================= */

.dnb-meta{
    font-variant:small-caps;
    letter-spacing:0.05em;
    font-size:12px;
}

/* =================================
   Pagination
================================= */

.dnb-pagination{
    text-align:center;
    margin-top:10px;
}

.dnb-pagination .page-numbers{
    display:inline-block;
    padding:8px 12px;
    margin:4px;
    background:var(--dnb-page-bg,#f2f2f2);
    border-radius:6px;
    text-decoration:none;
}

.dnb-pagination .page-numbers.current{
    background:var(--dnb-page-current-bg,#333);
    color:var(--dnb-page-current-color,#fff);
}

/* =================================
   Loading state
================================= */

.dnb-wrap.dnb-loading{
    opacity:.6;
    pointer-events:none;
}

.dnb-wrap.dnb-loading:after{
    content:"Loading…";
    display:block;
    text-align:center;
    padding:10px 0;
    opacity:.8;
}

/* =================================
   Responsive
================================= */

/* Tablet */
@media (max-width:980px){

    .dnb-grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:24px;
    }

    .dnb-post img{
        height:220px;
    }

    .dnb-title{
        font-size:18px;
    }

}

/* Phone */
@media (max-width:600px){

    .dnb-grid{
        grid-template-columns:1fr !important;
        gap:20px;
    }

    .dnb-post img{
        height:200px;
    }

    .dnb-title{
        font-size:17px;
        margin-top:20px;
    }

    .dnb-meta{
        font-size:11px;
    }

}

/* Small phones */
@media (max-width:420px){

    .dnb-post img{
        height:180px;
    }

    .dnb-title{
        font-size:16px;
    }

}