/* Блог Z&S — листинг (/blog/) и страница статьи (single).
 * Тёмно-синий hero, чипы-фильтры рубрик, грид карточек 3-в-ряд (по макету).
 * На дизайн-токенах сайта (tokens.css).
 */

.zs-blog { background: var(--zs-bg); }

/* ── Hero (тёмно-синий, по макету) ── */
.zs-blog__hero {
	background: linear-gradient(135deg, #1B2A6B 0%, #28367F 60%, #2A6FDB 140%);
	color: var(--zs-text-inv);
	padding: var(--s-8) 0 var(--s-7);
}
.zs-blog__hero-eyebrow {
	font-family: var(--f-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--f-track-extra);
	text-transform: uppercase;
	color: var(--zs-text-inv-2);
	margin-bottom: var(--s-3);
}
.zs-blog__hero-title {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.06;
	margin: 0 0 var(--s-4);
}
.zs-blog__hero-sub {
	font-family: var(--f-body);
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.5;
	color: var(--zs-text-inv-2);
	max-width: 560px;
	margin: 0;
}

/* ── Тело ── */
.zs-blog__body { padding: var(--s-7) 0 var(--s-9); }

/* ── Чипы-фильтры рубрик ── */
.zs-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-6);
}
.zs-blog__chip {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--zs-text-2);
	background: var(--zs-surface);
	border: 1px solid var(--zs-line-2);
	border-radius: 999px;
	padding: 9px 18px;
	text-decoration: none;
	transition: all .15s ease;
}
.zs-blog__chip:hover { border-color: var(--zs-accent); color: var(--zs-accent); }
.zs-blog__chip.is-active {
	background: #1B2A6B;
	border-color: #1B2A6B;
	color: var(--zs-text-inv);
}

.zs-blog__sec-title {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--zs-text);
	margin: 0 0 var(--s-5);
}

/* ── Грид карточек ── */
.zs-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
}

.zs-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--zs-surface);
	border: 1px solid var(--zs-line);
	border-radius: var(--zs-r-md);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
.zs-blog-card:hover { box-shadow: var(--zs-shadow-2); transform: translateY(-2px); }

.zs-blog-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--zs-accent-soft);
	position: relative;
	overflow: hidden;
}
.zs-blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zs-blog-card__ph {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--zs-text-3);
	font-family: var(--f-body);
	font-size: 13px;
}

.zs-blog-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.zs-blog-card__tag {
	align-self: flex-start;
	font-family: var(--f-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--f-track-wide);
	text-transform: uppercase;
	color: var(--zs-accent);
	background: var(--zs-accent-soft);
	border-radius: var(--zs-r-sm);
	padding: 4px 10px;
}
.zs-blog-card__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	margin: 0;
}
.zs-blog-card__title a { color: var(--zs-text); text-decoration: none; }
.zs-blog-card__title a:hover { color: var(--zs-accent); }
.zs-blog-card__excerpt {
	font-family: var(--f-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--zs-text-2);
	margin: 0;
	flex: 1;
}
.zs-blog-card__more {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--zs-accent);
	text-decoration: none;
}
.zs-blog-card__more:hover { color: var(--zs-accent-hov); }

/* ── Пустое состояние ── */
.zs-blog__empty {
	text-align: center;
	padding: var(--s-9) var(--s-5);
	background: var(--zs-surface-2);
	border-radius: var(--zs-r-md);
}
.zs-blog__empty-title { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--zs-text); margin: 0 0 var(--s-2); }
.zs-blog__empty-sub { font-family: var(--f-body); font-size: 15px; color: var(--zs-text-2); max-width: 440px; margin: 0 auto; line-height: 1.5; }

/* ── Пагинация ── */
.zs-blog__pagination { margin-top: var(--s-7); }
.zs-blog__pagination ul { list-style: none; display: flex; gap: var(--s-2); padding: 0; margin: 0; justify-content: center; }
.zs-blog__pagination a, .zs-blog__pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	font-family: var(--f-body); font-weight: 600; font-size: 14px;
	border: 1px solid var(--zs-line-2); border-radius: var(--zs-r-sm);
	color: var(--zs-text-2); text-decoration: none;
}
.zs-blog__pagination a:hover { border-color: var(--zs-accent); color: var(--zs-accent); }
.zs-blog__pagination .current { background: #1B2A6B; border-color: #1B2A6B; color: var(--zs-text-inv); }

/* ── Статья (single) ── */
.zs-article__wrap { max-width: 760px; }
.zs-article__main { padding: var(--s-6) 0 var(--s-7); }
.zs-article__head { margin-bottom: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.zs-article__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; color: var(--zs-text); margin: 0; }
.zs-article__date { font-family: var(--f-body); font-size: 13px; color: var(--zs-text-3); }
.zs-article__cover { margin: 0 0 var(--s-6); border-radius: var(--zs-r-md); overflow: hidden; }
.zs-article__cover img { width: 100%; height: auto; display: block; }
.zs-article__content { font-family: var(--f-body); font-size: 17px; line-height: 1.7; color: var(--zs-text); }
.zs-article__content h2 { font-family: var(--f-display); font-weight: 700; font-size: 26px; margin: var(--s-7) 0 var(--s-3); }
.zs-article__content h3 { font-family: var(--f-display); font-weight: 700; font-size: 21px; margin: var(--s-6) 0 var(--s-3); }
.zs-article__content p { margin: 0 0 var(--s-4); }
.zs-article__content img { max-width: 100%; height: auto; border-radius: var(--zs-r-sm); }
.zs-article__cta { margin-top: var(--s-6); }
.zs-article__back { padding-bottom: var(--s-8); }
.zs-article__back a { font-family: var(--f-body); font-weight: 600; color: var(--zs-accent); text-decoration: none; }

/* ── Мобильная ── */
@media (max-width: 900px) { .zs-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.zs-blog__grid { grid-template-columns: 1fr; }
	.zs-blog__hero { padding: var(--s-7) 0 var(--s-6); }
	.zs-article__content { font-size: 16px; }
}