/**
 * Блог: лента «Статьи» и страницы рубрик (`parts/blog.php`).
 *
 * Общий слой (палитра, оболочка, первый экран, крошки) — в bloki.css,
 * здесь только своё: рубрики-ссылки, сетка и карточка статьи.
 *
 * Карточка — тёмная (вид выбран из пяти 26 сентября 2026): общее
 * устройство первым блоком, тёмное оформление — следом.
 */

/* ---------------------------------------------------------- первый экран */

.ss-page .ss-blog__hero {
	padding-block-end: clamp(36px, 4vw, 56px);
}

/* Рубрики — пилюлями под заголовком, текущая залита акцентом. Обычные
   ссылки: страница рубрики — своя страница, со своим адресом. */
.ss-page .ss-blog__rubriki {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: clamp(22px, 2.6vw, 32px);
}

.ss-page .ss-blog__rubrika {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: var(--ss-dark-ink);
	display: inline-flex;
	font-size: 14px;
	gap: 8px;
	min-block-size: 44px;
	padding: 0 18px;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.ss-page .ss-blog__rubrika:hover,
.ss-page .ss-blog__rubrika:focus-visible {
	border-color: var(--ss-accent);
	color: var(--ss-dark-ink);
}

.ss-page .ss-blog__rubrika.is-tut {
	background: var(--ss-accent);
	border-color: var(--ss-accent);
	color: #0b0b0b;
}

.ss-page .ss-blog__skolko {
	color: var(--ss-dark-muted);
	font-size: 12px;
}

.ss-page .ss-blog__rubrika.is-tut .ss-blog__skolko {
	color: rgba(11, 11, 11, 0.6);
}

/* ------------------------------------------------------------------ сетка */

.ss-page .ss-blog__lenta {
	padding-block: clamp(40px, 5vw, 72px) var(--ss-blok);
}

.ss-page .ss-blog__setka {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.ss-page .ss-blog__setka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ss-page .ss-blog__setka {
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
	}
}

.ss-page .ss-blog__pusto {
	color: var(--ss-muted, #6b6b6b);
	margin: 0;
}

.ss-page .ss-blog__pusto a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Поиск (/?s=…): строка поиска в первом экране и «нашлось N статей». */
.ss-page .ss-blog__poisk {
	display: flex;
	gap: 10px;
	margin-block-start: clamp(20px, 2.4vw, 28px);
	max-inline-size: 560px;
}

.ss-page .ss-blog__poisk input {
	background: #ffffff;
	block-size: 54px;
	border: 2px solid transparent;
	border-radius: 14px;
	color: #0b0b0b;
	flex: 1 1 auto;
	font: 400 17px/1 "Gotham Pro", system-ui, sans-serif;
	min-inline-size: 0;
	outline: none;
	padding: 0 18px;
}

.ss-page .ss-blog__poisk input:focus {
	border-color: #25cbc2;
}

.ss-page .ss-blog__poisk button {
	background: linear-gradient(90deg, #1ff5d6, #25cbc2);
	block-size: 54px;
	border: 0;
	border-radius: 14px;
	color: #ffffff;
	cursor: pointer;
	flex: none;
	font: 600 15px/1 "Gotham Pro", system-ui, sans-serif;
	letter-spacing: 0.04em;
	padding: 0 26px;
	text-transform: uppercase;
}

.ss-page .ss-blog__nashlos {
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	margin: 14px 0 0;
}

/* ------------------------------------------------- карточка: общее для всех */

.ss-page .ss-post {
	display: flex;
	flex-direction: column;
	isolation: isolate;
	margin: 0;
	overflow: hidden;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ss-page .ss-post__oblozhka {
	aspect-ratio: 16 / 9;
	background: #1b1b1b;
	overflow: hidden;
	position: relative;
}

.ss-page .ss-post__kartinka {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ss-page .ss-post__rubrika {
	background: #ffffff;
	border-radius: 6px;
	color: #0b0b0b;
	font-size: 12px;
	font-weight: 500;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	line-height: 1;
	padding: 7px 10px;
	position: absolute;
}

.ss-page .ss-post__telo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
}

.ss-page .ss-post__data {
	color: var(--ss-muted, #6b6b6b);
	display: none;
	font-size: 13px;
	margin: 0;
}

.ss-page .ss-post__zag {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(18px, 1.5vw, 21px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
	text-transform: none;
	text-wrap: balance;
}

/* Ссылка заголовка растянута на всю карточку: кликается вся. */
.ss-page .ss-post__ssylka {
	color: inherit;
	text-decoration: none;
}

.ss-page .ss-post__ssylka::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 2;
}

.ss-page .ss-post__ssylka:focus-visible {
	outline: none;
}

.ss-page .ss-post:has(.ss-post__ssylka:focus-visible) {
	outline: 2px solid var(--ss-accent);
	outline-offset: 3px;
}

.ss-page .ss-post__otryvok {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #555555;
	display: -webkit-box;
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	overflow: hidden;
}

/* Тёмная полоса «Читать» с просмотрами — как была в Elementor:
   градиент от почти чёрного к тёмно-зелёному. */
.ss-page .ss-post__niz {
	align-items: center;
	background: linear-gradient(90deg, #191919, #072a1a);
	color: #ffffff;
	display: flex;
	font-size: 15px;
	gap: 12px;
	justify-content: space-between;
	margin-block-start: auto;
	min-block-size: 48px;
	padding: 10px 20px;
}

.ss-page .ss-post__chitat,
.ss-page .ss-post__prosmotry {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

.ss-page .ss-post__strelka {
	color: var(--ss-accent);
	transition: transform 0.25s ease;
}

.ss-page .ss-post__prosmotry {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

@media (hover: hover) {
	.ss-page .ss-post:hover {
		transform: translateY(-3px);
	}

	.ss-page .ss-post:hover .ss-post__kartinka {
		transform: scale(1.04);
	}

	.ss-page .ss-post:hover .ss-post__strelka {
		transform: translateX(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ss-page .ss-post,
	.ss-page .ss-post__kartinka,
	.ss-page .ss-post__strelka {
		transition: none;
	}
}

/* ---------------------------------------------------- карточка: тёмная
   Вид выбран заказчиком 26 сентября 2026 из пяти: вся карточка тёмная
   с бирюзовым отливом, как тарифы; полоса «Читать» — её продолжение
   через тонкую черту. */

:is(.ss-page.ss-blog, .ss-page .ss-blog) .ss-post {
	background: radial-gradient(120% 90% at 0% 0%, rgba(37, 203, 194, 0.14), transparent 60%), #121414;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	color: var(--ss-dark-ink);
}

:is(.ss-page.ss-blog, .ss-page .ss-blog) .ss-post__oblozhka {
	border-radius: 12px;
	margin: 10px 10px 0;
}

:is(.ss-page.ss-blog, .ss-page .ss-blog) .ss-post__rubrika {
	background: rgba(11, 11, 11, 0.7);
	border: 1px solid var(--ss-accent);
	color: var(--ss-accent);
}

:is(.ss-page.ss-blog, .ss-page .ss-blog) .ss-post__otryvok {
	color: rgba(255, 255, 255, 0.7);
}

:is(.ss-page.ss-blog, .ss-page .ss-blog) .ss-post__niz {
	background: transparent;
	border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

@media (hover: hover) {
	:is(.ss-page.ss-blog, .ss-page .ss-blog) .ss-post:hover {
		border-color: rgba(37, 203, 194, 0.5);
		box-shadow: 0 16px 40px rgba(37, 203, 194, 0.12);
	}
}

/* ----------------------------------------------- приглашение и SEO-текст */

.ss-page .ss-blog__band {
	margin-block-start: clamp(40px, 5vw, 64px);
}

/* Строка приглашения длиннее, чем у работ («Аудит, стратегия
   и регулярная отчётность — от 30.000 ₽»): в 32 знака она вставала
   в четыре строки. */
.ss-page .ss-blog__band .ss-band__text {
	max-width: 44ch;
}

/* Колонки — долями, а не по содержимому: длинный заголовок
   («Поставим ИИ консультанта на ваш сайт») забирал ширину целиком,
   и текст сжимался в столбик под кнопку. */
@media (min-width: 1025px) {
	.ss-page .ss-blog__band {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
	}

	.ss-page .ss-blog__band .ss-band__zag {
		text-wrap: balance;
	}
}

/* SEO-текст сразу после ленты — оба светлые: без второго полного поля. */
.ss-page .ss-blog__lenta + .ss-seo {
	padding-block-start: 0;
}

/* ------------------------------------------------------------- навигация */

.ss-page .ss-blog__stranicy {
	margin-block-start: clamp(32px, 4vw, 48px);
}

.ss-page .ss-blog__stranicy .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.ss-page .ss-blog__stranicy .page-numbers {
	align-items: center;
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	color: var(--ss-ink);
	display: inline-flex;
	justify-content: center;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding-inline: 12px;
	text-decoration: none;
}

.ss-page .ss-blog__stranicy a.page-numbers:hover,
.ss-page .ss-blog__stranicy a.page-numbers:focus-visible {
	border-color: var(--ss-accent);
	color: var(--ss-ink);
}

.ss-page .ss-blog__stranicy .page-numbers.current {
	background: var(--ss-ink);
	border-color: var(--ss-ink);
	color: #ffffff;
}

.ss-page .ss-blog__stranicy .page-numbers.dots {
	border-color: transparent;
}