/*
 * SERIES SYSTEM V1 — reusable stylesheet for the Universal Series Renderer (RPS-06C). Consolidated
 * from research-series-page.css (RPS-05-era pilot, `/informes-tecnicos/serie/datos-macro-fred/`),
 * whose rules were ALREADY tagged [GENERIC] / [SERIES-DATA] in their own original comments — this
 * audit (RPS-06C) found zero rules tagged [SPECIFIC] and zero content requiring a rewrite; only the
 * file identity changes (one reusable stylesheet, selected by "resolved dynamic Series route", never
 * by slug — same principle already established for research-system.css in RPS-05D).
 *
 * Every rule styles a semantic Series component (Hero evidence panel, Research Journey member list,
 * Data Flow, Research Process step-flow, What You Get, Acquire/commercial block, Related) — never a
 * specific Series' slug or ID. A component's classes are simply unused in the markup when a given
 * Series has no content for it.
 *
 * Depends on the same shared primitives already used site-wide: `.smq-course-*` (hero, price row/
 * panel, CTAs, section scaffolding) from course-amibroker.css, and `.smq-hub-validation-*` (the
 * Research Process step-flow, shared with Strategies Hub and with Research's diagram_relation) from
 * strategies-hub.css — declared as explicit dependencies by SeriesRouting::enqueue_assets() (they are NOT
 * loaded globally: the theme only enqueues them for static is_page() templates).
 *
 * research-series-page.css is NOT deleted — it remains the legacy L5 rollback baseline (RPS-06C §31),
 * unused by the Universal Series Renderer as of this file.
 */

/* ================= Hero evidence panel ================= */
.smq-seriepage-hero-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--smq-space-4);
	padding: var(--smq-space-6) var(--smq-space-5);
	aspect-ratio: 993 / 747;
	background: var(--smq-navy-900);
}
.smq-seriepage-hero-stat {
	display: flex;
	align-items: baseline;
	gap: var(--smq-space-2);
}
.smq-seriepage-hero-stat-value {
	font-family: var(--smq-font-display);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--smq-white);
}
.smq-seriepage-hero-stat-label {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	color: var(--smq-gray-400);
}

/* Progression indicator — reuses the same visual language as .smq-irp-track (Research), but scoped to
   its own classes because the Hero panel's dark background needs different colors. Step count/labels
   are Series-data-driven (rendered via the shared BlockRegistry\render_track() resolver). */
.smq-seriepage-hero-progression {
	display: flex;
	align-items: center;
	gap: var(--smq-space-2);
}
.smq-seriepage-hero-progression-step {
	flex: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--smq-font-mono);
	font-weight: 700;
	font-size: 0.82rem;
	color: var(--smq-white);
	background: var(--smq-blue-brand);
	border-radius: 50%;
}
.smq-seriepage-hero-progression-connector {
	flex: 1 1 auto;
	min-width: var(--smq-space-3);
	height: 2px;
	background: var(--smq-navy-700);
}
.smq-seriepage-hero-progression-label {
	font-family: var(--smq-font-mono);
	font-size: 0.7rem;
	color: var(--smq-gray-400);
	margin: 0;
}
.smq-seriepage-hero-tech-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smq-space-2);
}
.smq-seriepage-hero-tech {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	color: var(--smq-gray-200);
	background: var(--smq-navy-700);
	border-radius: 999px;
	padding: var(--smq-space-1) var(--smq-space-3);
}

/* ================= CTA disabled modifier =================
   Applied to a <span role="button" aria-disabled="true">, never an <a href> — no fictitious purchase
   URL is ever created. Styled identically to a normal, active CTA (no opacity reduction, no muted
   hover state) — a semantic marker for "no real destination yet," not a visual state. */
.smq-seriepage-cta-disabled {
	cursor: default;
}

/* ================= Research Journey (Series membership list) ================= */
.smq-seriepage-journey {
	list-style: none;
	margin: var(--smq-space-6) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-4);
}
.smq-seriepage-journey-item {
	min-width: 0;
	display: flex;
	gap: var(--smq-space-4);
	align-items: flex-start;
	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);
}
.smq-seriepage-journey-badge {
	flex: none;
	font-family: var(--smq-font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--smq-blue-brand);
	background: var(--smq-gray-50);
	border-radius: 999px;
	padding: var(--smq-space-1) var(--smq-space-3);
}
.smq-seriepage-journey-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-1);
}
.smq-seriepage-journey-date {
	font-family: var(--smq-font-mono);
	font-size: 0.72rem;
	color: var(--smq-gray-400);
	margin: 0;
}
.smq-seriepage-journey-title {
	font-family: var(--smq-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--smq-navy-950);
	margin: 0;
}
.smq-seriepage-journey-summary {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--smq-gray-600);
	margin: 0;
}
.smq-seriepage-journey-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smq-space-2);
	margin-top: var(--smq-space-1);
}
.smq-seriepage-journey-tag {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	color: var(--smq-gray-600);
	background: var(--smq-gray-50);
	border-radius: 999px;
	padding: 2px var(--smq-space-3);
}
.smq-seriepage-journey-affordance {
	display: inline-block;
	margin-top: var(--smq-space-2);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--smq-blue-brand);
}

/* ================= Data Flow ================= */
.smq-seriepage-dataflow {
	margin-top: var(--smq-space-6);
	display: flex;
	align-items: stretch;
	gap: var(--smq-space-4);
}
.smq-seriepage-dataflow-node {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--smq-space-2);
	background: var(--smq-gray-50);
	border: 1px solid var(--smq-gray-200);
	border-radius: 4px;
	padding: var(--smq-space-5) var(--smq-space-4);
}
.smq-seriepage-dataflow-node-icon {
	font-family: var(--smq-font-mono);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--smq-white);
	background: var(--smq-blue-brand);
	border-radius: 999px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.smq-seriepage-dataflow-node-label {
	font-family: var(--smq-font-display);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--smq-navy-950);
}
.smq-seriepage-dataflow-node-desc {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
}
.smq-seriepage-dataflow-connector {
	flex: none;
	align-self: center;
	width: 32px;
	height: 2px;
	background: var(--smq-gray-200);
	position: relative;
}
.smq-seriepage-dataflow-connector::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--smq-gray-200);
	border-bottom: 2px solid var(--smq-gray-200);
	transform: translateY(-50%) rotate(-45deg);
}

/* ================= What You Get ================= */
.smq-seriepage-get-list {
	margin: var(--smq-space-5) 0 var(--smq-space-3);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--smq-space-3);
	max-width: 72ch;
}
.smq-seriepage-get-item {
	position: relative;
	padding-left: var(--smq-space-4);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--smq-gray-600);
}
.smq-seriepage-get-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--smq-blue-brand);
}
.smq-seriepage-get-note {
	font-size: 0.82rem;
	color: var(--smq-gray-400);
}

/* ================= Acquire / commercial block — "esta Serie" note ================= */
.smq-seriepage-this-series-note {
	margin: var(--smq-space-5) 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
}
.smq-seriepage-this-series-note strong {
	color: var(--smq-navy-950);
}

/* ================= Acquire / commercial block — Membership link ================= */
.smq-seriepage-membership-block {
	margin-top: var(--smq-space-3);
	max-width: 72ch;
	padding: var(--smq-space-4);
	background: var(--smq-white);
	border: 1px solid var(--smq-gray-200);
	border-left: 3px solid var(--smq-navy-900);
	border-radius: 4px;
}
.smq-seriepage-membership-title {
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--smq-navy-950);
	margin: 0 0 var(--smq-space-1);
}
.smq-seriepage-membership-desc {
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--smq-gray-600);
	margin: 0 0 var(--smq-space-3);
}
.smq-seriepage-membership-link {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--smq-blue-brand);
	text-decoration: none;
}
.smq-seriepage-membership-link:hover,
.smq-seriepage-membership-link:focus-visible {
	text-decoration: underline;
}

/* ================= Acquire / commercial block — purchase form ================= */
.smq-purchase-form {
	margin: 0;
}
.smq-purchase-form button.smq-course-cta-primary {
	border: 0;
	cursor: pointer;
}

/* ================= Related / Discovery ================= */
.smq-seriepage-related-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--smq-space-3);
}
.smq-seriepage-related-link {
	font-weight: 600;
	color: var(--smq-blue-brand);
	text-decoration: none;
}
.smq-seriepage-related-affordance {
	font-size: 0.88rem;
	color: var(--smq-gray-400);
}

/* ================= Responsive ================= */
@media (max-width: 1024px) {
	.smq-seriepage-dataflow {
		flex-direction: column;
	}
	.smq-seriepage-dataflow-connector {
		width: 2px;
		height: 24px;
		align-self: center;
	}
	.smq-seriepage-dataflow-connector::after {
		right: 50%;
		top: -1px;
		transform: translateX(50%) rotate(45deg);
	}
}

@media (max-width: 768px) {
	.smq-seriepage-journey-item {
		flex-direction: column;
		gap: var(--smq-space-2);
	}
	.smq-seriepage-related-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.smq-seriepage-hero-progression {
		flex-wrap: wrap;
		row-gap: var(--smq-space-2);
	}
	.smq-seriepage-hero-progression-connector {
		min-width: var(--smq-space-2);
	}
}

/* ================= WEB-PUB-03: unapproved Series candidate (local preview overlay, authorized viewers only) ================= */
.smq-irp-preview-banner {
	padding: var(--smq-space-2) var(--smq-space-3);
	background: #FFE3D6;
	border-bottom: 2px solid #C2410C;
	color: var(--smq-navy-950);
	font-family: var(--smq-font-text);
	font-size: 14px;
	text-align: center;
}
.smq-irp-preview-seo {
	max-width: 960px;
	margin: var(--smq-space-2) auto 0;
	font-size: 13px;
	text-align: left;
}
.smq-irp-preview-seo div {
	display: flex;
	gap: var(--smq-space-2);
	padding: 2px 0;
}
.smq-irp-preview-seo dt {
	flex: 0 0 140px;
	font-weight: 600;
}
.smq-irp-preview-seo dd {
	margin: 0;
}

/* WEB-V1-UX-CONTENT-FIX-01: canonical disclaimer on Series pages — same rules as research-system.css. */
.smq-irp-disclaimer {
	border-top: 1px solid var(--smq-gray-200);
}
.smq-irp-disclaimer-text {
	max-width: 760px;
	margin: 0;
	font-family: var(--smq-font-text);
	font-size: 13px;
	line-height: 1.6;
	color: var(--smq-gray-600);
}
.smq-irp-disclaimer-link {
	color: var(--smq-blue-brand);
	text-decoration: underline;
}