.card-dark {
	display: flex;
	width: 100%;
	height: 34rem; /* 340px */
}

.card-dark__panel {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 44rem; /* 440px */
	gap: 2rem;
	padding: 3rem;
	background-color: var(--color-black);
	border: 1px solid var(--color-divider);
}

.card-dark__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-dark__icon {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
}

.card-dark__info-wrap {
	position: relative;
}

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

/* Только десктоп/таблет — на мобильном подсказка открывается тапом через JS
   (см. card-dark-tooltip.js), а не наведением, тот же принцип и та же причина
   (залипающий :hover на тач-устройствах), что и у models__tooltip. */
@media (min-width: 481px) {
	.card-dark__info-wrap:hover .card-dark__tooltip,
	.card-dark__info-wrap:focus-within .card-dark__tooltip {
		opacity: 1;
		visibility: visible;
	}
}

.card-dark__title {
	color: var(--color-white);
}

.card-dark__description {
	color: var(--color-white);
	opacity: 0.7;
}

/* Опциональный CTA — есть не у всех карточек (у finance его нет вообще, у models
   он есть на каждой), поэтому просто дополнительный класс, а не обязательная
   часть компонента. margin-top:auto прижимает кнопку к низу панели независимо
   от длины описания — .card-dark__panel уже flex-column, ничего сверх не нужно. */
.card-dark__cta {
	align-self: flex-start;
	margin-top: auto;
}

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

.card-dark__media {
	position: relative;
	flex-shrink: 0;
	width: 44rem; /* 440px */
	background-color: var(--color-white);
	overflow: hidden;
}

/* <picture> — обёртка для art-direction (см. models.html, мобильные кадры) — сама
   не участвует в раскладке (inline, без размеров), поэтому height:100% у
   .card-dark__image внутри неё не резолвится (проценты падают в auto без явной
   высоты родителя) — фото рендерилось по своей естественной высоте вместо
   заполнения всей карточки. Просто img без <picture> (card-dark__media как
   непосредственный родитель) в этом не нуждается, но правило безвредно и для
   этого случая — .card-dark__media уже сама flex/height. */
.card-dark__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

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

.card-dark__media::before {
	content: "";
	position: absolute;
	top: -2.1rem; /* -21px */
	right: -1.5rem; /* сдвинуто правее -0.9rem: клипped-треугольник не доставал до
	                    правого края media (overflow:hidden обрезал раньше края) */
	width: 3rem;
	height: 3rem;
	background-color: var(--color-accent);
	rotate: 45deg;
}

@media (max-width: 1360px) {
	.card-dark {
		height: 30.5rem; /* 305px */
	}

	.card-dark__panel,
	.card-dark__media {
		width: 30.5rem; /* 305px */
	}

	.card-dark__tooltip {
		width: 28rem;
		left: auto;
		right: 0; /* на планшете подсказка остаётся прежней (справа налево) — просили изменить только десктоп */
	}
}

@media (max-width: 480px) {
	/* Используется и в finance__cards как Swiper-слайд (см. finance.css) — там нужна
	   ОДНА фиксированная высота на все карточки (не auto), тот же принцип и то же
	   обоснование, что и у .models__slide (autoHeight в связке с transform от Swiper
	   уже один раз давал трудноуловимый баг с наездом пагинации/кнопки) — высота
	   задаётся точечно в finance.css, не здесь, card-dark сам по себе переиспользуется
	   и в других местах, где остаётся height:auto. */
	.card-dark {
		flex-direction: column;
	}

	.card-dark__panel,
	.card-dark__media {
		width: 100%;
	}

	.card-dark__media {
		order: -1; /* картинка над карточкой с текстом — по референсу, тот же приём,
		              что и у .models__media */
		aspect-ratio: 1 / 1;
	}

	/* Тултип-подсказка на мобильном — центрированное модальное окно с затемнённой
	   подложкой, открывается тапом (JS, card-dark-tooltip.js), точная копия паттерна
	   .models__tooltip на мобильном (см. models.css): position:fixed ломается
	   transform-предком Swiper-обёртки, поэтому JS переносит тултип в конец <body>
	   на время показа, а класс --open переключается на самом тултипе, а не на
	   .card-dark__info-wrap (потомковый селектор от wrap физически не дотянется). */
	.card-dark__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;
	}

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

	.card-dark__tooltip {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100vw - 4rem);
		max-width: 44rem;
		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;
	}

	.card-dark__tooltip--open {
		opacity: 1;
		visibility: visible;
	}

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

	.card-dark__tooltip-close::before,
	.card-dark__tooltip-close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1.6rem;
		height: 1px;
		background-color: var(--color-black);
	}

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

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