/*==================================================
  Blog Detail Page
  SVFutureTechAI Theme
==================================================*/

/*---------------------------------
  Article Layout
----------------------------------*/

.sv-blog-page{
    padding:60px 0;
}
/*






/*---------------------------------
  Featured Image
----------------------------------*/

.sv-blog-featured-image{
    overflow:hidden;
    border-radius:16px;
    margin-bottom:35px;
    box-shadow:var(--sv-shadow);
}

.sv-blog-featured-image img{
    width:100%;
    height:auto;
    display:block;
}

/*---------------------------------
  Category Badge
----------------------------------*/

.sv-blog-category{
    display:inline-flex;
    align-items:center;
    padding:8px 18px;
    border-radius:30px;
    background:var(--sv-primary-light);
    color:var(--sv-primary);
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
}

/*---------------------------------
  Blog Title
----------------------------------*/

.sv-blog-title{
    font-size:clamp(34px,4vw,48px);
    line-height:1.2;
    margin-bottom:18px;
    color:var(--sv-text);
}

/*---------------------------------
  Blog Meta
----------------------------------*/

.sv-blog-meta{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-bottom:35px;
    color:var(--sv-text-light);
    font-size:14px;
}

.sv-blog-meta span{
    display:flex;
    align-items:center;
    gap:8px;
}

/*---------------------------------
  Article Body
----------------------------------*/

.sv-blog-body{
    font-size:17px;
    line-height:1.9;
}

.sv-blog-body p{
    margin-bottom:24px;
}

.sv-blog-body h2{
    margin-top:50px;
    margin-bottom:18px;
}

.sv-blog-body h3{
    margin-top:40px;
    margin-bottom:15px;
}

.sv-blog-body img{
    border-radius:14px;
    margin:35px 0;
}

.sv-blog-body ul,
.sv-blog-body ol{
    margin:25px 0 30px 25px;
}

.sv-blog-body li{
    margin-bottom:12px;
}

.sv-blog-body blockquote{
    padding:24px 30px;
    border-left:5px solid var(--sv-primary);
    background:#f8fafc;
    border-radius:10px;
    margin:35px 0;
    font-style:italic;
}

/*---------------------------------
  Article Navigation
----------------------------------*/

.sv-post-navigation{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin:60px 0;
}

.sv-post-nav-item{
    flex:1;
    padding:20px;
    border:1px solid var(--sv-border);
    border-radius:14px;
    transition:.3s;
}

.sv-post-nav-item:hover{
    border-color:var(--sv-primary);
    box-shadow:var(--sv-shadow-sm);
}

/*---------------------------------
  Related Articles
----------------------------------*/

.sv-related-posts{
    margin-top:70px;
}

.sv-related-posts h2{
    margin-bottom:30px;
}

/*---------------------------------
  Comments
----------------------------------*/

.sv-comments{
    margin-top:70px;
}

/*---------------------------------
  Responsive
----------------------------------*/

@media(max-width:992px){
/*
.sv-blog-layout{
    grid-template-columns:1fr;
}*/

}

@media(max-width:768px){

.sv-blog-page{
    padding:40px 0;
}

.sv-blog-title{
    font-size:30px;
}

.sv-blog-meta{
    gap:14px;
}

.sv-post-navigation{
    flex-direction:column;
}

}