/*
 * Accommodation grid. Figma 162:27: lead at 40/2771 (80px after the
 * Village card), cards 430x535 in columns 1/4/7/10 (span 3), 40px between
 * lead, rows and the joining word; 40px after the second row.
 * Card (component 167:173): content 20px from the bottom; default shows the
 * name and an arrow; hover/focus adds a 35% overlay, turns the arrow down
 * and opens the facts and text (Brando Sans 20) with 16px gaps.
 */

.accommodation {
	--card-duration: 400ms;

	padding-top: var(--space-80);
	padding-bottom: var(--space-40);
	color: var(--color-forest-b);
}

/* The Village (257:501): the lead sits 140px after the intro text, which is the intro's own padding. */
.intro + .accommodation {
	padding-top: 0;
}

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

.accommodation__lead {
	margin-bottom: var(--space-40);
}

.accommodation__line {
	display: block;
}

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

.accommodation__joiner {
	margin-block: var(--space-40);
}

.accommodation__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.accommodation__row > li {
	grid-column: span 3;
}

.house-card {
	position: relative;
	isolation: isolate;
	display: block;
	height: clamp(300px, 27.8646vw, 535px);
	overflow: hidden;
	border-radius: var(--radius);
	color: var(--color-white);
	text-decoration: none;
}

.house-card > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.house-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(0 0 0 / 0.35);
	opacity: 0;
	transition: opacity var(--card-duration) ease;
}

.house-card__body {
	position: absolute;
	right: var(--space-20);
	bottom: var(--space-20);
	left: var(--space-20);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.house-card__name,
.house-card__arrow {
	font-size: var(--fs-35);
	line-height: var(--lh-body);
	text-box: trim-both cap alphabetic;
}

.house-card__arrow {
	margin-top: var(--space-10);
	font-weight: var(--fw-light);
	transition: transform var(--card-duration) ease, margin-top var(--card-duration) ease;
}

/* Closed: zero-height row; open: the row takes the content height. */
.house-card__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--card-duration) ease;
}

.house-card__more-inner {
	overflow: hidden;
	font-family: var(--font-sans);
	font-size: var(--fs-20);
	line-height: var(--lh-sans);
	letter-spacing: var(--ls-nav);
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.house-card__facts,
.house-card__text {
	display: block;
}

.house-card__facts {
	padding-top: clamp(10px, 0.8333vw, 16px);
}

/* One empty line between the facts and the text, as in Figma. */
.house-card__text {
	margin-top: 1.25em;
}

.house-card:is(:hover, :focus-visible)::after {
	opacity: 1;
}

.house-card:is(:hover, :focus-visible) .house-card__arrow {
	margin-top: clamp(10px, 0.8333vw, 16px);
	transform: rotate(90deg);
}

.house-card:is(:hover, :focus-visible) .house-card__more {
	grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
	.house-card::after,
	.house-card__arrow,
	.house-card__more {
		transition: none;
	}
}

/* Provisional until the mobile design: two cards per row. */
@media (max-width: 767px) {
	.accommodation__row {
		row-gap: var(--gutter);
	}

	.accommodation__row > li {
		grid-column: span 6;
	}
}