/*
 * Sai Lux Sunrise — Amenities
 *
 * Everything is scoped under .sls-am so the theme (Entox) and Elementor can't
 * bleed in, and we can't bleed out. Colours are per-group: each card carries a
 * data-accent and picks its tint, icon colour and hover glow from these tokens.
 */

.sls-am {
	--sls-ink:        var(--b-navy);
	--sls-ink-soft:   var(--b-ink-soft);
	--sls-line:       var(--b-line);
	--sls-bg:         #ffffff;
	--sls-radius:     20px;
	--sls-shadow:     0 1px 2px rgba(var(--b-navy-rgb), .04), 0 8px 24px rgba(var(--b-navy-rgb), .05);
	--sls-shadow-lif: 0 2px 4px rgba(var(--b-navy-rgb), .05), 0 18px 40px rgba(var(--b-navy-rgb), .11);
	--sls-font:       "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 20px;
	font-family: var(--sls-font);
	color: var(--sls-ink);
	-webkit-font-smoothing: antialiased;
}

.sls-am *,
.sls-am *::before,
.sls-am *::after { box-sizing: border-box; }

/* The theme puts bullets and margins on every ul/li/p; strip them here.
   Wrapped in :where() so the reset carries ZERO specificity — otherwise
   `.sls-am p` (0,1,1) would beat `.sls-am__lede` (0,1,0) and silently undo
   every margin set further down this file. */
:where(.sls-am) :where(ul, li) { list-style: none; margin: 0; padding: 0; }
:where(.sls-am) :where(p) { margin: 0; }
:where(.sls-am) :where(h2, h3) { margin: 0; line-height: 1.2; color: var(--sls-ink); }

/* Bullets are the one thing themes tend to force, so keep that !important. */
.sls-am ul, .sls-am li { list-style: none !important; }

/* --- Accent palette ------------------------------------------------------ */
/* tint = the card wash, ink = the icon, glow = the hover shadow.             */
.sls-am [data-accent="teal"] { --a-ink: var(--a1-ink); --a-tint: var(--a1-tint); --a-edge: var(--a1-edge); --a-glow: var(--a1-rgb); }
.sls-am [data-accent="amber"] { --a-ink: var(--a2-ink); --a-tint: var(--a2-tint); --a-edge: var(--a2-edge); --a-glow: var(--a2-rgb); }
.sls-am [data-accent="violet"] { --a-ink: var(--a5-ink); --a-tint: var(--a5-tint); --a-edge: var(--a5-edge); --a-glow: var(--a5-rgb); }
.sls-am [data-accent="sky"] { --a-ink: var(--a3-ink); --a-tint: var(--a3-tint); --a-edge: var(--a3-edge); --a-glow: var(--a3-rgb); }
.sls-am [data-accent="green"] { --a-ink: var(--a4-ink); --a-tint: var(--a4-tint); --a-edge: var(--a4-edge); --a-glow: var(--a4-rgb); }
.sls-am [data-accent="rose"] { --a-ink: var(--a6-ink); --a-tint: var(--a6-tint); --a-edge: var(--a6-edge); --a-glow: var(--a6-rgb); }

/* --- Hero ---------------------------------------------------------------- */
.sls-am__hero {
	position: relative;
	text-align: center;
	padding: 64px 56px 52px;
	margin-bottom: 8px;
}

/* Soft aurora behind the heading — pure CSS, no image to load. */
.sls-am__hero::before {
	content: "";
	position: absolute;
	inset: 0 24px;
	z-index: 0;
	border-radius: 32px;
	background:
		radial-gradient(60% 80% at 18% 12%, rgba(var(--b-gold-rgb), .13), transparent 62%),
		radial-gradient(55% 75% at 84% 18%, rgba(217, 119, 6, .12), transparent 62%),
		radial-gradient(70% 90% at 50% 108%, rgba(124, 58, 237, .10), transparent 60%);
	pointer-events: none;
}

.sls-am__hero > * { position: relative; z-index: 1; }

.sls-am__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--b-gold-d);
	background: #fff;
	border: 1px solid var(--sls-line);
	border-radius: 999px;
	padding: 7px 16px 7px 12px;
	box-shadow: var(--sls-shadow);
	margin-bottom: 22px;
}

.sls-am__eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--b-gold-d);
	box-shadow: 0 0 0 4px rgba(var(--b-gold-rgb), .16);
}

.sls-am__title {
	font-size: clamp(38px, 6vw, 62px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.04;
}

.sls-am__lede {
	margin: 20px auto 0;
	font-size: clamp(15.5px, 1.5vw, 18px);
	line-height: 1.72;
	color: var(--sls-ink-soft);
}

.sls-am__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 36px;
}

.sls-am__stats li {
	flex: 1 1 150px;
	max-width: 220px;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(6px);
	border: 1px solid var(--sls-line);
	border-radius: 16px;
	padding: 16px 14px;
	box-shadow: var(--sls-shadow);
}

.sls-am__stats strong {
	display: block;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--sls-ink);
}

.sls-am__stats span {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--sls-ink-soft);
}

/* --- Filter chips -------------------------------------------------------- */
/* Sticky so the categories stay reachable while scrolling a long list.       */
.sls-am__filters {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	padding: 16px 0;
	margin-bottom: 12px;
	background: linear-gradient(#fff 62%, rgba(255, 255, 255, 0));
}

.sls-am__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--sls-ink-soft);
	background: #fff;
	border: 1px solid var(--sls-line);
	border-radius: 999px;
	padding: 9px 15px;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sls-am__chip:hover {
	color: var(--sls-ink);
	border-color: var(--b-cream-d);
	transform: translateY(-1px);
	box-shadow: var(--sls-shadow);
}

.sls-am__chip.is-active {
	color: #fff;
	background: var(--sls-ink);
	border-color: var(--sls-ink);
	box-shadow: 0 6px 18px rgba(var(--b-navy-rgb), .22);
}

/* An active category chip takes its own colour, so the chip row itself is a legend. */
.sls-am__chip.is-active[data-accent] {
	background: var(--a-ink);
	border-color: var(--a-ink);
	box-shadow: 0 6px 18px rgba(var(--a-glow), .32);
}

.sls-am__chip-count {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--b-cream);
	color: var(--sls-ink-soft);
}

.sls-am__chip.is-active .sls-am__chip-count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* --- Groups -------------------------------------------------------------- */
.sls-am__group { padding: 30px 0 8px; }

.sls-am__group[hidden] { display: none; }

.sls-am__group-head {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 0 12px;
	margin-bottom: 22px;
	padding-left: 14px;
	border-left: 4px solid var(--a-ink);
}

.sls-am__group-title {
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.sls-am__group-count {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 999px;
	color: var(--a-ink);
	background: var(--a-tint);
	border: 1px solid var(--a-edge);
}

.sls-am__group-note {
	grid-column: 1 / -1;
	margin-top: 7px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sls-ink-soft);
}

/* --- Cards --------------------------------------------------------------- */
.sls-am__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 18px;
}

.sls-am__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 22px 26px;
	border: 1px solid var(--sls-line);
	border-radius: var(--sls-radius);
	background: var(--sls-bg);
	box-shadow: var(--sls-shadow);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease, border-color .26s ease;
}

/* The colour wash sits in a pseudo-element so we can fade it up on hover
   without repainting the card background (cheaper, and it animates smoothly). */
.sls-am__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(160deg, var(--a-tint) 0%, #fff 62%);
	opacity: .85;
	transition: opacity .26s ease;
}

/* A soft corner bloom that only shows on hover. */
.sls-am__card::after {
	content: "";
	position: absolute;
	top: -50px;
	right: -50px;
	width: 150px;
	height: 150px;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--a-glow), .18), transparent 70%);
	opacity: 0;
	transition: opacity .3s ease;
}

.sls-am__card > * { position: relative; z-index: 1; }

.sls-am__card:hover {
	transform: translateY(-5px);
	border-color: var(--a-edge);
	box-shadow: var(--sls-shadow-lif), 0 20px 44px rgba(var(--a-glow), .14);
}

.sls-am__card:hover::before { opacity: 1; }
.sls-am__card:hover::after  { opacity: 1; }

.sls-am__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 15px;
	color: var(--a-ink);
	background: #fff;
	border: 1px solid var(--a-edge);
	box-shadow: 0 2px 6px rgba(var(--b-navy-rgb), .05), 0 8px 18px rgba(var(--a-glow), .10);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s ease;
}

.sls-am__card:hover .sls-am__icon {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 2px 6px rgba(var(--b-navy-rgb), .06), 0 12px 24px rgba(var(--a-glow), .22);
}

.sls-am__svg { width: 26px; height: 26px; display: block; }

.sls-am__card-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.32;
}

.sls-am__card-text {
	margin-top: 9px;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--sls-ink-soft);
}

.sls-am__badge {
	display: inline-block;
	margin-top: 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
	color: var(--a-ink);
	background: #fff;
	border: 1px dashed var(--a-edge);
}

/* --- Closing CTA --------------------------------------------------------- */
.sls-am__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 54px;
	padding: 38px 40px;
	border-radius: 24px;
	color: #fff;
	background:
		radial-gradient(80% 140% at 8% 0%, rgba(var(--b-gold-rgb), .55), transparent 60%),
		radial-gradient(70% 130% at 96% 100%, rgba(217, 119, 6, .40), transparent 58%),
		var(--b-navy);
	box-shadow: 0 20px 50px rgba(var(--b-navy-rgb), .22);
}

.sls-am__cta-text { flex: 1 1 380px; }

.sls-am__cta-text h3 {
	color: #fff;
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.sls-am__cta-text p {
	margin-top: 9px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
}

.sls-am__cta-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	color: var(--b-navy) !important;
	background: #fff;
	border-radius: 999px;
	padding: 15px 32px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
	transition: transform .2s ease, box-shadow .2s ease;
}

.sls-am__cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
	color: var(--b-navy) !important;
}

/* --- Entrance animation --------------------------------------------------- */
/* Deliberately pure CSS, and deliberately NOT scroll-triggered.
   A JS/IntersectionObserver reveal can leave cards stuck at opacity 0 if
   anything goes wrong (a JS error from another plugin, a throttled background
   tab, an old browser). An animation with `both` fill always finishes at
   opacity 1, so the worst case here is that the guest misses a fade — never
   that the amenities are invisible. */
@keyframes sls-am-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.sls-am__card {
	animation: sls-am-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}

/* Stagger the first row or two so the grid ripples in instead of popping. */
.sls-am__card:nth-child(1) { animation-delay: 0ms; }
.sls-am__card:nth-child(2) { animation-delay: 50ms; }
.sls-am__card:nth-child(3) { animation-delay: 100ms; }
.sls-am__card:nth-child(4) { animation-delay: 150ms; }
.sls-am__card:nth-child(5) { animation-delay: 200ms; }
.sls-am__card:nth-child(6) { animation-delay: 250ms; }
.sls-am__card:nth-child(7) { animation-delay: 300ms; }
.sls-am__card:nth-child(n+8) { animation-delay: 350ms; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 782px) {
	.sls-am__hero { padding: 44px 24px 36px; }
	.sls-am__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
	.sls-am__card { padding: 20px 18px 22px; }
	.sls-am__cta { padding: 30px 24px; }
}

@media (max-width: 520px) {
	.sls-am { padding: 0 14px 14px; }
	.sls-am__grid { grid-template-columns: 1fr; }
	.sls-am__filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 12px 0; }
	.sls-am__filters::-webkit-scrollbar { display: none; }
	.sls-am__chip { flex: 0 0 auto; }
	.sls-am__stats li { flex-basis: 45%; }
	.sls-am__cta-btn { width: 100%; justify-content: center; }
}

/* Respect the OS "reduce motion" setting — no lifts, no reveals. */
@media (prefers-reduced-motion: reduce) {
	.sls-am *,
	.sls-am *::before,
	.sls-am *::after {
		transition: none !important;
		animation: none !important;
	}
	.sls-am__card { opacity: 1; transform: none; }
	.sls-am__card:hover { transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
/* Cards start at opacity 0 and are brought in by the entrance animation, which
   never runs when a page is printed — so force the finished state here, or a
   guest printing the amenities list would get blank cards. */
@media print {
	.sls-am__card {
		animation: none;
		opacity: 1;
		transform: none;
		box-shadow: none;
		break-inside: avoid;
	}

	.sls-am__filters { display: none; }
	.sls-am__cta { box-shadow: none; }
}