/*
 * SERIES CATALOG V1 — dedicated, generic stylesheet for the Todas las Series discovery surface
 * (RPS-06E, `/informes-tecnicos/series/`). A small dedicated file (Option B, not a reuse of the
 * illustrative `.smq-rhub-series-*` cards on the Research Hub — those are a marketing-shaped example
 * showcase with a price element this real catalog must never have; reusing that class namespace would
 * couple this page to a commerce-shaped card it does not want). Uses the same shared design tokens
 * (`--smq-space-*`, `--smq-blue-brand`, etc.) — no new base tokens, no new framework.
 *
 * SELF-CONTAINED LAYOUT (known-debt correction): this page used to borrow the `.smq-course-*` hero/
 * section/container primitives, whose rules live in course-amibroker.css — a stylesheet only enqueued
 * by specific static is_page() templates, never for this dynamically-routed page. Proven in a real
 * browser: none of those rules applied here (content flush against the left edge at full viewport
 * width, no dark hero, unstyled bullet signal). The markup now uses its own `.smq-series-catalog-*`
 * layout classes, defined below with the same values as the approved unified Research Catalog
 * (research-catalog.css), so both discovery surfaces share one container width/alignment/rhythm and
 * this page depends on no other page family's stylesheet.
 *
 * Every rule here is entity-count-independent: the list layout works identically with 1, 10, 50 or 100+
 * entries (verified structurally by RPS-06E's scale tests) — no rule references a specific Series slug,
 * ID, or Area.
 */

/* ================= Page layout — container, hero, sections (own classes, see note above) ========= */
.smq-series-catalog-inner {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
}
.smq-series-catalog-section {
	width: 100%;
	padding: var(--smq-space-7) 0;
}
.smq-series-catalog-section--tight {
	padding: var(--smq-space-6) 0;
}
.smq-series-catalog-hero {
	width: 100%;
	background: var(--smq-navy-950);
	padding: var(--smq-space-7) 0;
}
.smq-series-catalog-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
	margin-bottom: var(--smq-space-3);
}
.smq-series-catalog-eyebrow {
	font-family: var(--smq-font-text);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smq-blue-brand);
	margin: 0;
	white-space: nowrap;
}
.smq-series-catalog-h1 {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	line-height: 1.15;
	color: var(--smq-white);
	margin: 0;
}
.smq-series-catalog-lead {
	font-family: var(--smq-font-text);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--smq-gray-200);
	margin: var(--smq-space-3) 0 0;
	max-width: 62ch;
}
.smq-series-catalog-signals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smq-space-2);
	margin: var(--smq-space-4) 0 0;
	padding: 0;
	list-style: none;
}
.smq-series-catalog-signal {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--smq-white);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: var(--smq-space-2) var(--smq-space-3);
}
.smq-series-catalog-empty {
	font-family: var(--smq-font-text);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--smq-gray-600);
	margin: 0;
	max-width: 72ch;
}

/* ================= Series list ================= */
.smq-series-catalog-list {
	list-style: none;
	margin: var(--smq-space-5) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
}

.smq-series-catalog-entry {
	min-width: 0;
}

.smq-series-catalog-entry-link,
.smq-series-catalog-entry-static {
	display: block;
	min-width: 0;
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-left: 3px solid var(--smq-blue-brand);
	border-radius: 4px;
	padding: var(--smq-space-4) var(--smq-space-5);
	text-decoration: none;
	color: inherit;
}

.smq-series-catalog-entry-link:hover,
.smq-series-catalog-entry-link:focus-visible {
	border-left-color: var(--smq-navy-950);
}

.smq-series-catalog-entry-static {
	cursor: default;
}

.smq-series-catalog-entry-title {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--smq-navy-950);
	margin: 0;
}

.smq-series-catalog-entry-desc {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
	margin: var(--smq-space-1) 0 0;
	max-width: 72ch;
}

.smq-series-catalog-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smq-space-3);
	margin-top: var(--smq-space-2);
}

.smq-series-catalog-entry-area,
.smq-series-catalog-entry-count {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	color: var(--smq-gray-400);
}

.smq-series-catalog-related-row {
	display: flex;
	justify-content: flex-start;
}

.smq-series-catalog-related-link {
	font-weight: 600;
	color: var(--smq-blue-brand);
	text-decoration: none;
}
.smq-series-catalog-related-link:hover,
.smq-series-catalog-related-link:focus-visible {
	text-decoration: underline;
}

/* ================= Responsive ================= */
@media (max-width: 480px) {
	.smq-series-catalog-entry-link,
	.smq-series-catalog-entry-static {
		padding: var(--smq-space-3) var(--smq-space-4);
	}
}