/* ===================================
SINGLE BLOG
=================================== */
/* ===================================
SINGLE BLOG
=================================== */
.single-blog{
padding:var(--space-8) 0;
}
.single-layout{
display:grid;
grid-template-columns:minmax(0,100%) 260px;
justify-content:space-between;
gap:var(--space-11);
}
/* ===================================
LEFT CONTENT
=================================== */
.single-main{
min-width:0;
}
.single-title{
font-size:var(--fs-h2);
line-height:var(--lh-heading);
color:var(--color-primary);
margin-bottom:var(--space-5);
}
.single-meta{
display:flex;
align-items:center;
gap:var(--space-4);
margin-bottom:var(--space-8);
flex-wrap:wrap;
}
.single-meta .category{
padding:6px 12px;
border:1px solid var(--box-border);
border-radius:50px;
font-size:var(--fs-body-xs);
color:var(--color-primary);
white-space:nowrap
}
.single-meta .date{
font-size:var(--fs-body-s);
color:var(--color-text);
}
/* ===================================
FEATURED IMAGE
=================================== */
.featured-image{
margin-bottom:var(--space-7);
max-height:500px;
overflow: hidden;
border-radius:var(--radius-md);
}
.featured-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* ===================================
AUDIO
=================================== */
.audio-player{
margin-bottom:var(--space-8);
}
.audio-player button{
height:42px;
padding:0 18px;
border:1px solid var(--box-border);
background:#fff;
border-radius:50px;
cursor:pointer;
font-size:var(--fs-body-xs);
transition:.3s ease;
}
.audio-player button:hover{
background:#f8f8f8;
}
/* ===================================
BLOG CONTENT
=================================== */
.single-content{
font-size:var(--fs-body);
line-height:var(--lh-body);
color:var(--color-text);
}
.single-content > *{
margin-bottom:var(--space-5);
}
.single-content > *:last-child{
margin-bottom:0;
}
/* headings */
.single-content h1{
font-size:var(--fs-h2);
margin-top:var(--space-10);
margin-bottom:var(--space-5);
}
.single-content h2{
font-size:var(--fs-h3);
margin-top:var(--space-9);
margin-bottom:var(--space-5);
}
.single-content h3{
font-size:var(--fs-h4);
margin-top:var(--space-8);
margin-bottom:var(--space-4);
}
.single-content h4{
font-size:var(--fs-h5);
margin-top:var(--space-7);
margin-bottom:var(--space-4);
}
.single-content h5{
font-size:var(--fs-h6);
margin-top:var(--space-6);
margin-bottom:var(--space-3);
}
.single-content h6{
font-size:var(--fs-body-md);
margin-top:var(--space-6);
margin-bottom:var(--space-3);
}
.single-content p{
margin-bottom:var(--space-5);
}
.single-content ul,
.single-content ol{
padding-left:25px;
margin-top:var(--space-5);
margin-bottom:var(--space-6);
}
.single-content li{
margin-bottom:var(--space-3);
}
.single-content img{
width:100%;
height:auto;
border-radius:var(--radius-md);
margin:var(--space-8) 0;
}
.single-content blockquote{
margin:var(--space-8) 0;
padding-left:var(--space-6);
border-left:4px solid var(--color-highlight);
}
.single-content a{
color:var(--color-highlight);
}
/* ===================================
POST NAVIGATION
=================================== */
.post-navigation{
display:flex;
gap:12px;
margin-top:var(--space-10);
}
.post-navigation .nav-prev,
.post-navigation .nav-next{
display:flex;
}
.post-navigation a{
width:52px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--box-border);
border-radius:0;
text-decoration:none;
transition:.3s ease;
background:var(--box-border);
color:var(--color-text)
}
.post-navigation a:hover{
background:var(--color-highlight);
color:#fff;
}
/* ===================================
MORE ARTICLES
=================================== */
.more-articles{
margin-top:var(--space-11);
padding:var(--space-11) 0;
background:#f8f8f8;
}
.section-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:var(--space-8);
}
.section-head h2{
font-size:var(--fs-h4);
}
.articles-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
/* ===================================
ARTICLE CARD
=================================== */
.article-card{
display:block;
}
.article-card a{
text-decoration:none;
}
.article-card img{
width:100%;
height:260px;
object-fit:cover;
border-radius:var(--radius-md);
margin-bottom:var(--space-4);
}
.article-card .tag{
display:inline-flex;
padding:5px 10px;
border:1px solid var(--box-border);
border-radius:50px;
font-size:11px;
margin-bottom:var(--space-3);
background:#fff;
color: var(--color-text)
}
.article-card h3{
font-size:var(--fs-h5);
line-height:1.3;
margin-bottom:var(--space-3);
color:var(--color-primary);
}
.article-card p{
font-size:var(--fs-body-s);
margin-bottom:var(--space-4);
color:var(--color-text);
}
.article-card .date{
font-size:12px;
color:#888;
}
/* ===================================
TABLET
=================================== */
@media(max-width:991px){
.single-layout{
grid-template-columns:1fr;
gap:var(--space-8);
flex-direction:row-reverse;
display:block
}
.single-sidebar{
position:relative;
top:auto;
order:-1;
margin-top:35px;
}
.single-sidebar ul{
display:flex;
flex-wrap:wrap;
gap:15px;
}
.articles-grid{
grid-template-columns:repeat(2,1fr);
}
.single-sidebar ul{ display:flex; flex-wrap:wrap; gap:10px}
.single-sidebar li{ display:inline-block; border:1px solid #ccc; border-radius:40px; padding:7px 15px}
}
/* ===================================
MOBILE
=================================== */
@media(max-width:767px){
.single-blog{
padding:var(--space-9) 0;
}
.single-title{
font-size:var(--fs-h3);
}
.single-meta{
flex-wrap:wrap;
}
.articles-grid{
grid-template-columns:1fr;
gap:var(--space-7);
}
.article-card img{
height:220px;
}
.single-content h1{
font-size:var(--fs-h3);
}
.single-content h2{
font-size:var(--fs-h4);
}
.single-content h3{
font-size:var(--fs-h5);
}
.single-sidebar ul{ display:block}
.single-sidebar li{ display:block}
}