.models {
	background-color: var(--color-black);
	color: var(--color-white);
}

.models__track {
	position: relative;
}

.models__sticky {
	position: sticky;
	top: 0;
	padding-block: 6rem;
}

.models__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 4rem;
}

.models__label {
	color: var(--color-white);
}

/* Заголовок секции читается «Модели» везде, кроме мобильного, где по требованию
   пользователя явно должен быть «Каталог» — два набора текста в разметке, видимость
   переключается медиа-запросом (см. @media 480px), а не JS/data-атрибутом, тот же
   принцип, что и у .about__stats-static. */
.models__title-mobile,
.models__label-mobile {
	display: none;
	
}

.models__stack {
	position: relative;
	height: 64rem;
	overflow: hidden;
}

.models__slide {
	position: absolute;
	top: 4rem;
	left: 0;
	right: 0;
	height: 60rem;
	display: grid;
	grid-template-columns: 88rem 90rem;
	transform-origin: 50% 0%;
	will-change: transform, opacity;
}

.models__content {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 3rem;
	background-color: var(--color-surface);
	border: 1px solid var(--color-black);
	border-right: none;
}

.models__content-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Прозрачная прокладка вокруг title/description/cta — на десктопе/таблете просто
   продолжает flex-колонку .models__content (margin-top:auto у .models__cta по-прежнему
   упирается в её нижний край); на мобильном даёт точку, куда можно перенести
   фон/паддинг карточки отдельно от .models__content-header (см. @media 480px) —
   тегу с иконкой нужно уехать поверх фото, не будучи частью сплошной панели. */
.models__content-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.models__slide-title {
	margin-top: 2.4rem;
	margin-bottom: 2rem;
}

.models__slide-description {
	max-width: 50rem;
	margin-bottom: 4rem;
	opacity: 0.7;
}

.models__cta {
	align-self: flex-start;
	margin-top: auto;
}

.models__cta-icon {
	width: 0.8rem;
	height: 1.2rem;
}

.models__media {
	position: relative;
	background-color: var(--color-black);
}

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

.models__info-wrap {
	position: relative;
}

.models__info {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
}

.models__tooltip {
	position: absolute;
	top: calc(100% + 1rem);
	left: 0; /* на десктопе подсказка уходит вправо, пересекая границу текст/картинка (референс) */
	width: 45rem; /* 450px на 1920 (референс) */
	padding: 2rem;
	background-color: var(--color-bg-light); /* #F0F0F0 по Figma-спеке, не чистый белый */
	color: var(--color-black);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: 5;
}

/* Только десктоп/таблет — на мобильном подсказка открывается тапом через JS
   (см. models-tooltip.js, класс .models__tooltip--open), а не наведением. Без
   этого ограничения правило действовало и на мобильном тоже: "залипающий" :hover
   после тапа на тач-устройствах (частая особенность мобильных браузеров) мог сам
   по себе, чисто через CSS, независимо от JS-состояния, снова показать тултип —
   ровно это выглядело как «закрыл крестиком — открылось само». */
@media (min-width: 481px) {
	.models__info-wrap:hover .models__tooltip,
	.models__info-wrap:focus-within .models__tooltip {
		opacity: 1;
		visibility: visible;
	}
}

@media (max-width: 1360px) {
	.models__sticky {
		padding-block: 5rem 4rem;
	}

	.models__header {
		margin-bottom: 4rem;
	}

	.models__stack {
		/* 100vh минус padding-block .models__sticky (5+4rem), models__header (~5.3rem)
		   и margin-bottom до стека (4rem) — сумма выражена в rem, а не px, поэтому
		   формула остаётся верной на любой ширине внутри планшетного тира (768-1360):
		   при fluid-vw шрифте все слагаемые масштабируются одним коэффициентом. */
		height: calc(100vh - 18.5rem);
	}

	.models__slide {
		top: 0;
		height: 100%;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.models__content {
		height: 100%;
		min-height: 0; /* без этого grid-item не сжимается ниже контента */
	}

	/* Скроллится только описание, а не вся карточка целиком: если дать overflow-y:auto
	   на .models__content, кнопка (margin-top:auto) уезжает в конец прокручиваемой
	   области и остаётся невидимой при scrollTop:0 — тег/заголовок/кнопка должны быть
	   на виду всегда, лишний текст описания уходит во внутренний скролл. */
	.models__content-header,
	.models__slide-title,
	.models__cta {
		flex-shrink: 0;
	}

	.models__slide-description {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}

	.models__media {
		height: 100%;
	}

	.models__tooltip {
		/* было width: calc(100% - 8rem) — на абсолютно спозиционированном элементе
		   с неоднозначным containing block это раздувало scrollWidth документа
		   (Chromium резервирует место под calc-ширину даже когда рендер
		   укладывается в экран) */
		width: 28rem;
		max-width: calc(100vw - 4rem);
		left: auto;
		right: 0; /* на планшете подсказка остаётся прежней (справа налево) — просили изменить только десктоп */
	}
}

/* Preserve the 1780x600 desktop card geometry on tablets. The media column
   then stays at 900x600 (3:2), matching the source images without cropping. */
@media (min-width: 481px) and (max-width: 1360px) {
	.models__stack {
		height: auto;
		aspect-ratio: 178 / 60;
	}

	.models__slide {
		grid-template-columns: 88fr 90fr;
		gap: 0;
	}
}

@media (max-width: 480px) {
	/* НЕ position:sticky на мобильном — переход между карточками теперь горизонтальный
	   свайп (models-swiper.js), не зависящий от скролла страницы, так что пиновке
	   больше нечего «держать» (в отличие от десктопа/таблета, где карусель всё ещё
	   управляется прогрессом вертикального скролла через scroll-jack).
	   Секция — обычный блок в потоке страницы; высота всё ещё vh-формула ниже, просто
	   как разумный размер карточки, не как условие для пиновки. */
	.models__sticky {
		position: static;
		padding-block: 0.5rem 1rem;
	}

	.models__title-desktop,
	.models__label-desktop {
		display: none;
	}

	.models__title-mobile,
	.models__label-mobile {
		display: inline;
	}

	.models__header {
		flex-direction: row;
		align-items: center;
		margin-bottom: 4rem; /* 40px по Figma-спеке (было 2.5rem на глаз) */
	}

	/* 100vh минус padding-block .models__sticky (0.5+1rem) + models__header (~3.6rem)
	   + margin-bottom до стека (4rem, см. выше) — в rem, не px, поэтому формула
	   остаётся верной на любой ширине мобильного тира. Карточка ВСЕГДА в пределах экрана — на
	   высоких телефонах (iPhone XR и т.п.) 40px отступа отлично помещаются, на низких
	   (SE) их «съедает» overflow-y:auto у описания, а не оверфлоу секции. */
	.models__stack {
		position: relative;
		height: calc(100vh - 9.1rem);
		overflow: hidden;
	}

	.models__swiper-wrapper {
		height: 100%;
	}

	.models__slide {
		position: relative;
		width: 100%;
		height: 100%;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.models__content {
		position: relative;
		flex: 1;
		height: auto;
		min-height: 0;
		padding: 0;
		background-color: transparent;
		border: none;
	}

	/* Тег+иконка выходят из потока и приподнимаются поверх нижней части фото —
	   .models__content уже начинается сразу под картинкой (media идёт первой через
	   order:-1), так что top:-4.5rem поднимает бейдж именно в кадр фото, а не в
	   пустоту. Точное число подобрано и проверено визуально под реальную высоту
	   строки бейджа (кегль иконки/кикера). */
	.models__content-header {
		position: absolute;
		top: -4.5rem;
		left: 0;
		right: 0;
		z-index: 2;
		padding: 0 1.5rem;
	}

	.models__kicker {
		display: none; /* красная подпись-тег поверх фото на мобильном убрана совсем */
	}

	.models__info-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.8rem;
		height: 2.8rem;
		margin-left: auto; /* держит иконку справа теперь, когда кикера (второго
		                       flex-child) больше нет и justify-content:space-between
		                       у .models__content-header не от чего отталкивать */
	}

	.models__info {
		width: 1.6rem;
		height: 1.6rem;
	}

	.models__content-body {
		flex: 1;
		min-height: 0;
		background-color: var(--color-surface);
		padding: 2.5rem;
	}

	.models__slide-title {
		margin-top: 0;
		margin-bottom: 1.5rem;
	}

	.models__slide-description {
		flex: 1;
		min-height: 0;
		margin-bottom: 2rem;
		max-width: none;
		font-size: 1.4rem; /* 14px по спеке */
		/* Карточка обязана уложиться в экран (100vh), поэтому, в отличие от
		   свайп-версии без пиновки, тут описание — единственное, что может
		   ужаться: overflow-y:auto как подстраховка на случай, если самое длинное
		   описание не влезает на низких экранах (iPhone SE и т.п.), а не line-clamp —
		   так на обычных экранах текст всё равно показывается полностью. */
		overflow-y: auto;
	}

	.models__cta {
		align-self: flex-start;
		margin-top: auto; /* у коротких карточек кнопка уезжает к низу фиксированной
		                      высоты — тот же ритм, что и на десктопе */
	}

	.models__media {
		order: -1;
		flex-shrink: 0;
		height: auto;
		aspect-ratio: 310 / 188; /* по спеке (дев-инспектор Figma) */
	}

	/* Тултип-подсказка на мобильном — центрированное модальное окно с затемнённой
	   подложкой (.models__tooltip-backdrop), открывается по тапу (JS,
	   models-tooltip.js), а не по hover/focus-within (на тач-экране наводить нечем).
	   Светлая тема (#F0F0F0/чёрный текст) — та же, что и на десктопе/таблете (базовое
	   правило .models__tooltip выше), просто крупнее и центрирована как модальное
	   окно, а не позиционирована от иконки.

	   position:fixed — раньше он позиционировался от .models__info-wrap через
	   right:0 + почти-viewport width, что ломалось из-за transform на
	   .models__swiper-wrapper (Swiper) и peek-эффекта (slidesPerView:1.08). Теперь
	   центрирование чистым CSS (top/left:50% + translate), JS только переносит
	   элемент в конец <body> (вне зоны transform-предков) и переключает класс. */
	.models__tooltip-backdrop {
		position: fixed;
		inset: 0;
		background-color: rgba(10, 10, 10, 0.6);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease;
		z-index: 55;
	}

	.models__tooltip-backdrop--open {
		opacity: 1;
		visibility: visible;
	}

	.models__tooltip {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100vw - 4rem);
		max-width: 44rem;
		/* Высота карточки фиксирована (одна на все 4 слайда) — бейдж и кнопка
		   (margin-top:auto) оказываются на одной и той же позиции независимо от
		   длины текста, поэтому зазор между ними одно и то же число на всех слайдах,
		   не нужно мерить отдельно под каждый. */
		max-height: 70vh;
		padding: 3.2rem 2.6rem 2.6rem;
		font-size: 1.6rem; /* крупнее прежнего — «текст хорошо видно, не вглядываться» */
		line-height: 1.5;
		border-radius: 0;
		overflow-y: auto;
		box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease;
		z-index: 60;
	}

	/* Класс на самом тултипе, не на .models__info-wrap — тултип на время показа лежит
	   в конце <body> (см. models-tooltip.js, комментарий про position:fixed и
	   transform), поэтому потомковый селектор от info-wrap до него физически не
	   дотягивается. Без этой правки класс --open на wrap выставлялся, но opacity/
	   visibility тултипа никогда не переключались — попап был в DOM и на верной
	   позиции, но невидим. */
	.models__tooltip--open {
		opacity: 1;
		visibility: visible;
	}

	.models__tooltip-close {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		width: 2rem;
		height: 2rem;
	}

	.models__tooltip-close::before,
	.models__tooltip-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1.6rem;
		height: 1px;
		background-color: var(--color-black); /* тёмный крестик — фон попапа теперь светлый */
	}

	.models__tooltip-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.models__tooltip-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	/* Пока Swiper не проинициализировался (JS ещё не выполнился или недоступен) —
	   обычный статичный список всех 4 карточек подряд, тот же грейсфул-фолбэк
	   принцип, что и у finance. Как только models-swiper.js навешивает класс
	   .swiper на .models__stack, эти правила перестают действовать — раскладку
	   целиком берёт на себя CSS-бандл Swiper. */
	.models__stack:not(.swiper) {
		height: auto;
		overflow: visible;
	}

	.models__slide:not(.swiper-slide) {
		margin-bottom: 4rem;
	}

	.models__slide:not(.swiper-slide):last-child {
		margin-bottom: 0;
	}

	/* Пагинация Swiper для горизонтального направления уже по умолчанию — ряд точек
	   внизу по центру (абсолютно, поверх карточки); просто подкрашиваем под
	   цвета проекта вместо синих дефолтных. */
	.models__swiper-pagination .swiper-pagination-bullet {
		background-color: rgba(255, 255, 255, 0.3);
		opacity: 1;
	}

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

/* Доп. отступ сверху у заголовка секции на мобильном — только там, где реально есть
   место по высоте экрана (min-height, а не конкретная ширина/модель — SE и подобные
   низкие телефоны отсекаются формулой, 700px выбрано так, чтобы SE (667) не попадал,
   а большинство современных телефонов (800px+) — попадали). Составной медиа-запрос
   отдельным блоком, а не вложенным @media внутри @media (max-width:480px) выше —
   вложенные @media не гарантированно поддерживаются без CSS-препроцессора/Nesting.
   Отступ — на весь .models__header (не только на .models__title-mobile), иначе
   заголовок и ссылка «Каталог» разъедутся по вертикали внутри align-items:center
   строки. */
@media (max-width: 480px) and (min-height: 700px) {
	.models__header {
		margin-top: 4rem; /* 40px */
	}

	.models__stack {
		height: calc(100vh - 13.1rem); /* формула из блока выше (9.1rem) + 4rem на новый margin-top */
	}
}