/**
 * Per-category buying guidance block.
 *
 * Sits below the product grid on the five head-term category pages. Loaded only
 * where a guide exists (inc/category-guides.php gates the enqueue).
 *
 * Layout: two columns on desktop (prose left, "Read next" card right) so the
 * block fills the container instead of leaving a lone text column in the
 * corner. The prose measure is set in em, not ch: `ch` resolves against the
 * font's zero glyph, which on this theme is 11.6px, so a "68ch" measure
 * rendered 112 characters per line.
 */

.category-guide {
	padding: 44px 0 56px;
	background: var(--lp-section-bg);
	border-top: 1px solid var(--lp-border-faint);
}

.category-guide__inner {
	max-width: var(--lp-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 20px 56px;
	align-items: start;
}

.category-guide__title {
	grid-column: 1 / -1;
	font-size: 1.5rem;
	line-height: 1.28;
	font-weight: 700;
	color: var(--lp-text);
	margin: 0 0 4px;
}

.category-guide__body {
	max-width: 35em;
}

.category-guide__body p {
	margin: 0 0 14px;
	font-size: 0.975rem;
	line-height: 1.7;
	color: var(--lp-text-muted);
}

.category-guide__body p:last-child {
	margin-bottom: 0;
}

.category-guide__aside {
	background: var(--lp-white);
	border: 1px solid var(--lp-border-soft);
	border-radius: 16px;
	padding: 20px 22px;
	box-shadow: var(--lp-shadow);
}

.category-guide__aside-title {
	margin: 0 0 12px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-accent);
}

.category-guide__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.category-guide__links a {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--lp-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
	transition: color var(--lp-transition);
}

.category-guide__links a:hover,
.category-guide__links a:focus-visible {
	color: var(--lp-accent-dark);
}

.category-guide__links a:focus-visible {
	outline: 2px solid var(--lp-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (max-width: 900px) {
	.category-guide__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.category-guide {
		padding: 32px 0 40px;
	}

	.category-guide__inner {
		padding: 0 16px;
	}

	.category-guide__title {
		font-size: 1.25rem;
	}

	.category-guide__body p {
		font-size: 0.94rem;
	}

	.category-guide__aside {
		padding: 18px;
	}
}