/* Декоративная подпись в углу hero — тот же приём, что и у .hero__decor
   на главной (position:absolute от секции, мелкий uppercase-текст
   приглушённым цветом), но не вынесено в page-hero.css: пока единственный
   потребитель — эта страница, не общий паттерн компонента. */
.lab-hero .page-hero__description + .page-hero__cta {
	margin-top: 4rem;
}

.lab-hero__decor {
	position: absolute;
	right: var(--side-padding-desktop);
	bottom: 4rem;
	text-align: right;
	font-size: 1.2rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04rem;
	opacity: 0.3;
}

@media (max-width: 1360px) {
	.lab-hero__decor {
		right: var(--side-padding-tablet);
	}
}

@media (max-width: 480px) {
	.lab-hero__decor {
		display: none; /* тот же принцип, что и у .hero__decor — декор не для мобильного */
	}
}

/* «Техническая база» — тёмная секция с 4 карточками (оборудование/методики/
   люди/фонд): карточка 430×580, зазор 20px — те же цифры, что и везде
   на сайте, просто подтверждены измерением по референсу, не предположены. */
.lab-tech {
	background-color: var(--color-black);
	color: var(--color-white);
	padding-block: 8rem;
}

.lab-tech__title {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.lab-tech__description {
	max-width: 73rem;
	opacity: 0.7;
}

.lab-tech__grid {
	margin-top: 4rem;
}

/* Карточки — дети .lab-tech__swiper-wrapper, а не .lab-tech__grid напрямую
   (тот же приём, что и у .finance__cards/.finance__swiper-wrapper), чтобы
   на мобильном сюда мог встать Swiper и управлять раскладкой сам через
   свой vendor CSS — :not(.swiper-wrapper) не даёт этому правилу спорить
   с ним, когда JS добавляет свой класс. */
.lab-tech__swiper-wrapper:not(.swiper-wrapper) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
}

.lab-tech__swiper-pagination {
	display: none;
}

.lab-tech__card {
	display: flex;
	flex-direction: column;
	height: 64rem; /* фикс. высота под самое длинное описание («Стенды и КПА») —
	                  align-items:stretch у грида выравнивает карточки только
	                  внутри одной строки, а не между строками/слайдами свайпера */
	background-color: var(--color-white);
	color: var(--color-black);
}

.lab-tech__card-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain; /* исходники 430×290 — cover обрезал по бокам и визуально
	                         увеличивал сюжет; contain показывает файл целиком, как в референсе */
}

.lab-tech__card-body {
	padding: 2.5rem;
}

.lab-tech__card-title {
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 2.4rem;
	line-height: 1.2;
	font-weight: 500;
}

.lab-tech__card-description {
	font-size: 1.4rem;
	line-height: 1.5;
	opacity: 0.7;
}

@media (max-width: 1360px) {
	.lab-tech {
		padding-block: 10rem;
	}

	.lab-tech__swiper-wrapper:not(.swiper-wrapper) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 3rem;
	}

	.lab-tech__card {
		height: 80rem; /* карточки шире (2 колонки вместо 4) — выше в рем пропорционально */
	}
}

@media (max-width: 480px) {
	.lab-tech {
		padding-block: 6rem;
	}

	.lab-tech__grid {
		margin-top: 3rem;
	}

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

	.lab-tech__card-title {
		font-size: 2rem;
	}

	.lab-tech__card {
		height: 54rem;
	}

	/* Внутри Swiper карточка — слайд: полная ширина, край следующей карточки
	   виден справа (slidesPerView:1.08 в lab-tech-swiper.js). Фикс. высота
	   карточки нужна и тут — .swiper-wrapper тянет align-items:flex-start
	   по умолчанию (свой vendor CSS), а не stretch, так что слайды сами по
	   себе разной высоты не выровнялись бы. */
	.lab-tech__grid.swiper .lab-tech__card {
		width: 100%;
		flex-shrink: 0;
	}

	.lab-tech__swiper-pagination.swiper-pagination-bullets {
		display: flex;
		justify-content: center;
		margin-top: 2rem;
	}

	.lab-tech__swiper-pagination .swiper-pagination-bullet {
		width: 1rem;
		height: 1rem;
		background-color: rgba(255, 255, 255, 0.3); /* секция тёмная — светлая точка вместо дефолтной тёмной у finance */
		opacity: 1;
	}

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