/* Balerfornia Room Slider — centre-stage carousel with an arched photo.
   Modeled on the Lavender Shore reference's `.slider-section-home-a`.

   SPECIFICITY NOTE — same trap as the other widgets, do not collapse these
   selectors. CozyStay's main.min.css hits bare tags via `.elementor-section h3`
   (0,1,1) and links via `.elementor-element a:not([class*="button"]):not(:hover)`
   { color: inherit } (0,3,1). Anything under 0,2,0 loses; the CTAs specifically
   need 0,4,0. See the hero/statement CSS for the same reasoning. */

.elementor-widget-balerfornia-room-slider,
.elementor-widget-balerfornia-room-slider > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

.bfr-rooms {
	--bfr-bg: #F6F1E7;
	--bfr-text: #053932;
	--bfr-accent: #7DA086;
	--bfr-font-display: 'Playfair Display', Georgia, serif;
	--bfr-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--bfr-card: clamp(260px, 42vw, 676px);

	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--bfr-bg);
	padding: clamp(48px, 7vh, 80px) 0 clamp(64px, 10vh, 120px);
	/* The neighbouring slides deliberately overflow the mask; clip them at the
	   section edge rather than letting them create a horizontal scrollbar. */
	overflow: clip;
}

/* The viewport is only one card wide and centred — that is what makes the
   previous/next cards bleed in at both edges. Widening this to 100% turns the
   whole thing into an ordinary carousel and loses the effect. */
.bfr-rooms .bfr-rooms__viewport {
	position: relative;
	width: var(--bfr-card);
	margin: 0 auto;
}

.bfr-rooms .bfr-rooms__track {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 700ms cubic-bezier(0.4, 0, 0.15, 1);
	will-change: transform;
}

.bfr-rooms .bfr-rooms__slide {
	flex: 0 0 var(--bfr-card);
	width: var(--bfr-card);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Neighbours sit back so the centred card reads as the subject. */
	opacity: 0.38;
	transition: opacity 700ms ease;
}

.bfr-rooms .bfr-rooms__slide::before,
.bfr-rooms .bfr-rooms__slide::marker {
	content: none;
}

.bfr-rooms .bfr-rooms__slide.is-active {
	opacity: 1;
}

/* ---- Card ---------------------------------------------------------------- */

.bfr-rooms .bfr-rooms__card {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

.bfr-rooms .bfr-rooms__media {
	position: relative;
	width: 100%;
	aspect-ratio: 676 / 640;
	overflow: hidden;
	background: rgba(5, 57, 50, 0.06);
	/* The arch. 400px exceeds half the card width, so the browser proportionally
	   clamps it to a true semicircular top — which is the whole look, and it
	   echoes the arch in the Balerfornia logo mark. Keep the value oversized;
	   a literal 50% would flatten into an ellipse at some widths. */
	border-radius: 400px 400px 16px 16px;
}

.bfr-rooms .bfr-rooms__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bfr-rooms .bfr-rooms__media-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 31%;
	display: flex;
	align-items: flex-end;
	padding: 32px;
	background: linear-gradient(to top, rgba(5, 57, 50, 0.72), rgba(5, 57, 50, 0));
	pointer-events: none;
}

.bfr-rooms .bfr-rooms__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bfr-rooms .bfr-rooms__tag {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--bfr-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}

.bfr-rooms .bfr-rooms__tag::before,
.bfr-rooms .bfr-rooms__tag::marker {
	content: none;
}

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

.bfr-rooms .bfr-rooms__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 448px;
	text-align: center;
}

.bfr-rooms .bfr-rooms__badge {
	padding: 8px 12px;
	border: 1px solid rgba(5, 57, 50, 0.16);
	border-radius: 1600px;
	font-family: var(--bfr-font-body);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bfr-accent);
}

.bfr-rooms .bfr-rooms__headline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* 0,2,0 — must outrank CozyStay's `.elementor-section h3` / `.elementor h3`. */
.bfr-rooms .bfr-rooms__name {
	margin: 0;
	font-family: var(--bfr-font-display);
	/* 400, like the statement — this section is editorial, not shouty. */
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bfr-text);
	text-align: center;
	text-transform: none;
}

.bfr-rooms .bfr-rooms__desc {
	margin: 0;
	font-family: var(--bfr-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--bfr-text);
	opacity: 0.78;
}

/* ---- CTAs ---------------------------------------------------------------- */

.bfr-rooms .bfr-rooms__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.bfr-rooms .bfr-rooms__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 32px;
	font-family: var(--bfr-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* Off-white primary that fills dark-green + white text on hover (the "Explore
   All Experiences" style, per Tiara). The slider sits on a CREAM band so the
   off-white fill is invisible at rest — the forest outline carries it, and it
   reads as an outlined pill that fills forest on hover. */
.bfr-rooms .bfr-rooms__cta--primary {
	background: #CD9A85;
	border: 1.5px solid #CD9A85;
}

.bfr-rooms .bfr-rooms__cta--secondary {
	background: transparent;
	border: 1.5px solid #053932;
}

.bfr-rooms .bfr-rooms__cta:hover {
	transform: scale(1.02);
}

/* 0,4,0 — beats CozyStay's `.elementor-element a:not([class*="button"]):not(:hover)`
   (0,3,1) which would otherwise force `color: inherit` onto both CTAs. */
.bfr-rooms .bfr-rooms__actions .bfr-rooms__cta--primary:not(:hover) {
	color: #fff;
}

.bfr-rooms .bfr-rooms__actions .bfr-rooms__cta--secondary:not(:hover) {
	color: var(--bfr-text);
}

/* `color !important`: CozyStay's `.no-touch .entry-content a:not([class*="button"]):hover`
   (main.min.css, 0,4,1) outranks this rule and would repaint the label its
   link-hover gold on desktop. Our CTA classes lack the literal "button" so the
   theme doesn't skip them. */
.bfr-rooms .bfr-rooms__cta--primary:hover {
	background: #B77E62;
	color: #fff !important;
	border-color: #B77E62;
}

.bfr-rooms .bfr-rooms__cta--secondary:hover {
	background: #053932;
	color: #F6F1E7 !important;
}

/* ---- Arrows -------------------------------------------------------------- */

.bfr-rooms .bfr-rooms__arrow {
	position: absolute;
	/* Vertically centred on the arched photo, not the whole card — the card is
	   much taller than the image and centring on it drops the arrows into the
	   copy. 640/2 of a 676-wide card ≈ 47% of the media box. */
	top: calc(var(--bfr-card) * 0.473);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 1600px;
	background: #fff;
	color: var(--bfr-text);
	cursor: pointer;
	z-index: 4;
	box-shadow: 0 2px 14px rgba(5, 57, 50, 0.1);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bfr-rooms .bfr-rooms__arrow:hover {
	background: var(--bfr-accent);
	color: #fff;
}

.bfr-rooms .bfr-rooms__arrow svg {
	width: 11px;
	height: 20px;
}

.bfr-rooms .bfr-rooms__arrow--prev {
	right: calc(100% + 24px);
}

.bfr-rooms .bfr-rooms__arrow--next {
	left: calc(100% + 24px);
}

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

@media (prefers-reduced-motion: reduce) {
	.bfr-rooms .bfr-rooms__track {
		transition: none;
	}
	.bfr-rooms .bfr-rooms__slide {
		transition: none;
	}
}

@media (max-width: 900px) {
	.bfr-rooms {
		--bfr-card: min(78vw, 420px);
	}

	/* No room for arrows outside the card at this width — tuck them onto the
	   photo's lower corners rather than letting them collide with neighbours. */
	.bfr-rooms .bfr-rooms__arrow--prev {
		right: auto;
		left: 8px;
	}

	.bfr-rooms .bfr-rooms__arrow--next {
		left: auto;
		right: 8px;
	}

	.bfr-rooms .bfr-rooms__media-overlay {
		padding: 20px;
	}
}

/* ---- Grid layout (About Us / room-listing page) -------------------------- */
/* Reuses the exact card markup; overrides the single-card slider viewport into
   a 2-up stack. The homepage keeps the default slider — this only applies when
   the widget's Layout control is set to Grid (.bfr-rooms--grid). */
.bfr-rooms.bfr-rooms--grid {
	overflow: visible;
	padding: clamp(40px, 6vh, 72px) 0 clamp(48px, 8vh, 96px);
}

.bfr-rooms.bfr-rooms--grid .bfr-rooms__viewport {
	width: min(92vw, 1120px);
	max-width: 1120px;
}

.bfr-rooms.bfr-rooms--grid .bfr-rooms__track {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(44px, 5vw, 76px) clamp(32px, 4vw, 56px);
	align-items: start;
	transition: none;
	will-change: auto;
	transform: none !important; /* the slider JS never runs here, but belt-and-braces */
}

.bfr-rooms.bfr-rooms--grid .bfr-rooms__slide {
	flex: none;
	width: auto;
	opacity: 1;
}

.bfr-rooms.bfr-rooms--grid .bfr-rooms__arrow {
	display: none;
}

@media (max-width: 760px) {
	.bfr-rooms.bfr-rooms--grid .bfr-rooms__track {
		grid-template-columns: 1fr;
		gap: clamp(36px, 9vw, 56px);
	}
}