/* ---------- Facilities section (plugin: FacilitiesPlugin) ---------- */

.facilities {
	padding: var(--s12) 0;
	position: relative;
	background: var(--color-surface);
}

.facilities .container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--s3);
}

.facilities .section-head {
	margin: 0 auto var(--s8);
	text-align: center;
}

.facilities .section-head .kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: var(--s2);
}

.facilities .kicker .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--yellow);
	display: inline-block;
}

.facilities .section-head h2 {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.6vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 var(--s2);
	color: var(--color-text);
}

.facilities .section-head p {
	color: var(--color-text-muted);
	font-size: 1.06rem;
	max-width: 640px;
	margin: 0 auto;
}

/* ---------- Facility rows (alternating) ---------- */

.facility {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--s8);
	align-items: center;
	padding: var(--s6) 0;
}

/* prevent grid blowout: allow columns to shrink below content size
   (Swiper slides otherwise force the media column to full image width) */
.facility > * {
	min-width: 0;
}

.facilities-list .facility:nth-child(even){ grid-template-columns: 1fr 1.2fr;}

.facilities-list .facility:nth-child(odd) .facility-media { order: 2; }

.facility-media { position: relative; }

.facility-media .photo,
.facility-media .facility-slider {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 16/11;
	width: 100%;
	max-width: 100%;
}

.facility-slider .swiper-slide {
	max-width: 100%;
	overflow: hidden;
}

.facility-media .photo img,
.facility-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* pre-init safety: before Swiper runs, keep slides in one row,
   first slide visible, rest clipped by overflow:hidden */
.facility-slider .swiper-wrapper {
	display: flex;
	height: 100%;
}

.facility-slider .swiper-slide {
	flex: 0 0 100%;
	height: 100%;
}

.facility-thumbs .swiper-wrapper { display: flex; height: 4rem; }

.facility-thumbs .swiper-slide:not([style]) {
	flex: 0 0 calc(25% - 6px);
	margin-right: 8px;
}

/* numbered badge */
.facility-media .num {
	position: absolute;
	top: -22px;
	left: -22px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--slate);
	box-shadow: var(--shadow-md);
	z-index: 3;
	background: var(--yellow);
}

.facilities-list .facility:nth-child(5n+2) .num { background: var(--mint); }
.facilities-list .facility:nth-child(5n+3) .num { background: var(--pink); }
.facilities-list .facility:nth-child(5n+4) .num { background: var(--orange-soft); }
.facilities-list .facility:nth-child(5n+5) .num { background: var(--raspberry); }

/* ---------- Thumbs gallery ---------- */

.facility-thumbs {
	margin-top: var(--s1);
	padding: 4px 0;
}

.facility-thumbs .swiper-slide {
	border-radius: var(--r-sm);
	overflow: hidden;
	aspect-ratio: 4/3;
	cursor: pointer;
	opacity: .45;
	transition: opacity .2s ease , scale .2s cubic-bezier(.34, 1.56, .64, 1);
}

.facility-thumbs .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.facility-thumbs .swiper-slide:hover { opacity: .8; scale: 1.02; }

.facility-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	outline: 3px solid var(--orange);
	outline-offset: -3px;
}

/* ---------- Text column ---------- */

.facility-body h3 {
	font-family: var(--font-display);
	font-size: 1.7rem;
	margin: 0 0 var(--s2);
	color: var(--color-text);
}

.facility-body p {
	color: var(--color-text-muted);
	margin: 0;
}

.facility-body .pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--s2);
}

.facility .pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: .85rem;
	font-weight: 700;
}

.facility .pill i[class^="icon-"] {
	font-size: 14px;
	line-height: 1;
}

.facility .pill--mint { background: var(--mint-soft); color: #2C7A52; }
.facility .pill--yellow { background: var(--yellow-soft); color: #8a6d00; }
.facility .pill--pink { background: var(--pink-soft); color: #B83D63; }
.facility .pill--orange { background: var(--orange-soft); color: #B05E00; }
.facility .pill--slate { background: #E8ECEF; color: var(--slate); }

/* ---------- Responsive ---------- */

@media (max-width: 920px) {
	.facility {
		grid-template-columns: 1fr !important;
		gap: var(--s4);
	}

	.facilities-list .facility:nth-child(even) .facility-media { order: 1; }
	.facilities-list .facility:nth-child(odd) .facility-media { order: 1; }
}