/* ============================================================
   P3MEDIA — Blog (single + archive) styles
   ============================================================ */

.p3-post-content {
	max-width: 70ch;
	margin-inline: auto;
}

.p3-post-content > p,
.p3-post-content > ul,
.p3-post-content > ol {
	margin-block: 1em;
}

.p3-post-content h2 {
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.p3-post-content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}

.p3-post-content blockquote {
	border-left: 4px solid var(--p3-primary);
	padding: 4px 0 4px 20px;
	margin: 24px 0;
	font-style: italic;
	color: var(--p3-text-muted);
}

.p3-post-content img,
.p3-post-content figure {
	border-radius: var(--p3-radius-lg);
	margin-block: 1.5em;
}

.p3-post-content code {
	background: var(--p3-surface);
	border: 1px solid var(--p3-border);
	border-radius: var(--p3-radius-sm);
	padding: 2px 6px;
	font-family: var(--p3-font-mono);
	font-size: 0.92em;
}

.p3-post-content pre {
	background: var(--p3-secondary);
	color: var(--p3-text-light);
	padding: 20px;
	border-radius: var(--p3-radius-md);
	overflow-x: auto;
}

.p3-post-content pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
}

.p3-post-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.p3-post-content a:hover {
	text-decoration-thickness: 2px;
}

/* ============ Breadcrumbs ============ */
.p3-breadcrumbs {
	margin: 0 0 24px;
	font-size: var(--p3-text-sm);
	color: var(--p3-text-muted);
}

.p3-breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.p3-breadcrumbs li:not(:last-child)::after {
	content: " / ";
	opacity: 0.5;
	margin-left: 6px;
}

.p3-breadcrumbs a {
	color: var(--p3-text-muted);
	text-decoration: none;
}

.p3-breadcrumbs a:hover {
	color: var(--p3-primary);
}

/* ============ Archive grid ============ */
.p3-archive {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--p3-space-6);
}

.p3-archive .p3-card {
	display: flex;
	flex-direction: column;
	gap: var(--p3-space-3);
	padding: var(--p3-space-6);
	background: var(--p3-surface);
	border: 1px solid var(--p3-border);
	border-radius: var(--p3-radius-md);
	transition: transform var(--p3-transition), box-shadow var(--p3-transition);
}

.p3-archive .p3-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--p3-shadow-md);
}

.p3-archive .p3-card img {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	border-radius: var(--p3-radius-sm);
}

/* ============ Pagination ============ */
.p3-pagination {
	margin-top: var(--p3-space-12);
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.p3-pagination .page-numbers {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid var(--p3-border);
	border-radius: var(--p3-radius);
	font-weight: 500;
}

.p3-pagination .current {
	background: var(--p3-primary);
	color: var(--p3-text-light);
	border-color: var(--p3-primary);
}