/* ==========================================================================
   oxy_blog — точечные добавки к макету.
   Основная вёрстка (.bl-*, .ar-*, .jx-*, .e-*) приходит из journal.css,
   promo.css и expert.css. Здесь только то, чего в макете не было.
   ========================================================================== */

/* Постраничная навигация. Адрес страницы не меняется — номер идёт
 * параметром ?PAGEN_1=N, поэтому блок оформлен как строка с двумя
 * ссылками и счётчиком. */
.bl-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.bl-pager a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 13px;
	font-weight: 600;
	color: var(--purple);
	text-decoration: none;
}

.bl-pager a:hover {
	color: var(--text);
}

.bl-pager-num {
	font-size: 12px;
	color: var(--muted);
}

@media (max-width: 620px) {
	.bl-pager {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px 20px;
	}
}

/* Чипы рубрик на странице рубрики — ссылки, а не кнопки: размеры и
 * состояния те же, что у кнопок в макете. */
.bl-chips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--text);
	padding: 10px 16px;
	min-height: 44px;
	font-size: 13px;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}

.bl-chips a sup {
	font-size: 11px;
	color: var(--muted);
	top: 0;
}

.bl-chips a:hover {
	border-color: var(--purple);
	color: var(--purple);
}

.bl-chips a.is-on {
	background: var(--purple);
	border-color: var(--purple);
	color: #fff;
}

.bl-chips a.is-on sup {
	color: rgba(255, 255, 255, .75);
}

/* Рубрика в надзаголовке статьи — ссылка на раздел блога. */
.ar-hero .eyebrow a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.ar-hero .eyebrow a:hover {
	border-bottom-color: currentColor;
}

/* Статья повторяет макет EXAMPLES/blog.html, из которого убрана только
 * правая колонка (.ar-side). Сеточные ширины берём из journal.css как есть:
 * 250px (содержание) / 700px (текст) / 1fr — третья колонка просто пустая,
 * текст остаётся той же меры, что в макете. */
.ar-body:not(:has(.ar-toc)) > .ar-prose {
	/* Без заголовков-разделов содержание не выводится, и текст должен
	 * занять всю ширину, а не уехать в первую колонку на 250px. */
	grid-column: 1 / -1;
	max-width: 950px;
}

/* Ссылка-рубрика в .ar-tags (в макете это <a>, у нас тоже). */
.ar-tags a:hover {
	color: var(--text);
}

/* Заголовок блока «Читайте также»: .jx-head из journal.css содержит
 * .eyebrow + .jx-h2 слева и .jx-link справа — дополнительных правил
 * не требуется. */

/* Карточка материала в .ar-related: сетка из трёх, карточка тянется. */
.ar-related .bl-card {
	min-width: 0;
}

/* В макете в .ar-facts всегда 4 ячейки. Если реальных цифр меньше —
 * сетка не должна оставлять пустую колонку справа. */
.ar-facts.ar-f2 {
	grid-template-columns: repeat(2, 1fr);
}

.ar-facts.ar-f3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 960px) {
	.ar-facts.ar-f3 {
		grid-template-columns: 1fr 1fr;
	}

	.ar-facts.ar-f3 div:nth-child(3) {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--line);
	}
}