/*==================================================
BLOG
XPERTTA THEME
==================================================*/


/*==================================================
BLOG HEADER
==================================================*/

.blog-header{

    padding:110px 0 55px;

}

.blog-header .container{

    max-width:1200px;

    margin:0 auto;

}

.blog-header h1{

    margin:0 0 22px;

    color:#1B2950;

    font-size:52px;

    line-height:1.05;

    font-weight:800;

}

.blog-header .title-line{

    width:64px;

    height:4px;

    margin-bottom:24px;

    background:linear-gradient(
        90deg,
        #246CFF,
        #7448FF
    );

    border-radius:10px;

}

.blog-header p{

    max-width:700px;

    margin:0;

    color:#536486;

    font-size:18px;

    line-height:1.6;

}


/*==================================================
POSTS
==================================================*/

.blog-posts{

    padding:20px 0 100px;

}

.blog-posts .container{

    max-width:1200px;

    margin:0 auto;

}


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

.posts-grid{

    display:grid;

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

    gap:30px;

}


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

.blog-card{

    overflow:hidden;

    background:#FFFFFF;

    border:1px solid #E3E8F2;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(20,40,80,.06);

    transition:.3s ease;

}

.blog-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(20,40,80,.10);

}


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

.blog-card-image{

    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#EEF2F8;

}

.blog-card-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s ease;

}

.blog-card:hover .blog-card-image img{

    transform:scale(1.04);

}


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

.blog-card-content{

    padding:26px 26px 28px;

}

.blog-card-category{

    display:inline-block;

    margin-bottom:12px;

    color:#246CFF;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.04em;

}

.blog-card-title{

    margin:0 0 10px;

    font-size:24px;

    line-height:1.2;

    font-weight:800;

}

.blog-card-title a{

    color:#1B2950;

    text-decoration:none;

    transition:.25s ease;

}

.blog-card-title a:hover{

    color:#246CFF;

}

.blog-card-meta{

    margin-bottom:18px;

    color:#7A87A2;

    font-size:12px;

}

.blog-card-excerpt{

    color:#536486;

    font-size:14px;

    line-height:1.6;

}

.blog-card-excerpt p{

    margin:0;

}

.blog-card-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:22px;

    color:#246CFF;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;

}

.blog-card-link span{

    font-size:18px;

    line-height:1;

    transition:.25s ease;

}

.blog-card-link:hover{

    color:#7448FF;

}

.blog-card-link:hover span{

    transform:translateX(4px);

}


/*==================================================
PAGINATION
==================================================*/

.blog-pagination{

    display:flex;

    justify-content:center;

    margin-top:60px;

}

.blog-pagination .page-numbers{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:42px;

    height:42px;

    margin:0 4px;

    padding:0 12px;

    border:1px solid #E0E6F1;

    border-radius:10px;

    color:#1B2950;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;

}

.blog-pagination .page-numbers:hover,

.blog-pagination .page-numbers.current{

    color:#FFFFFF;

    border-color:#246CFF;

    background:linear-gradient(
        90deg,
        #246CFF,
        #7448FF
    );

}


/*==================================================
EMPTY BLOG
==================================================*/

.blog-empty{

    max-width:700px;

    margin:0 auto;

    padding:80px 30px;

    text-align:center;

}

.blog-empty h2{

    margin:0 0 18px;

    color:#1B2950;

    font-size:36px;

    font-weight:800;

}

.blog-empty p{

    margin:0;

    color:#536486;

    font-size:17px;

    line-height:1.6;

}


/*==================================================
SINGLE POST
==================================================*/

.single-post{

    padding-bottom:100px;

}


/*==================================================
SINGLE HEADER
==================================================*/

.single-post-header{

    padding:110px 0 45px;

}

.single-post-header .container{

    max-width:900px;

    margin:0 auto;

}

.single-post-category{

    display:inline-block;

    margin-bottom:16px;

    color:#246CFF;

    font-size:13px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.single-post-title{

    margin:0;

    color:#1B2950;

    font-size:52px;

    line-height:1.08;

    font-weight:800;

}

.single-post-header .title-line{

    width:64px;

    height:4px;

    margin:28px 0 18px;

    background:linear-gradient(
        90deg,
        #246CFF,
        #7448FF
    );

    border-radius:10px;

}

.single-post-meta{

    color:#7A87A2;

    font-size:13px;

}


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

.single-post-featured{

    padding:10px 0 55px;

}

.single-post-featured .container{

    max-width:1100px;

    margin:0 auto;

}

.single-post-image{

    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;

    border-radius:20px;

}


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

.single-post-content{

    padding:0 0 50px;

}

.single-post-content .container{

    max-width:850px;

    margin:0 auto;

}

.single-post-body{

    color:#536486;

    font-size:17px;

    line-height:1.8;

}

.single-post-body p{

    margin:0 0 24px;

}

.single-post-body h2{

    margin:50px 0 20px;

    color:#1B2950;

    font-size:32px;

    line-height:1.2;

    font-weight:800;

}

.single-post-body h3{

    margin:40px 0 16px;

    color:#1B2950;

    font-size:24px;

    line-height:1.25;

    font-weight:800;

}

.single-post-body ul,

.single-post-body ol{

    margin:0 0 25px;

    padding-left:25px;

}

.single-post-body li{

    margin-bottom:10px;

}

.single-post-body img{

    max-width:100%;

    height:auto;

    border-radius:14px;

}

.single-post-body a{

    color:#246CFF;

    text-decoration:underline;

}

.single-post-body blockquote{

    margin:35px 0;

    padding:25px 30px;

    border-left:4px solid #246CFF;

    background:#F5F7FC;

    color:#1B2950;

    font-size:19px;

    line-height:1.6;

}


/*==================================================
SINGLE FOOTER
==================================================*/

.single-post-footer{

    padding:20px 0 0;

}

.single-post-footer .container{

    max-width:850px;

    margin:0 auto;

}

.single-post-navigation{

    padding-top:30px;

    border-top:1px solid #E3E8F2;

}

.single-post-back a{

    color:#246CFF;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

}

.single-post-back a:hover{

    color:#7448FF;

}