/* ═══════════════════════════════════════════════════════════════════════════
 * blog-list.css — Neural-LLM /blog landing page
 *
 * PURPOSE
 *   Styles the blog landing/index page rendered by the template override
 *   templates/nllm/html/com_content/category/blog.php and the per-card markup
 *   in category/blog_item.php. Dark editorial theme: a brand hero, a row of
 *   category filter pills, a uniform article-card grid, and pagination.
 *
 * ARCHITECTURE
 *   - Mobile-first. Base rules target 320px (single-column card stack).
 *     Two min-width breakpoints widen the grid: 600px -> 2-up, 960px -> 3-up.
 *   - Every colour, space, radius, shadow and font value is sourced from the
 *     --nllm-* / --pc-* design tokens in media/com_neurallicense/brand/
 *     tokens.css. No hardcoded hex/px appears for those concerns — only
 *     structural values the tokens do not cover (grid templates, line-height).
 *   - Page width comes from the template container; this file styles
 *     appearance + the component-internal card grid only.
 *
 * DEPENDENCIES
 *   tokens.css (registered as the `nllm.tokens` WAM asset; this sheet declares
 *   it as a dependency so it always loads after the tokens).
 *
 * BEM
 *   Block .nllm-blog (landing) and .nllm-blog-card (one card). Elements use
 *   the __element convention; the only state class is .is-active on a pill.
 *
 * [claude:opus-4.7-1m][hurc:v0.7.0] Blog landing-page stylesheet (Workstream G).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
 * Landing container — appearance only; the template owns max-width/margins.
 * A little vertical breathing room separates the blog from the site chrome.
 * ─────────────────────────────────────────────────────────────────────────── */
.nllm-blog {
	/* Surface-deep is the darkest brand surface — maximises card contrast. */
	background-color: var(--nllm-surface-deep);
	color: var(--nllm-text);
	padding-block: var(--nllm-space-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HERO
 *
 * A typographic hero — no stock image, no gradient overlay. The eyebrow names
 * the section, the title carries the editorial promise, the lede sets scope.
 * Left-aligned (reads naturally, avoids the centred-template look).
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog__hero {
	/* Constrain the hero text to a readable measure, not the full page. */
	max-width: 720px;
	margin-block-end: var(--nllm-space-2xl);
}

.nllm-blog__hero-eyebrow {
	/* Small-caps cyan label — the brand's signature accent for kickers. */
	margin: 0 0 var(--nllm-space-sm);
	font-size: var(--nllm-text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nllm-cyan-bright);
}

.nllm-blog__hero-title {
	margin: 0 0 var(--nllm-space-md);
	/* clamp() scales the display size from mobile to desktop without a media
	 * query — 1.9rem floor keeps it readable on a 320px screen. */
	font-size: clamp(1.9rem, 6vw, var(--nllm-text-h1));
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--nllm-text);
}

.nllm-blog__hero-lede {
	margin: 0;
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	line-height: 1.65;
	color: var(--nllm-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CATEGORY FILTER PILLS
 *
 * A horizontal, wrapping row of pills (All + the four subcategories). The
 * active pill is filled with the brand violet; the rest are ghost pills. On a
 * narrow screen the row simply wraps — no horizontal scroll.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-sm);
	margin-block-end: var(--nllm-space-xl);
}

.nllm-blog__filter-pill {
	/* Pill geometry — a rounded, comfortably tappable target (44px tall via
	 * the padding + line-height; meets the mobile tap-target minimum). */
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.1rem;
	border-radius: var(--nllm-radius-full);
	border: 1px solid var(--nllm-surface-edge);
	background: var(--nllm-surface);
	color: var(--nllm-text-muted);
	font-size: var(--nllm-text-sm);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: color var(--nllm-transition-fast),
		background-color var(--nllm-transition-fast),
		border-color var(--nllm-transition-fast);
}

.nllm-blog__filter-pill:hover,
.nllm-blog__filter-pill:focus-visible {
	color: var(--nllm-text);
	border-color: var(--nllm-violet-soft);
	background: var(--nllm-surface-soft);
}

.nllm-blog__filter-pill.is-active {
	/* Active filter — solid violet fill, white text, no border seam. */
	color: #fff;
	background: var(--nllm-violet);
	border-color: var(--nllm-violet);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ARTICLE CARD GRID
 *
 * Mobile-first: a single column. The card internals (grid below) are
 * component-internal layout, which local CSS is allowed to own.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog__grid {
	display: grid;
	grid-template-columns: 1fr;       /* 320px: one card per row. */
	gap: var(--nllm-space-lg);
}

@media (min-width: 600px) {
	.nllm-blog__grid {
		/* Tablet: two columns once there is room for two readable cards. */
		grid-template-columns: repeat(2, 1fr);
		gap: var(--nllm-space-xl);
	}
}

@media (min-width: 960px) {
	.nllm-blog__grid {
		/* Desktop: three columns — the Category Blog view is configured for
		 * 9 articles/page (3×3), so the grid fills cleanly. */
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ───────────────────────────────────────────────────────────────────────────
 * CARD — one article. A flex column so the meta row pins to the card bottom
 * regardless of how long the title/teaser run. Lifts subtly on hover.
 * ─────────────────────────────────────────────────────────────────────────── */
.nllm-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--nllm-surface);
	border: 1px solid var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-md);
	overflow: hidden;                 /* Clips the thumbnail's square corners. */
	transition: transform var(--nllm-transition-base),
		box-shadow var(--nllm-transition-base),
		border-color var(--nllm-transition-base);
}

.nllm-blog-card:hover {
	transform: translateY(-3px);
	border-color: var(--nllm-violet-soft);
	box-shadow: var(--nllm-shadow-md);
}

.nllm-blog-card__thumb-link {
	display: block;
	/* A fixed 16:9-ish ratio keeps every card's image band identical so the
	 * grid stays tidy even with mixed source-image sizes. */
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	background: var(--nllm-surface-deep);
}

.nllm-blog-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;                /* Crop, never distort. */
	display: block;
	transition: transform var(--nllm-transition-slow);
}

.nllm-blog-card:hover .nllm-blog-card__thumb {
	transform: scale(1.04);           /* Gentle zoom — rewards hover. */
}

/* ───────────────────────────────────────────────────────────────────────────
 * Accent strip — replaces the auto-OG thumbnail when an article has no
 * curated intro image. A slim category-coloured gradient bar instead of a
 * giant card that reprints the title text (which is already the H2 below).
 * Keeps the visual rhythm; loses the duplication.
 * ─────────────────────────────────────────────────────────────────────────── */
.nllm-blog-card__accent {
	display: block;
	height: 6px;
	width: 100%;
	background: linear-gradient(90deg, var(--nllm-violet) 0%, var(--nllm-cyan, #38bdf8) 100%);
	transition: filter var(--nllm-transition-base);
}

.nllm-blog-card:hover .nllm-blog-card__accent {
	filter: brightness(1.18);
}

/* Per-category tint — keeps the grid scannable at a glance. */
.nllm-blog-card__accent[data-category="guides"] {
	background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
}
.nllm-blog-card__accent[data-category="comparisons"] {
	background: linear-gradient(90deg, #22d3ee 0%, #0ea5e9 100%);
}
.nllm-blog-card__accent[data-category="engineering"] {
	background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
}
.nllm-blog-card__accent[data-category="releases"] {
	background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

/* When there's no thumb, the body's top padding takes over the visual
 * breathing room the image used to give. Tighter top padding looks
 * intentional and matches the slim accent strip above it. */
.nllm-blog-card--no-thumb .nllm-blog-card__body {
	padding-top: calc(var(--nllm-space-lg) - 4px);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Card body — padded text block. flex:1 lets it absorb height differences so
 * the meta row stays bottom-aligned across the row of cards.
 * ─────────────────────────────────────────────────────────────────────────── */
.nllm-blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	padding: var(--nllm-space-lg);
}

.nllm-blog-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-xs);
}

.nllm-blog-card__category {
	/* Category chip — small cyan-tinted label. */
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nllm-cyan-bright);
}

.nllm-blog-card__draft {
	/* Draft marker — amber, only shown for unpublished placeholder articles. */
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pc-bolt-amber);
	border: 1px solid var(--pc-bolt-amber);
	border-radius: var(--nllm-radius-sm);
	padding: 0.05rem 0.4rem;
}

.nllm-blog-card__title {
	margin: 0;
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.nllm-blog-card__title a {
	color: var(--nllm-text);
	text-decoration: none;
}

.nllm-blog-card__title a:hover,
.nllm-blog-card__title a:focus-visible {
	color: var(--nllm-violet-soft);
}

.nllm-blog-card__teaser {
	margin: 0;
	font-size: var(--nllm-text-sm);
	line-height: 1.6;
	color: var(--nllm-text-muted);
}

.nllm-blog-card__meta {
	/* margin-top:auto pins the meta row to the card's bottom edge. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: var(--nllm-space-sm);
	font-size: 0.78rem;
	color: var(--nllm-text-subtle);
}

.nllm-blog-card__meta-sep {
	color: var(--nllm-surface-edge);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * EMPTY STATE — shown when the category has no published articles. Helpful,
 * not apologetic: a clear next action toward the product page.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog__empty {
	text-align: center;
	padding: var(--nllm-space-2xl) var(--nllm-space-lg);
	border: 1px dashed var(--nllm-surface-edge);
	border-radius: var(--nllm-radius-md);
	background: var(--nllm-surface);
}

.nllm-blog__empty-title {
	margin: 0 0 var(--nllm-space-sm);
	font-size: var(--nllm-text-h3);
	color: var(--nllm-text);
}

.nllm-blog__empty-text {
	margin: 0;
	color: var(--nllm-text-muted);
}

.nllm-blog__empty-text a {
	color: var(--nllm-violet-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PAGINATION — Joomla emits a <ul> of page links inside .nllm-blog__pagination
 * -links; this restyles those native list items as brand pills.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog__pagination {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	align-items: center;
	margin-block-start: var(--nllm-space-2xl);
}

.nllm-blog__pagination-counter {
	margin: 0;
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
}

.nllm-blog__pagination-links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nllm-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nllm-blog__pagination-links li > * {
	/* Each page link/span — a square-ish tappable pill (>=36px). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 0.65rem;
	border-radius: var(--nllm-radius-sm);
	border: 1px solid var(--nllm-surface-edge);
	background: var(--nllm-surface);
	color: var(--nllm-text-muted);
	font-size: var(--nllm-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.nllm-blog__pagination-links li > a:hover,
.nllm-blog__pagination-links li > a:focus-visible {
	color: var(--nllm-text);
	border-color: var(--nllm-violet-soft);
	background: var(--nllm-surface-soft);
}

.nllm-blog__pagination-links li.active > * {
	/* Current page — solid violet, matches the active filter pill. */
	color: #fff;
	background: var(--nllm-violet);
	border-color: var(--nllm-violet);
}

.nllm-blog__pagination-links li.disabled > * {
	opacity: 0.4;
}

@media (min-width: 600px) {
	.nllm-blog__pagination {
		/* Wider screens: counter and links share a row. */
		flex-direction: row;
		justify-content: space-between;
	}
}