/* ==================================================
   BLOG UDON
================================================== */

:root{
    --udon-bg:#0a0a0a;
    --udon-card:#121212;
    --udon-border:rgba(255,255,255,.08);
    --udon-primary:#d14a2f;
    --udon-primary-hover:#e05a3d;
    --udon-text:#ffffff;
    --udon-text-muted:rgba(255,255,255,.65);
}

.udon-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* ==========================================
   HERO
========================================== */

.udon-blog-hero{

    background:var(--udon-bg);

    color:#fff;

    text-align:center;

    padding:120px 0 80px;

}

.udon-eyebrow{

    display:inline-block;

    color:var(--udon-primary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.udon-blog-hero h1{

    font-size:56px;

    line-height:1.1;

    max-width:850px;

    margin:0 auto 25px;

}

.udon-blog-hero p{

    max-width:700px;

    margin:0 auto;

    color:var(--udon-text-muted);

    font-size:18px;

}

/* ==========================================
   DESTAQUE
========================================== */

.udon-featured-post{

    background:var(--udon-bg);

    padding-bottom:80px;

}

.udon-featured-post a{

    text-decoration:none;

}

.udon-featured-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    border-radius:30px;

    background:var(--udon-card);

}

.udon-featured-grid img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.udon-featured-grid > div:last-child{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.udon-featured-grid h2{

    color:#fff;

    font-size:40px;

    line-height:1.2;

    margin:0 0 25px;

}

.udon-featured-grid p{

    color:var(--udon-text-muted);

    line-height:1.8;

}

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

.udon-blog-grid{

    background:var(--udon-bg);

    padding-bottom:100px;

}

.udon-posts{

    display:grid;

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

    gap:30px;

}

.udon-post-card{

    background:var(--udon-card);

    border-radius:24px;

    overflow:hidden;

    transition:.3s;

}

.udon-post-card:hover{

    transform:translateY(-8px);

}

.udon-post-card a{

    text-decoration:none;

}

.udon-post-card img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    display:block;

}

.udon-post-content{

    padding:30px;

}

.udon-post-content span{

    color:var(--udon-primary);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.udon-post-content h3{

    color:#fff;

    font-size:26px;

    line-height:1.3;

    margin:20px 0;

}

.udon-post-content p{

    color:var(--udon-text-muted);

    line-height:1.8;

}

/* ==========================================
   PAGINAÇÃO
========================================== */

.navigation.pagination{

    margin-top:70px;

    text-align:center;

}

.navigation.pagination .page-numbers{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border-radius:12px;

    background:var(--udon-card);

    color:#fff;

    text-decoration:none;

    margin:0 5px;

}

.navigation.pagination .current{

    background:var(--udon-primary);

}

/* ==========================================
   RESPONSIVO
========================================== */

@media(max-width:991px){

    .udon-featured-grid{

        grid-template-columns:1fr;

    }

    .udon-posts{

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

    }

}

@media(max-width:768px){

    .udon-blog-hero{

        padding:80px 0 60px;

    }

    .udon-blog-hero h1{

        font-size:38px;

    }

    .udon-featured-grid > div:last-child{

        padding:40px;

    }

    .udon-featured-grid h2{

        font-size:30px;

    }

    .udon-posts{

        grid-template-columns:1fr;

    }

}

.udon-featured-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:40px;

    padding:16px 34px;

    background:#D14A2F;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    border-radius:10px;

    transition:.3s;

}

.udon-featured-button:hover{

    background:#e45a3e;

    transform:translateY(-2px);

    color:#fff;

}