/* ==========================================================================
Room Types 專屬樣式
========================================================================== */

/* Section 1: Hero Banner */
.hero-half {
position: relative; height: 55vh; min-height: 450px; display: flex; align-items: center;
background-size: cover; background-position: center;
}
.hero-overlay-teal { position: absolute; inset: 0; background: rgba(30, 92, 84, 0.7); }
.hero-half-content { position: relative; z-index: 2; padding-top: 4rem; }
.hero-half-title { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.15; color: var(--white); max-width: 800px; }

/* Section 3: Room Filter (Tabs) */
.filter-tabs {
border-bottom: none;
justify-content: center;
gap: 1.5rem;
margin-bottom: 3rem;
}
.filter-tabs .nav-link {
font-family: var(--font-body);
color: var(--text-muted);
font-weight: 500;
font-size: 1.1rem;
border: none;
border-bottom: 2px solid transparent;
padding: 0.5rem 1rem;
transition: var(--transition-smooth);
background: transparent;
}
.filter-tabs .nav-link:hover { color: var(--primary-teal); }
.filter-tabs .nav-link.active {
color: var(--primary-teal-dark);
font-weight: 600;
border-bottom: 2px solid var(--secondary-orange);
}
@media (max-width: 767.98px) {
.filter-tabs { flex-direction: column; gap: 0.5rem; align-items: center; }
.filter-tabs .nav-link { border-bottom: none; border-left: 2px solid transparent; padding: 0.5rem 1.5rem; width: 100%; text-align: center; }
.filter-tabs .nav-link.active { border-bottom: none; border-left: 2px solid var(--secondary-orange); background: var(--bg-peach); }
}

/* Section 4: Room Type Cards */
.room-card-wrapper {
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: 0 10px 40px rgba(0,0,0,0.06);
overflow: hidden;
margin-bottom: 4rem;
}
.room-carousel-img {
width: 100%; height: 500px; object-fit: cover;
}
.room-card-content { padding: 3rem; }
.room-badge {
background-color: var(--bg-peach); color: var(--secondary-orange);
font-size: 0.8rem; letter-spacing: 0.1em; padding: 6px 12px; font-weight: 600;
display: inline-block; margin-bottom: 1rem; text-transform: uppercase;
}

/* Custom Accordion for Room Highlights */
.custom-accordion .accordion-item {
border: none;
border-bottom: 1px solid var(--primary-teal-light);
background: transparent;
}
.custom-accordion .accordion-button {
background: transparent; color: var(--primary-teal-dark);
font-weight: 600; font-size: 1.05rem; padding: 1.2rem 0; box-shadow: none;
}
.custom-accordion .accordion-button:not(.collapsed) { color: var(--primary-teal); }

/* 替換下拉 icon 為淺綠色 */
.custom-accordion .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232b776d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.custom-accordion .accordion-body { padding: 0.5rem 0 1.5rem 0; color: var(--text-muted); font-size: 0.95rem; }
.custom-accordion ul { padding-left: 1.2rem; margin-bottom: 0; }
.custom-accordion li { margin-bottom: 0.4rem; }

@media (max-width: 991.98px) {
.room-card-content { padding: 2rem; }
.room-carousel-img { height: 350px; }
}

/* Section 5: Gallery Fixed Grid */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2.5rem;
}

.btn-filter {
  background: transparent;
  border: 1px solid #ddd;
  color: var(--text-muted);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.btn-filter.active,
.btn-filter:hover {
  background: var(--primary-teal);
  color: var(--white);
  border-color: var(--primary-teal);
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.masonry-item {
  position: relative;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 0;
}

.masonry-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: var(--transition-smooth);
}

.gallery-hidden {
  display: none !important;
}

@media (max-width: 991px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .masonry-grid {
    grid-template-columns: 1fr;
  }
}

/* 放大鏡 Hover Overlay */
.masonry-overlay {
position: absolute; inset: 0; background: rgba(30, 92, 84, 0.65);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: var(--transition-smooth);
}
.masonry-item:hover .masonry-overlay { opacity: 1; }
.masonry-item:hover img { transform: scale(1.05); }
.masonry-overlay i { color: var(--white); font-size: 2.5rem; transform: scale(0.5); transition: transform 0.3s ease; }
.masonry-item:hover .masonry-overlay i { transform: scale(1); }


/* Lightbox Modal */
.lightbox-modal .modal-content { background: transparent; border: none; }
.lightbox-modal .modal-header { border: none; padding: 0; position: absolute; right: 15px; top: 15px; z-index: 1055; }
.lightbox-btn-close { background: none; border: none; color: white; font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); opacity: 0.8; transition: opacity 0.3s; }
.lightbox-btn-close:hover { opacity: 1; color: var(--secondary-orange); }
.lightbox-img { width: 100%; max-height: 85vh; object-fit: contain; }
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(0,0,0,0.5); border: none; color: white;
width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; transition: var(--transition-smooth);
}
.lightbox-nav:hover { background: var(--secondary-orange); }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* Footer */
.footer-dark { background: var(--primary-teal-dark); }
.border-white-10 { border-color: rgba(255,255,255,0.08) !important; }
.text-white-50 { color: rgba(255,255,255,0.75); }
.socials a { transition: var(--transition-smooth); }
.socials a:hover { color: var(--secondary-orange) !important; transform: translateY(-2px); display: inline-block; }