/**
 * Generic page / archive / 404 / search — pages the design has no mockup for.
 * Everything here is derived from the design system, see DESIGN-SYSTEM.md §7.
 *
 * @package Geras_Custom
 */

.page-default__hero {
	position: relative;
	padding: var( --space-44 ) 0 var( --space-56 );
	background: linear-gradient( 180deg, var( --c-honey-100 ), var( --surface-page ) );
}

.page-default__hero .breadcrumbs {
	margin-bottom: var( --space-26 );
}

.page-default__title {
	max-width: 22ch;
	margin-top: var( --space-14 );
	font-size: var( --fs-d3 );
	line-height: var( --lh-tight );
	letter-spacing: -.5px;
	color: var( --color-heading );
}

.page-default__intro {
	max-width: 62ch;
	margin-top: var( --space-18 );
	font-size: var( --fs-17 );
	color: var( --color-text );
}

.page-default__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-12 );
	margin-top: var( --space-28 );
}

.page-default__empty {
	padding: var( --space-48 ) 0;
	font-size: var( --fs-18 );
	color: var( --color-muted );
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Prose — the editor's output, typed to the design system.
 * ------------------------------------------------------------------------- */

.prose {
	max-width: 78ch;
	font-size: var( --fs-17 );
	line-height: var( --lh-copy );
	color: var( --color-text );
}

.prose > * + * {
	margin-top: var( --space-20 );
}

.prose h2 {
	margin-top: var( --space-48 );
	font-size: var( --fs-30 );
}

.prose h3 {
	margin-top: var( --space-38 );
	font-size: var( --fs-22 );
}

.prose h4 {
	margin-top: var( --space-30 );
	font-size: var( --fs-19 );
}

.prose ul,
.prose ol {
	padding-left: var( --space-22 );
}

.prose ul li {
	list-style: disc;
}

.prose ol li {
	list-style: decimal;
}

.prose li + li {
	margin-top: var( --space-8 );
}

.prose li::marker {
	color: var( --color-accent-deep );
}

.prose a {
	color: var( --color-accent-deep );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose a:hover {
	color: var( --c-cocoa-900 );
}

.prose blockquote {
	padding: var( --space-20 ) var( --space-26 );
	border-radius: var( --radius-18 );
	background: var( --c-honey-100 );
	box-shadow: var( --ring-honey-soft );
	font-size: var( --fs-18 );
	color: var( --color-heading );
}

.prose img,
.prose figure {
	border-radius: var( --radius-18 );
	overflow: hidden;
}

.prose figcaption {
	margin-top: var( --space-8 );
	font-size: var( --fs-13-5 );
	color: var( --color-muted );
}

.prose table {
	display: block;
	overflow-x: auto;
	font-size: var( --fs-15 );
}

.prose th,
.prose td {
	padding: var( --space-12 ) var( --space-14 );
	border-bottom: 1px solid var( --color-border );
	text-align: left;
}

.prose th {
	color: var( --color-heading );
	font-weight: var( --fw-bold );
}

.prose hr {
	height: 1px;
	border: 0;
	background: var( --color-border );
}

/* ---------------------------------------------------------------------------
 * Post list — blog index and search results.
 * ------------------------------------------------------------------------- */

.post-list {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --gap-grid );
}

.post-list__item {
	display: flex;
	flex-direction: column;
	gap: var( --space-10 );
	padding: var( --space-20 );
	border-radius: var( --radius-18 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-card ), var( --ring-hairline );
}

.post-list__media img {
	width: 100%;
	border-radius: var( --radius-14 );
}

.post-list__title {
	font-size: var( --fs-21 );
}

.post-list__excerpt {
	font-size: var( --fs-15 );
	color: var( --color-text );
}

.post-list__link {
	margin-top: auto;
	font-size: var( --fs-14 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
}

.post-list__link:hover {
	color: var( --color-accent-deep );
}

.page-links,
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-8 );
	margin-top: var( --space-38 );
	font-weight: var( --fw-bold );
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --space-44 );
	min-height: var( --space-44 );
	padding: 0 var( --space-14 );
	border-radius: var( --radius-pill );
	background: var( --surface-raised );
	box-shadow: var( --ring-hairline );
	font-size: var( --fs-14-5 );
}

.pagination .page-numbers.current {
	background: var( --c-honey-100 );
	box-shadow: var( --ring-honey );
}

@media ( max-width: 1023px ) {

	.post-list {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {

	.page-default__hero {
		padding: var( --space-30 ) 0 var( --space-40 );
	}

	.page-default__title {
		font-size: var( --fs-d5 );
	}

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

	.prose h2 {
		margin-top: var( --space-38 );
		font-size: var( --fs-24 );
	}

	.prose h3 {
		font-size: var( --fs-20 );
	}
}