/* single post */
.post-featured-image{

overflow:hidden;

border-radius:32px;

margin:20px 0;

}

.post-featured-image img{

width:100%;

display:block;

}

.toc{

position:sticky;

top:120px;

padding:24px;

border-radius:24px;

}

.post-layout{

display:grid;

grid-template-columns:
240px minmax(0,1fr);

gap:32px;

align-items:start;

}


.post-content{

min-width:0;

font-size:18px;

line-height:2.1;

}

.post-content h2{

margin-top:60px;
margin-bottom:20px;

font-size:32px;

}

.post-content p{

margin-bottom:24px;

}

.post-content blockquote{

padding:24px;

border-right:
4px solid #4f7cff;

background:
rgba(79,124,255,.08);

border-radius:16px;

margin:32px 0;

}

.post-content a {
	color: #4f7cff;
  text-decoration: none;
  transition: .3s ease;
}

.post-content a:hover {
	color: #fff;
	}

.author-box{

display:flex;

align-items:center;

gap:24px;

padding:32px;

border-radius:24px;

margin-top:60px;

}

.author-box img{

width:90px;
height:90px;

border-radius:50%;

}

.post-hero{

max-width:900px;

margin:0 auto;

text-align:center;

}

.post-category{

display:inline-flex;

align-items:center;

padding:8px 16px;

border-radius:999px;

background:rgba(79,124,255,.12);

border:1px solid rgba(79,124,255,.2);

color:#4f7cff;

font-size:13px;

font-weight:600;

margin-bottom:20px;

}

.post-hero h1{

font-size:clamp(1.7rem,3.6vw,2.9rem);

line-height:1.2;

margin-bottom:20px;

font-weight:800;

letter-spacing:-1px;

}

.post-meta{

display:flex;

justify-content:center;

align-items:center;

gap:16px;

flex-wrap:wrap;

color:var(--text-light);

font-size:14px;

}

.post-meta span{

display:flex;

align-items:center;

gap:8px;

padding:10px 16px;

}

.toc{

padding:28px;

border-radius:24px;

height:max-content;

}

.toc h3{

margin-bottom:20px;

font-size:18px;

font-weight:700;

}

.toc ul{

list-style:none;

padding:0;

margin:0;

display:flex;

flex-direction:column;

gap:8px;

}

.toc a{

display:flex;

align-items:center;

padding:12px 14px;

border-radius:12px;

text-decoration:none;

color:var(--text-light);

transition:.3s;

font-size:14px;

}

.toc a:hover{

background:rgba(79,124,255,.08);

color:#4f7cff;

transform:translateX(-4px);

}

.toc a.active{

background:rgba(79,124,255,.12);

color:#4f7cff;

font-weight:600;

}

.related-posts{

margin-top:100px;

}
.related-posts h2{

margin-bottom:32px;

font-size:36px;

}
.related-posts .blog-grid{

display:grid;

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

gap:24px;

}