/*
 * Page-scoped styles: homepage hero, archive layout, single listing layout, personal area.
 * Most page-specific CSS lives in the plugin (archive.css, single.css, personal.css).
 * This file contains styles that are theme-level and apply regardless of plugin state.
 */

/* =========================
   Homepage hero (extended in plugin widgets.css)
   ========================= */
.cz-hero {
	padding-block: var(--cz-sp-16);
	background: linear-gradient(135deg, var(--cz-soft) 0%, var(--cz-surface) 100%);
	position: relative;
	overflow: hidden;
}
.cz-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 20%, rgba(188, 0, 2, 0.06), transparent 55%);
	pointer-events: none;
}
.cz-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.cz-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--cz-sp-2);
	padding: 6px 14px;
	background: var(--cz-red-100);
	color: var(--cz-red-700);
	font-size: var(--cz-fs-xs);
	font-weight: var(--cz-fw-semi);
	border-radius: var(--cz-radius-pill);
	margin-block-end: var(--cz-sp-4);
}
.cz-hero__title {
	font-size: clamp(32px, 5vw, 54px);
	font-weight: var(--cz-fw-heavy);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-block-end: var(--cz-sp-4);
}
.cz-hero__subtitle {
	font-size: var(--cz-fs-lg);
	color: var(--cz-muted);
	line-height: 1.6;
	margin-block-end: var(--cz-sp-6);
	max-width: 560px;
}
.cz-hero__ctas { display: flex; gap: var(--cz-sp-3); margin-block-end: var(--cz-sp-8); flex-wrap: wrap; }
.cz-hero__search {
	display: flex;
	gap: var(--cz-sp-2);
	background: var(--cz-surface);
	border: 1.5px solid var(--cz-border);
	border-radius: var(--cz-radius-pill);
	padding: 6px;
	max-width: 560px;
	box-shadow: var(--cz-shadow-sm);
}
.cz-hero__search input {
	flex: 1;
	border: 0;
	padding: 10px 18px;
	font-size: var(--cz-fs-md);
	background: transparent;
	outline: none;
}
.cz-hero__search button {
	padding: 10px 24px;
	background: var(--cz-ink);
	color: #fff;
	border-radius: var(--cz-radius-pill);
	font-weight: var(--cz-fw-semi);
}
.cz-hero__search button:hover { background: var(--cz-red); }

/* =========================
   Archive
   ========================= */
.cz-archive-header {
	padding-block: var(--cz-sp-8);
	background: var(--cz-surface);
	border-block-end: 1px solid var(--cz-border);
}
.cz-archive-header__title { font-size: var(--cz-fs-3xl); margin-block-end: var(--cz-sp-2); }
.cz-archive-header__meta { color: var(--cz-muted); font-size: var(--cz-fs-sm); }

.cz-archive-body { padding-block: var(--cz-sp-8); background: var(--cz-soft); min-height: 60vh; }

.cz-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cz-sp-3);
	margin-block-end: var(--cz-sp-6);
}
.cz-toolbar__left, .cz-toolbar__right {
	display: flex;
	align-items: center;
	gap: var(--cz-sp-3);
}

/* =========================
   Breadcrumbs
   ========================= */
.cz-breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--cz-sp-2);
	font-size: var(--cz-fs-sm);
	color: var(--cz-muted);
	padding-block: var(--cz-sp-4);
}
.cz-breadcrumbs a { color: var(--cz-muted); }
.cz-breadcrumbs a:hover { color: var(--cz-red); }
.cz-breadcrumbs__sep { color: var(--cz-border-2); }
.cz-breadcrumbs__current { color: var(--cz-ink); font-weight: var(--cz-fw-medium); }

/* =========================
   Load more button
   ========================= */
.cz-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-block-start: var(--cz-sp-8);
}
.cz-load-more-wrap .cz-btn { min-width: 220px; }

/* =========================
   Empty state
   ========================= */
.cz-empty {
	text-align: center;
	padding: var(--cz-sp-16) var(--cz-sp-4);
	color: var(--cz-muted);
}
.cz-empty svg { width: 64px; height: 64px; color: var(--cz-border-2); margin-inline: auto; margin-block-end: var(--cz-sp-4); }
.cz-empty h3 { color: var(--cz-ink); margin-block-end: var(--cz-sp-2); }

/* =========================
   Static pages (About, Contact, etc.)
   ========================= */
.cz-page-hero {
	padding-block: var(--cz-sp-16);
	background: linear-gradient(180deg, var(--cz-soft), var(--cz-surface));
	text-align: center;
}
.cz-page-hero h1 { font-size: var(--cz-fs-4xl); margin-block-end: var(--cz-sp-3); }
.cz-page-hero p { font-size: var(--cz-fs-lg); color: var(--cz-muted); max-width: 640px; margin-inline: auto; }

.cz-prose { max-width: 720px; margin-inline: auto; font-size: var(--cz-fs-md); line-height: var(--cz-lh-loose); color: var(--cz-ink-soft); }
.cz-prose h2 { margin-block: var(--cz-sp-10) var(--cz-sp-4); font-size: var(--cz-fs-2xl); }
.cz-prose h3 { margin-block: var(--cz-sp-6) var(--cz-sp-3); font-size: var(--cz-fs-xl); }
.cz-prose p { margin-block-end: var(--cz-sp-4); }
.cz-prose ul, .cz-prose ol { padding-inline-start: var(--cz-sp-6); margin-block-end: var(--cz-sp-4); }
.cz-prose li { margin-block-end: var(--cz-sp-2); }
.cz-prose ul li { list-style: disc; }
.cz-prose ol li { list-style: decimal; }