/* -------------------------------- */
/* FIX ASTRA CONTAINER */
/* -------------------------------- */

.single-post .site-content .ast-container{
max-width:100%;
padding-left:0;
padding-right:0;
	background:#f5f7f7;
}


/* -------------------------------- */
/* HERO IMAGE */
/* -------------------------------- */

/* HERO */

.single-hero{
width:100%;
height:529px;
background-size:cover;
background-position:center top;
background-repeat:no-repeat;
position:relative;
}

/* optional dark overlay for readability */

.single-hero::after{
content:"";
position:absolute;
inset:0;
background:#00000033;
}



/* -------------------------------- */
/* INTRO SECTION */
/* -------------------------------- */

.single-intro{
	font-family:switzer;
	display:flex;
	flex-direction:column;
	gap:90px;
	width:100%;
	padding:12px 32px 32px 32px;
	align-items:flex-start;
	margin-bottom:96px;
}
.single-intro-main {
    display: flex;
    flex-direction: column;
    align-items: center;
	padding-top:32px;
}


.single-intro-meta{
	width:100%;
	flex-shrink:0;
	font-size:13px;
	color:#9aa3a8;
    display: flex;
	line-height:1.6;
	padding-top:32px;
}

.single-author{
	
	font-family:switzer;
	margin-bottom:5px;
	color:#5A7880;
	font-size:18px;
	line-height:22px;
	text-transform:capitalize;
}

.single-date{
	font-size:12px;
	color:#8f9aa3;
	font-family:switzer;
	line-height:18px;
	
}

.single-intro-main{
flex:1;
}

.single-title{
	font-family:switzer;
	font-size:32px;
	font-weight:500;
	line-height:40px;
	color:#43555B;
	max-width:100%px;
	text-transform:capitalize;
	padding-left: 466px;
}


/* -------------------------------- */
/* DIVIDER */
/* -------------------------------- */

.single-divider{
max-width:1200px;
margin:35px auto;
height:1px;
background:#e5e7ea;
}


/* -------------------------------- */
/* BODY GRID */
/* -------------------------------- */


.single-body-left{
width:220px;
flex-shrink:0;
}

.single-content{
	max-width:100%;
	font-size:16px;
	line-height:1.8;
	color:#4c5a63;
	font-family:switzer;
	font-size:18px;
	font-weight:500;
	line-height:22px;
	color:#4E646C;
	text-transform:capitalize;
	padding-left: 466px;
}


/* -------------------------------- */
/* CONTENT TYPOGRAPHY */
/* -------------------------------- */

.single-content h2{
font-size:18px;
color:#0174A3;
margin-top:35px;
margin-bottom:15px;
}

.single-content p{
margin-bottom:18px;
}

.single-content ul{
padding-left:18px;
margin-bottom:20px;
}

.single-content li{
margin-bottom:6px;
}


/* -------------------------------- */
/* RELATED ARTICLES */
/* -------------------------------- */

.single-related{
max-width:1200px;
margin:80px auto;
padding:0 20px;
}

.related-title{
font-size:11px;
letter-spacing:2px;
color:#8f9aa3;
margin-bottom:30px;
text-transform:uppercase;
}


/* -------------------------------- */
/* GRID */
/* -------------------------------- */

.related-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}


/* -------------------------------- */
/* CARD */
/* -------------------------------- */

.related-card{
display:block;
text-decoration:none;
color:inherit;
transition:transform .3s ease;
}

.related-card:hover{
transform:translateY(-4px);
}


/* -------------------------------- */
/* IMAGE */
/* -------------------------------- */

.related-thumb img{
width:100%;
height:170px;
object-fit:cover;
display:block;
}


/* -------------------------------- */
/* CONTENT */
/* -------------------------------- */

.related-content{
padding-top:10px;
}

.related-date{
font-size:11px;
color:#8f9aa3;
margin-bottom:6px;
}

.related-content h4{
font-size:15px;
line-height:1.4;
margin-bottom:8px;
color:#2f3a40;
}

.related-content p{
font-size:14px;
color:#5d6b73;
line-height:1.6;
}


/* -------------------------------- */
/* RESPONSIVE */
/* -------------------------------- */

@media (max-width:1024px){

.single-intro{
flex-direction:column;
gap:20px;
}

.single-body-grid{
flex-direction:column;
}

.single-body-left{
display:none;
}

.related-grid{
grid-template-columns:repeat(2,1fr);
}

}


@media (max-width:640px){

.related-grid{
grid-template-columns:1fr;
}

.single-title{
font-size:26px;
}

}

/* DESKTOP */

@media (min-width:769px){

.single-intro{
flex-direction:column;
gap:90px;
}

.single-body-grid{
flex-direction:row;
gap:90px;
}

}

@media (min-width: 769px) {
    .site-content .ast-container {
        display: flex;
        flex-direction: column;
    }
}