/* News Articles Module — frontend styles */

/*
 * ВАЖНО: значения по умолчанию для всех настраиваемых токенов (цвета, размеры,
 * шрифты) объявлены здесь, на уровне :root, а НЕ на селекторе .na-module.
 * Настоящие значения из админки подключаются отдельным инлайн-блоком `:root{...}`
 * ПОСЛЕ этого файла (см. NA_Frontend::get_dynamic_css()) и благодаря одинаковой
 * специфичности (:root) и более позднему порядку в каскаде — переопределяют эти
 * значения. Если бы токены были объявлены прямо на .na-module, собственное
 * (пусть даже запасное) значение на самом элементе всегда побеждало бы
 * унаследованное с :root, и никакие настройки шрифтов/цветов не применялись бы.
 */
:root {
	--na-bg: #1c1c1c;
	--na-card-overlay: #000000;
	--na-text: #ffffff;
	--na-accent: #f5b301;
	--na-accent-text: #1c1c1c;
	--na-badge-color: #d99a2b;
	--na-radius: 14px;
	--na-card-height: 320px;
	--na-gap: 20px;
	--na-body-font: inherit;
	--na-max-width: none;
	--na-card-min-width: 340px;
	--na-card-ratio: 2 / 1;
	/* Прозрачность фото на карточках: 1 = полностью непрозрачно, 0 = полностью прозрачно.
	   Меняется одним ползунком в настройках и применяется сразу ко всем статьям. */
	--na-image-opacity: 1;

	/* Шрифт / размер / насыщенность для каждой отдельной надписи модуля. */
	--na-intro-title-font: inherit;
	--na-intro-title-size: 28px;
	--na-intro-title-weight: 700;

	--na-intro-subtitle-font: inherit;
	--na-intro-subtitle-size: 16px;
	--na-intro-subtitle-weight: 400;

	--na-card-title-font: inherit;
	--na-card-title-size: 22px;
	--na-card-title-weight: 700;

	--na-badge-font: inherit;
	--na-badge-size: 13px;
	--na-badge-weight: 700;

	--na-excerpt-font: inherit;
	--na-excerpt-size: 14px;
	--na-excerpt-weight: 400;

	--na-readmore-font: inherit;
	--na-readmore-size: 14px;
	--na-readmore-weight: 600;

	--na-cta-button-font: inherit;
	--na-cta-button-size: 22px;
	--na-cta-button-weight: 700;
}

.na-module {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--na-max-width);
	margin-left: auto;
	margin-right: auto;
	background: var(--na-bg);
	color: var(--na-text);
	padding: 40px clamp(16px, 4vw, 48px);
	border-radius: calc(var(--na-radius) + 6px);
	font-family: var(--na-body-font);
}

.na-module * {
	box-sizing: border-box;
}

.na-intro {
	max-width: 1100px;
	margin: 0 auto 28px;
	text-align: center;
}

.na-intro-title {
	font-family: var(--na-intro-title-font);
	font-size: var(--na-intro-title-size);
	font-weight: var(--na-intro-title-weight);
	margin: 0 0 12px;
	color: var(--na-text);
}

.na-intro-subtitle {
	font-family: var(--na-intro-subtitle-font);
	font-size: var(--na-intro-subtitle-size);
	font-weight: var(--na-intro-subtitle-weight);
	line-height: 1.6;
	opacity: .85;
	margin: 0;
}

/* Grid layout */
.na-grid {
	display: grid;
	gap: var(--na-gap);
	grid-template-columns: repeat(1, 1fr);
}

.na-grid.na-columns-2 { grid-template-columns: repeat(2, 1fr); }
.na-grid.na-columns-3 { grid-template-columns: repeat(3, 1fr); }
.na-grid.na-columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.na-grid.na-columns-3,
	.na-grid.na-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.na-grid.na-columns-2,
	.na-grid.na-columns-3,
	.na-grid.na-columns-4 { grid-template-columns: 1fr; }
}

/* Авто-режим: количество колонок считается по минимальной ширине карточки (px) из настроек */
.na-grid.na-columns-mode-auto {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--na-card-min-width), 100%), 1fr));
}

/* Card */
.na-card {
	position: relative;
	display: block;
	border-radius: var(--na-radius);
	overflow: hidden;
	background: #333;
}

.na-card-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/*
 * Режим "фиксированная высота": карточка всегда занимает заданное количество
 * пикселей по вертикали независимо от ширины колонки.
 */
.na-card-size-fixed .na-card-grid,
.na-card-size-fixed .na-card-slider {
	min-height: var(--na-card-height);
}
.na-card-size-fixed .na-card-grid .na-card-link,
.na-card-size-fixed .na-card-slider .na-card-link {
	min-height: var(--na-card-height);
}

/*
 * Режим "по пропорции" (по умолчанию): высота карточки считается из её
 * реальной ширины по заданному соотношению сторон, поэтому карточка остаётся
 * широкой (не квадратной) при любом количестве колонок и любой ширине блока.
 */
.na-card-size-ratio .na-card-grid,
.na-card-size-ratio .na-card-slider {
	aspect-ratio: var(--na-card-ratio);
}
.na-card-size-ratio .na-card-grid .na-card-link,
.na-card-size-ratio .na-card-slider .na-card-link {
	height: 100%;
}

.na-card-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: var(--na-image-opacity);
	transition: transform .5s ease, filter .5s ease, opacity .3s ease;
}

.na-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, var(--na-card-overlay) 100%);
	opacity: .78;
}

.na-card-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.na-card-badge {
	font-family: var(--na-badge-font);
	font-size: var(--na-badge-size);
	font-weight: var(--na-badge-weight);
	text-transform: none;
	color: var(--na-badge-color);
}

.na-card-title {
	font-family: var(--na-card-title-font);
	font-weight: var(--na-card-title-weight);
	font-size: var(--na-card-title-size);
	line-height: 1.25;
	color: var(--na-text);
}

.na-card-excerpt {
	font-family: var(--na-excerpt-font);
	font-size: var(--na-excerpt-size);
	font-weight: var(--na-excerpt-weight);
	line-height: 1.5;
	opacity: .85;
	max-width: 60ch;
}

.na-card-cta {
	margin-top: 6px;
	font-family: var(--na-readmore-font);
	font-size: var(--na-readmore-size);
	font-weight: var(--na-readmore-weight);
	color: var(--na-accent);
}

/* Hover effects (default = zoom) */
.na-card-link:hover .na-card-media { transform: scale(1.06); }

.na-module.na-hover-lift .na-card { transition: transform .3s ease, box-shadow .3s ease; }
.na-module.na-hover-lift .na-card:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0,0,0,.35); }

.na-module.na-hover-fade .na-card-link:hover .na-card-overlay { opacity: .92; }

.na-module.na-hover-none .na-card-link:hover .na-card-media { transform: none; }

/* CTA card ("Все статьи") */
.na-cta-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--na-accent);
	color: var(--na-accent-text);
	text-decoration: none;
	border: 2px solid rgba(255,255,255,.25);
	transition: filter .25s ease, transform .25s ease;
}

.na-cta-card:hover {
	filter: brightness(1.05);
	transform: translateY(-2px);
}

.na-cta-inner {
	font-family: var(--na-cta-button-font);
	font-size: var(--na-cta-button-size);
	font-weight: var(--na-cta-button-weight);
	text-align: center;
	padding: 0 20px;
}

/* List layout */
.na-layout-list .na-grid { grid-template-columns: 1fr !important; }

.na-card-list {
	min-height: 0;
}

.na-card-list .na-card-link {
	display: grid;
	grid-template-columns: 220px 1fr;
	min-height: 0;
	background: rgba(255,255,255,.04);
	border-radius: var(--na-radius);
}

.na-card-list .na-card-media {
	position: relative;
	inset: auto;
	height: 100%;
	min-height: 150px;
	border-radius: var(--na-radius) 0 0 var(--na-radius);
}

.na-card-list .na-card-overlay { display: none; }

.na-card-list .na-card-content {
	position: relative;
	padding: 20px 24px;
}

@media (max-width: 640px) {
	.na-card-list .na-card-link { grid-template-columns: 1fr; }
	.na-card-list .na-card-media { border-radius: var(--na-radius) var(--na-radius) 0 0; min-height: 180px; }
}

.na-cta-card.na-card-list .na-cta-inner { padding: 22px; }

/* Slider layout */
.na-layout-slider .na-grid {
	display: block;
	position: relative;
}

.na-slider-track {
	display: flex;
	gap: var(--na-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.na-slider-track::-webkit-scrollbar { display: none; }

.na-layout-slider .na-card {
	flex: 0 0 clamp(240px, 30%, 340px);
	scroll-snap-align: start;
}

.na-slider-controls {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 14px;
}

.na-slider-prev,
.na-slider-next {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--na-accent);
	color: var(--na-accent-text);
	font-size: 16px;
	cursor: pointer;
}

/*
 * Style presets: пресеты меняют только декоративные детали (не переопределяют
 * сами цветовые токены), чтобы цвета, выбранные пользователем во вкладке
 * "Внешний вид", всегда оставались рабочими независимо от выбранного пресета.
 * Рекомендуемые цвета для каждого пресета подставляются в цветовые поля
 * автоматически через JS при выборе пресета (см. admin.js).
 */
.na-style-light .na-intro-subtitle { opacity: .7; }
.na-style-light .na-card-list .na-card-link { background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,.08); }

.na-style-minimal .na-card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, var(--na-card-overlay) 100%); opacity: .55; }
.na-style-minimal .na-cta-card { border: 2px solid var(--na-accent); background: transparent; color: var(--na-text); }

.na-style-colorful .na-card-badge {
	background: rgba(0,0,0,.35);
	padding: 3px 10px;
	border-radius: 20px;
	display: inline-block;
	width: fit-content;
}
.na-style-colorful .na-cta-card { background: linear-gradient(135deg, var(--na-accent), color-mix(in srgb, var(--na-accent) 60%, #fff)); }

.na-empty {
	color: inherit;
	opacity: .7;
	text-align: center;
	padding: 30px;
}