/* =========================================================
 * PsalMix Blog — Page-Level Styles
 * Homepage, single post, archive, search, 404.
 * ========================================================= */

/* Section spacing */
.psx-section { padding-block: var(--psx-space-3xl); }
.psx-section--tight { padding-block: var(--psx-space-2xl); }
.psx-section--loose { padding-block: var(--psx-space-4xl); }
.psx-section__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--psx-space-lg);
	margin-bottom: var(--psx-space-xl);
	flex-wrap: wrap;
}
.psx-section__title {
	margin: 0;
	font-size: clamp(1.625rem, 2.6vw, 2rem);
	letter-spacing: var(--psx-tracking-tight);
}
.psx-section__sub {
	color: var(--psx-text-muted);
	margin: 4px 0 0;
	font-size: var(--psx-text-md);
}
.psx-section__link {
	color: var(--psx-accent);
	font-weight: 600;
	font-size: var(--psx-text-sm);
}

/* ─────────────────────────────────────────────────────
 * HOMEPAGE — hero
 * ───────────────────────────────────────────────────── */
.psx-hero {
	position: relative;
	padding-block: clamp(var(--psx-space-2xl), 5vw, var(--psx-space-3xl)) var(--psx-space-2xl);
}
.psx-hero__inner {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}
.psx-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--psx-space-sm);
	padding: 6px 14px;
	background: var(--psx-surface);
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-full);
	color: var(--psx-text-secondary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--psx-tracking-widest);
	text-transform: uppercase;
	margin-bottom: var(--psx-space-lg);
	box-shadow: var(--psx-shadow-xs);
}
.psx-hero__eyebrow-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--psx-accent);
	box-shadow: 0 0 8px var(--psx-accent-glow);
	animation: psx-pulse 2s var(--psx-ease) infinite;
}
@keyframes psx-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.6; transform: scale(0.85); }
}
.psx-hero__title {
	font-size: var(--psx-text-hero);
	line-height: 1.02;
	letter-spacing: var(--psx-tracking-tighter);
	margin-bottom: var(--psx-space-md);
	color: var(--psx-text);
	font-weight: 800;
}
.psx-hero__title-accent {
	background: var(--psx-gradient-hero);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	display: inline-block;
}
.psx-hero__sub {
	font-size: clamp(var(--psx-text-md), 1.4vw, var(--psx-text-xl));
	color: var(--psx-text-muted);
	max-width: 580px;
	margin: 0 auto var(--psx-space-xl);
	line-height: var(--psx-leading-relaxed);
}
.psx-hero__actions {
	display: inline-flex;
	gap: var(--psx-space-sm);
	flex-wrap: wrap;
	justify-content: center;
}

/* ─────────────────────────────────────────────────────
 * Post grid
 * ───────────────────────────────────────────────────── */
.psx-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--psx-space-lg);
}
@media (min-width: 640px)  { .psx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .psx-grid { grid-template-columns: repeat(3, 1fr); } }

/* ─────────────────────────────────────────────────────
 * Category strip
 * ───────────────────────────────────────────────────── */
.psx-cat-strip {
	display: flex;
	gap: var(--psx-space-sm);
	flex-wrap: wrap;
	justify-content: center;
	padding: var(--psx-space-md) 0;
}
.psx-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: var(--psx-surface);
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-full);
	color: var(--psx-text-secondary);
	font-weight: 600;
	font-size: var(--psx-text-sm);
	text-decoration: none;
	box-shadow: var(--psx-shadow-xs);
	transition: all var(--psx-duration-base) var(--psx-ease);
}
.psx-cat-pill:hover {
	color: var(--psx-accent);
	border-color: var(--psx-accent);
	transform: translateY(-1px);
	text-decoration: none;
	box-shadow: var(--psx-shadow-sm);
}
.psx-cat-pill__count {
	color: var(--psx-text-muted);
	font-size: var(--psx-text-xs);
	font-weight: 600;
	padding: 2px 8px;
	background: var(--psx-bg-secondary);
	border-radius: var(--psx-radius-full);
}

/* ─────────────────────────────────────────────────────
 * SINGLE POST
 * ───────────────────────────────────────────────────── */
.psx-single { padding-block: var(--psx-space-xl) var(--psx-space-3xl); }

.psx-single__header {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: var(--psx-space-xl);
}
.psx-single__category {
	margin-bottom: var(--psx-space-md);
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}
.psx-single__title {
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: var(--psx-tracking-tighter);
	margin-bottom: var(--psx-space-md);
	font-weight: 800;
	text-wrap: balance;
}
.psx-single__deck {
	font-size: clamp(var(--psx-text-md), 1.4vw, var(--psx-text-xl));
	color: var(--psx-text-muted);
	max-width: 580px;
	margin: 0 auto var(--psx-space-lg);
	line-height: var(--psx-leading-snug);
	text-wrap: balance;
}
.psx-single__byline { justify-content: center; }

.psx-single__hero {
	max-width: var(--psx-wide-max);
	margin: 0 auto var(--psx-space-2xl);
	border-radius: var(--psx-radius-2xl);
	overflow: hidden;
	box-shadow: var(--psx-shadow-lg);
}
.psx-single__hero img {
	width: 100%;
	height: auto;
	display: block;
}
.psx-single__hero--placeholder {
	aspect-ratio: 16/9;
	background: var(--psx-cat-default);
	position: relative;
	overflow: hidden;
}
.psx-single__hero--placeholder::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 40% at 30% 30%, rgba(255, 255, 255, 0.25), transparent 70%),
		radial-gradient(ellipse 40% 50% at 70% 70%, rgba(0, 0, 0, 0.18), transparent 70%);
}
.psx-single__hero--placeholder::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 140px; height: 140px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'><path d='M3 12h2l2-7 4 14 3-7h7'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.psx-single__content {
	max-width: var(--psx-content-max);
	margin: 0 auto;
	font-size: var(--psx-text-lg);
	line-height: var(--psx-leading-loose);
	color: var(--psx-text-secondary);
}
.psx-single__content p {
	margin-bottom: var(--psx-space-lg);
	color: var(--psx-text-secondary);
	text-wrap: pretty;
}
.psx-single__content > h2 {
	margin-top: var(--psx-space-3xl);
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.psx-single__content > h3 {
	margin-top: var(--psx-space-2xl);
	font-size: var(--psx-text-2xl);
}
.psx-single__content a { font-weight: 500; }

/* Drop cap on first paragraph */
.psx-single__content > p:first-of-type::first-letter {
	float: left;
	font-size: 4em;
	line-height: 0.85;
	font-weight: 800;
	color: var(--psx-accent);
	margin: 0.05em 0.1em 0 0;
	font-family: var(--psx-font-sans);
}

.psx-single__content ul,
.psx-single__content ol {
	margin-bottom: var(--psx-space-lg);
}
.psx-single__content li {
	margin-bottom: var(--psx-space-sm);
}

/* Tags */
.psx-single__tags {
	max-width: var(--psx-content-max);
	margin: var(--psx-space-2xl) auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Share row centered */
.psx-single__share-wrap {
	max-width: var(--psx-content-max);
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

/* ─────────────────────────────────────────────────────
 * Floating sidebar share buttons (single posts only)
 * Sticky vertical on the left of the article on desktop.
 * Only kicks in when there's true room beside the prose column.
 * ───────────────────────────────────────────────────── */
.psx-share-sidebar {
	display: none;
}
/* Need: wide-hero (1140px) + 24px gap + sidebar (44px) + 24px viewport edge,
 * mirrored on right = 1140 + 24 + 44 + 24 = 1232 minimum each side from center.
 * Total viewport needed: 1232 * 2 = … but we only need it on the LEFT, so:
 * 1140/2 + 24 + 44 + 24 = 632px from center to viewport edge → 1264px viewport min.
 * Bumped to 1400px to give comfortable breathing room. */
@media (min-width: 1400px) {
	.psx-share-sidebar {
		display: flex;
		flex-direction: column;
		gap: 6px;
		position: fixed;
		/* Position to the LEFT of the wide hero (1140px), with 24px gap. */
		left: calc(50% - var(--psx-wide-max) / 2 - 68px);
		top: 50%;
		transform: translateY(-50%);
		z-index: var(--psx-z-sticky);
		padding: 6px;
		background: var(--psx-surface);
		border: 1px solid var(--psx-border);
		border-radius: var(--psx-radius-full);
		box-shadow: var(--psx-shadow-sm);
	}
}
.psx-share-sidebar__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: var(--psx-tracking-widest);
	text-transform: uppercase;
	color: var(--psx-text-muted);
	text-align: center;
	padding: var(--psx-space-sm) 0 4px;
}
.psx-share-sidebar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: var(--psx-radius-full);
	color: var(--psx-text-tertiary);
	background: transparent;
	transition: all var(--psx-duration-base) var(--psx-ease);
}
.psx-share-sidebar a:hover {
	color: #fff;
	background: var(--psx-accent);
	transform: scale(1.08);
}
.psx-share-sidebar a.is-copied {
	color: var(--psx-success);
}

/* ─────────────────────────────────────────────────────
 * Author box
 * ───────────────────────────────────────────────────── */
.psx-single__author-wrap {
	max-width: var(--psx-content-max);
	margin: var(--psx-space-2xl) auto 0;
}
.psx-author-box {
	position: relative;
	overflow: hidden;
	padding: var(--psx-space-2xl);
	border-radius: var(--psx-radius-2xl);
	background: var(--psx-surface);
	border: 1px solid var(--psx-border);
	box-shadow: var(--psx-shadow-md);
}
.psx-author-box::before {
	content: '';
	position: absolute;
	top: 0;
	right: -120px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(123, 59, 191, 0.10), transparent 60%);
	pointer-events: none;
}
.psx-author-box > * { position: relative; z-index: 1; }

.psx-author-box__head {
	display: flex;
	align-items: flex-start;
	gap: var(--psx-space-md);
	margin-bottom: var(--psx-space-md);
}
.psx-author-box__mark {
	width: 56px; height: 56px;
	border-radius: var(--psx-radius-md);
	background: var(--psx-gradient-hero);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 8px 20px rgba(123, 59, 191, 0.3);
}
.psx-author-box__mark img {
	width: 32px;
	height: auto;
	filter: brightness(0) invert(1);
}
.psx-author-box__eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--psx-tracking-widest);
	text-transform: uppercase;
	color: var(--psx-accent);
	margin-bottom: 4px;
}
.psx-author-box__title {
	font-size: var(--psx-text-2xl);
	margin: 0 0 4px;
	letter-spacing: var(--psx-tracking-tight);
}
.psx-author-box__sub {
	font-size: var(--psx-text-sm);
	color: var(--psx-text-muted);
	font-weight: 500;
}
.psx-author-box__intro {
	font-size: var(--psx-text-base);
	line-height: var(--psx-leading-relaxed);
	color: var(--psx-text-tertiary);
	margin: 0 0 var(--psx-space-lg);
}
.psx-author-box__points {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	list-style: none;
	margin: 0 0 var(--psx-space-lg);
	padding: 0;
}
@media (min-width: 540px) {
	.psx-author-box__points { grid-template-columns: 1fr 1fr; }
}
.psx-author-box__points li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--psx-text-sm);
	color: var(--psx-text-tertiary);
	line-height: var(--psx-leading-snug);
}
.psx-author-box__point-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	background: var(--psx-accent-soft);
	color: var(--psx-accent);
	border-radius: var(--psx-radius-sm);
	border: 1px solid rgba(123, 59, 191, 0.18);
}
.psx-author-box__cta {
	display: flex;
	gap: var(--psx-space-sm);
	flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────
 * Related posts
 * ───────────────────────────────────────────────────── */
.psx-related {
	background: var(--psx-bg-secondary);
	padding-block: var(--psx-space-3xl);
	margin-top: var(--psx-space-3xl);
	border-top: 1px solid var(--psx-border);
}
.psx-related__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--psx-space-lg);
	margin-bottom: var(--psx-space-xl);
	flex-wrap: wrap;
}

/* Horizontal carousel on viewports < 1000px, grid on wider */
.psx-related__scroll {
	display: flex;
	gap: var(--psx-space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0 var(--psx-space-md);
	margin-inline: calc(-1 * clamp(var(--psx-space-md), 4vw, var(--psx-space-2xl)));
	padding-inline: clamp(var(--psx-space-md), 4vw, var(--psx-space-2xl));
	scrollbar-width: none;
}
.psx-related__scroll::-webkit-scrollbar { display: none; }
.psx-related__scroll > * {
	flex: 0 0 280px;
	scroll-snap-align: start;
}
@media (min-width: 1000px) {
	.psx-related__scroll {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--psx-space-lg);
		overflow: visible;
		padding-inline: 0;
		margin-inline: 0;
	}
	.psx-related__scroll > * {
		flex: none;
	}
}

/* ─────────────────────────────────────────────────────
 * ARCHIVE / CATEGORY / TAG
 * ───────────────────────────────────────────────────── */
.psx-archive__header {
	padding-block: var(--psx-space-2xl) var(--psx-space-xl);
	text-align: center;
}
.psx-archive__eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var(--psx-tracking-widest);
	text-transform: uppercase;
	color: var(--psx-accent);
	margin-bottom: var(--psx-space-sm);
}
.psx-archive__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: var(--psx-space-sm);
	letter-spacing: var(--psx-tracking-tighter);
}
.psx-archive__desc {
	color: var(--psx-text-muted);
	max-width: 540px;
	margin: 0 auto;
	font-size: var(--psx-text-md);
}

/* ─────────────────────────────────────────────────────
 * 404 + empty states
 * ───────────────────────────────────────────────────── */
.psx-empty {
	text-align: center;
	padding-block: var(--psx-space-4xl);
	max-width: 560px;
	margin: 0 auto;
}
.psx-empty__code {
	font-size: clamp(5rem, 14vw, 9rem);
	line-height: 1;
	font-weight: 900;
	letter-spacing: var(--psx-tracking-tighter);
	background: var(--psx-gradient-hero);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: var(--psx-space-md);
}
.psx-empty__title {
	font-size: var(--psx-text-3xl);
	margin-bottom: var(--psx-space-sm);
}
.psx-empty__sub {
	color: var(--psx-text-muted);
	margin-bottom: var(--psx-space-lg);
	font-size: var(--psx-text-md);
}

/* Responsive tweaks */
@media (max-width: 600px) {
	.psx-single__content > p:first-of-type::first-letter { font-size: 3.2em; }
	.psx-section { padding-block: var(--psx-space-2xl); }
}