/**
 * The cross-sell carousel (.fmt-house-carousel) — dark band, horizontal
 * scroller. See includes/house-carousel.php.
 *
 * The design measures the card width in JavaScript so a whole number of cards
 * always fits. Here the same result comes from --per-view: the slide width is
 * derived from it, so the fit is a property of the layout instead of something
 * a script has to keep repairing on every resize. Four across at full width is
 * what the design lands on for a 1320px wrap.
 */

.fmt-house-carousel {
	padding: 104px 0;
	background: var(--ink-2);
	color: #fff;

	--per-view: 4;
	--slide-gap: 18px;
}

/* Headline block left, the two arrows bottom-aligned to it on the right. */
.fmt-house-carousel__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 36px;
	margin-bottom: 36px;
}
.fmt-house-carousel__eyebrow {
	margin-bottom: 14px;
	color: rgba(255, 255, 255, .65);
}
.fmt-house-carousel__title {
	max-width: 780px;
}

.fmt-house-carousel__nav {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
}
.fmt-house-carousel__nav button:disabled {
	opacity: .4;
	cursor: default;
}
.fmt-house-carousel__nav button:disabled:hover {
	background: rgba(255, 255, 255, .08);
}

/* Scroller. The negative margin plus matching padding lets the cards' hover
   lift and drop shadow show without being clipped, while the first card still
   lines up with the headline above it. */
.fmt-house-carousel__scroller {
	margin: 0 -6px;
	padding: 8px 6px 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 6px;
	scrollbar-width: none;
}
.fmt-house-carousel__scroller::-webkit-scrollbar {
	display: none;
}

.fmt-house-carousel__track {
	display: flex;
	align-items: stretch;
	gap: var(--slide-gap);
}
.fmt-house-carousel__track .fmt-house-card {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
	scroll-snap-align: start;
}

/* Dots — one per scrollable page, not per card, so the count matches how far
   the scroller can actually travel. The active one stretches into a bar. */
.fmt-house-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 18px;
}
.fmt-house-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: width .25s ease, background-color .15s ease;
}
.fmt-house-carousel__dot:hover {
	background: rgba(255, 255, 255, .45);
}
.fmt-house-carousel__dot.is-active {
	width: 24px;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.fmt-house-carousel__dot {
		transition: none;
	}
}

/* =========================================================
   Responsive — breakpoints as elsewhere in the theme
   ========================================================= */

@media (max-width: 1100px) {
	.fmt-house-carousel {
		padding: 80px 0;
		--per-view: 3;
	}
}

@media (max-width: 900px) {
	.fmt-house-carousel {
		--per-view: 2;
	}
}

/*
 * Phones follow the mobile design's own section (src-v2/mobile-detail.jsx →
 * MCrossSell), which is not the desktop band at a smaller size but a different
 * arrangement: the heading block stays in the container while the row breaks out
 * to the screen edge, the card width is fixed instead of derived, and the arrows
 * and dots are gone — swiping is the control, and eight dots on a phone would be
 * decoration. Section padding, eyebrow spacing and the 28px .mh2 headline match
 * what single-house.css already does for the other sections at this width.
 */
@media (max-width: 680px) {
	.fmt-house-carousel {
		padding: 56px 0;
		--slide-gap: 16px;
	}
	.fmt-house-carousel__eyebrow {
		margin-bottom: 12px;
	}
	.fmt-house-carousel__title {
		font-size: 28px;
		line-height: 1.04;
		letter-spacing: -0.02em;
	}
	/* The gap to the row is the scroller's own top padding below. */
	.fmt-house-carousel__head {
		margin-bottom: 4px;
	}
	.fmt-house-carousel__nav,
	.fmt-house-carousel__dots {
		display: none;
	}

	/* Out of the container to the screen edge, then inset again by the same
	   amount — so a card can scroll flush to where the headline starts, and the
	   row reads as continuing past the edge rather than stopping short of it. */
	.fmt-house-carousel__scroller {
		margin-inline: -24px;
		padding: 20px 24px 8px;
		scroll-padding-inline: 24px;
	}

	/* Fixed width, as the mobile design has it: what matters is the sliver of the
	   next card, and deriving the width from the viewport would swallow it on
	   narrow screens. The max-width keeps that sliver at 40px when 276 no longer
	   fits — below roughly 340px of usable width. */
	.fmt-house-carousel__track .fmt-house-card {
		flex-basis: 276px;
		max-width: calc(100% - 40px);
	}
}