/* ==========================================================================
   Feeds — стили шаблона страницы feeds
   ========================================================================== */

/* Шрифты: Oswald, Roboto, Roboto Condensed, Roboto Mono, Roboto Slab, Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&display=swap');

/* --------------------------------------------------------------------------
   Переменные
   -------------------------------------------------------------------------- */
:root {
	--font-oswald: 'Oswald', sans-serif;
	--font-roboto: 'Roboto', sans-serif;
	--font-roboto-condensed: 'Roboto Condensed', sans-serif;
	--font-roboto-mono: 'Roboto Mono', monospace;
	--font-roboto-slab: 'Roboto Slab', serif;
	--font-inter: 'Inter', sans-serif;

	/* Цвета */
	--bg-main: #1A1A2A;
	--accent-main: #7B61FF;

	/* Переопределяем базовые значения Bootstrap */
	--bs-body-font-family: var(--font-roboto);
	--bs-font-monospace: var(--font-roboto-mono);
	--bs-body-bg: var(--bg-main);
	--bs-body-color: #fff;
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */
body.feeds-page {
	font-family: var(--font-roboto);
	background-color: var(--bg-main);
	color: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-oswald);
}

/* --------------------------------------------------------------------------
   Утилиты шрифтов
   -------------------------------------------------------------------------- */
.ff-oswald           { font-family: var(--font-oswald) !important; }
.ff-roboto           { font-family: var(--font-roboto) !important; }
.ff-roboto-condensed { font-family: var(--font-roboto-condensed) !important; }
.ff-roboto-mono      { font-family: var(--font-roboto-mono) !important; }
.ff-roboto-slab      { font-family: var(--font-roboto-slab) !important; }

/* --------------------------------------------------------------------------
   Верхняя полоса меню
   -------------------------------------------------------------------------- */
:root {
	--feeds-topbar-h: 48px;
}

/* Отступ сверху под админ-бар WP (для залогиненных) */
body.feeds-page {
	--feeds-adminbar-h: 0px;
}

body.feeds-page.admin-bar {
	--feeds-adminbar-h: 32px;
}

@media (max-width: 782px) {
	body.feeds-page.admin-bar {
		--feeds-adminbar-h: 46px;
	}
}

/* На <600px админ-бар WP не фиксированный и уезжает со страницей */
@media (max-width: 600px) {
	body.feeds-page.admin-bar {
		--feeds-adminbar-h: 0px;
	}
}

/* Меню прилипает к верху с начала прокрутки */
.feeds-topbar {
	position: sticky;
	top: var(--feeds-adminbar-h);
	z-index: 1030;
	height: var(--feeds-topbar-h);
	background-color: var(--bg-main); /* фон, чтобы контент не просвечивал под меню */
	transition: box-shadow 0.2s;
}

.feeds-topbar.is-fixed {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.feeds-topbar .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
}

/* Мобильное меню раскрывается поверх контента, полоса остаётся 48px */
@media (max-width: 991.98px) {
	.feeds-topbar .navbar-collapse {
		position: absolute;
		top: var(--feeds-topbar-h);
		left: 0;
		right: 0;
		padding: 0.5rem 1rem;
		background: var(--bs-body-bg);
	}
}

/* --------------------------------------------------------------------------
   Секции
   -------------------------------------------------------------------------- */

.site-main {}

/* --------------------------------------------------------------------------
   Блок 1 — Header
   -------------------------------------------------------------------------- */
.feeds-hero-section {
	background-color: rgba(20, 19, 32, 0.9);
	overflow-x: clip; /* Featuring шире контейнера — без горизонтального скролла */
}

.feeds-hero.container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 867px;
	padding: 32px 24px 0;
}

/* Header title: звёзды слева/справа + текст */
.feeds-hero__head {
	min-width: 360px;
	min-height: 144px;
}

.feeds-hero__stars {
	position: relative;
	width: 64px;
	max-width: 64px;
	height: 30px;
}

/* Картинки звёзд больше контейнера 64×30 — центрируем через -9999px
   по обеим осям, точная подгонка по макету — через --stars-x / --stars-y */
.feeds-hero__stars img {
	position: absolute;
	top: -9999px;
	bottom: -9999px;
	left: -9999px;
	right: -9999px;
	margin: auto;
	display: block;
	max-width: none;
	transform: translate(var(--stars-x, 0), var(--stars-y, 0));
	pointer-events: none;
	user-select: none;
}

.feeds-hero__stars--left img {
	width: 167px;
	height: 89px;
	--stars-x: -40px;
	--stars-y: 28px;
}

.feeds-hero__stars--right img {
	width: 184px;
	height: 93px;
	--stars-x: 64px;
	--stars-y: 0px;
}

.feeds-hero__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	text-align: center;
}

/* Текст 1 */
.feeds-hero__subtitle {
	margin: 0;
	font-family: var(--font-oswald);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	color: #fff;
}

.feeds-hero__accent {
	font-family: var(--font-oswald);
	font-weight: 700;
	color: var(--accent-main);
}

.feeds-hero__sep {
	font-family: var(--font-inter);
	font-weight: 700;
	color: var(--accent-main);
}

.feeds-hero__brand {
	font-family: var(--font-oswald);
	font-weight: 700;
	color: #CFC6FF; /* цвет не указан в ТЗ, взят примерно с макета */
}

/* Текст 2 */
.feeds-hero__title {
	margin: 0;
	font-family: var(--font-roboto);
	font-weight: 900;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	color: #fff;
}

/* Social links */
.feeds-social-band {
	padding: 16px;
	background-color: rgba(20, 19, 32, 0.9); /* @background-dark #141320, 90% */
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.feeds-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 659px;
	min-height: 90px;
	margin: 0 auto;
	padding: 24px 32px;
	border: 5px solid var(--accent-main, #7B61FF);
}

.feeds-social__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 12px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-family: var(--font-roboto);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s, box-shadow 0.2s;
}

/* Размеры кнопок по макету */
.feeds-social__btn--vk,
.feeds-social__btn--tg,
.feeds-social__btn--fb,
.feeds-social__btn--ig,
.feeds-social__btn--x {
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
}

.feeds-social__btn--vk { width: 116px; gap: 10px; }
.feeds-social__btn--tg { width: 110px; gap: 4px; }
.feeds-social__btn--fb { width: 109px; gap: 4px; }
.feeds-social__btn--ig { width: 111px; gap: 4px; }
.feeds-social__btn--x  { width: 91px;  gap: 4px; }

.feeds-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 18px;
}

.feeds-social__btn:hover,
.feeds-social__btn.active {
	background: var(--accent-main, #7B61FF);
	color: #fff;
	box-shadow: 0 0 16px rgba(123, 97, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Липкий блок соцсетей
   Блок прилипает под меню, пока прокручивается Featuring, и останавливается,
   когда нижняя граница зоны (.feeds-sticky-zone) поднимается до него.
   Точка остановки — --social-stop px выше низа Featuring.
   -------------------------------------------------------------------------- */
.feeds-sticky-zone {
	--social-stop: 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: var(--social-stop); /* возвращаем место, «срезанное» у Featuring */
}

.feeds-social-sticky {
	position: sticky;
	top: calc(var(--feeds-adminbar-h) + var(--feeds-topbar-h));
	z-index: 3;
}

/* Featuring «укорачивает» зону на --social-stop, сам при этом не обрезается */
.feeds-featuring-row {
	margin-bottom: calc(var(--social-stop) * -1);
}

/* Featuring: арт + слоган */
.feeds-featuring {
	position: relative;
	height: 360px;
}

/* шире родителя (1110 > 867) — центрирование через -9999px */
.feeds-featuring__inner {
	position: absolute;
	top: 0;
	left: -9999px;
	right: -9999px;
	margin: 0 auto;
	width: 1110px;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.feeds-featuring__art {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 496px;
	height: 360px;
}

.feeds-featuring__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Slogan — поверх арта */
.feeds-slogan {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 249px;
	min-height: 156px;
	margin-left: -125px; /* наплыв на арт, десктоп */
	padding-top: 16px;
	padding-bottom: 16px;
	border-radius: 4px;
	background: var(--Black-op-20, #00000033);
}

.feeds-slogan__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 200px;
	height: 40px;
	padding: 8px 24px;
	background: #3CFCD5;
	font-family: var(--font-oswald);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: #0B0A22;
}

.feeds-slogan__text {
	display: flex;
	flex-direction: column;
	width: 249px;
	min-height: 80px;
	margin: 0;
	font-family: var(--font-roboto);
	font-weight: 700;
	font-size: 32px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	color: #0BFBCB;
}

.feeds-slogan__word-1 {
	letter-spacing: 0.05em; /* 5% */
}

.feeds-slogan__word-2 {
	letter-spacing: 0;
}

/* Планшет и мобильные: арт и слоган друг под другом, без наплыва */
@media (max-width: 991.98px) {
	.feeds-featuring {
		height: auto;
	}

	.feeds-featuring__inner {
		position: static;
		width: 100%;
		height: auto;
		flex-direction: column;
	}

	.feeds-featuring__art {
		width: 100%;
		max-width: 496px;
		height: auto;
		aspect-ratio: 496 / 360;
	}

	.feeds-slogan {
		margin-left: 0;
	}
}

/* --------------------------------------------------------------------------
   Блок 2
   -------------------------------------------------------------------------- */
.feeds-b2 {
	width: 100%;
	padding-top: 80px; /* отступ сверху по макету */
	background-color: #1A1A2A;
}

/* Заголовок «Промокоды и прочее: Новости | Сообщества» */
.feeds-b2-title {
	position: relative;
	z-index: 2; /* поверх .feeds-b2-body, который заходит под заголовок */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 1013px;
	min-height: 72px;
	margin: 0 auto;
	padding: 12px 32px;
	border-radius: 2px;
	border-style: solid;
	border-width: 0 1px;
	border-color: rgba(255, 255, 255, 0.08); /* цвет границ не указан в ТЗ */
	background:
		linear-gradient(0deg, var(--Grey-tint-950, #1D1B2D), var(--Grey-tint-950, #1D1B2D)),
		linear-gradient(0deg, var(--Grey-tint-Neutral-Blue-Neutral-Blue-10, #1A1A2A), var(--Grey-tint-Neutral-Blue-Neutral-Blue-10, #1A1A2A)),
		linear-gradient(0deg, var(--Grey-tint-Neutral-Blue-Neutral-Blue-05, #141320), var(--Grey-tint-Neutral-Blue-Neutral-Blue-05, #141320)),
		linear-gradient(0deg, var(--background-dark, #141320), var(--background-dark, #141320));
}

.feeds-b2-title__text {
	margin: 0;
	font-family: var(--font-roboto-slab);
	font-weight: 600;
	font-size: 36px;
	line-height: 48px;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	color: #fff;
}

/* Контейнер списка карточек */
.feeds-b2 {
	--feeds-b2-title-h: 72px;
}

.feeds-b2-body {
	margin: calc(var(--feeds-b2-title-h) / -2) 16px 0; /* заходит под заголовок на половину высоты */
	padding-top: calc(var(--feeds-b2-title-h) / 2);
	padding-bottom: 56px;
	background-color: #212035;
}

/* Заглушка под счётчик промокодов и «Обновлено» */
.feeds-b2-stats {
	width: 100%;
	height: 64px;
}

/* Контейнер под поиск и карточки: при 1014px ровно 3 карточки по 314px */
@media (min-width: 1200px) {
	.feeds-b2-container {
		max-width: 1014px;
	}
}

.feeds-b2-toolbar {
	padding-top: 32px;
}

.feeds-placeholder {
	min-height: 36px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.05);
}

/* Карточки */
.feeds-cards {
	margin-top: 32px; /* + 24px гаттер g-4 = 56px до карточек, как на макете */
}

.feeds-card {
	width: 100%;
	min-width: 260px;
	max-width: 330px;
	height: 400px;
	margin: 0 auto;
	background: #845CFF;
}

@media (max-width: 767.98px) {
	.feeds-b2 {
		--feeds-b2-title-h: 56px; /* высота заголовка при шрифте 24/32 */
		padding-top: 48px;
	}

	.feeds-b2-title {
		padding: 12px 16px;
	}

	.feeds-b2-title__text {
		font-size: 24px;
		line-height: 32px;
	}
}

@media (max-width: 575.98px) {
	.feeds-card {
		min-width: 0; /* на совсем узких экранах не вылезать за край */
	}

	.feeds-hero.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.feeds-hero__head {
		min-width: 0;
	}

	.feeds-hero__title {
		font-size: 26px;
		line-height: 30px;
	}

	.feeds-social {
		padding: 16px;
	}
}

.section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.site-footer {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}