/**
 * Still Water Cabin cards (Figma "V4 Cabins" 10:6069 / 10:7174 / 10:8280, "V4 Other cabins"
 * 10:6897 / 10:8008 / 10:9101). White section.
 *
 * Desktop: heading (title h1, the line body-lg muted 4 under it) and, 48 under it, the cards in
 * one row, 24 apart (three of 384, or two of 588), no fill, no border. A card: photo with the
 * card's width and 480 high (radius 12); 20 under it the name (h3); 12 under that three figures
 * 16 apart (value h3 over label small muted, shown value first); 12 under them the "View …"
 * link. Home: the link at the right of the heading. Other cabins: the line and the link in a
 * 400 column at the right.
 * Tablet: heading stacked, link under the line; three cards share the row with their figures
 * centred (A9), two cards scroll at 300. Phone: cards scroll at 320 (photo 320 × 400).
 */

.sw-cabin-cards {
	--sw-cards: 3;
	--sw-card-w: 384px;
}

.sw-cabin-cards__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 48px;
	margin-bottom: var(--sw-heading-gap);
}

.sw-cabin-cards__title {
	max-width: 600px;
}

.sw-cabin-cards--aside .sw-cabin-cards__head {
	display: grid;
	grid-template-columns: minmax(0, 600px) auto;
	grid-template-areas:
		"title link"
		"text link";
}

.sw-cabin-cards--aside .sw-cabin-cards__title {
	grid-area: title;
}

/* The intro wrapper dissolves so its line and link land in their grid areas. */
.sw-cabin-cards--aside .sw-cabin-cards__intro {
	display: contents;
}

.sw-cabin-cards--aside .sw-cabin-cards__text {
	grid-area: text;
	margin-top: 4px;
}

.sw-cabin-cards--aside .sw-cabin-cards__more {
	grid-area: link;
	justify-self: end;
}

.sw-cabin-cards--split .sw-cabin-cards__head {
	align-items: end;
}

.sw-cabin-cards--split .sw-cabin-cards__intro {
	flex: 0 0 400px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.sw-cabin-cards--split .sw-cabin-cards__intro .sw-link {
	min-height: 44px;
}

.sw-cabin-cards__list {
	display: grid;
	grid-template-columns: repeat(var(--sw-cards), minmax(0, 1fr));
	gap: 24px;
}

.sw-cabin-cards__card {
	min-width: 0;
}

.sw-cabin-cards__photo {
	overflow: hidden;
	height: 480px;
	border-radius: var(--sw-radius);
	background: var(--sw-c-line);
}

.sw .sw-cabin-cards__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sw-cabin-cards__body {
	padding-top: 20px;
}

.sw-cabin-cards__figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 12px;
}

/* Value first, as drawn; the label stays first in the markup for screen readers. */
.sw-cabin-cards__figure {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	min-width: 0;
	gap: 2px;
}

.sw-cabin-cards__label {
	color: var(--sw-muted);
}

.sw-cabin-cards__link {
	margin-top: 12px;
}

/* Tablet (834). */
@media (max-width: 1024px) {
	.sw-cabin-cards__head,
	.sw-cabin-cards--aside .sw-cabin-cards__head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.sw-cabin-cards--aside .sw-cabin-cards__intro,
	.sw-cabin-cards--split .sw-cabin-cards__intro {
		display: flex;
		flex: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin-top: 4px;
	}

	.sw-cabin-cards--aside .sw-cabin-cards__text {
		margin-top: 0;
	}

	/* Three cards in the row: photo 4:5, figures centred (A9). */
	.sw-cabin-cards__photo {
		height: auto;
		aspect-ratio: 384 / 480;
	}

	.sw-cabin-cards:not(.sw-cabin-cards--tablet-scroll) .sw-cabin-cards__figure {
		align-items: center;
		text-align: center;
	}

	.sw-cabin-cards--tablet-scroll {
		--sw-card-w: 300px;
	}

	.sw-cabin-cards--tablet-scroll .sw-cabin-cards__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sw-gutter);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
	}

	.sw-cabin-cards--tablet-scroll .sw-cabin-cards__card {
		flex: none;
		width: var(--sw-card-w);
		scroll-snap-align: start;
	}
}

/* Phone (390): cards scroll sideways at 320. */
@media (max-width: 767px) {
	.sw-cabin-cards {
		--sw-card-w: 320px;
	}

	.sw-cabin-cards__list,
	.sw-cabin-cards--tablet-scroll .sw-cabin-cards__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--sw-gutter);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--sw-gutter));
		padding-inline: var(--sw-gutter);
	}

	.sw-cabin-cards__list::-webkit-scrollbar {
		display: none;
	}

	.sw-cabin-cards__card,
	.sw-cabin-cards--tablet-scroll .sw-cabin-cards__card {
		flex: none;
		width: var(--sw-card-w);
		scroll-snap-align: start;
	}

	.sw-cabin-cards:not(.sw-cabin-cards--tablet-scroll) .sw-cabin-cards__figure {
		align-items: flex-start;
		text-align: left;
	}
}