/**
 * Featured Properties section.
 *
 * Measurements follow the design spec. Below 1920px the section flows and
 * shrinks; at 1920px and above it is full-height (100vh) with the exact
 * fixed offsets.
 *
 * Brand colours: ink #1E1F1E · slate #454645 · brand #119100 ·
 *                sky #35AFC9 · cloud #F3EFE3
 */

.nops-fp {
	position: relative;
	width: 100%;
	background: #454645; /* slate */
	color: #f3efe3; /* cloud */
	padding: 98px 0;
	overflow: hidden;
}

.nops-fp-inner {
	display: block;
}

/* ---- Heading + intro text ---- */
.nops-fp-head {
	max-width: 640px;
}

.nops-fp-heading {
	margin: 0;
	font-weight: 400;
	line-height: 1.1;
	color: #f3efe3;
	font-size: clamp(2rem, 2.6vw, 50px); /* 50px */
}

.nops-fp-text {
	/* 30px below the heading */
	margin-top: 30px;
	font-size: clamp(1rem, 1.04vw, 20px); /* 20px */
	letter-spacing: 0.015em; /* XD character spacing 15 */
	line-height: 28px;       /* XD line spacing 28 */
	color: #f3efe3;
}

.nops-fp-text p {
	margin: 0;
}

/* ---- Carousel track ---- */
.nops-fp-track {
	/* 35px below the text block */
	margin-top: 35px;
	display: flex;
	gap: 40px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* Firefox */
}

.nops-fp-track::-webkit-scrollbar {
	display: none; /* WebKit */
}

.nops-fp-card {
	/* Show 2 full cards + a peek of the 3rd. Account for the two gaps
	   (one between the visible cards, one before the peek). */
	--fp-gap: 40px;
	--fp-peek: 80px;
	flex: 0 0 calc((100% - 2 * var(--fp-gap) - var(--fp-peek)) / 2);
	min-width: 0;
	scroll-snap-align: start;
}

/* ---- 3-image grid (1 large left, 2 stacked right) ---- */
.nops-fp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	aspect-ratio: 16 / 9;
	text-decoration: none;
}

.nops-fp-img {
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #3a3b3a;
}

.nops-fp-img--main {
	grid-row: 1 / span 2;
	grid-column: 1;
}

.nops-fp-img--small {
	grid-column: 2;
}

/* ---- Card text ---- */
.nops-fp-card-headline {
	/* 46px below the image grid */
	margin: 46px 0 0;
	font-weight: 400;
	line-height: 1.1;
	font-size: clamp(1.75rem, 2.6vw, 50px); /* 50px */
}

.nops-fp-card-headline a {
	color: #f3efe3;
	text-decoration: none;
}

.nops-fp-meta {
	/* 25px below the headline */
	margin-top: 25px;
	display: flex;
	align-items: baseline;
	gap: 40px;
	font-size: clamp(1rem, 1.25vw, 24px); /* 24px */
	color: #f3efe3;
}

.nops-fp-type {
	color: #35afc9; /* sky accent, matches screenshot */
}

/* ---- Feature icon row ---- */
.nops-fp-features {
	/* 68px gap between the icons and the property meta text */
	margin: 68px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 36px;
}

.nops-fp-features li {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 18px; /* text next to each icon */
	color: #f3efe3;
}

.nops-fp-features li:not(:last-child) {
	padding-right: 36px;
	border-right: 1px solid rgba(243, 239, 227, 0.3);
}

.nops-fp-icon {
	display: block;
	width: auto;
	height: 22px;
}

/* ---- Prev / next arrows ---- */
.nops-fp-nav {
	/* 90px below the icons */
	margin-top: 90px;
	display: flex;
	align-items: center;
	gap: 32px;
}

.nops-fp-arrow {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Default cloud; colour change only on hover. */
.nops-fp-arrow svg path {
	fill: #f3efe3; /* cloud */
	transition: fill 0.2s ease;
}

.nops-fp-arrow:hover svg path {
	fill: #35afc9; /* sky */
}

/* ---- 1920px and up: full-height section with exact offsets ---- */
@media (min-width: 1920px) {
	.nops-fp {
		min-height: 100vh;
		padding-top: 98px;
	}

	.nops-fp-head {
		max-width: none;
	}

	.nops-fp-text {
		width: 850px;
		max-width: 100%;
	}
}

/* ---- Small screens ---- */
@media (max-width: 1024px) {
	.nops-fp-card {
		flex: 0 0 80%;
	}
}

@media (max-width: 640px) {
	.nops-fp-card {
		flex: 0 0 90%;
	}

	.nops-fp-features {
		flex-wrap: wrap;
		gap: 20px;
	}

	.nops-fp-features li:not(:last-child) {
		padding-right: 20px;
	}
}