/* ==========================================================================
   Certified Bling — components
   Buttons + shared primitives + baseline styling for non-home templates
   (pages, posts, search, 404). Home sections beyond the hero are not built yet.
   ========================================================================== */

/* ==========================================================================
   Sections — shared vertical rhythm for homepage sections below the hero.
   ========================================================================== */

.cb-section {
	padding-block: var(--cb-space-3xl);
}
/* Two sections on the SAME ground read as one continuous canvas — drop the
   doubled padding at their seam. A change of ground (light↔dark) keeps its
   padding so the colour edge lands with breathing room. */
.cb-section--light + .cb-section--light,
.cb-section--dark + .cb-section--dark {
	padding-top: 0;
}
.cb-section--light {
	background: var(--cb-paper);
	color: var(--cb-black);
}
.cb-section--dark {
	background: var(--cb-black);
	color: var(--cb-white);
}

/* ==========================================================================
   Buttons — rectangular, no radius, uppercase, strong tracking, clear hover.
   ========================================================================== */

.cb-btn {
	--_bg: var(--cb-white);
	--_fg: var(--cb-black);
	--_bd: var(--cb-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 1.05rem 2rem;
	min-height: 3.25rem;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1;
	white-space: nowrap;
	color: var(--_fg);
	background: var(--_bg);
	border: 1px solid var(--_bd);
	border-radius: 0;
	transition: background var(--cb-transition), color var(--cb-transition),
		border-color var(--cb-transition);
}
.cb-btn:hover { text-decoration: none; }

/* Primary — solid off-white on dark, inverts on hover */
.cb-btn--primary:hover {
	--_bg: transparent;
	--_fg: var(--cb-white);
}

/* Secondary — outline, fills on hover */
.cb-btn--secondary {
	--_bg: transparent;
	--_fg: var(--cb-white);
	--_bd: color-mix(in srgb, var(--cb-white) 45%, transparent);
}
.cb-btn--secondary:hover {
	--_bg: var(--cb-white);
	--_fg: var(--cb-black);
	--_bd: var(--cb-white);
}

/* Light-section variants (for later off-white sections) */
.cb-section--light .cb-btn--primary { --_bg: var(--cb-black); --_fg: var(--cb-white); --_bd: var(--cb-black); }
.cb-section--light .cb-btn--primary:hover { --_bg: transparent; --_fg: var(--cb-black); }
.cb-section--light .cb-btn--secondary { --_fg: var(--cb-black); --_bd: color-mix(in srgb, var(--cb-black) 35%, transparent); }
.cb-section--light .cb-btn--secondary:hover { --_bg: var(--cb-black); --_fg: var(--cb-white); --_bd: var(--cb-black); }

/* ==========================================================================
   Non-home templates — restrained defaults so pages/posts read cleanly on the
   dark canvas until they get their own design pass.
   ========================================================================== */

.cb-page {
	max-width: var(--cb-content);
	margin-inline: auto;
	padding-block: var(--cb-space-3xl) var(--cb-space-2xl);
}
.cb-page__title { font-size: var(--cb-text-2xl); margin-bottom: var(--cb-space-m); }
.cb-page__content > * + * { margin-top: var(--cb-space-m); }
.cb-page__content h2, .cb-page__content h3 { margin-top: var(--cb-space-l); }
.cb-page__content a { text-decoration: underline; text-underline-offset: 0.18em; }
.cb-page__content a:hover { color: var(--cb-mute); }

.page-header { padding-block: var(--cb-space-3xl) var(--cb-space-l); max-width: var(--cb-content); margin-inline: auto; }
.page-header__title { font-size: var(--cb-text-2xl); }

.entry--single, .entry--page {
	max-width: var(--cb-content);
	margin-inline: auto;
	padding-block: var(--cb-space-3xl) var(--cb-space-2xl);
}
.entry__meta { font-family: var(--cb-font-mono); font-size: var(--cb-text-xs); color: var(--cb-mute); text-transform: uppercase; letter-spacing: 0.1em; }
.entry__title { font-size: var(--cb-text-2xl); margin-block: var(--cb-space-xs) var(--cb-space-m); }
.entry__media { margin-block: var(--cb-space-l); }
.entry__content > * + * { margin-top: var(--cb-space-m); }

.post-list {
	max-width: var(--cb-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--cb-space-l);
	padding-block: var(--cb-space-l) var(--cb-space-3xl);
}
.post-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cb-ink); margin-bottom: var(--cb-space-s); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__title { font-size: var(--cb-text-lg); margin-block: 0.25rem; }
.post-card__meta { font-family: var(--cb-font-mono); font-size: var(--cb-text-xs); color: var(--cb-mute); text-transform: uppercase; letter-spacing: 0.1em; }

.error-404 { max-width: var(--cb-content); margin-inline: auto; padding-block: var(--cb-space-3xl); }
.error-404__code { font-family: var(--cb-font-display); font-weight: 700; font-size: var(--cb-display); line-height: 1; }
.error-404__title { margin-block: var(--cb-space-s); }
.error-404__actions { margin-top: var(--cb-space-l); }

.search-form { display: flex; gap: 0.5rem; max-width: 24rem; }
.search-form__field { flex: 1; padding: 0.8rem 1rem; border: 1px solid var(--cb-line-soft); background: var(--cb-ink); color: var(--cb-white); }
.search-form__field::placeholder { color: var(--cb-mute); }
.search-form__submit { padding: 0.8rem 1.4rem; border: 1px solid var(--cb-white); background: var(--cb-white); color: var(--cb-black); font-family: var(--cb-font-mono); font-size: var(--cb-text-xs); text-transform: uppercase; letter-spacing: 0.1em; }

.pagination { max-width: var(--cb-wide); margin-inline: auto; padding-block: var(--cb-space-l) var(--cb-space-3xl); display: flex; gap: 0.75rem; font-family: var(--cb-font-mono); font-size: var(--cb-text-xs); text-transform: uppercase; letter-spacing: 0.1em; }
.pagination .current { text-decoration: underline; }

.cb-note {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	color: var(--cb-mute);
	border: 1px dashed var(--cb-line-soft);
	padding: 0.5rem 0.75rem;
}