/* =========================================================================
   Red Luxe — карусель (туры / статьи на главной)
   Ровно 3 карточки на десктопе, 2 на планшете, 1 на мобильном.
   Плавная прокрутка, мягкие края, аккуратные кнопки.
   ========================================================================= */

.rl-carousel { position: relative; }
.rl-carousel__track {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.5rem 2px 1.5rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.rl-carousel__track::-webkit-scrollbar { display: none; }
.rl-carousel__track > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
	height: auto;
}
/* Карточки равной высоты, кнопка прижата вниз */
.rl-carousel--articles .rl-carousel__track > .rl-card { display: flex; flex-direction: column; }
.rl-carousel--articles .rl-carousel__track > .rl-card .rl-card__body { flex: 1 1 auto; }
.rl-carousel--tours .rl-carousel__track > .rl-tourcard { height: 100%; }
/* Компактные карточки на главной: одинаковая высота через align-items:stretch
   без жёсткого min-height — иначе появляются большие пустоты в короткие карточки.
   Внутри — обрезки, чтобы контент не «прыгал»:
     title — 2 строки, бейдж — 1 строка с ellipsis, лишние факты не показываем. */
.rl-carousel--tours-compact .rl-carousel__track { align-items: stretch; }
.rl-carousel--tours-compact .rl-carousel__track > .rl-tourcard { height: 100%; }
.rl-carousel--tours-compact .rl-tourcard__facts .rl-tourcard__fact:nth-of-type(n+3) { display: none; }
/* facts всегда столбиком — иначе длина «15 сентября 2026 — 29 сентября 2026»
   заставляет их переноситься на 2 строки на одной карточке и раздувает высоту. */
.rl-carousel--tours-compact .rl-tourcard__facts {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
}

/* Полноразмерные горизонтальные карточки туров (в блоке) — по одной шире */
.rl-carousel--tours .rl-carousel__track > * { width: min(92%, 660px); }
/* Компактные туры и статьи — ровно 3 видимых (2 промежутка по 1.5rem) */
.rl-carousel--tours-compact .rl-carousel__track > *,
.rl-carousel--articles .rl-carousel__track > * { width: calc((100% - 3rem) / 3); }

/* Кнопки управления — вынесены за пределы карточек, чтобы не перекрывать
   плашки и заголовки. Место под них резервируется отступами карусели. */
.rl-carousel { padding-inline: 66px; }
.rl-carousel__btn {
	position: absolute; top: calc(50% - 0.75rem);
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 50%;
	color: var(--rl-heading);
	background: var(--rl-card);
	border: 1px solid var(--rl-border);
	box-shadow: var(--rl-shadow-lg);
	transition: background-color var(--rl-t) var(--rl-ease), color var(--rl-t) var(--rl-ease), transform var(--rl-t) var(--rl-ease), opacity var(--rl-t) var(--rl-ease);
}
.rl-carousel__btn:hover { background: var(--rl-accent); color: #fff; border-color: var(--rl-accent); transform: translateY(-50%) scale(1.06); }
.rl-carousel__btn:active { transform: translateY(-50%) scale(0.96); }
.rl-carousel__btn--prev { left: 0; }
.rl-carousel__btn--next { right: 0; }
.rl-carousel__btn[hidden] { display: none; }

/* На узких экранах отступы под кнопки не нужны — кнопки скрыты. */
@media (max-width: 1100px) {
	.rl-carousel { padding-inline: 56px; }
}
/* Планшет — 2 карточки */
@media (max-width: 1024px) {
	.rl-carousel--tours-compact .rl-carousel__track > *,
	.rl-carousel--articles .rl-carousel__track > * { width: calc((100% - 1.5rem) / 2); }
}
/* Мобильные — 1 карточка */
@media (max-width: 680px) {
	.rl-carousel { padding-inline: 0; }
	.rl-carousel__btn { display: none; }
	.rl-carousel__track { gap: 0.9rem; padding: 0.5rem 2px 1.2rem; }
	.rl-carousel--tours-compact .rl-carousel__track > *,
	.rl-carousel--articles .rl-carousel__track > *,
	.rl-carousel--tours .rl-carousel__track > * { width: 90%; }
}