.blog-shell {
	padding-top: clamp(1.1rem, 2.4vw, 1.9rem);
}

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) 300px;
	gap: clamp(0.9rem, 2vw, 1.3rem);
	align-items: start;
}

.blog-content {
	display: grid;
	gap: 1rem;
}

.blog-heading-block {
	padding: clamp(1rem, 2.4vw, 1.5rem);
	border: 1px solid rgba(132, 166, 210, 0.32);
	border-radius: 20px;
	background: linear-gradient(165deg, rgba(20, 26, 47, 0.92), rgba(15, 20, 37, 0.95));
	box-shadow: 0 22px 44px rgba(4, 10, 22, 0.42);
}

.blog-eyebrow {
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(190, 165, 255, 0.84);
	font-weight: 700;
}

.blog-heading-block h1 {
	margin-top: 0.42rem;
	font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
	font-size: clamp(2.3rem, 5.6vw, 4.1rem);
	line-height: 1.02;
	color: #c8b6ff;
	letter-spacing: -0.03em;
}

.blog-heading-block p {
	margin-top: 0.7rem;
	font-size: 0.96rem;
	line-height: 1.62;
	color: rgba(212, 227, 248, 0.82);
	max-width: 62ch;
}

.blog-feature-card {
	border-radius: 18px;
	border: 1px solid rgba(128, 158, 199, 0.28);
	overflow: hidden;
	background: rgba(17, 23, 40, 0.94);
	box-shadow: 0 22px 46px rgba(4, 11, 24, 0.42);
}

.blog-feature-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.blog-feature-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.blog-feature-meta {
	padding: 1rem;
	display: grid;
	gap: 0.56rem;
}

.blog-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 0.26rem 0.66rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #f3e8ff;
	background: linear-gradient(90deg, rgba(140, 78, 255, 0.86), rgba(178, 106, 255, 0.84));
}

.blog-feature-meta h2 {
	font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
	font-size: clamp(1.34rem, 2.2vw, 2rem);
	line-height: 1.2;
	color: #f8fbff;
}

.blog-meta-line {
	font-size: 0.86rem;
	color: rgba(203, 219, 240, 0.84);
}

.blog-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.85rem;
}

.blog-card {
	display: grid;
	gap: 0.72rem;
	padding: 0.8rem;
	border-radius: 14px;
	border: 1px solid rgba(120, 152, 196, 0.26);
	background: rgba(14, 20, 37, 0.92);
	box-shadow: 0 15px 36px rgba(3, 9, 20, 0.36);
}

.blog-card-link {
	display: grid;
	gap: 0.66rem;
	text-decoration: none;
}

.blog-card figure {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid rgba(141, 173, 214, 0.28);
}

.blog-card img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.blog-card:hover img {
	transform: scale(1.03);
}

.blog-card-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(184, 201, 227, 0.82);
}

.blog-card-category {
	color: #b07bff;
	font-weight: 700;
}

.blog-card h3 {
	font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
	font-size: 1.05rem;
	line-height: 1.35;
	color: #f7fbff;
}

.blog-card p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(212, 226, 247, 0.88);
}

.blog-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.94rem;
	color: #9bf299;
	width: fit-content;
}

.blog-read-more span {
	font-size: 1rem;
}

.blog-empty-result {
	margin-top: 0.5rem;
	padding: 0.95rem 1rem;
	border-radius: 12px;
	border: 1px dashed rgba(146, 174, 213, 0.34);
	font-size: 0.88rem;
	color: rgba(201, 217, 241, 0.82);
}

.blog-sidebar {
	position: sticky;
	top: 90px;
	display: grid;
	gap: 0.8rem;
	padding: 1rem;
	border-radius: 16px;
	border: 1px solid rgba(129, 158, 197, 0.28);
	background: rgba(16, 21, 37, 0.95);
	box-shadow: 0 18px 36px rgba(4, 11, 24, 0.35);
}

.blog-filter {
	display: grid;
	gap: 0.5rem;
}

.blog-filter label {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(197, 214, 238, 0.88);
}

.blog-filter input {
	width: 100%;
	height: 40px;
	border-radius: 10px;
	padding: 0 0.72rem;
	border: 1px solid rgba(135, 166, 205, 0.35);
	background: rgba(35, 43, 66, 0.55);
	font-size: 0.88rem;
	color: #e9f3ff;
}

.blog-side-preview {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(134, 166, 205, 0.28);
}

.blog-side-preview img {
	width: 100%;
	height: auto;
	display: block;
}

.blog-categories h3 {
	font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
	font-size: 1.02rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(236, 244, 255, 0.96);
}

.blog-category-list {
	margin-top: 0.5rem;
	display: grid;
	gap: 0.34rem;
}

.blog-category-btn {
	text-align: left;
	padding: 0.5rem 0.56rem;
	border-radius: 9px;
	border: 1px solid rgba(131, 161, 199, 0.24);
	background: rgba(47, 58, 81, 0.25);
	color: rgba(224, 235, 252, 0.9);
	font-size: 0.87rem;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.blog-category-btn:hover {
	transform: translateY(-1px);
	background: rgba(89, 104, 132, 0.32);
}

.blog-category-btn.is-active {
	border-color: rgba(163, 128, 252, 0.58);
	background: rgba(138, 91, 255, 0.22);
	color: #f4eaff;
}

.blog-detail-shell {
	width: min(1320px, 100% - 2rem);
	margin: 0 auto;
	padding-top: clamp(1.1rem, 2.2vw, 1.8rem);
}

.blog-detail-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(0.9rem, 1.8vw, 1.2rem);
	align-items: start;
}

.blog-toc {
	position: sticky;
	top: 90px;
	padding: 1rem;
	border-radius: 14px;
	border: 1px solid rgba(136, 164, 202, 0.28);
	background: rgba(45, 48, 67, 0.88);
	box-shadow: 0 18px 36px rgba(5, 12, 24, 0.32);
}

.blog-toc h2 {
	font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
	font-size: 1.28rem;
	line-height: 1.2;
	color: #eef5ff;
}

.blog-toc-list {
	margin-top: 0.7rem;
	display: grid;
	gap: 0.28rem;
}

.blog-toc-list a {
	display: block;
	padding: 0.5rem 0.5rem;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgba(224, 234, 250, 0.92);
}

.blog-toc-list a:hover {
	background: rgba(118, 138, 176, 0.24);
}

.blog-article {
	padding: clamp(1rem, 2.2vw, 1.35rem);
	border-radius: 16px;
	border: 1px solid rgba(127, 158, 198, 0.28);
	background: rgba(11, 15, 30, 0.94);
	box-shadow: 0 18px 34px rgba(4, 10, 20, 0.36);
}

.blog-crumb {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(196, 173, 255, 0.84);
}

.blog-article h1 {
	margin-top: 0.6rem;
	font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.03;
	letter-spacing: -0.03em;
	color: #d9caff;
	max-width: 19ch;
}

.blog-article-meta {
	margin-top: 0.66rem;
	font-size: 0.86rem;
	color: rgba(193, 209, 233, 0.86);
}

.blog-intro {
	margin-top: 0.9rem;
	font-size: 1rem;
	line-height: 1.72;
	color: rgba(221, 234, 252, 0.88);
	max-width: 74ch;
}

.blog-section {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(117, 146, 186, 0.24);
	display: grid;
	gap: 0.7rem;
}

.blog-section h2 {
	font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 1.2;
	color: #f4f8ff;
}

.blog-section p {
	font-size: 1.02rem;
	line-height: 1.82;
	color: rgba(216, 229, 248, 0.92);
	max-width: 74ch;
}

.blog-section figure {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(133, 162, 200, 0.26);
	box-shadow: 0 16px 32px rgba(4, 10, 20, 0.34);
}

.blog-section img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	max-height: 520px;
}

.blog-detail-empty {
	margin-top: 1.1rem;
	padding: 0.86rem 1rem;
	border-radius: 12px;
	border: 1px dashed rgba(140, 169, 208, 0.36);
	font-size: 0.9rem;
	color: rgba(202, 218, 240, 0.84);
}

.blog-section[data-section-hidden="true"] {
	display: none;
}

@media (max-width: 1120px) {
	.blog-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.blog-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.blog-sidebar {
		position: static;
	}

	.blog-detail-layout {
		grid-template-columns: 1fr;
	}

	.blog-toc {
		position: static;
	}
}

@media (max-width: 640px) {
	.blog-shell,
	.blog-detail-shell {
		width: min(1320px, 100% - 1rem);
	}

	.blog-heading-block h1 {
		font-size: clamp(1.9rem, 10vw, 3rem);
	}

	.blog-post-grid {
		grid-template-columns: 1fr;
	}

	.blog-article h1 {
		font-size: clamp(1.8rem, 9vw, 2.9rem);
	}
}