/* ═══════════════════════════════════════════════════════════════════════════
 * blog-article.css — Neural-LLM single blog article
 *
 * PURPOSE
 *   Styles the single-article reading layout rendered by the template override
 *   templates/nllm/html/com_content/article/blog.php. Dark editorial theme:
 *   article header (eyebrow + title + meta), hero image, a constrained prose
 *   column tuned for long-form reading, and a closing product CTA panel.
 *
 * ARCHITECTURE
 *   - Mobile-first. Base rules target 320px; one 720px breakpoint widens the
 *     type scale and spacing for comfortable desktop reading.
 *   - The prose column is capped at a ~68ch measure — the readable line length
 *     for body copy. Width comes from this component, not the page template,
 *     because article reading-measure is a component concern.
 *   - Colours/spaces/radii/fonts come from the --nllm-* / --pc-* tokens in
 *     media/com_neurallicense/brand/tokens.css.
 *
 * DEPENDENCIES
 *   tokens.css (the `nllm.tokens` WAM asset — declared as a dependency).
 *
 * BEM
 *   Block .nllm-blog-article; elements use the __element convention. The
 *   nested prose styles target the raw HTML inside .nllm-blog-article__body
 *   (h2/h3/p/ul/code/blockquote) since article content is editor-authored.
 *
 * [claude:opus-4.7-1m][hurc:v0.7.0] Blog single-article stylesheet (Workstream G).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
 * Article shell — a centred reading column. max-width is a component concern
 * (reading measure), not page structure, so it is owned here.
 * ─────────────────────────────────────────────────────────────────────────── */
.nllm-blog-article {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--nllm-space-xl);
	color: var(--nllm-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ARTICLE HEADER — eyebrow (category link), title, draft badge, meta row.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog-article__header {
	margin-block-end: var(--nllm-space-xl);
}

.nllm-blog-article__eyebrow {
	margin: 0 0 var(--nllm-space-sm);
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

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

.nllm-blog-article__eyebrow a:hover,
.nllm-blog-article__eyebrow a:focus-visible {
	text-decoration: underline;
}

.nllm-blog-article__title {
	margin: 0 0 var(--nllm-space-md);
	/* clamp() scales the headline; 1.8rem floor stays readable at 320px. */
	font-size: clamp(1.8rem, 5.5vw, var(--nllm-text-h2));
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--nllm-text);
}

.nllm-blog-article__draft-badge {
	/* Amber draft marker — only rendered for unpublished placeholder articles
	 * so an editor previewing a draft sees its state clearly. */
	display: inline-block;
	margin: 0 0 var(--nllm-space-md);
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--pc-bolt-amber);
	border-radius: var(--nllm-radius-sm);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pc-bolt-amber);
}

.nllm-blog-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
}

.nllm-blog-article__meta-author {
	font-weight: 600;
	color: var(--nllm-text-muted);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
 * HERO IMAGE — full-column figure above the prose. A fixed ratio keeps the
 * band consistent regardless of source-image dimensions.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog-article__hero {
	margin: 0 0 var(--nllm-space-xl);
	border-radius: var(--nllm-radius-md);
	overflow: hidden;
	background: var(--nllm-surface);
}

.nllm-blog-article__hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PROSE BODY
 *
 * The article content is editor-authored HTML, so the styles below target raw
 * element selectors inside the body wrapper rather than BEM classes. Tuned for
 * long-form reading: generous line-height, clear heading rhythm, restrained
 * link styling.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog-article__body {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--nllm-text-muted);
}

.nllm-blog-article__body p {
	margin: 0 0 var(--nllm-space-lg);
}

.nllm-blog-article__body h2 {
	margin: var(--nllm-space-2xl) 0 var(--nllm-space-md);
	font-size: clamp(1.4rem, 3.5vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--nllm-text);
}

.nllm-blog-article__body h3 {
	margin: var(--nllm-space-xl) 0 var(--nllm-space-sm);
	font-size: clamp(1.15rem, 3vw, 1.35rem);
	font-weight: 700;
	color: var(--nllm-text);
}

.nllm-blog-article__body a {
	color: var(--nllm-violet-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nllm-blog-article__body a:hover,
.nllm-blog-article__body a:focus-visible {
	color: var(--nllm-cyan-bright);
}

.nllm-blog-article__body ul,
.nllm-blog-article__body ol {
	margin: 0 0 var(--nllm-space-lg);
	padding-inline-start: var(--nllm-space-xl);
}

.nllm-blog-article__body li {
	margin-bottom: var(--nllm-space-xs);
}

.nllm-blog-article__body strong {
	color: var(--nllm-text);
}

.nllm-blog-article__body blockquote {
	/* Pull-quote — violet left rule, slightly lifted surface. */
	margin: var(--nllm-space-xl) 0;
	padding: var(--nllm-space-md) var(--nllm-space-lg);
	border-inline-start: 3px solid var(--nllm-violet);
	background: var(--nllm-surface);
	border-radius: 0 var(--nllm-radius-sm) var(--nllm-radius-sm) 0;
	color: var(--nllm-text);
	font-style: italic;
}

.nllm-blog-article__body code {
	/* Inline code — monospace token, subtle dark fill. */
	font-family: var(--nllm-font-mono);
	font-size: 0.9em;
	padding: 0.12em 0.4em;
	border-radius: var(--nllm-radius-sm);
	background: var(--nllm-surface-soft);
	color: var(--nllm-cyan-pale);
}

.nllm-blog-article__body pre {
	/* Code block — scrollable, monospace, deep surface. */
	margin: 0 0 var(--nllm-space-lg);
	padding: var(--nllm-space-md);
	border-radius: var(--nllm-radius-md);
	background: var(--nllm-surface-deep);
	border: 1px solid var(--nllm-surface-soft);
	overflow-x: auto;
	font-family: var(--nllm-font-mono);
	font-size: var(--nllm-text-sm);
	line-height: 1.55;
}

.nllm-blog-article__body pre code {
	/* Code inside a pre block — no inline pill treatment. */
	padding: 0;
	background: transparent;
	color: var(--nllm-text-muted);
}

.nllm-blog-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--nllm-radius-md);
	margin-block: var(--nllm-space-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CLOSING CTA PANEL
 *
 * A product callout at the foot of every article — violet-tinted panel with a
 * primary "See pricing" action and a ghost "More articles" link.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nllm-blog-article__cta {
	margin-block-start: var(--nllm-space-2xl);
	padding: var(--nllm-space-xl);
	border-radius: var(--nllm-radius-lg);
	/* Subtle violet gradient wash — distinct from the prose surface. */
	background: linear-gradient(
		135deg,
		var(--nllm-violet-bg) 0%,
		var(--nllm-surface) 100%
	);
	border: 1px solid var(--nllm-violet-deep);
	text-align: center;
}

.nllm-blog-article__cta-title {
	margin: 0 0 var(--nllm-space-sm);
	font-size: clamp(1.3rem, 4vw, 1.6rem);
	font-weight: 800;
	color: var(--nllm-text);
}

.nllm-blog-article__cta-text {
	margin: 0 auto var(--nllm-space-lg);
	max-width: 48ch;
	color: var(--nllm-text-muted);
	line-height: 1.65;
}

.nllm-blog-article__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nllm-space-sm);
}

.nllm-blog-article__cta-btn {
	/* Button geometry is defined here because the marketing pages do not load a
	 * shared button component on com_content pages; values stay token-sourced. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.65rem 1.4rem;
	border-radius: var(--nllm-radius-md);
	font-size: var(--nllm-text-body);
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--nllm-transition-fast),
		background-color var(--nllm-transition-fast),
		color var(--nllm-transition-fast);
}

.nllm-blog-article__cta-btn:hover {
	transform: translateY(-2px);
}

.nllm-blog-article__cta-btn--primary {
	background: var(--nllm-violet);
	color: #fff;
}

.nllm-blog-article__cta-btn--primary:hover {
	background: var(--nllm-violet-soft);
}

.nllm-blog-article__cta-btn--ghost {
	background: transparent;
	color: var(--nllm-text);
	border: 1px solid var(--nllm-surface-edge);
}

.nllm-blog-article__cta-btn--ghost:hover {
	border-color: var(--nllm-violet-soft);
	color: var(--nllm-violet-soft);
}

/* ───────────────────────────────────────────────────────────────────────────
 * Desktop refinement — at 720px+ widen the prose type scale slightly for a
 * more comfortable long-form reading rhythm.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
	.nllm-blog-article__body {
		font-size: 1.12rem;
		line-height: 1.8;
	}
}