/* ==========================================================
   BLOG TEMPLATE
========================================================== */

.ons-blog-hero{
    background:var(--ons-bg-alt);
    padding:70px 0;
}

.ons-blog-hero h1{
    font-size:36px;
    margin:6px 0 14px;
}

.ons-blog-hero p{
    max-width:560px;
    margin:0 auto;
    font-size:15px;
}

.ons-blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.ons-blog-card{
    background:var(--ons-surface);
    border:1px solid var(--ons-border);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:.2s ease;
}

.ons-blog-card:hover{
    border-color:var(--ons-red);
    transform:translateY(-4px);
}

.ons-blog-media{
    display:block;
    height:190px;
    background:linear-gradient(160deg,var(--ons-surface-alt),var(--ons-bg));
}

.ons-blog-media img{
    width:100%;
    height:100% !important;
    object-fit:cover;
    display:block;
}

.ons-blog-media-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:44px;
    color:var(--ons-red);
}

.ons-blog-info{
    padding:20px 22px 26px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.ons-blog-date{
    color:var(--ons-red);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:10px;
}

.ons-blog-date i{
    margin-right:6px;
}

.ons-blog-info h3{
    font-size:18px;
    margin-bottom:10px;
    line-height:1.35;
}

.ons-blog-info h3 a{
    color:var(--ons-text);
    text-decoration:none;
}

.ons-blog-info h3 a:hover{
    color:var(--ons-red);
}

.ons-blog-info p{
    font-size:14px;
    line-height:1.6;
    margin:0 0 20px;
    flex:1;
}

.ons-blog-empty{
    text-align:center;
    padding:60px 0;
    font-size:16px;
}

.ons-blog-pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:50px;
}

.ons-blog-pagination .page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid var(--ons-border);
    background:var(--ons-surface);
    color:var(--ons-text);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:.2s ease;
}

.ons-blog-pagination .page-numbers.current,
.ons-blog-pagination .page-numbers:hover{
    background:var(--ons-red);
    border-color:var(--ons-red);
    color:#fff;
}

.ons-blog-pagination .page-numbers.dots{
    background:transparent;
    border-color:transparent;
}

@media (max-width:900px){
    .ons-blog-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){
    .ons-blog-grid{
        grid-template-columns:1fr;
    }
}