/*
 * Slider card. Figma 182:340 / 193:408 (Home): 1880x1058 at 20px from the
 * page edges, radius 4px, 30% overlay. Inside: heading at 20/40, short
 * texts centred vertically (top 499 of 1058), the second one starting at
 * page x 705, dots 40px above the bottom. Slides move sideways like the
 * hero (state classes from hero-slider.js; same rules as hero.css).
 */

.slider-card {
	--card-height: clamp(520px, 55.1042vw, 1058px);
	--color-image-overlay: rgb(0 0 0 / 0.3);
	--duration-slide: 900ms;
	--ease-slide: cubic-bezier(0.65, 0, 0.35, 1);

	padding-inline: var(--space-20);
	color: var(--color-white);
}

.slider-card__frame {
	position: relative;
	isolation: isolate;
	height: var(--card-height);
	overflow: hidden;
	border-radius: var(--radius);
}

.slider-card__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-image-overlay);
}

.slider-card__track {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.slider-card__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	transform: translateX(100%);
	transition: transform var(--duration-slide) var(--ease-slide);
}

.slider-card__slide.is-active {
	transform: none;
}

.slider-card__slide.is-left {
	transform: translateX(-100%);
}

.slider-card__slide.is-instant {
	transition: none;
}

.slider-card__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slider-card__heading {
	position: absolute;
	top: var(--space-40);
	left: var(--space-20);
	font-size: var(--fs-100);
	font-weight: var(--fw-text);
	line-height: var(--lh-subheadline);
	letter-spacing: var(--ls-subheadline);
	text-box: trim-both cap alphabetic;
}

.slider-card__line {
	display: block;
}

.slider-card__line--light {
	font-weight: var(--fw-extralight);
}

/* Two columns: the second text starts at page x 705 (665px into the texts box at 1920). */
.slider-card__texts {
	position: absolute;
	top: 50%;
	right: var(--space-20);
	left: var(--space-20);
	display: grid;
	grid-template-columns: 34.6354vw minmax(0, 1fr);
	translate: 0 -50%;
}

.slider-card__text {
	font-size: var(--fs-35);
	line-height: var(--lh-body);
	text-box: trim-both cap alphabetic;
}

/* The stretched link covers the card; the dots sit above it. */
.slider-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.slider-card__link:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: -6px;
}

.slider-card__dots {
	position: absolute;
	bottom: var(--space-40);
	left: 50%;
	z-index: 2;
	translate: -50% 0;
}

@media (prefers-reduced-motion: reduce) {
	.slider-card__slide {
		transition: none;
	}
}

/* Provisional until the mobile design: texts stack under each other. */
@media (max-width: 767px) {
	.slider-card__texts {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-20);
	}
}