/* ── Post Header ─────────────────────────────────────────────────────────── */
.post-header {
	background: var(--color-gray-alt);
	border-bottom: 1px solid var(--color-gray-mid);
	padding-block: var(--space-9) var(--space-7);
}

@media (min-width: 992px) {
	.post-header {
		padding-block: var(--space-11) var(--space-9);
	}
}

.post-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 768px) {
	.post-header__inner--has-image {
		grid-template-columns: 1fr 42%;
		align-items: center;
		gap: var(--space-8);
	}
}

.post-header__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 992px) {
	.post-header__text {
		gap: var(--space-5);
	}
}

.post-header__image {
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.post-header__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-header__cat {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: var(--size-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: background var(--transition-fast);
	align-self: flex-start;
}

.post-header__cat:hover {
	background: var(--color-primary-dark);
}

.post-header__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: var(--weight-black);
	color: var(--color-text);
	line-height: var(--leading-snug);
	max-width: 820px;
	margin: 0;
}

.post-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--size-sm);
}

.post-header__meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.post-header__sep {
	color: var(--color-gray);
}


/* ── Article Body ───────────────────────────────────────────────────────── */
.post-single {
	background: var(--color-white);
	padding-block: var(--space-9);
}

@media (min-width: 992px) {
	.post-single {
		padding-block: var(--space-11);
	}
}

.post-single__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 992px) {
	.post-single__inner {
		grid-template-columns: 1fr 300px;
		align-items: start;
		gap: var(--space-9);
	}
}

.post-single__article {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}

.post-single__content {
	font-size: var(--size-md);
	line-height: var(--leading-loose);
	color: var(--color-text);
}

.post-single__content > * + * {
	margin-top: var(--space-6);
}

.post-single__content h2 {
	font-size: var(--size-xl);
	font-weight: var(--weight-black);
	color: var(--color-text);
	line-height: var(--leading-snug);
	margin-top: var(--space-9);
}

.post-single__content h3 {
	font-size: var(--size-lg);
	font-weight: var(--weight-bold);
	color: var(--color-text);
	line-height: var(--leading-snug);
	margin-top: var(--space-7);
}

.post-single__content h4 {
	font-size: var(--size-md-lg);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
	margin-top: var(--space-6);
}

.post-single__content a {
	color: var(--color-primary);
	text-underline-offset: 3px;
}

.post-single__content a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.post-single__content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-5);
	margin-inline: 0;
	font-style: italic;
	color: var(--color-text-muted);
	font-size: var(--size-md-lg);
	line-height: var(--leading-normal);
}

.post-single__content ul,
.post-single__content ol {
	padding-left: var(--space-6);
}

.post-single__content ul {
	list-style: disc;
}

.post-single__content ol {
	list-style: decimal;
}

.post-single__content li + li {
	margin-top: var(--space-2);
}

.post-single__content img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}

.post-single__content figure {
	margin-inline: 0;
}

.post-single__content figcaption {
	font-size: var(--size-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-2);
}

.post-single__content hr {
	border: none;
	border-top: 1px solid var(--color-gray-mid);
	margin-block: var(--space-8);
}

.post-single__content pre {
	background: var(--color-gray-alt);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	overflow-x: auto;
	font-size: var(--size-sm);
}

/* Tags */
.post-single__footer {
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-gray-mid);
}

.post-single__tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.post-single__tag {
	display: inline-block;
	background: var(--color-primary-tint);
	color: var(--color-primary);
	font-size: var(--size-sm);
	font-weight: var(--weight-semibold);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.post-single__tag:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* ── Post Navigation ────────────────────────────────────────────────────── */
.post-nav {
	background: var(--color-gray-alt);
	border-top: 1px solid var(--color-gray-mid);
	border-bottom: 1px solid var(--color-gray-mid);
}

.post-nav__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.post-nav__item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-5);
	text-decoration: none;
	transition: background var(--transition-fast);
}

@media (min-width: 640px) {
	.post-nav__item {
		padding: var(--space-6);
	}
}

.post-nav__item:hover {
	background: var(--color-white);
}

.post-nav__item--prev {
	border-right: 1px solid var(--color-gray-mid);
}

.post-nav__item--next {
	justify-content: flex-end;
	text-align: right;
}

.post-nav__item--empty {
	display: block;
}

.post-nav__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	overflow: hidden;
}

@media (min-width: 640px) {
	.post-nav__thumb {
		width: 68px;
		height: 68px;
	}
}

.post-nav__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-nav__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.post-nav__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--size-xs);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.post-nav__item--next .post-nav__label {
	justify-content: flex-end;
}

.post-nav__title {
	font-size: var(--size-base);
	font-weight: var(--weight-bold);
	color: var(--color-text);
	line-height: var(--leading-snug);
	transition: color var(--transition-fast);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-nav__item:hover .post-nav__title {
	color: var(--color-primary);
}

/* ── Related Posts ──────────────────────────────────────────────────────── */
.post-related {
	background: var(--color-gray-alt);
	padding-block: var(--space-8);
}

@media (min-width: 992px) {
	.post-related {
		padding-block: var(--space-10);
	}
}

.post-related__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.post-related__heading {
	font-size: var(--size-heading);
	font-weight: var(--weight-black);
	color: var(--color-text);
	margin: 0 0 var(--space-7);
}

@media (min-width: 992px) {
	.post-related__heading {
		margin-bottom: var(--space-8);
	}
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.post-single__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

@media (min-width: 992px) {
	.post-single__sidebar {
		position: sticky;
		top: calc(80px + var(--space-5));
	}
}

.post-sidebar {
	background: var(--color-white);
	border: 1px solid var(--color-gray-mid);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
}

.post-sidebar__heading {
	font-size: var(--size-md-lg);
	font-weight: var(--weight-black);
	color: var(--color-text);
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--color-primary);
}

.post-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.post-sidebar__item {
	border-bottom: 1px solid var(--color-gray-mid);
}

.post-sidebar__item:last-child {
	border-bottom: none;
}

.post-sidebar__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-4);
	text-decoration: none;
	transition: background var(--transition-fast);
}

.post-sidebar__link:hover .post-sidebar__title {
	color: var(--color-primary);
}

.post-sidebar__thumb {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-gray-alt);
}

.post-sidebar__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-sidebar__thumb-icon {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gray);
	font-size: var(--size-base);
}

.post-sidebar__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.post-sidebar__title {
	font-size: var(--size-sm);
	font-weight: var(--weight-bold);
	color: var(--color-text);
	line-height: var(--leading-snug);
	transition: color var(--transition-fast);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-sidebar__date {
	font-size: var(--size-xs);
	color: var(--color-text-muted);
}