/* assets/css/front-page.css */

/* Общая структура заголовков секций (промокоды / карточки предложений) —
   отступы и фон идентичны, различаются только цвета. */
.ax-heading {
	margin-top: 20px;
	margin-bottom: 10px;
}

/* Заголовок и подзаголовок вместе, в одном блоке фона — ограничен шириной
   макета страницы (1120px через родительский .site-container), а не всей
   шириной экрана. */
.ax-heading__band {
	position: relative; /* якорь для ссылки на Telegram справа */
	background: #f2f2f2;
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
}

.ax-heading__title {
	margin: 5px 0;
	font-size: 16px; /* без этого h1/h2 использует собственный крупный шрифт браузера по умолчанию для расчёта высоты строки, даже когда видимый текст внутри мельче через дочерние span */
	line-height: 1.2;
	text-align: center;
}

.ax-heading__label,
.ax-heading__date {
	font-size: 16px;
	font-weight: 600;
}
.ax-heading__date {
	margin-left: 6px; /* отступ между двумя частями заголовка — не указан явно */
}

/* white-space: pre-line — перенос строки там, где в переводимой строке
   стоит настоящий символ новой строки, без внедрения HTML-тегов в текст. */
.ax-heading__subtitle {
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 400;
	color: #000;
	white-space: pre-line;
}

/* Промокоды: rgb(0,91,160) на заголовке, rgb(1,115,200) на дате —
   тёмный/светлый парный оттенок синего, как в цветах категории меню.
   Ссылка в подзаголовке цвет не переопределяет — используется общий
   цвет ссылок сайта (см. style.css). */
.ax-heading--promo .ax-heading__label { color: rgb(0, 91, 160); }
.ax-heading--promo .ax-heading__date { color: rgb(1, 115, 200); }

/* Карточки предложений: rgb(59,114,0)/rgb(69,133,0) — та же пара
   тёмный/светлый зелёный, что и в остальном сайте (#3b7200/#458500). */
.ax-heading--offer .ax-heading__label { color: rgb(59, 114, 0); }
.ax-heading--offer .ax-heading__date { color: rgb(69, 133, 0); }

/* Витрина блога: фирменный зелёный ("Aherbia green", #458500) —
   заголовок цветом, фон — тот же оттенок почти прозрачным тоном (6%). */
.ax-heading--blog .ax-heading__band { background: rgba(69, 133, 0, 0.06); }
.ax-heading--blog .ax-heading__label { color: #458500; }

/* Ссылка на Telegram-канал: на широком экране — справа в полосе заголовка
   (не участвует в раскладке, центр заголовка не сдвигается); на узком —
   тоже справа, но меньше, с полями у полосы, чтобы не налезать на текст. */
.ax-heading__tg {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.ax-tg {
	display: block;
	line-height: 0;
	border-radius: 50%;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.ax-tg:hover,
.ax-tg:focus-visible {
	transform: scale(1.08);
	opacity: 0.9;
}
.ax-tg__icon {
	display: block;
	width: 36px;
	height: 36px;
}

@media (max-width: 800px) {
	/* Значок остаётся справа; симметричные поля защищают центрированный
	   текст от наложения на него. */
	.ax-heading--promo .ax-heading__band,
	.ax-heading--offer .ax-heading__band {
		padding-left: 40px;
		padding-right: 40px;
	}
	.ax-heading__tg {
		right: 6px;
	}
	.ax-tg__icon {
		width: 28px;
		height: 28px;
	}
}