/*
 * home.css — оформление блоков главной страницы.
 *
 * Подключается только на главной (CLAUDE.md §3.7). Разметку блоков
 * даёт nn-home-builder, оформление — здесь: плагин отвечает за данные,
 * тема за внешний вид.
 *
 * Композиция снята с действующего сайта: одна лента карточек во всю
 * ширину контейнера, без боковой колонки.
 */

.nn-home {
	padding-top: var(--nn-space-6);
	padding-bottom: var(--nn-space-8);
}

/*
 * Слайдер первым блоком идёт вплотную к меню — так на действующем сайте:
 * карусель начинается ровно там, где кончается полоса меню, зазора нет.
 * Он во всю ширину колонки, и отступ сверху разрывал бы полотно.
 */
.nn-home > .nn-home-block--slider:first-child {
	margin-top: calc(-1 * var(--nn-space-6));
}

.nn-home-block + .nn-home-block {
	margin-top: var(--nn-space-7);
}

.nn-home-block__more {
	margin-top: var(--nn-space-5);
	margin-bottom: 0;
	text-align: center;
}

/* ---------------------------------------------------------------
 * Плитки разделов
 *
 * Крупная карточка входа в раздел: картинка, номер, заголовок,
 * описание, метки тем, кнопка. Композиция снята с карточек
 * «Лайфхаков» действующего сайта.
 *
 * Ширина ряда задаётся из админки. На планшете не больше двух,
 * на телефоне всегда одна: три карточки такого размера в ряд
 * на узком экране превращаются в столбики.
 *
 * Число колонок для планшета считает PHP и отдаёт отдельной
 * переменной: внутри repeat() математика вроде min() не работает,
 * там допустимо только целое число.
 * --------------------------------------------------------------- */

.nn-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nn-grid-gap);
}

@media (min-width: 600px) {

	.nn-tiles {
		grid-template-columns: repeat(var(--nn-tiles-columns-tablet, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.nn-tiles {
		grid-template-columns: repeat(var(--nn-tiles-columns, 3), minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------
 * Плитка раздела
 *
 * Оформление по макету заказчика: золотая рамка с переливом, картинка
 * с отступом в своей рамке, засечный заголовок, метки-таблетки
 * и золотая кнопка во всю ширину.
 *
 * Разметку менять не пришлось: номер, метки и стрелка в кнопке
 * в ней уже были. Все цвета — из золотой семьи токенов, ни одного
 * значения по месту: плитки тиражируются на мини-сайты.
 * --------------------------------------------------------------- */

/*
 * Рамка с переливом. Градиент нельзя положить в `border-color`,
 * поэтому кладём два фона: содержимое в padding-box, перелив
 * в border-box — рамка получается градиентной.
 */
/*
 * Плитки во всю ширину колонки, вровень со слайдером и баннером.
 * Как и у баннера, узость давали боковые поля контейнера.
 *
 * Снимаем поля только с 600px, где они и разрастаются до 45 точек.
 * На телефоне поля остаются: без них плитка с текстом упирается
 * в край экрана, а читать такое неудобно.
 */
@media (min-width: 600px) {

	.nn-home-block--tiles > .nn-container {
		padding-right: 0;
		padding-left: 0;
	}
}

.nn-tile {
	display: flex;
	flex-direction: column;
	border: 2px solid transparent;
	border-radius: var(--nn-radius-lg, 14px);
	background:
		linear-gradient(var(--nn-color-tile-bg), var(--nn-color-tile-bg)) padding-box,
		var(--nn-gradient-gold) border-box;
	transition: box-shadow var(--nn-transition), transform var(--nn-transition);
}

/*
 * Подсветка под курсором. Рамка у плитки градиентная и живёт в фоне,
 * менять ей цвет нечем — поэтому свечение даётся тенью. `focus-within`
 * рядом с `hover`: с клавиатуры плитка должна подсвечиваться так же.
 */
/*
 * Только свечение, без подъёма. Подъём выглядел живее, но кнопка стоит
 * у нижнего края плитки: при сдвиге вверх курсор у края выпадал из неё,
 * подсветка гасла, плитка возвращалась — и так по кругу. Получалось
 * мерцание ровно на кнопке.
 */
.nn-tile:hover,
.nn-tile:focus-within {
	box-shadow: var(--nn-glow-gold);
}

/* Картинка не во всю ширину, а с отступом и в своей тонкой рамке. */
.nn-tile__media {
	display: block;
	overflow: hidden;
	margin: var(--nn-space-3) var(--nn-space-3) 0;
	border: 1px solid var(--nn-color-gold-dim);
	border-radius: var(--nn-radius-md);
	line-height: 0;
}

.nn-tile__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * Тело растягивается, кнопка прижимается к низу: в ряду карточки
 * разной длины, и без этого кнопки встают на разной высоте.
 */
.nn-tile__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	padding: var(--nn-space-5) var(--nn-space-5) var(--nn-space-5);
}

.nn-tile__title {
	margin: 0 0 var(--nn-space-4);
	color: var(--nn-color-tile-title);
	font-family: var(--nn-font-tile-title);
	font-size: var(--nn-fs-2xl);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-h3);
}

.nn-tile__title a {
	color: inherit;
	text-decoration: none;
}

.nn-tile__title a:hover,
.nn-tile__title a:focus-visible {
	color: var(--nn-color-gold-bright);
}

/* Номер того же цвета, что заголовок: в макете они не различаются. */
.nn-tile__number {
	color: inherit;
}

.nn-tile__text {
	margin: 0;
	color: var(--nn-color-tile-text);
	font-size: var(--nn-fs-base);
	line-height: var(--nn-lh-base);
}

.nn-tile__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nn-space-2);
	margin: var(--nn-space-4) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Сброс `margin` обязателен. В base.css у обычных текстовых списков
 * задано `li + li { margin-top }`, и оно доставалось всем меткам,
 * кроме первой. В строке с растяжкой по высоте это давало первую
 * метку выше соседей на те же четыре точки — заметно, а причина
 * неочевидна. Отступы здесь даёт `gap`, margin не нужен.
 */
.nn-tile__tag {
	margin: 0;
	padding: var(--nn-space-2) var(--nn-space-3);
	border: 1px solid var(--nn-color-gold-dim);
	border-radius: var(--nn-radius-md);
	background-color: transparent;
	color: var(--nn-color-tile-text);
	font-size: var(--nn-fs-sm);
	line-height: 1.2;
}

/* Отступ сверху авто — он и прижимает кнопку к низу карточки. */
.nn-tile__action {
	margin: auto 0 0;
	padding-top: var(--nn-space-5);
}

/*
 * Кнопка во всю ширину плитки, золотой заливкой. Текст тёмный:
 * на золоте это единственный вариант, который читается.
 */
.nn-tile__action .nn-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nn-space-2);
	width: 100%;
	border: 0;
	border-radius: var(--nn-radius-md);
	background-color: transparent;
	background-image: var(--nn-gradient-gold);
	color: var(--nn-color-on-gold);
	font-size: var(--nn-fs-base);
	font-weight: var(--nn-fw-bold);
	text-decoration: none;
	transition: filter var(--nn-transition);
}

/*
 * При наведении градиент не подменяется плоским цветом, а просто
 * светлеет. Подмена мерцала: `background-image` не анимируется
 * и исчезал рывком, а `background-color` за ним проявлялся плавно —
 * между этим успевала мелькнуть прозрачная кнопка.
 */
.nn-tile__action .nn-btn:hover,
.nn-tile__action .nn-btn:focus-visible {
	filter: brightness(1.12);
}

/* ---------------------------------------------------------------
 * Полоска-баннер
 *
 * Картинка приходит из админки переменной, вписывание — `contain`
 * по умолчанию: у заказчика баннер это готовая картинка с надписями,
 * и обрезать её нельзя. Под фотографию с текстом поверх в настройках
 * переключается на `cover`.
 *
 * Высоты обе необязательные. Без них полоса растёт по тексту —
 * а у картинки без текста растить нечего, поэтому в админке про это
 * сказано прямо.
 * --------------------------------------------------------------- */

/*
 * Полоса во всю ширину колонки, вровень со слайдером над ней.
 * Слайдер выводится без контейнера, а баннер — внутри него,
 * и боковые поля контейнера делали полосу уже соседей на 90 точек.
 */
/*
 * Баннер идёт до краёв на любом экране, как слайдер над ним:
 * это картинка, а не текст, и поля ей ни к чему.
 */
.nn-home-block--banner > .nn-container {
	padding-right: 0;
	padding-left: 0;
}

.nn-banner {
	display: flex;
	align-items: center;
	/*
	 * Пропорции картинки, пока высота не задана: тогда полоса тянется
	 * по ширине колонки и остаётся целой на любом экране. Задали высоту —
	 * она отменяет пропорции, это осознанный выбор редактора.
	 */
	aspect-ratio: var(--nn-banner-ratio, auto);
	min-height: var(--nn-banner-height, 0px);
	padding: var(--nn-space-4) var(--nn-space-5);
	border-radius: var(--nn-radius-card);
	background-color: var(--nn-color-surface);
	background-image: var(--nn-banner-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: var(--nn-banner-fit, contain);
	color: var(--nn-color-text);
	text-decoration: none;
}

/*
 * Полоса-ссылка: подсвечивается целиком, потому что нажимается целиком.
 * Обводка фокуса — общая для проекта, здесь только смещение, иначе
 * она сливается с краем картинки.
 */
a.nn-banner:hover,
a.nn-banner:focus-visible {
	background-color: var(--nn-color-surface-2);
}

a.nn-banner:focus-visible {
	outline-offset: 2px;
}

.nn-banner__body {
	max-width: 650px;
}

.nn-banner__title {
	margin: 0;
	font-family: var(--nn-font-heading);
	font-size: var(--nn-fs-xl);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-tight);
}

.nn-banner__text {
	margin: var(--nn-space-2) 0 0;
	color: var(--nn-color-text-muted);
	font-size: var(--nn-fs-sm);
	line-height: var(--nn-lh-base);
}

/*
 * Текст поверх картинки читается только с подложкой. Ставится она
 * лишь когда есть и картинка, и текст: у чистой картинки затемнять
 * нечего, у чистого текста фон и так ровный.
 */
.nn-banner--image .nn-banner__body {
	padding: var(--nn-space-3) var(--nn-space-4);
	border-radius: var(--nn-radius-md);
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
}

.nn-banner--image .nn-banner__text {
	color: inherit;
}

@media (max-width: 599px) {

	.nn-banner {
		min-height: var(--nn-banner-height-mobile, var(--nn-banner-height, 0px));
		padding: var(--nn-space-3) var(--nn-space-4);
	}


	.nn-banner__title {
		font-size: var(--nn-fs-lg);
	}
}

/* ---------------------------------------------------------------
 * Промо-блок
 *
 * На телефоне картинка над текстом, от планшета — рядом.
 * --------------------------------------------------------------- */

.nn-promo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nn-space-5);
	align-items: center;
	padding: var(--nn-space-6) var(--nn-space-5);
	border-radius: var(--nn-radius-card);
	background-color: var(--nn-color-surface);
}

@media (min-width: 600px) {

	.nn-promo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Без картинки колонка одна — иначе текст жмётся в половину
	   ширины рядом с пустотой. */
	.nn-promo--no-image {
		grid-template-columns: 1fr;
	}
}

.nn-promo__media {
	overflow: hidden;
	border-radius: var(--nn-radius-card);
	background-color: var(--nn-color-surface-2);
}

.nn-promo__media img {
	width: 100%;
	height: auto;
}

.nn-promo__title {
	margin-bottom: var(--nn-space-3);
}

.nn-promo__text {
	margin-bottom: var(--nn-space-5);
	color: var(--nn-color-text-muted);
}

.nn-promo__body > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Слайдер главной

   Повторяет верхний блок действующего сайта. Значения сняты замером:
   высота 400px во всю ширину колонки (без боковых полей контейнера),
   затемнение снизу linear-gradient(rgba(13,13,13,0), rgba(13,13,13,.8)),
   подпись шириной 80% в левом нижнем углу, плашка раздела на цвете
   маркера, заголовок 32px/700, анонс 15.2px.
   --------------------------------------------------------------------------- */

.nn-home-block--slider {
	margin-bottom: 0;
}

/*
 * Под слайдером отступ меньше обычного межблочного: на действующем сайте
 * лента начинается через 30px после карусели. Берём ближайший токен — 32px.
 */
.nn-home-block--slider + .nn-home-block {
	margin-top: var(--nn-space-6);
}

.nn-slider {
	position: relative;
}

.nn-slider__viewport {
	overflow: hidden;
}

.nn-slider__track {
	display: flex;
	/* 300 мс — скорость перелистывания действующего сайта. */
	transition: transform 0.3s ease;
}

.nn-slider__slide {
	position: relative;
	flex: 0 0 100%;
	height: 400px;
}

.nn-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Слайд без подписи, но с адресом: ссылкой служит вся картинка. */
.nn-slider__link {
	display: block;
	height: 100%;
}

.nn-slider__body {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80%;
	/*
	 * Проценты, а не токены: на действующем сайте отступы подписи заданы
	 * долями ширины слайда — 11% сверху, 10% по бокам, 6% снизу — и потому
	 * держат пропорцию при любой ширине колонки.
	 */
	padding: 11% 10% 6%;
	background-image: linear-gradient(rgba(13, 13, 13, 0), rgba(13, 13, 13, 0.8));
}

.nn-slider__category a {
	display: inline-block;
	padding: 0.21rem 0.98rem;
	border-radius: 3px;
	background-color: var(--nn-color-marker-dim);
	color: var(--nn-color-footer-text);
	font-size: 0.7rem;
}

.nn-slider__category a:hover {
	background-color: var(--nn-color-marker);
	text-decoration: none;
}

.nn-slider__title {
	margin: var(--nn-space-3) 0 0;
	font-family: var(--nn-font-heading);
	font-size: var(--nn-fs-2xl);
	font-weight: var(--nn-fw-bold);
	line-height: var(--nn-lh-heading);
}

.nn-slider__title a {
	color: var(--nn-color-footer-text);
}

.nn-slider__title a:hover {
	color: var(--nn-color-accent);
	text-decoration: none;
}

.nn-slider__excerpt {
	margin: var(--nn-space-2) 0 0;
	overflow: hidden;
	color: var(--nn-color-footer-text);
	font-size: 0.95rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Стрелки и точки */

.nn-slider__arrow {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 0;
	background-color: transparent;
	color: var(--nn-color-footer-text);
	cursor: pointer;
}

.nn-slider__arrow::before {
	display: block;
	font-size: 28px;
	line-height: 1;
	opacity: 0.7;
}

.nn-slider__arrow:hover::before,
.nn-slider__arrow:focus-visible::before {
	opacity: 1;
}

.nn-slider__arrow--prev {
	left: var(--nn-space-4);
}

.nn-slider__arrow--prev::before {
	content: "\2039";
}

.nn-slider__arrow--next {
	right: var(--nn-space-4);
}

.nn-slider__arrow--next::before {
	content: "\203A";
}

.nn-slider__dots {
	position: absolute;
	bottom: var(--nn-space-3);
	left: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	gap: var(--nn-space-2);
}

.nn-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--nn-radius-pill);
	background-color: var(--nn-color-footer-text);
	opacity: 0.45;
	cursor: pointer;
}

.nn-slider__dot.is-active {
	background-color: var(--nn-color-marker);
	opacity: 1;
}

@media (max-width: 599px) {

	.nn-slider__slide {
		height: 260px;
	}

	.nn-slider__body {
		width: 100%;
		padding: var(--nn-space-6) var(--nn-space-4) var(--nn-space-5);
	}

	.nn-slider__title {
		font-size: var(--nn-fs-lg);
	}
}

/*
 * Системная настройка «меньше движения»: автолистание скрипт и так
 * не включает, здесь снимается и анимация перелистывания вручную.
 */
@media (prefers-reduced-motion: reduce) {

	.nn-slider__track {
		transition: none;
	}
}