/* ==========================================================================
   Widget — Floor Plans
   Figma node 66:233. A heading row over a row of white plan cards on the navy
   band: three across on desktop, two on a tablet, most of one on a phone with
   the next peeking in. Past that the row scrolls, and the counter and arrows
   appear in the heading row.
   ========================================================================== */

.o-floor-plans {
	--o-fp-gap: var(--o-space-md);
	--o-fp-card: 85%; /* Resolved against the list, where it is used. */

	display: flex;
	flex-direction: column;
	gap: var(--o-space-xl);
}

@media (min-width: 700px) {
	.o-floor-plans {
		--o-fp-gap: var(--o-space-lg);
		--o-fp-card: calc((100% - var(--o-fp-gap)) / 2);
	}
}

@media (min-width: 1025px) {
	.o-floor-plans {
		--o-fp-gap: var(--o-space-xl); /* 48, per the comp */
		--o-fp-card: calc((100% - (var(--o-fp-gap) * 2)) / 3);
	}
}

/* --------------------------------------------------------------------------
   Heading row
   Heading left, controls right. Wraps onto two rows on narrow screens rather
   than letting the arrows crush the heading.
   -------------------------------------------------------------------------- */
.o-floor-plans__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-space-md) var(--o-space-lg);
}

.o-section--floor-plans .o-section-heading {
	max-width: none;
	margin: 0;
	text-align: left;
}

.o-section--floor-plans .o-section-heading__title {
	font-size: var(--o-fs-h1); /* 32 -> 48, per the comp */
	line-height: 1.08;
	text-transform: uppercase;
}

.o-floor-plans__nav {
	display: flex;
	align-items: center;
	gap: var(--o-space-sm);
}

/*
 * The comp draws the counter navy on navy, which reads as a slip rather than
 * a choice - it is set in the scheme's muted tone so it can be seen.
 */
.o-floor-plans__count {
	margin: 0 var(--o-space-xs) 0 0;
	color: var(--o-text-soft);
	font-size: var(--o-fs-body);
	font-variant-numeric: tabular-nums;
}

/*
 * Outlined circles in the scheme's text colour, filling on hover. Taking the
 * colours from the scheme means they work on the navy band and on white.
 */
.o-floor-plans__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid var(--o-text);
	border-radius: 50%;
	background-color: transparent;
	color: var(--o-text);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	line-height: 1;
	transition: background-color var(--o-transition), color var(--o-transition), opacity var(--o-transition);
}

.o-floor-plans__arrow:hover,
.o-floor-plans__arrow:focus-visible {
	background-color: var(--o-text);
	color: var(--o-bg);
}

/* The global focus ring squares its corners; this one should stay round. */
.o-floor-plans__arrow:focus-visible {
	border-radius: 50%;
}

/*
 * aria-disabled rather than disabled, so a keyboard user on the arrow is not
 * dropped out of the focus order when the row reaches its end. Same as the
 * Artistic Gallery.
 */
.o-floor-plans__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

.o-floor-plans__arrow[aria-disabled="true"]:hover {
	background-color: transparent;
	color: var(--o-text);
}

/* --------------------------------------------------------------------------
   The row
   The track scrolls; the list is a single-row grid whose columns are sized
   against the track's width, so exactly three (or two) cards fit and the
   rest overflow into the scroll.
   -------------------------------------------------------------------------- */
.o-floor-plans__track {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

/*
 * The scrollbar goes only once the script is running, because that is when
 * the arrows exist to replace it.
 */
.o-floor-plans.is-enhanced .o-floor-plans__track {
	scrollbar-width: none;
}

.o-floor-plans.is-enhanced .o-floor-plans__track::-webkit-scrollbar {
	display: none;
}

.o-floor-plans__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--o-fp-card);
	gap: var(--o-fp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-floor-plans__item {
	display: flex;
	min-width: 0;
	scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Card
   Always white with navy copy, whatever the band behind it.
   -------------------------------------------------------------------------- */
.o-floor-plans__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--o-white);
	color: var(--o-navy);
}

/*
 * 448 x 660 in the comp, which is 2:3 to within a few pixels. The drawing is
 * taken out of flow: left in it, a tall plan grows the box past its ratio,
 * and the cards stop lining up.
 */
.o-floor-plans__plan {
	position: relative;
	aspect-ratio: 2 / 3;
	background-color: var(--o-white);
}

.o-floor-plans__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	aspect-ratio: 2 / 3 !important;
}

.o-floor-plans__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-space-md);
	padding: 1.5rem 1.75rem 1.75rem; /* 24 / 28 / 28 */
}

.o-floor-plans__name {
	margin: 0;
	color: inherit;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: 1.5rem; /* 24 */
	line-height: 1.15;
	text-transform: uppercase;
}

.o-floor-plans__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-space-sm) 2.5rem; /* 40 across, per the comp */
	margin: 0;
}

/* Number above label, though the label comes first in the markup. */
.o-floor-plans__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--o-space-2xs);
}

.o-floor-plans__stat dt {
	font-family: var(--o-font-body);
	font-size: var(--o-fs-xs); /* The comp is 13 */
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.o-floor-plans__stat dd {
	margin: 0;
	color: var(--o-teal);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: 1.25rem; /* 20 */
	line-height: 1.2;
}

/* Pushed to the foot, so the links line up when one plan has an extra stat. */
.o-floor-plans__link {
	margin-top: auto;
	color: var(--o-orange);
	font-size: var(--o-fs-body); /* The comp is 15 */
	letter-spacing: 0.03em;
}

.o-floor-plans__link:hover,
.o-floor-plans__link:focus-visible {
	color: var(--o-orange-dark);
}