.main{
	/*background-color:var(--primary_color);*/
}

.rooms_bg{
    padding-top: clamp(3.549rem, 5.73vw, 6.875rem) ;
    padding-bottom: clamp(2.742rem, 4.43vw, 5.313rem);
}

.rooms_bg .wrap {
    /* width: 100%;
    max-width: 81.25rem;
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem); */
}

/* 圖片預留空間 placeholder */
.rooms_bg .img {
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #dde3e8 0 0.75rem, #d3dae0 0.75rem 1.5rem);
}

.rooms_bg .img img {
    /* position: absolute; */
    /* inset: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* object-fit: cover; */
    /* display: block; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-data);
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* transition: var(--transition-data); */
    transition: none; /* Ken Burns 以 animation 控制 transform，不可讓 transition 介入否則換圖時會閃縮 */
}


/*當前動畫*/
@keyframes kenBurns {
    from { transform: scale(1); }
    /* to   { transform: scale(1.4); } */
    to   { transform: scale(1.3); }
}

.rooms_bg .room_main .img img.ken-burns-play {
    /* animation: kenBurns 10s ease-out forwards; */
    animation: kenBurns 22s ease-out forwards;
}





.rooms_bg .img .ph-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Courier New", monospace;
    font-size: 0.813rem;
    color: #5d6b78;
    background: rgba(255, 255, 255, .82);
    padding: 0.3rem 0.7rem;
    border-radius: 0.2rem;
    letter-spacing: .5px;
    white-space: nowrap;
    pointer-events: none;
}

/* -------------------------------------------------------- */
/* 頁面標題                                                  */
/* -------------------------------------------------------- */
.rooms_head {
    text-align: center;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 4vw, 3rem);
}

.rooms_head .en {
    display: block;
    font-family: var(--foreign_font);
    font-size: 0.875rem;
    letter-spacing: 0.35em;
    color: #8a929c;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

.rooms_head strong {
    display: block;
    font-family: var(--foreign_font);
    font-weight: 600;
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    letter-spacing: 0.18em;
    color: var(--second_color);
}

.rooms_head p {
    max-width: 42rem;
    margin: 1.1rem auto 0;
    font-size: 1rem;
    color: var(--dark_color);
    letter-spacing: .5px;
    line-height: 1.9;
}

/* -------------------------------------------------------- */
/* 房型區塊（共用結構，外觀差異由 modifier 控制）            */
/* room_area > room_list > room_card > room_in > room_content */
/* -------------------------------------------------------- */
.room_area {
    margin: 0;
    padding: 0;
    list-style-type : none;
    display: flex;
    flex-direction: column;
    gap: clamp(3.549rem, 5.73vw, 6.875rem);
    /* padding-bottom: clamp(4rem, 9vw, 7rem); */
}

.room_card {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.room_card .room_in {
    min-width: 0;
}

.room_list{
    margin: 0;
    padding: 0;
    list-style-type : none;
    display: block;
}

/* 偶數房型左右對調，營造節奏 */
.room_list:nth-child(even) .room_card {
    direction: rtl;
}

.room_list:nth-child(even) .room_card>* {
    direction: ltr;
}

/* ---- 圖庫（Swiper Thumbs gallery loop） ---- */
.room_gallery {
    position: relative;
}

.room_main {
    border-radius: 0.5rem;
    overflow: hidden;
}

.room_main .swiper-slide .img {
    /* aspect-ratio: 4/3; */
    aspect-ratio: 1.62 / 1;
    position: relative;
}
    .room_main .swiper-slide .img:before{
        pointer-events: none;
        position: absolute;
        content: "";
        width: calc(100% - clamp(0.968rem, 1.56vw, 1.875rem));
        height:calc(100% - clamp(0.968rem, 1.56vw, 1.875rem));
        border: .0625rem solid #fff;
        border-bottom-left-radius: clamp(3.226rem, 5.21vw, 6.25rem);
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        z-index: 2;
        mix-blend-mode: overlay; /*覆蓋*/
        border-radius: 0.5rem;
    } 



.room_name_tag {
    position: absolute;
    left: 1.4rem;
    bottom: 1.4rem;
    z-index: 5;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.room_name_tag .en {
    display: block;
    font-family: var(--foreign_font);
    font-size: 0.813rem;
    letter-spacing: 0.28em;
    opacity: .92;
}

.room_name_tag strong {
    display: block;
    font-family: var(--foreign_font);
    font-weight: 600;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    letter-spacing: 0.1em;
    line-height: 1.25;
}

.room_main .nav_btn {
    position: absolute;
    /* top: calc(50% - 1.7rem); */
    top: calc(50% - 0rem);
    transform: translateY(-50%);
    z-index: 6;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(30, 79, 126, .32);
    backdrop-filter: blur(2px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-data);
}

.room_main .nav_btn:hover {
    background: var(--second_color);
    border-color: var(--second_color);
}

.room_main .nav_btn.prev {
    left: 1rem;
}

.room_main .nav_btn.next {
    right: 1rem;
}

.room_main .nav_btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.room_thumbs {
    /* margin-top: 0.85rem; */
    padding: 0.85rem  0;
}

.room_thumbs .swiper-slide {
    cursor: pointer;
    /* border-radius: 0.35rem; */
    border-radius: clamp(0.645rem, 1.04vw, 1.25rem);
    overflow: hidden;
    /* opacity: .55; */
    opacity: 1;
    transition: var(--transition-data);
}

.room_thumbs .swiper-slide .img {
    /* aspect-ratio: 4/3; */
    position: relative;
    aspect-ratio: 1.62 / 1;
    width: 100%;
    display: block;
    /* overflow: hidden; */
    border-radius: clamp(0.645rem, 1.04vw, 1.25rem);
    transition: var(--transition-data);
    cursor: pointer;
}


.room_thumbs .swiper-slide .img:hover img{
     transform: scale(1.1);
}


.room_thumbs .swiper-slide-thumb-active {
   opacity: 1;
   box-shadow: rgb(38, 57, 77) 0px 0px 30px -10px;
 }


.room_thumbs .swiper-slide:not(.swiper-slide-thumb-active) .img{  
    border-radius: clamp(0.645rem, 1.04vw, 1.25rem);
    aspect-ratio: 1.62 / 1;    
    background-color: #fff;
}
.room_thumbs .swiper-slide:not(.swiper-slide-thumb-active) .img img{      
    opacity: 0.4;
}



/* ---- 房型資訊 ---- */
.room_content .room_kicker {
    font-family: var(--foreign_font);
    font-size: 0.813rem;
    letter-spacing: 0.3em;
    color: #8a929c;
    text-transform: uppercase;

    display: none;
}

.room_content .room_title {
    /* font-family: var(--foreign_font); */
    font-weight: 600;
    font-size: clamp(1.6rem, 3.6vw, 2.25rem);
    letter-spacing: 0.1em;
    color: var(--dark_color_sec);
    margin-top: 0.5rem;
    font-family: var(--mandarin_font2);
    font-weight: 700;
    line-height: 1.3;
}

/* .room_content .room_specs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.4rem;
    font-size: 1rem;
    color: #52606e;
    letter-spacing: .5px;
}

.room_content .room_specs li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.room_content .room_specs li::before {
    content: "";
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary_color);
} */


.room_content .room_specs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/* margin-bottom: clamp(1.452rem, 2.34vw, 2.813rem); */
	/* border-bottom: 1px solid rgba(0, 0, 0, 0.08); */
}

.room_content .room_specs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--dark_color);
}

.room_content .room_specs li .material-icons {
	font-size: 1.125rem;
	color: var(--primary_color);
	flex-shrink: 0;
}

.room_content .room_specs span{
    font-size: clamp(0.938rem, 0.871rem + 0.11vw, 1rem);
    color: var(--dark_color);
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

.room_content .room_desc {
    font-size: 1rem;
    color: var(--dark_color);
    line-height: 1.9;
    margin-top: 1.5rem;
}

.room_content .room_price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1.75rem;
    font-size: 1rem;
    color: var(--dark_color);
    letter-spacing: .5px;
}

.room_content .room_price strong {
    font-family: var(--foreign_font);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    color: var(--primary_color);
    /* letter-spacing: .02em; */
}







    .room_content .room_actions ,
	.more_link_btn2{
		justify-content: unset;
		/* gap: 0.25rem;
		font-weight: 600;
		color: var(--dark_color_sec);		
		transition: var(--transition-data);
		text-decoration: none;		
		font-size: clamp(0.909rem, 0.546rem + 0.59vw, 1.25rem);	 */
        
        gap: 0.9rem;
        margin-top: 1.9rem;
	}

		/* .room_content .more_link_btn2 a , 
        .room_content .more_link_btn2 .more_btn{
			margin: 0;
			padding: 0;
			font-size: inherit;
			font-weight: inherit;
			line-height: inherit;
			color      : inherit;
			gap: inherit;
			display: flex;
			text-decoration: none !important;
			padding: clamp(0.71rem, 0.001rem + 1.15vw, 1.375rem) clamp(1.032rem, 1.67vw, 2rem);
			border-radius: .3125rem;
			border: var(--dark_color_sec) 1px solid;
			width: max-content;
			transition: var(--transition-data);
		}
			.room_content .more_link_btn2 .btn_text{
				margin: 0;
				padding: 0;
				font-size: inherit;
				font-weight: inherit;
				line-height: inherit;
				color      : inherit;
				display: flex;
				align-items: center;
				gap: inherit;
			}
			.room_content .more_link_btn2 .btn_text::after{
				content: '\F138';
				font-family: 'bootstrap-icons';
				font-weight: 900;
				font-size: calc(clamp(0.938rem, 0.871rem + 0.11vw, 1rem) * 1.25);
			} */


        .room_content .more_link_btn2 .ghost {
            background: #fff;
            color: var(--primary_color);
            border: var(--primary_color) 1px solid;
        }

        /* .room_content .more_link_btn2 .ghost:hover {
            background: var(--primary_color);
            color: #fff;
        } */

        .room_content .more_link_btn2 .solid {
            background: var(--third_color);
            color: #fff;
            border-color: var(--third_color);
        }

        .room_content .more_link_btn2 .more_btn:hover {
            /* background: var(--third_color); */
            /* border-color: var(--third_color); */
            color: #fff;
        }




/* .room_content .room_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.9rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1rem;
    letter-spacing: 0.12em;
    padding: 0.85rem 1.7rem;
    border-radius: 0.3rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-data);
    border: 1px solid var(--primary_color);
}

.btn svg {
    width: 0.95rem;
    height: 0.95rem;
}



 */
















@media (max-width:820px) {
    .room_card {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .room_list:nth-child(even) .room_card {
        direction: ltr;
    }

    .room_main .nav_btn {
        width: 2.5rem;
        height: 2.5rem;
    }
}