/* Bal Pandit blog archive, taxonomy and search results */
.blog-page{
	overflow:clip;
	background:#fff;
}

.blog-banner{
	position:relative;
	isolation:isolate;
	padding:clamp(68px,8vw,118px) 0;
	background:linear-gradient(115deg,rgba(24,3,77,.97),rgba(67,29,157,.91)),radial-gradient(circle at 82% 15%,rgba(255,106,33,.26),transparent 28%);
	color:#fff;
}
.blog-banner::after{
	position:absolute;
	z-index:-1;
	right:-70px;
	bottom:-145px;
	width:330px;
	height:330px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:50%;
	content:"";
}
.blog-banner__inner{max-width:900px;text-align:center}
.blog-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-bottom:12px;
	color:var(--color-accent);
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
}
.blog-banner h1{margin:0 0 16px;color:#fff;font-size:clamp(2.35rem,5vw,4.6rem)}
.blog-banner p{max-width:720px;margin:0 auto;color:rgba(255,255,255,.78);font-size:clamp(.95rem,1.4vw,1.08rem)}

.blog-shell{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(280px,340px);
	align-items:start;
	gap:clamp(32px,5vw,72px);
	padding-block:clamp(64px,7vw,104px);
}
.blog-feed{min-width:0}
.blog-feed__heading{
	display:flex;
	align-items:end;
	justify-content:space-between;
	gap:24px;
	margin-bottom:32px;
	padding-bottom:22px;
	border-bottom:1px solid var(--color-border);
}
.blog-feed__heading .blog-eyebrow{margin-bottom:6px}
.blog-feed__heading h2{margin:0;font-size:clamp(1.8rem,3vw,2.65rem)}
.blog-feed__count{flex:none;color:var(--color-muted);font-size:.78rem;font-weight:600;text-transform:uppercase}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

.blog-card{
	position:relative;
	display:flex;
	min-width:0;
	overflow:hidden;
	flex-direction:column;
	border:1px solid var(--color-border);
	border-radius:22px;
	background:#fff;
	transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.blog-card:hover{border-color:rgba(53,16,140,.24);box-shadow:0 18px 48px rgba(38,16,93,.1);transform:translateY(-5px)}
.blog-card__media{
	display:grid;
	overflow:hidden;
	padding:10px;
	aspect-ratio:16/10;
	background:var(--color-bg-purple);
	place-items:center;
}
.blog-card__media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	transition:transform .5s ease;
}
.blog-card:hover .blog-card__media img{transform:scale(1.025)}
.blog-card__placeholder{display:grid;width:100%;height:100%;place-items:center;color:var(--color-primary);font-size:2rem}
.blog-card__body{display:flex;flex:1;align-items:flex-start;flex-direction:column;padding:24px}
.blog-card__category{position:relative;z-index:2;display:inline-flex;width:max-content;margin-bottom:13px;padding:6px 11px;border-radius:99px;background:var(--color-accent-light);color:var(--color-accent-dark);font-size:.67rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.blog-card__meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;color:var(--color-muted);font-size:.7rem}
.blog-card__meta span,.blog-card__meta a{display:inline-flex;align-items:center;gap:6px}
.blog-card__meta i{color:var(--color-accent)}
.blog-card h2{margin:0 0 12px;font-size:clamp(1.18rem,1.6vw,1.48rem);line-height:1.34}
.blog-card h2 a{color:var(--color-heading)}
.blog-card h2 a::after{position:absolute;inset:0;content:""}
.blog-card p{display:-webkit-box;margin-bottom:20px;overflow:hidden;color:var(--color-text-light);font-size:.86rem;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.blog-card__read{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--color-primary);font-size:.8rem;font-weight:700}
.blog-card__read i{font-size:.7rem;transition:transform .3s}
.blog-card:hover .blog-card__read i{transform:translateX(4px)}

.blog-sidebar{position:sticky;top:150px;display:grid;gap:24px}
.blog-widget{padding:26px;border:1px solid var(--color-border);border-radius:20px;background:#fff}
.blog-widget--search{background:var(--color-bg-soft)}
.blog-widget__label{display:block;margin-bottom:5px;color:var(--color-accent-dark);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.blog-widget h2{margin:0 0 20px;font-size:1.25rem}
.blog-widget .search-form{position:relative;display:flex}
.blog-widget .search-field{height:50px;padding-right:48px;border-color:#ded7e8;border-radius:12px}
.blog-widget .search-submit{width:46px;margin-left:-46px;overflow:hidden;border:0;background:transparent;color:transparent;font-size:0}
.blog-widget .search-submit::after{color:var(--color-primary);font-family:"Font Awesome 6 Free";font-size:.9rem;font-weight:900;content:"\f002"}
.blog-recent{display:grid;gap:17px}
.blog-recent>a{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:13px;padding:7px;border-radius:13px;transition:background-color .25s ease,transform .25s ease}
.blog-recent>a:hover{background:var(--color-bg-soft);transform:translateX(4px)}
.blog-recent__thumb{display:grid;overflow:hidden;width:72px;padding:4px;aspect-ratio:1;border-radius:12px;background:var(--color-bg-purple);place-items:center;color:var(--color-primary)}
.blog-recent__thumb img{width:100%;height:100%;object-fit:contain}
.blog-recent strong{display:-webkit-box;overflow:hidden;color:var(--color-heading);font-family:var(--font-heading);font-size:.88rem;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.blog-recent small{display:block;margin-top:5px;color:var(--color-muted);font-size:.66rem}
.blog-categories{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.blog-categories a{display:flex;align-items:center;justify-content:space-between;padding:10px 8px;border-bottom:1px solid var(--color-border-light);border-radius:8px;color:var(--color-text-dark);font-size:.84rem;transition:background-color .25s,color .25s,padding .25s}
.blog-categories a:hover{padding-inline:12px;background:var(--color-bg-soft);color:var(--color-accent-dark)}
.blog-categories li:last-child a{border:0}
.blog-categories small{display:grid;width:26px;height:26px;border-radius:50%;background:var(--color-bg-purple);place-items:center;color:var(--color-primary);font-size:.65rem}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px}
.blog-tags a{padding:7px 10px;border-radius:99px;background:var(--color-bg-soft);color:var(--color-primary);font-size:.72rem;transition:background-color .25s,color .25s,transform .25s}.blog-tags a:hover{background:var(--color-primary);color:#fff;transform:translateY(-2px)}

.navigation.pagination{margin-top:52px}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px}
.navigation.pagination .page-numbers{
	display:inline-flex;
	min-width:44px;
	height:44px;
	align-items:center;
	justify-content:center;
	border:1px solid #ded6e9;
	border-radius:50%;
	background:#fff;
	color:var(--color-heading);
	font-size:.78rem;
	font-weight:700;
	transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base),transform var(--transition-base);
}
.navigation.pagination .page-numbers.current,.navigation.pagination a.page-numbers:hover{
	border-color:var(--color-primary);
	background:var(--color-primary);
	color:#fff;
	transform:translateY(-2px);
}
.navigation.pagination .page-numbers.current{box-shadow:0 8px 20px rgba(53,16,140,.18)}
.navigation.pagination .page-numbers.prev,.navigation.pagination .page-numbers.next{width:auto;padding:0 18px;border-radius:999px;gap:8px}
.navigation.pagination a:focus-visible{outline:3px solid rgba(255,106,33,.25);outline-offset:3px}

@media(max-width:1100px){
	.blog-shell{grid-template-columns:minmax(0,1fr) 300px;gap:35px}
	.blog-grid{grid-template-columns:1fr}
	.blog-sidebar{top:130px}
}
@media(max-width:820px){
	.blog-shell{grid-template-columns:1fr}
	.blog-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
	.blog-widget--search{grid-column:1/-1}
}
@media(max-width:575px){
	.blog-banner{padding:58px 0}
	.blog-shell{padding-block:56px}
	.blog-feed__heading{display:block}
	.blog-feed__count{display:block;margin-top:10px}
	.blog-card__body{padding:21px}
	.blog-sidebar{grid-template-columns:1fr}
	.blog-widget--search{grid-column:auto}
	.navigation.pagination .page-numbers.prev span,.navigation.pagination .page-numbers.next span{display:none}
	.navigation.pagination .page-numbers.prev,.navigation.pagination .page-numbers.next{width:44px;padding:0}
}
@media(prefers-reduced-motion:reduce){
	.blog-card,.blog-card__media img,.blog-card__read i,.navigation.pagination .page-numbers{transition:none!important}
}
