.rooms-filter { background: rgb(var(--color-surface)); padding: var(--space-4) var(--space-6); box-shadow: var(--shadow-elevated); margin-top: -40px; position: relative; z-index: 2; max-width: 680px; margin-inline: auto; }
.rooms-filter .rf-row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: flex-end; }
.rooms-filter .rf-field { flex: 1; min-width: 130px; }
.rooms-filter .rf-field label { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: rgb(var(--color-text-muted)); margin-bottom: var(--space-1); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; }
.rooms-filter .rf-date-field { position: relative; cursor: pointer; }
.rooms-filter .rf-field input,
.rooms-filter .rf-field select { width: 100%; border: none; border-bottom: 1px solid rgb(var(--color-border-strong)); background: transparent; padding: var(--space-2) 0; font-family: var(--font-num); font-size: var(--text-base); color: rgb(var(--color-text-body)); min-height: 42px; transition: border-color var(--motion-duration-fast) var(--motion-ease-soft); }
.rooms-filter .rf-field input:focus,
.rooms-filter .rf-field select:focus { outline: none; border-bottom-color: rgb(var(--color-accent)); border-bottom-width: 2px; }
.rooms-filter .rf-submit { flex-shrink: 0; }

/* 房型卡片：画廊 + 信息区的编辑式排版
 * 第一性：房型决策高度依赖视觉，图片是主角 → 画廊 52% > 文字 48%
 * （图片沉浸优先，同时文字区 48% 仍保舒适阅读；避免 60/40 的极端挤压）。 */
.room-item {
	position: relative;
	display: grid;
	grid-template-columns: 52% 48%;
	background: rgb(var(--color-surface));
	margin-bottom: var(--space-8);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
/* 推荐角标（featured 端到端展示）：置于卡片左上，悬浮于画廊之上 */
.room-item .room-featured-badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 3;
	background: rgb(var(--color-accent));
	color: rgb(var(--color-on-accent, 15, 42, 33));
	padding: 3px 12px;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	box-shadow: var(--shadow-card);
}
.room-item:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* —— 画廊区：固定 aspect-ratio 独立高度，图片 cover 裁切填满 ——
 * 第一性：画廊高度必须稳定（不依赖信息区内容），否则 object-fit:cover 随容器高度
 * 变化重新裁切，导致闪跳/突然放大缩小。用 aspect-ratio 固定比例 + align-self:start
 * 避免被 grid stretch 拉伸（原 height:100% 跟随信息区是闪跳根因）。
 * 信息区 align-self:stretch（默认）拉伸到画廊高度，CTA 推底对齐。
 * 图片尺寸不匹配：object-fit:cover 等比缩放居中裁切，不变形、不留白。 */
.room-item .room-image {
	background-size: cover;
	background-position: center;
	min-height: 100%;
}
.room-item .room-gallery {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	align-self: start;
}
.room-item .room-gallery .shop-slider,
.room-item .room-gallery .shop-slider-track,
.room-item .room-gallery .shop-slider-slide {
	height: 100%;
}
.room-item .room-gallery .shop-slider-slide {
	display: flex;
}
.room-item .room-gallery .shop-slider-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 等比缩放居中裁切，填充容器 */
	object-position: center;
}
.room-item .room-gallery .shop-slider-slide {
	background: rgb(var(--color-bg-soft));
}
/* 画廊箭头：默认隐藏（通用规则 opacity:0），hover 卡片即显现，悬停箭头沙金 */
.room-item:hover .room-gallery .shop-slider-arrow {
	opacity: 1;
	pointer-events: auto;
}
.room-item .room-gallery .shop-slider-arrow {
	background: rgb(var(--color-mask-rgb) / 0.55);
	color: rgb(var(--color-on-primary));
	backdrop-filter: blur(2px);
}
.room-item .room-gallery .shop-slider-arrow:hover {
	background: rgb(var(--color-accent));
}
/* 圆点：置于画廊底部，悬浮于图上 */

/* —— 信息区：结构化信息 + 底部决策条 —— */
.room-item .room-body {
	padding: var(--space-7) var(--space-8);
	display: flex;
	flex-direction: column;
}
/* 房型标题/床型 pill 可点击（链接详情页） */
.room-item .title-h2 a { color: inherit; text-decoration: none; transition: color var(--transition-slow); }
.room-item .title-h2 a:hover { color: rgb(var(--color-primary)); }
.room-item .pill-scene { text-decoration: none; font-size: var(--text-xs); padding: 2px 10px; color: rgb(var(--color-on-primary)); }
.room-item .pill-scene:hover { opacity: 0.85; }
/* 描述限高 2 行：保证各卡片信息区高度一致、画廊底部对齐 */
.room-item .room-desc-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.6;
}
/* 设施更多（+N）标签 */
.room-item .fac-tag.fac-more { background: transparent; border: 1px dashed rgb(var(--color-border)); color: rgb(var(--color-primary)); text-decoration: none; }
.room-item .fac-tag.fac-more:hover { background: rgb(var(--color-primary)); color: rgb(var(--color-on-primary)); }
/* 双 CTA 组：探索（次要）+ 立即预订（主要） */
.room-item .room-cta { display: flex; gap: var(--space-3); align-items: center; }
.room-item .room-meta {
	display: flex;
	gap: var(--space-6);
	color: rgb(var(--color-text-muted));
	font-size: var(--text-sm);
	flex-wrap: wrap;
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid rgb(var(--color-border));
}
.room-item .room-meta span b {
	color: rgb(var(--color-text-body));
	font-family: var(--font-num);
	font-weight: 600;
}
.room-item .room-meta span + span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	background: rgb(var(--color-border));
	margin-right: var(--space-6);
	vertical-align: middle;
}
.room-item .room-meta .shop-icon {
	flex: none;
	vertical-align: middle;
	position: relative;
	top: -1px;
	fill: currentColor;
	color: rgb(var(--color-text-muted));
}
.room-item .room-meta .room-meta-text { display: inline; }
.room-facilities {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-top: var(--space-4);
}
.room-facilities .fac-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgb(var(--color-bg-soft));
	padding: 3px 11px;
	font-size: var(--text-xs);
	color: rgb(var(--color-text-muted));
	letter-spacing: 0.02em;
	transition: background var(--transition-slow), color var(--transition-slow);
}
.room-facilities .fac-tag:hover {
	background: rgb(var(--color-primary));
	color: rgb(var(--color-on-primary));
}
.room-facilities .fac-tag .shop-icon { flex: none; }
.room-facilities .fac-tag svg { display: block; }

/* —— 底部决策条：价格 + CTA 右对齐，与信息区分隔 ——
 * 文字区 48% 收窄后：默认价格/CTA 同排，空间不足时换行（flex-wrap）。 */
.room-item .room-book {
	margin-top: auto;
	padding-top: var(--space-5);

	display: flex;
	gap: var(--space-3);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.room-item .room-book .room-cta {
	flex: none;
}
.room-item .room-book .price-block {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	min-width: 0;
}
.room-item .room-book .price-amount {
	font-family: var(--font-num);
	font-size: var(--text-h3);
	color: rgb(var(--color-primary));
	font-weight: 600;
}
.room-item .room-book .price-unit {
	font-size: var(--text-sm);
	color: rgb(var(--color-text-muted));
}

/* 移动端：堆叠为上下结构；画廊由图片 cover 撑起（等比裁切，不改 aspect-ratio） */
@media (max-width: 768px) {
	.room-item { grid-template-columns: 1fr; }
	.room-item .room-body { padding: var(--space-5); }
	.room-item .room-book { justify-content: flex-start; }
	.room-item .room-gallery .shop-slider,
	.room-item .room-gallery .shop-slider-slide img { min-height: 220px; }
	/* 筛选栏：紧凑化，横向滚动避免多行堆叠 */
	.rooms-filter { padding: var(--space-3) var(--space-4); margin-top: -24px; }
	.rooms-filter .rf-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.rooms-filter .rf-field { min-width: 120px; flex: 0 0 auto; }
	.rooms-filter .rf-submit { width: 100%; }

}