/* ==========================================================================
   news.css — лента новостей /news/ и /news/page/{n}/.

   ИСТОЧНИК: html_flat/starco_news_concept.html, вариант «compact hero»
   из конца его <style> (в концепте он перекрывает обычный .hero, здесь
   слит в одно правило — перекрывать нечего).

   ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ:

   .lead-story — большая карточка-«главная новость» справа от заголовка.
   Признака «главная» в s_blog нет, а назначать её первой строкой выборки
   значит менять смысл при каждой публикации. Роль акцента играет первая
   плитка сетки (.news-card:first-child), как в мобильном варианте концепта.

   .archive-panel / .archive-meta / .archive-note — панель «125 страниц
   архива» рядом с пагинацией. Это редакторский текст под конкретную
   цифру, в админке ему места нет; от блока оставлена только подпись
   .pagination-title над номерами страниц.

   .page / .page.current / .page.ellipsis — пагинация концепта. Номера
   рисует общий pagination.tpl, а его пилюли уже описаны в base.css
   (.pagination .page-num). Концепт расходится с base только формой
   (квадрат 48px с radius 14 против пилюли) и цветом активного номера
   (красный против navy) — это принятая при сборке base нормализация,
   и ломать её ради одной страницы не станем.

   .concert-cta — сквозная полоса «35 лет вместе» с внешней ссылкой на
   билеты. Она есть почти во всех концептах, то есть это хвост подвала
   или отдельная группа блоков, а не часть новостей; см. отчёт фазы 10.
   ========================================================================== */

/* ------------------------------------------------------- шапка раздела -- */
/* .page-head — общий контейнер тёмной шапки во всех шаблонах темы. В
   base.css его нет намеренно: фон, отступы и «призрак» отличаются на
   каждой странице (см. шапку base.css про .hero). Хлебные крошки в
   base.css уже белые — они рассчитаны ровно на этот тёмный фон. */
.page-head {
	position: relative;
	overflow: hidden;
	padding: 150px 0 72px;
	color: #fff;
	background:
		radial-gradient(circle at 84% 16%, rgba(230, 192, 76, .12), transparent 18%),
		radial-gradient(circle at 14% 76%, rgba(217, 8, 18, .11), transparent 22%),
		linear-gradient(128deg, var(--navy2), var(--navy) 52%, #0a518f);
}

/* Косая штриховка поверх градиента */
.page-head:before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, transparent 0 88px, rgba(255, 255, 255, .025) 89px 90px);
}

/* «Призрак» раздела в правом нижнем углу */
.page-head:after {
	content: "NEWS";
	position: absolute;
	right: 2%;
	bottom: -52px;
	font-size: clamp(150px, 18vw, 290px);
	font-weight: 950;
	line-height: .76;
	letter-spacing: -.11em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .05);
	opacity: .8;
	pointer-events: none;
}

/* z-index обязателен: иначе штриховка :before накрывает крошки, и по
   ссылкам в них нельзя кликнуть. */
.page-head .container { position: relative; z-index: 2; }
.hero-copy { max-width: 940px; }

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cce6ff;
}
.hero-kicker strong {
	background: var(--red);
	padding: 8px 12px;
	border-radius: 999px;
	color: #fff;
}

.page-head h1 {
	margin: 24px 0;
	font-size: clamp(64px, 8vw, 120px);
	line-height: .76;
	letter-spacing: -.075em;
	font-weight: 950;
	text-transform: uppercase;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Вводный текст страницы — HTML из TinyMCE, поэтому цвет и размер
   задаются потомкам, а не самому контейнеру. */
.page-intro {
	max-width: 720px;
	font-size: 18px;
	line-height: 1.68;
	color: rgba(255, 255, 255, .74);
}
.page-intro p { margin: 0 0 12px; }
.page-intro p:last-child { margin-bottom: 0; }
.page-intro a { text-decoration: underline; }

/* ------------------------------------------------------------- полоса -- */
.news-section {
	padding: 52px 0 105px;
	background: linear-gradient(180deg, #fff, #f7f9fb);
}

/* ------------------------------------------------------------- фильтр -- */
/* Класс активного чипа — .is-active: его вешает design/t1/js/filter.js
   (в концепте был .active, но общий модуль пишет по своей конвенции). */
.filters {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.filter-btn {
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--blue);
	padding: 11px 16px;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
	transition: .2s;
}
.filter-btn:hover { border-color: var(--blue); }
.filter-btn.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* --------------------------------------------------------------- сетка -- */
/* grid-auto-rows, а не grid-template-rows из концепта: там было ровно
   четыре карточки, здесь их до двенадцати (BlogView::PER_PAGE), и
   фиксированный список строк оставил бы остальные без высоты. */
.news-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr .75fr;
	grid-auto-rows: 330px;
	gap: 14px;
}

.news-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 25px;
	background: var(--navy);
	color: #fff;
	isolation: isolate;
	transition: .3s;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* Первая плитка — акцент: две строки по высоте и крупный заголовок. */
.news-card:first-child { grid-row: span 2; }
.news-card:first-child .card-body h2 { font-size: 34px; }

/* filter.js прячет карточки атрибутом hidden */
.news-card[hidden] { display: none; }

/* Обложка и затемнение уезжают под содержимое: .news-card изолирован,
   поэтому отрицательный z-index не проваливает их под саму карточку. */
.card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .5s;
	z-index: -2;
}
.news-card:hover .card-image { transform: scale(1.035); }

.card-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 29, 61, .03) 28%, rgba(4, 29, 61, .92) 100%);
	z-index: -1;
}

.card-body { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.card-date {
	display: block;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #cce6ff;
}
.card-body h2 {
	margin: 8px 0 9px;
	font-size: 24px;
	line-height: 1.04;
	letter-spacing: -.035em;
	text-wrap: balance;
	word-break: normal;
	hyphens: none;
}
.card-text {
	display: block;
	margin: 0;
	max-width: 600px;
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .66);
}

.card-badge {
	position: absolute;
	left: 18px;
	top: 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .93);
	color: var(--navy);
	padding: 8px 11px;
	font-size: 9px;
	font-weight: 950;
	letter-spacing: .11em;
	text-transform: uppercase;
}

/* ------------------------------------------------------ счётчик и архив -- */
.news-status {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	margin-top: 22px;
	font-size: 12px;
	color: var(--muted);
}

/* Отрицательный нижний отступ гасит часть margin-top:48px, который
   .pagination получает в base.css: подпись должна стоять вплотную к
   номерам, а не за полсотни пикселей от них. */
.pagination-title {
	margin: 40px 0 -34px;
	font-size: 14px;
	color: var(--muted);
}

/* --------------------------------------------------------- брейкпоинты -- */
@media (max-width: 1180px) {
	.news-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(300px, auto); }
	.news-card:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 420px; }
}

@media (max-width: 820px) {
	.page-head { padding: 132px 0 56px; }
	.page-head h1 { font-size: 72px; }
	.news-section { padding: 38px 0 78px; }
	.news-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.news-card, .news-card:first-child { grid-column: auto; min-height: 370px; }
}

@media (max-width: 560px) {
	.page-head { padding: 122px 0 48px; }
	.page-head h1 { font-size: 58px; }
	.page-intro { font-size: 16px; }
	.news-card, .news-card:first-child { min-height: 350px; }
	.card-body h2, .news-card:first-child .card-body h2 { font-size: 24px; }
	.news-status { flex-direction: column; align-items: flex-start; }
}