/*
 * Card row. Figma 202:634 (Home): cards 665 x 1058 at x 40 / 745 / 1440,
 * 40px apart and 40px after the last one, radius 4, 30% overlay. Title and
 * bullet list (Body 35) 30px from the top left, 585px wide. Dots 40px above
 * the bottom of the cards (Figma 194:470 sits at y + 1010), centred on the page.
 */

.card-row {
	--card-width: clamp(280px, 34.6354vw, 665px);
	--card-pad: clamp(12px, 1.5625vw, 30px);
	--color-image-overlay: rgb(0 0 0 / 0.3);

	position: relative;
	padding-bottom: var(--space-40);
}

.card-row__track {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.card-row__track::-webkit-scrollbar {
	display: none;
}

.card-row__track:focus-visible {
	outline-offset: -2px;
}

/* Mouse drag (card-row.js): no snapping while the hand holds the row. */
@media (pointer: fine) {
	.card-row__track {
		cursor: grab;
	}
}

.card-row.is-dragging .card-row__track {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.card-row__list {
	display: flex;
	gap: var(--space-40);
	width: max-content;
	padding: 0 var(--gutter);
	list-style: none;
}

.card-row__card {
	width: var(--card-width);
	aspect-ratio: 665 / 1058;
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--color-white);
	scroll-snap-align: start;
}

.card-row__card img {
	-webkit-user-drag: none;
	user-select: none;
}

/* One trimmed text block: the title's cap top sits 30px from the top, one empty line before the list. */
.card-row__body {
	padding: var(--card-pad) calc(var(--card-pad) + var(--space-20)) var(--card-pad) var(--card-pad);
	font-size: var(--fs-35);
	line-height: var(--lh-body);
	text-box: trim-both cap alphabetic;
}

.card-row__title {
	margin-bottom: 1lh;
	font-size: inherit;
	font-weight: var(--fw-text);
}

.card-row__items {
	padding: 0;
	font-weight: var(--fw-regular);
	list-style: "● " inside;
}

.card-row__dots {
	position: absolute;
	bottom: calc(var(--space-40) * 2);
	left: 50%;
	translate: -50% 0;
}

/* .dots sets display: flex, which would beat the hidden attribute (one position only). */
.card-row__dots[hidden] {
	display: none;
}

/*
 * Wide variant. Figma 277:1313 (Wellness): cards 1605 x 770 from x 20, 40px
 * apart, 140px of white below. Each card is a photo slider (30% overlay)
 * with a 685 x 385 coloured panel in its top-left corner: label and title at
 * 20/20 (Body 35), the bar text (Brando Sans 20) on the panel's bottom line.
 * Dots per card, 40px above its bottom; the row itself has none.
 */
.card-row--wide {
	--card-width: clamp(300px, 83.5938vw, 1605px);
	--duration-slide: 900ms;
	--ease-slide: cubic-bezier(0.65, 0, 0.35, 1);

	padding-bottom: var(--space-140);
}

.card-row--wide .card-row__track {
	scroll-padding-inline: var(--space-20);
}

.card-row--wide .card-row__list {
	padding: 0 var(--space-20);
}

.card-row--wide .card-row__card {
	position: relative;
	isolation: isolate;
	aspect-ratio: 1605 / 770;
}

.card-row__card--forest {
	--panel-bg: var(--color-forest-a);
	--panel-ink: var(--color-white);
	--panel-label: var(--color-hillside);
	--panel-text: var(--color-stone);
}

.card-row__card--cooper {
	--panel-bg: var(--color-cooper-1);
	--panel-ink: var(--color-forest-a);
	--panel-label: var(--color-stone);
	--panel-text: var(--color-forest-a);
}

.card-row__card--sky {
	--panel-bg: var(--color-sky);
	--panel-ink: var(--color-forest-a);
	--panel-label: var(--color-forest-a);
	--panel-text: var(--color-forest-a);
}

/* Slides move sideways like the hero (state classes from hero-slider.js). */
.card-row__slides {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.card-row__slides::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.3);
}

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

.card-row__slide.is-active {
	transform: none;
}

.card-row__slide.is-left {
	transform: translateX(-100%);
}

.card-row__slide.is-instant {
	transition: none;
}

.card-row__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-row__panel {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: clamp(260px, 35.6771vw, 685px);
	height: clamp(180px, 20.0521vw, 385px);
	padding: var(--space-20);
	border-radius: var(--radius);
	background: var(--panel-bg);
	color: var(--panel-ink);
}

/* Label and title are one trimmed two-line block, as in Figma. */
.card-row__titles {
	font-size: var(--fs-35);
	line-height: var(--lh-body);
	text-box: trim-both cap alphabetic;
}

.card-row__label {
	color: var(--panel-label);
	font-weight: var(--fw-light);
}

.card-row__heading {
	font-size: inherit;
	font-weight: var(--fw-text);
}

.card-row__heading-light {
	font-weight: var(--fw-light);
}

.card-row__text {
	color: var(--panel-text);
	font-family: var(--font-sans);
	font-size: var(--fs-20);
	line-height: var(--lh-sans);
	letter-spacing: 0.01em;
	text-box: trim-both cap alphabetic;
}

.card-row__slide-dots {
	position: absolute;
	bottom: var(--space-40);
	left: 50%;
	z-index: 1;
	translate: -50% 0;
}

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

/* Provisional until the mobile design: taller cards, the panel across the top. */
@media (max-width: 767px) {
	.card-row--wide .card-row__card {
		aspect-ratio: 4 / 5;
	}

	.card-row__panel {
		gap: var(--space-20);
		width: 100%;
		height: auto;
	}
}