/**
 * Блог (.opb): хаб и рубрики (герой, сетка карточек, чипы рубрик, поиск, CTA)
 * и блок «Читайте также» под статьёй. Значки сервисов (.opb-logo) нужны и блоку гайдов на главной.
 * Разметку дают home.php, category.php, inc/blog.php и inc/home-guides.php, архивной вёрстки Astra тут нет.
 */

.opb { padding: 34px 0 76px; }

/* ── Шапка хаба и рубрики: светлая панель, как hero магазина (catalog.css).
   Заголовок, лид, поиск по ленте, внизу за тонкой линией рубрики. ── */
.opb-head {
	margin: 0 0 26px;
	padding: 46px 44px 18px;
	border: 1px solid var(--ui-line);
	border-radius: 28px;
	color: var(--ui-ink);
	background: var(--ui-panel-bg);
	box-shadow: var(--ui-card-sh);
}
.opb-head h1 {
	margin: 0 0 12px;
	font-family: var(--ui-h-font);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--ui-ink);
	text-wrap: balance;
}
.opb-head__accent { color: var(--ui-accent); }
.opb-head > p {
	margin: 0;
	max-width: 720px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--ui-text);
	text-wrap: pretty;
}
.opb-lead {
	max-width: 860px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ui-text);
	text-wrap: pretty;
}
.opb-lead p { margin: 0 0 10px; color: inherit; }
.opb-lead p:last-child { margin-bottom: 0; }
.opb-lead a { color: var(--ui-accent-d); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(29, 78, 216, .35); text-underline-offset: 3px; }
.opb-lead a:hover { text-decoration-color: currentColor; }
/* Кнопка «Читать полностью» нужна только на телефоне (см. адаптив). */
.opb .opb-lead__more { display: none; }

/* Поиск по ленте: белое поле, как в hero магазина. */
.opb-search { position: relative; display: block; max-width: 560px; margin: 26px 0 0; }
.opb-search svg {
	position: absolute;
	left: 18px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	color: #868d99;
	pointer-events: none;
}
.opb .opb-search input {
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 14px;
	background: #fff;
	padding: 15px 18px 15px 46px;
	font-size: 15.5px;
	color: var(--ui-ink);
	outline: none;
	box-shadow: 0 0 0 1px #dbe3ef, 0 14px 30px -20px rgba(15, 23, 42, .35);
	transition: box-shadow .15s ease;
}
.opb .opb-search input:focus { box-shadow: 0 0 0 1px #93b4fd, 0 0 0 4px rgba(37, 99, 235, .14); }
.opb .opb-search input::placeholder { color: #a4aab5; }

/* Рубрики: нижняя строка панели. Лента шире экрана листается, у края с продолжением
   мягкое затухание (классы ставит скрипт из oplatim_blog_chips). */
.opb-head__nav { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
.opb-chips {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.opb-chips::-webkit-scrollbar { display: none; }
.opb-chips.is-fade-r {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.opb-chips.is-fade-l {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
	mask-image: linear-gradient(90deg, transparent, #000 56px);
}
.opb-chips.is-fade-l.is-fade-r {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.opb .opb-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ui-text);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.opb .opb-chip:hover { background: var(--ui-accent-soft); color: var(--ui-ink); }
.opb .opb-chip.is-act,
.opb .opb-chip.is-act:hover { background: var(--ui-accent); color: #fff; }

/* ── Герой: свежая статья ── */
.opb-hero {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	border: 1px solid #e7ecf4;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	margin: 0 0 24px;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.opb-hero:hover { box-shadow: 0 26px 48px -30px rgba(15, 23, 42, .4); border-color: #d8e2f2; }
.opb-hero__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 30px;
	min-width: 0;
}
.opb-hero__tags { display: flex; gap: 8px; align-items: center; }
.opb-hero__new {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ecfdf5;
	color: #047857;
	font-size: 12px;
	font-weight: 700;
}
.opb-hero__title {
	font-size: clamp(20px, 2.6vw, 27px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: #0f172a;
}
.opb-hero:hover .opb-hero__title { color: #1d4ed8; }
.opb-hero__desc { color: #5b6b84; font-size: 15.5px; line-height: 1.65; }
.opb-hero__media { min-height: 100%; background: linear-gradient(135deg, #eef2ff 0%, #f1f5f9 100%); }
.opb-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Сетка карточек ── */
.opb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.opb-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ui-line);
	border-radius: var(--ui-r);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	box-shadow: var(--ui-card-sh);
}
.opb-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 40px -28px rgba(15, 23, 42, .4);
	border-color: #d8e2f2;
}

/* Фирменная заглушка вместо обложки: у статьи нет миниатюры или её файла на диске. */
.opb-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	background:
		radial-gradient(240px 170px at 86% 8%, rgba(255, 255, 255, .24), transparent 70%),
		radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px) 0 0 / 18px 18px,
		linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}
.opb-ph svg {
	box-sizing: content-box;
	width: 30px;
	height: 30px;
	padding: 17px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
	transition: transform .35s ease;
}
.opb-hero:hover .opb-ph svg { transform: scale(1.06); }

.opb-card__tag {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ui-accent-soft);
	color: #1d4ed8;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}
.opb-card__title {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	color: #0f172a;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.opb-card:hover .opb-card__title { color: #1d4ed8; }
.opb-card__desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ui-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.opb-card__meta {
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	color: #64748b; /* было #8794ab: контраст 3.06, мелкий текст должен быть от 4.5 */
}

/* ── Карточка со значком сервиса: лента блога, рубрики, «Читайте также» ──
   Обложки статей нарисованы в разных стилях и в сетке выглядели коллажем. Значок сервиса
   из каталога делает ленту ровной; обложка остаётся в самой статье и в превью для соцсетей. */
.opb-card--logo {
	gap: 8px;
	padding: 20px 20px 18px;
}
.opb-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.opb-card--logo .opb-card__tag { align-self: center; }
.opb-card--logo .opb-card__meta { padding-top: 12px; }
/* Три строки анонса: 16 слов в них помещаются целиком. При двух строках браузер обрезал анонс
   сам и дорисовывал своё многоточие сразу после точки, выходило «секунды....». */
.opb-card--logo .opb-card__desc { -webkit-line-clamp: 3; }
/* До 1100px три колонки слишком узкие для заголовка в две строки и анонса в три: ставим две. */
@media (max-width: 1100px) {
	.opb-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
/* Самые узкие телефоны: анонсу четвёртая строка, чтобы браузер не резал его сам. */
@media (max-width: 400px) {
	.opb-card--logo .opb-card__desc { -webkit-line-clamp: 4; }
}
.opb-logo {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
}
/* Внутри та же иконка, что в каталоге (.opc__ic): логотип, значок моста или буква на градиенте.
   Стили продублированы здесь, потому что catalog.css на страницах блога не грузится. */
.opb-logo .opc__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--tile, transparent);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}
.opb-logo .opc__ic--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.opb-logo .opc__ic--gift svg { display: block; width: 24px; height: 24px; }
/* Тонкая рамка поверх: белые логотипы не сливаются с белой карточкой. */
.opb-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
	pointer-events: none;
}
.opb-logo--doc { display: flex; align-items: center; justify-content: center; background: #eef4ff; color: #2563eb; }
.opb-logo--doc svg { width: 22px; height: 22px; }

/* Скрытые состояния: порционный показ и фильтр поиска. */
.opb-hid, .opb-off { display: none !important; }

.opb-empty { margin: 26px 0 0; color: #64748b; font-size: 15px; }
.opb-empty a { color: #1d4ed8; font-weight: 600; text-decoration: none; }

/* ── «Показать ещё» ── */
.opb-morewrap { display: flex; justify-content: center; margin-top: 32px; }
.opb .opb-more {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #dbe4f0;
	border-radius: 999px;
	background: #fff;
	color: #1d4ed8;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 34px;
	cursor: pointer;
	box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .12);
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.opb .opb-more:hover {
	background: #f6f9ff;
	border-color: #c7d2fe;
	box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .35);
}

/* ── Финальная панель: CTA + «Часто ищут» в графите, как тёмная карточка главной: единственный тёмный акцент страницы.
   Кнопки как в тёмной карточке главной: белая и контурная. ── */
.opb-fin {
	margin-top: 56px;
	padding: 40px 44px 34px;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 28px;
	background:
		radial-gradient(circle at var(--opb-glow, 52px 56px), rgba(255, 122, 26, .85) 0, rgba(255, 122, 26, .47) 10px, rgba(255, 122, 26, .14) 37px, transparent 88px),
		linear-gradient(160deg, #1c1d21 0%, #121316 62%);
	background-origin: border-box;
	box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55);
}
.opb-fin__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
}
.opb-fin__title {
	margin: 0 0 8px;
	font-family: var(--ui-h-font);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.03em;
	color: #fff;
}
.opb-fin__sub { margin: 0; font-size: 16px; line-height: 1.55; color: #a3a6ab; }
.opb-fin__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.opb .opb-fin__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #fff;
	color: var(--ui-dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.opb .opb-fin__btn:hover { border-color: #eff3ff; background: #eff3ff; color: var(--ui-dark); }
.opb .opb-fin__btn--ghost { border-color: rgba(255, 255, 255, .22); background: transparent; color: #fff; }
.opb .opb-fin__btn--ghost:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); color: #fff; }
.opb-fin__often {
	display: flex;
	align-items: center;
	gap: 8px 14px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.opb-fin__links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}
.opb-fin__lbl {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8b8e94;
	white-space: nowrap;
}
.opb .opb-fin__link {
	display: inline-block;
	padding: 9px 15px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	color: #c9cbd1;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.opb .opb-fin__link:hover { border-color: #fff; background: #fff; color: var(--ui-dark); }

/* ── «Читайте также» под статьёй: три карточки блога вместо похожих записей и навигации Astra ── */
.opb-read { margin: 48px 0 12px; }
.opb-read__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}
.opb-read .opb-read__title {
	margin: 0;
	font-size: clamp(21px, 2.6vw, 26px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: #0f172a;
}
.opb-read .opb-read__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: #1d4ed8;
	text-decoration: none;
	white-space: nowrap;
}
.opb-read .opb-read__all svg { transition: transform .15s ease; }
.opb-read .opb-read__all:hover { color: #1e40af; }
.opb-read .opb-read__all:hover svg { transform: translateX(3px); }
.opb-read__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.opb-read .opb-card__title { font-size: 15.5px; }

/* ── Адаптив ── */
@media (max-width: 980px) {
	.opb-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.opb-hero { grid-template-columns: 1fr; }
	.opb-hero__media { order: -1; aspect-ratio: 16 / 8; min-height: 0; }
	.opb-hero__body { padding: 20px 22px 24px; }
}
/* «Читайте также» на планшете и телефоне: лента со свайпом, следующая карточка выглядывает из-за края. */
@media (max-width: 860px) {
	.opb-read__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 44%;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding: 4px 0 10px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.opb-read__grid::-webkit-scrollbar { display: none; }
	.opb-read__grid .opb-card { scroll-snap-align: start; }
	.opb-read__grid .opb-card:hover { transform: none; }
}
@media (max-width: 640px) {
	.opb { padding-top: 16px; }
	.opb-grid { grid-template-columns: 1fr; }
	/* Шапка на телефоне компактнее: статьи начинаются на первом экране. */
	.opb-head { margin-bottom: 20px; padding: 24px 18px 14px; border-radius: 22px; }
	.opb-head h1 { margin-bottom: 8px; font-size: 30px; letter-spacing: -1px; }
	.opb-head > p { font-size: 14.5px; line-height: 1.5; }
	.opb-lead { font-size: 14.5px; line-height: 1.6; }
	.opb-search { max-width: none; margin-top: 18px; }
	.opb .opb-search input { padding: 13px 16px 13px 44px; font-size: 16px; }
	.opb-head__nav { margin-top: 18px; padding-top: 12px; }
	.opb .opb-chip { padding: 9px 14px; font-size: 14px; }
	.opb-card__title { font-size: 16px; }

	/* Длинное описание рубрики: три строки и «Читать полностью», статьи видны с первого экрана. */
	.opb-lead--long:not(.is-open) {
		max-height: 5.1em;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.5em), transparent);
		mask-image: linear-gradient(180deg, #000 calc(100% - 1.5em), transparent);
	}
	.opb .opb-lead__more {
		display: inline-flex;
		align-items: center;
		margin: 8px 0 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		color: var(--ui-accent-d);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		cursor: pointer;
	}
	.opb .opb-lead__more:hover,
	.opb .opb-lead__more:focus { background: none; color: var(--ui-ink); }
	.opb .opb-lead__more[hidden] { display: none; }

	.opb-read { margin-top: 36px; }
	.opb-read__grid { grid-auto-columns: 82%; gap: 12px; }

	/* Финальная панель на телефоне: кнопки в ряд (по возможности),
	   «Часто ищут» — двухрядная лента со свайпом вместо простыни пилюль. */
	.opb-fin { padding: 28px 20px 24px; border-radius: 22px; --opb-glow: 22px 20px; }
	.opb-fin__btns { width: 100%; }
	.opb .opb-fin__btn {
		flex: 1 1 46%;
		text-align: center;
		padding: 13px 8px;
		font-size: 14px;
		white-space: nowrap;
	}
	.opb-fin__often { display: block; margin-top: 22px; padding-top: 20px; }
	.opb-fin__lbl { margin: 0 0 12px; }
	.opb-fin__links {
		display: grid;
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
		margin-right: -20px;
		padding-right: 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
		mask-image: linear-gradient(90deg, #000 88%, transparent);
	}
	.opb-fin__links::-webkit-scrollbar { display: none; }
	.opb .opb-fin__link { white-space: nowrap; text-align: center; }
}
/* Боковые поля хаба и рубрик на телефоне: Astra даёт контейнеру 0.54em (около 10px), на остальном сайте 20px. */
@media (max-width: 544px) {
	body.blog #content > .ast-container,
	body.category #content > .ast-container { padding-left: 20px; padding-right: 20px; }
}