/* =====================================================================
   NCU: карусели новостей, акций и сотрудников
   Разметку выводит inc/ncu-carousel.php, логику — js/ncu-carousel.js
   ===================================================================== */

/* Старая обёртка <div class="nov-line"> со своей горизонтальной прокруткой
   больше не нужна — прокручивает сама карусель */
.nov-line:has(> .ncu-carousel),
.nov-line.ncu-has-carousel {
	max-width: none;
	overflow: visible;
}

.ncu-carousel {
	--ncu-gap: 16px;
	--ncu-per-view: 1.25;
	--ncu-accent: #363b85;
	--ncu-accent-2: #12bde8;
	--ncu-card-bg: #f5f5f5;

	position: relative;
	margin: 0 0 8px;
	container-type: inline-size;
	font-family: 'Montserrat', sans-serif;
}

/* ---------- Лента ---------- */
.ncu-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* место под тень карточки при наведении */
	padding: 4px 2px 12px;
	margin: -4px -2px -12px;
	scroll-padding-inline: 2px;
	outline: none;
}

.ncu-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.ncu-carousel__viewport:focus-visible {
	box-shadow: 0 0 0 2px var(--ncu-accent-2);
	border-radius: 4px;
}

.ncu-carousel.is-dragging .ncu-carousel__viewport {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
}

.ncu-carousel.is-dragging a {
	pointer-events: none;
}

.ncu-carousel ul.ncu-carousel__track {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--ncu-per-view) - 1) * var(--ncu-gap)) / var(--ncu-per-view));
	gap: var(--ncu-gap);
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ncu-carousel li.ncu-carousel__slide {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
	float: none;
}

.ncu-carousel li.ncu-carousel__slide::before {
	display: none;
}

/* ---------- Карточка ---------- */
.ncu-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ncu-card-bg);
	transition: box-shadow .25s ease, transform .25s ease;
}

.ncu-card:hover {
	box-shadow: 0 8px 22px rgba(54, 59, 133, 0.16);
	transform: translateY(-2px);
}

.ncu-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e7ebf5;
}

.ncu-card .ncu-card__media img.ncu-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform .4s ease;
	-webkit-user-drag: none;
	user-select: none;
}

.ncu-card:hover .ncu-card__media img.ncu-card__img {
	transform: scale(1.04);
}

.ncu-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #3e5ba3 0%, #6c7fab 100%);
}

.ncu-card__placeholder img {
	width: 32%;
	max-width: 110px;
	height: auto;
	margin: 0;
	opacity: .9;
	-webkit-user-drag: none;
}

.ncu-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 14px 14px 16px;
}

.ncu-carousel h3.ncu-card__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	text-transform: uppercase;
	color: var(--ncu-accent);
	/* не больше 5 строк */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.ncu-carousel h3.ncu-card__title a {
	color: inherit;
	text-decoration: none;
}

.ncu-carousel h3.ncu-card__title a:hover,
.ncu-carousel h3.ncu-card__title a:focus {
	color: var(--ncu-accent-2);
}

.ncu-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

.ncu-card__date {
	font-size: 13px;
	font-weight: 600;
	color: #222;
}

.ncu-carousel a.ncu-card__more {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--ncu-accent-2);
	transition: background .2s ease, color .2s ease;
}

.ncu-carousel a.ncu-card__more:hover,
.ncu-carousel a.ncu-card__more:focus {
	background: var(--ncu-accent);
	color: #fff;
}

.ncu-carousel p.ncu-card__text {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.35;
	text-align: left;
	color: #333;
	min-height: 0;
}

/* --- Новости --- */
.ncu-carousel--news .ncu-card__media {
	aspect-ratio: 4 / 3;
}

.ncu-carousel--news h3.ncu-card__title {
	min-height: 5em; /* одинаковая высота, даты на одной линии */
}

/* --- Акции --- */
.ncu-carousel--akcii {
	--ncu-per-view: 1.15;
}

.ncu-carousel--akcii .ncu-card__media {
	aspect-ratio: 16 / 9;
}

.ncu-carousel--akcii h3.ncu-card__title {
	font-size: 15px;
	color: var(--ncu-accent-2);
}

.ncu-carousel--akcii h3.ncu-card__title a:hover,
.ncu-carousel--akcii h3.ncu-card__title a:focus {
	color: var(--ncu-accent);
}

/* --- Сотрудники --- */
.ncu-carousel--staff {
	--ncu-per-view: 1.5;
}

.ncu-carousel--staff .ncu-card__media {
	aspect-ratio: 2 / 3;
}

.ncu-carousel--staff .ncu-card__media img.ncu-card__img {
	object-position: center top;
}

.ncu-carousel--staff h3.ncu-card__title {
	font-size: 13px;
	-webkit-line-clamp: 3;
}

/* ---------- Сколько карточек видно (по ширине самой карусели) ---------- */
@container (min-width: 480px) {
	.ncu-carousel--news .ncu-carousel__track { --ncu-per-view: 2; }
}
@container (min-width: 720px) {
	.ncu-carousel--news .ncu-carousel__track { --ncu-per-view: 3; }
}
@container (min-width: 960px) {
	.ncu-carousel--news .ncu-carousel__track { --ncu-per-view: 4; }
}

@container (min-width: 560px) {
	.ncu-carousel--akcii .ncu-carousel__track { --ncu-per-view: 2; }
}
@container (min-width: 900px) {
	.ncu-carousel--akcii .ncu-carousel__track { --ncu-per-view: 3; }
}

@container (min-width: 420px) {
	.ncu-carousel--staff .ncu-carousel__track { --ncu-per-view: 2; }
}
@container (min-width: 620px) {
	.ncu-carousel--staff .ncu-carousel__track { --ncu-per-view: 3; }
}
@container (min-width: 820px) {
	.ncu-carousel--staff .ncu-carousel__track { --ncu-per-view: 4; }
}
@container (min-width: 1000px) {
	.ncu-carousel--staff .ncu-carousel__track { --ncu-per-view: 5; }
}

/* ---------- Управление: точки, счётчик, стрелки ---------- */
.ncu-carousel__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

.ncu-carousel__nav[hidden] {
	display: none;
}

.ncu-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.ncu-carousel button.ncu-carousel__dot {
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	position: relative;
}

.ncu-carousel button.ncu-carousel__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(54, 59, 133, 0.25);
	transform: translate(-50%, -50%);
	transition: width .25s ease, background .25s ease, border-radius .25s ease;
}

.ncu-carousel button.ncu-carousel__dot:hover::before {
	background: rgba(54, 59, 133, 0.5);
}

.ncu-carousel button.ncu-carousel__dot[aria-current="true"]::before {
	width: 22px;
	border-radius: 4px;
	background: var(--ncu-accent);
}

.ncu-carousel button.ncu-carousel__dot:focus-visible {
	outline: 2px solid var(--ncu-accent-2);
	outline-offset: 0;
}

.ncu-carousel__counter {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--ncu-accent);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ncu-carousel__arrows {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.ncu-carousel button.ncu-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--ncu-accent);
	border-radius: 50%;
	background: #fff;
	color: var(--ncu-accent);
	box-shadow: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.ncu-carousel button.ncu-carousel__arrow:hover:not(:disabled),
.ncu-carousel button.ncu-carousel__arrow:focus-visible {
	background: var(--ncu-accent);
	color: #fff;
}

.ncu-carousel button.ncu-carousel__arrow:disabled {
	opacity: .3;
	cursor: default;
}

@media (max-width: 479px) {
	.ncu-carousel {
		--ncu-gap: 12px;
	}

	.ncu-carousel__nav {
		gap: 10px;
	}

	.ncu-carousel button.ncu-carousel__arrow {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ncu-carousel__viewport {
		scroll-behavior: auto;
	}

	.ncu-card,
	.ncu-card__media img.ncu-card__img {
		transition: none;
	}
}