.finance {
	background-color: var(--color-bg-light);
}

.finance__track {
	position: relative;
}

.finance__sticky {
	position: sticky;
	top: 0;
	padding-block: 5rem 3rem;
}

.finance__inner {
	display: flex;
	align-items: flex-start;
	gap: 2rem; /* 20px */
}

.finance__content {
	flex-shrink: 0;
	width: 88rem; /* 880px */
	display: flex;
	flex-direction: column;
	height: calc(100vh - 8rem); /* совпадает с высотой .finance__viewport при пиновке — прижимает decor к низу видимой области */
}

.finance__title {
	margin-bottom: 3rem;
}

.finance__description {
	max-width: 46.9rem; /* 469px */
}

.finance__description + .finance__description {
	margin-top: 0.8rem; /* paragraph-spacing 8px */
}

.finance__decor {
	margin-top: auto;
}
@media (max-width: 480px) {
    .finance__decor {
        display: none !important; 
    }
}

.finance__decor-line {
	font-size: 1.2rem;
	line-height: 1.4;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
	color: var(--color-black);
	opacity: 0.3;
}

.finance__viewport {
	position: relative;
	flex-shrink: 0;
	width: 88rem; /* 880px */
}

.finance__cards {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 20px */
	width: 100%;
}

/* Карточки — дети .finance__swiper-wrapper, а не .finance__cards напрямую, так что
   gap выше расставляет отступ между враппером и пагинацией, а не между карточками.
   :not(.swiper-wrapper) — чтобы это правило не спорило с Swiper на мобильном,
   который сам управляет раскладкой (row + spaceBetween) через свой vendor CSS. */
.finance__swiper-wrapper:not(.swiper-wrapper) {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 20px */
}

/* Пинится и скроллится карточками только когда JS реально проинициализировался
   (класс добавляет finance-progress.js) — без JS/при ошибке загрузки скрипта
   секция остаётся обычным читаемым статичным списком. */
.finance--pinned .finance__viewport {
	height: calc(100vh - 8rem); /* 100vh минус padding-block .finance__sticky (5rem + 3rem) */
	overflow: hidden;
}

.finance--pinned .finance__cards {
	will-change: transform;
}

@media (max-width: 1360px) {
	.finance__sticky {
		position: static;
		padding-block: 10rem;
	}

	.finance__inner {
		gap: 3rem; /* 30px */
	}

	.finance__content {
		width: 60rem; /* 600px */
	}

	.finance__viewport {
		width: auto;
		flex: 1;
	}

	.finance--pinned .finance__viewport {
		height: auto;
		overflow: visible;
	}

}

@media (max-width: 480px) {
	.finance__track {
		height: auto !important;
	}

	.finance__sticky {
		padding-block: 6rem;
	}

	.finance__inner {
		flex-direction: column;
		gap: 4rem;
	}

	.finance--pinned .finance__cards {
		transform: none !important;
	}

	.finance__content,
	.finance__viewport {
		width: 100%;
	}

	.finance__content {
		height: auto; /* секция не пинится на мобильном (position:static), decor скрыт — прижимать к низу нечего */
	}

	/* Карточки листаются горизонтальным свайпом через Swiper — та же логика, что и
	   у models (finance-swiper.js зеркалит models-swiper.js), но без пиновки: секция
	   не пинится, обычный блок в потоке страницы (в этом finance мобильный ближе к
	   models мобильному, чем к своему собственному десктопу/таблету, где карточки
	   едут внутри запинненного .finance__viewport — см. finance-progress.js,
	   он по-прежнему активен только от 1361px). */
	.finance__cards {
		gap: 0;
	}

	.finance__swiper-wrapper {
		height: 100%;
	}

	/* Пока Swiper не проинициализировался — обычный статичный список карточек
	   подряд (унаследованный display:flex;flex-direction:column;gap от базового
	   правила .finance__cards отрабатывает и тут), тот же грейсфул-фолбэк принцип,
	   что и у models/finance-десктопа. */
	.finance__cards:not(.swiper) {
		display: flex;
		flex-direction: column;
		gap: 4rem;
	}

	/* Внутри Swiper карточка — слайд, ширина 100% и фиксированная высота (одна на
	   все 5 карточек, под самое длинное описание — «Лизинг»). Не auto: autoHeight у
	   Swiper в паре с трансформом уже один раз давал трудноуловимый баг с наездом
	   пагинации/кнопки друг на друга у models — тот же обход здесь на всякий
	   случай, хотя у card-dark нет отдельной кнопки-«якоря» снизу. */
	.finance__cards.swiper .card-dark {
		width: 100%;
		flex-shrink: 0;
		height: 64rem;
	}

	/* В column-раскладке (мобильный) высота — главная ось, а не поперечная, так что
	   align-items:stretch (умолчание) её не выравнивает — в отличие от десктопа, где
	   .card-dark в row-раскладке и панель растягивается на всю высоту БЕСПЛАТНО, через
	   именно эту поперечную растяжку. Без явного flex:1 здесь панель занимала бы
	   только свою естественную высоту контента, и с общей фиксированной высотой
	   карточки (64rem) у каждого слайда получался свой, разный по размеру, пустой
	   хвост снизу — визуально казалось, что карточки не выровнены, хотя их внешняя
	   высота была одинаковой с самого начала. */
	.finance__cards.swiper .card-dark__panel {
		flex: 1;
	}

	/* Swiper даёt кастомному pagination-el только модификаторы (-clickable,
	   -bullets, -horizontal), но не базовый класс .swiper-pagination — а именно в
	   НЁМ у Swiper задан text-align:center. Без явного центрирования тут точки
	   прижимались к левому краю. */
	.finance__swiper-pagination {
		display: flex;
		justify-content: center;
		margin-top: 1rem;
	}

	.finance__swiper-pagination .swiper-pagination-bullet {
		width: 1rem; /* было 8px по умолчанию у Swiper — чуть крупнее */
		height: 1rem;
		background-color: rgba(10, 10, 10, 0.3);
		opacity: 1;
	}

	.finance__swiper-pagination .swiper-pagination-bullet-active {
		background-color: var(--color-accent);
	}
}

@media (min-width: 481px) and (max-width: 1360px) {
	.home-page .finance__sticky {
		position: sticky;
		top: 0;
		padding-block: 5rem 3rem;
	}

	.home-page .finance--pinned .finance__viewport {
		height: calc(100vh - 8rem);
		overflow: hidden;
	}

	.home-page .finance--pinned .finance__cards {
		will-change: transform;
	}
}