/*
 * RESEARCH CATALOG V1.1 — dedicated stylesheet for the unified Research/Series discovery surface
 * (`/informes-tecnicos/catalogo/`). Intended reading: a professional quantitative research library
 * index, not an ecommerce product grid. V1.1 correction: ONE dense visual line per item on desktop
 * (Sergio's explicit direction over V1's multi-line cards), a centered content container matching the
 * rest of the approved site, and server-side pagination for a future library of hundreds of entries.
 *
 * CONTAINER FIX (root cause of V1's "flush against the left edge" bug): `.smq-course-*` primitives
 * (`.smq-course-inner`, `.smq-course-hero`, `.smq-course-section`, etc.) live in course-amibroker.css,
 * which is only conditionally enqueued for specific static is_page() templates (Formación, Estrategias,
 * the AmiBroker/Pairs course pages, the Research Hub) — never for a dynamically-routed canvas page like
 * this one or its sibling Series Catalog (which has the same latent, previously-undetected gap; out of
 * scope to fix here, noted as known debt). Rather than loading the whole 800+-line course-amibroker.css
 * file just for a handful of shared primitives, the exact rules this page's markup depends on are
 * reproduced verbatim below (values copied 1:1 from course-amibroker.css, not reinvented) — self-
 * contained, no cross-file dependency, no unrelated selector leakage.
 *
 * Every rule here is entity-count-independent — no rule references a specific Research/Series ID or
 * slug. Type-agnostic: RESEARCH and SERIE rows share the same row primitives, only the small type
 * badge differs — a future PACK badge needs only one more modifier here, no structural change.
 */

/* ================= Shared .smq-course-* primitives (verbatim copy, see note above) ================= */
.smq-course-section {
	width: 100%;
	padding: var(--smq-space-7) 0;
}
.smq-course-section--tight {
	padding: var(--smq-space-6) 0;
}
.smq-course-inner {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
}
.smq-course-eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--smq-space-3);
	margin-bottom: var(--smq-space-3);
}
.smq-course-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-course-hero {
	width: 100%;
	background: var(--smq-navy-950);
	padding: var(--smq-space-7) 0;
	position: relative;
	overflow: hidden;
}
.smq-course-hero .smq-course-eyebrow {
	color: var(--smq-blue-brand);
}
.smq-course-hero-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-course-hero-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-course-hero-lead a {
	color: var(--smq-white);
}
.smq-course-signals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--smq-space-2);
	margin: var(--smq-space-4) 0 0;
	padding: 0;
	list-style: none;
}
.smq-course-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-course-lead {
	font-family: var(--smq-font-text);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--smq-gray-600);
	margin: 0;
	max-width: 72ch;
}

/* ================= Filters / sort (V1.2: one shared control row) =================
   TYPE (Todos/Research/Series) and ORDER (Más recientes/Título) are two children of ONE flex row,
   separated by a vertical divider — desktop/tablet render both groups on the same line. If the row
   doesn't fit, `.smq-catalog-sort` wraps as a whole unit; because it has no margin-top of its own
   (spacing comes only from `.smq-catalog-controls`'s own `gap`, applied uniformly), a wrapped ORDER
   group reads as a second row of the SAME control bar, never as a child/sub-row of TODOS. */
.smq-catalog-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smq-space-4);
}
.smq-catalog-filters,
.smq-catalog-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--smq-space-2);
}
.smq-catalog-controls-divider {
	width: 1px;
	align-self: stretch;
	min-height: 1.5em;
	background: var(--smq-gray-200);
	flex-shrink: 0;
}
.smq-catalog-filter,
.smq-catalog-sort-option {
	font-family: var(--smq-font-mono);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--smq-gray-600);
	text-decoration: none;
	padding: 4px var(--smq-space-3);
	border: 1px solid var(--smq-gray-200);
	border-radius: 999px;
}
.smq-catalog-filter:hover,
.smq-catalog-filter:focus-visible,
.smq-catalog-sort-option:hover,
.smq-catalog-sort-option:focus-visible {
	color: var(--smq-navy-950);
	border-color: var(--smq-navy-950);
}
.smq-catalog-filter--active,
.smq-catalog-sort-option--active {
	color: var(--smq-white);
	background: var(--smq-navy-950);
	border-color: var(--smq-navy-950);
}

/* ================= Dense single-line rows (V1.1) ================= */
.smq-catalog-list {
	list-style: none;
	margin: var(--smq-space-3) 0 0;
	padding: 0;
	border-top: 1px solid var(--smq-gray-200);
}
.smq-catalog-row {
	min-width: 0;
	border-bottom: 1px solid var(--smq-gray-200);
}
.smq-catalog-row-link,
.smq-catalog-row-static {
	display: flex;
	align-items: flex-start;
	gap: var(--smq-space-2);
	min-width: 0;
	padding: 10px 4px;
	text-decoration: none;
	color: inherit;
}
.smq-catalog-row-static {
	cursor: default;
}
.smq-catalog-row-link:hover,
.smq-catalog-row-link:focus-visible {
	background: var(--smq-gray-100, rgba(11, 15, 25, 0.03));
}

.smq-catalog-row-type {
	flex: 0 0 auto;
	font-family: var(--smq-font-mono);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 1px 6px;
	border-radius: 3px;
	white-space: nowrap;
}
.smq-catalog-row-type--research {
	color: var(--smq-blue-brand);
	background: rgba(47, 128, 237, 0.1);
}
.smq-catalog-row-type--series {
	color: var(--smq-navy-950);
	background: var(--smq-gray-200);
}

.smq-catalog-row-title {
	flex: 0 1 auto;
	font-family: var(--smq-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--smq-navy-950);
	/* No `white-space: nowrap`: a flex item that cannot wrap cannot shrink below its text either, so a long
	   title pushed the whole document wider than the viewport (554px at 375px). The title stays on one line
	   wherever it fits, because the description below is the item that gives up the space first. */
}

/* Desktop/tablet visual refinement: the description shares the row with title/type/meta but is now
   allowed up to 2 lines (clamped, never unbounded) before truncating with an ellipsis — still a compact
   row, never a card; the row simply grows to fit at most 2 lines of summary text. */
.smq-catalog-row-desc {
	flex: 1 1 0; /* takes what TYPE + TITLE + METADATA leave, so the title only wraps once that is nothing */
	min-width: 0;
	font-size: 0.85rem;
	color: var(--smq-gray-600);
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	white-space: normal;
}

.smq-catalog-row-meta {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: var(--smq-space-3);
	display: flex;
	gap: var(--smq-space-3);
	white-space: nowrap;
}
.smq-catalog-row-meta-item {
	font-family: var(--smq-font-mono);
	font-size: 0.68rem;
	color: var(--smq-gray-400);
}

/* ================= Pagination ================= */
.smq-catalog-pagination > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--smq-space-4);
	padding-top: var(--smq-space-5);
	flex-wrap: wrap;
}
.smq-catalog-pagination-prev,
.smq-catalog-pagination-next {
	font-family: var(--smq-font-mono);
	font-size: 0.8rem;
	color: var(--smq-navy-950);
	text-decoration: none;
}
.smq-catalog-pagination-prev:hover,
.smq-catalog-pagination-next:hover,
.smq-catalog-pagination-prev:focus-visible,
.smq-catalog-pagination-next:focus-visible {
	color: var(--smq-blue-interactive-strong);
}
.smq-catalog-pagination-prev--disabled,
.smq-catalog-pagination-next--disabled {
	color: var(--smq-gray-400);
}
.smq-catalog-pagination-pages {
	display: flex;
	gap: var(--smq-space-2);
	align-items: center;
}
.smq-catalog-pagination-page {
	font-family: var(--smq-font-mono);
	font-size: 0.8rem;
	color: var(--smq-gray-600);
	text-decoration: none;
	min-width: 1.6em;
	text-align: center;
}
.smq-catalog-pagination-page:hover,
.smq-catalog-pagination-page:focus-visible {
	color: var(--smq-navy-950);
}
.smq-catalog-pagination-page--active {
	color: var(--smq-white);
	background: var(--smq-navy-950);
	border-radius: 4px;
}
.smq-catalog-pagination-ellipsis {
	color: var(--smq-gray-400);
	font-family: var(--smq-font-mono);
	font-size: 0.8rem;
}

/* ================= Transition ================= */
.smq-catalog-related-row {
	display: flex;
	justify-content: flex-start;
}
.smq-catalog-related-link {
	font-weight: 600;
	color: var(--smq-blue-brand);
	text-decoration: none;
}
.smq-catalog-related-link:hover,
.smq-catalog-related-link:focus-visible {
	text-decoration: underline;
}

/* ================= Responsive ================= */
/* Tablet and below: the description is dropped first; TYPE + TITLE share the first line, the title wrapping
   inside what is left of it, and the metadata moves below. Title and metadata do not fit on one line here
   (the metadata alone reaches ~560px), and neither may force the row wider than the viewport. */
@media (max-width: 900px) {
	.smq-catalog-row-desc {
		display: none;
	}
	.smq-catalog-row-link,
	.smq-catalog-row-static {
		flex-wrap: wrap;
	}
	.smq-catalog-row-title {
		flex: 1 1 0;
	}
	.smq-catalog-row-meta {
		flex: 1 1 100%;
		flex-wrap: wrap;
		row-gap: 2px;
		margin-left: 0;
		padding-left: 0;
		white-space: normal;
	}
}
/* Mobile: never forced tiny text to fake one line — the description returns between the title and the
   metadata. */
@media (max-width: 600px) {
	.smq-catalog-controls-divider {
		display: none; /* a 1px vertical divider reads as a floating orphan once the ORDER group wraps
		                   onto its own line — the row gap alone already separates the two groups. */
	}
	.smq-catalog-row-link,
	.smq-catalog-row-static {
		padding: var(--smq-space-2) 4px;
	}
	.smq-catalog-row-desc {
		display: block;
		flex: 1 1 100%;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		order: 3;
	}
	.smq-catalog-row-meta {
		order: 4;
	}
	.smq-catalog-row-meta-item:nth-child(n+3) {
		display: none;
	}
}