/* ==========================================================================
   Article page
   ========================================================================== */

.article-lead {
	margin-top: var(--space-3);
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	max-width: var(--content-max);
}

.article-header {
	/* .article-shell — grid с row-gap:0 (нужен для sticky-колонок на всю
	   высоту), поэтому отступ между шапкой статьи (обложка) и текстом
	   задаём явно, а не полагаемся на зазор строк грида. */
	margin-bottom: var(--space-8);
}

.article-header h1 {
	font-size: var(--fs-3xl);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: var(--lh-tight);
	color: var(--color-text);
}

@media (max-width: 576px) {
	.article-header h1 { font-size: var(--fs-2xl); }
}

.article-meta {
	margin-top: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}
.article-meta a { color: var(--color-accent); font-weight: 500; }
.article-meta .dot::before { content: "•"; margin-right: 0.5em; color: var(--color-border-strong); }
/* display:inline-flex тут не нужен — .icon сам себе inline-block с
   vertical-align (см. base.css), а flex на span с текстом+ссылкой ("Раздел: "
   + <a>) в некоторых браузерах схлопывает пробел перед ссылкой. */
.article-meta svg { width: 14px; height: 14px; margin-right: 4px; }

.article-cover {
	margin-top: var(--space-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	max-width: var(--content-max);
	height: 340px;
}
.article-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 576px) {
	.article-cover { height: 200px; }
}

/* Изображения внутри контента статьи — тот же отступ, что у код-блоков
   (var(--space-6)), а не общий var(--space-5) от .entry-content > * + *:
   картинка визуально "тяжелее" обычного абзаца, ей нужно больше воздуха.
   Отступ вешаем на ближайший блок-обёртку (p/figure, если картинка внутри
   них) ИЛИ на саму img, если она прямой потомок — но не на оба сразу,
   чтобы не получить двойной отступ у одной и той же картинки. */
.entry-content img:not(.article-cover img) {
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	cursor: zoom-in;
}
.entry-content > img:not(.article-cover img) {
	display: block;
	margin-block: var(--space-6);
}
.entry-content > p:has(> img:only-child),
.entry-content > figure {
	margin-block: var(--space-6);
}
.entry-content figure > img {
	margin-inline: auto;
}

/* Просмотры/дата над статьёй — компактный формат */
.article-views { display: inline-flex; align-items: center; }