/**
 * Blog templates — single post body (single.php, .entry-content) and the
 * category archive description (index.php, .archive-desc).
 *
 * @package Bozpo_Custom
 */

/* ================= Single post: container + sidebar grid ================= */
.post {
	--post-sidebar-w: 300px;

	padding-top: var(--space-14);
	padding-bottom: var(--space-34);
}

.post__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-32);
	align-items: start;
}

.post__content {
	min-width: 0;
}

.entry-title {
	margin: 0 0 var(--space-16);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-30);
	line-height: var(--leading-105);
}

.entry-thumbnail {
	margin: 0 0 var(--space-22);
	border-radius: var(--radius-14);
	overflow: hidden;
}

.entry-content h2 {
	margin: var(--space-30) 0 var(--space-12);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-24);
	line-height: 1.2;
}

.entry-content h3 {
	margin: var(--space-24) 0 var(--space-10);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-19);
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin: 0 0 var(--space-16);
	font-size: var(--text-16);
	line-height: var(--leading-170);
	color: var(--c-ink-body);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.2em;
}

.entry-content li {
	margin-bottom: var(--space-7);
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.post__sidebar {
	min-width: 0;
}

.post__sidebar .widget {
	margin-bottom: var(--space-24);
}

.post__sidebar .widgettitle,
.post__sidebar .widget-title {
	margin: 0 0 var(--space-12);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-16-5);
}

.post__comments {
	margin-top: var(--space-34);
	padding-top: var(--space-30);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 981px) {
	.post__grid {
		grid-template-columns: var(--post-sidebar-w) minmax(0, 1fr);
	}

	/* Sidebar stays second in the DOM (after the article content) but is
	   placed in the left column visually. */
	.post__sidebar {
		order: -1;
	}
}

.entry-content a,
.archive-desc__body a {
	font-weight: 700;
	color: var(--c-brand);
}

.entry-content a::before,
.archive-desc__body a::before {
	content: "→";
	display: inline-block;
	margin-right: 0.3em;
}

/* ================= Blog category archive: container + card grid ================= */
.blog-archive {
	padding-top: var(--space-14);
	padding-bottom: var(--space-34);
}

.page-header.wrap .page-title {
	margin: 0 0 var(--space-10);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-30);
	line-height: var(--leading-105);
}

.archive-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-18);
}

.blog-archive .pagination {
	padding: var(--space-34) 0 var(--space-6);
	text-align: center;
}

.blog-archive .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
}

.blog-archive .pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-10);
	font-size: var(--text-14);
}

.blog-archive a.page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.blog-archive .pagination .page-numbers.current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--on-primary);
}

.blog-archive .pagination .page-numbers.dots {
	border: 0;
	color: var(--color-muted);
}

@media (min-width: 561px) {
	.archive-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 981px) {
	.archive-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

.archive-desc {
	margin-top: var(--space-30);
	padding-top: var(--space-30);
	border-top: 1px solid var(--color-border);
}

.archive-desc__body {
	min-width: 0;
}

.archive-desc__body p {
	margin: 0 0 var(--space-12);
	font-size: var(--text-14-5);
	line-height: var(--leading-170);
	color: var(--c-ink-body);
}

.archive-desc__body p:last-child {
	margin-bottom: 0;
}

/* Tablet/mobile: small thumbnail above the text. */
.archive-desc--with-image {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.archive-desc__media {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-14);
	overflow: hidden;
}

.archive-desc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Desktop: image beside the text. */
@media (min-width: 981px) {
	.archive-desc--with-image {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-24);
	}

	.archive-desc__media {
		width: 160px;
		height: 160px;
	}
}