/* Balerfornia Room Listing — grid of live room cards.

   SPECIFICITY NOTE — CozyStay styles bare tags via `.elementor-section h2 / p`
   (0,1,1) and anchors via `.elementor-element a:not([class*="button"])...`
   (~0,3,1). So: content selectors are scoped `.bfrl .bfrl__x` (0,2,0) to beat
   tag rules, and every text element sets its OWN colour (children keep their
   colour regardless of the theme's `a { color: inherit }` on the card link).
   Do not collapse these to single classes. */

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

.bfrl {
	--bfrl-bg: #F6F1E7;
	--bfrl-text: #053932;
	--bfrl-accent: #A85F3D;
	--bfrl-font-display: 'Playfair Display', Georgia, serif;
	--bfrl-font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--bfrl-bg);
	color: var(--bfrl-text);
	padding: clamp(72px, 10vh, 116px) 0 clamp(64px, 8vh, 100px);
	box-sizing: border-box;
}

/* Optional vertical ombre: gradient top colour → the flat Band colour at the
   bottom. background-color above stays as the fallback. */
.bfrl.bfrl--gradient {
	background-image: linear-gradient(180deg, var(--bfrl-bg-top) 0%, var(--bfrl-bg) 100%);
}

.bfrl.bfrl--round-top {
	border-radius: 40px 40px 0 0;
	/* Overlap must be >= the corner radius so the band's own rounded corners sit
	   entirely over the section above (not the white page body), otherwise the
	   corners reveal white slivers at the sides. Pair with a FLAT-bottom hero. */
	margin-top: -44px;
	z-index: 2;
}

.bfrl .bfrl__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}

.bfrl .bfrl__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(28px, 3.4vw, 52px);
	grid-template-columns: repeat(2, 1fr);
}

.bfrl.bfrl--cols-3 .bfrl__grid {
	grid-template-columns: repeat(3, 1fr);
}

.bfrl .bfrl__item {
	margin: 0;
}

/* Card link — reach 0,4,0 so the theme's link colour rule can't touch it. */
.bfrl .bfrl__grid .bfrl__item .bfrl__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--bfrl-text);
	height: 100%;
}

.bfrl .bfrl__media {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 1 / 1;
	background: rgba(5, 57, 50, 0.06);
}

.bfrl .bfrl__media .bfrl__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bfrl .bfrl__card:hover .bfrl__img {
	transform: scale(1.04);
}

.bfrl .bfrl__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	font-family: var(--bfrl-font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #fff;
	background: rgba(5, 57, 50, 0.42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	padding: 8px 16px;
}

.bfrl .bfrl__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 4px 0;
}

.bfrl .bfrl__price {
	font-family: var(--bfrl-font-body);
	display: flex;
	align-items: baseline;
	gap: 6px;
	color: var(--bfrl-accent);
	order: -1;
}

.bfrl .bfrl__price-pre {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 0.85;
}

.bfrl .bfrl__price-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--bfrl-accent);
}

.bfrl .bfrl__price-suf {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.8;
}

.bfrl .bfrl__name {
	font-family: var(--bfrl-font-display);
	font-weight: 700;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.08;
	letter-spacing: -0.3px;
	margin: 0;
	color: var(--bfrl-text);
}

.bfrl .bfrl__facts {
	font-family: var(--bfrl-font-body);
	font-weight: 500;
	font-size: 13.5px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin: 0;
	color: var(--bfrl-text);
	opacity: 0.6;
}

.bfrl .bfrl__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-family: var(--bfrl-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--bfrl-accent);
}

.bfrl .bfrl__cta svg {
	width: 18px;
	height: 18px;
	transition: transform 0.3s ease;
}

.bfrl .bfrl__card:hover .bfrl__cta svg {
	transform: translateX(5px);
}

@media (max-width: 860px) {
	.bfrl .bfrl__grid,
	.bfrl.bfrl--cols-3 .bfrl__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.bfrl .bfrl__media {
		aspect-ratio: 1 / 1;
	}
}