/* Triology Single Product Banner adjustments to match Patara layout */

/* Make banner exactly viewport height and neutralize theme section padding */
.room-details2 { position: relative; height: 100vh; min-height: 0; }
.room-details2.section-padding { padding: 0 !important; }

/* Prevent overlap: use two-column grid and center vertically */
.room-details2 .wrap {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-areas: 'caption gallery';
  align-items: center;
}

/* Left column: caption, no absolute positioning */
.room-details2 .wrap .caption {
  grid-area: caption;
  position: relative;
  width: auto;
  max-width: none;
  transform: none;
  padding: 0 30px 30px 0;
  z-index: 2;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* Right column: gallery */
.room-details2 .wrap figure {
  grid-area: gallery;
  margin: 0;
  position: relative;
  width: 100%;
}

/* Minimal text styling consistent with theme */
.room-details2 .wrap .caption .title.white { color: #fff; }
.room-details2 .wrap .caption .list { display: block; }
.room-details2 .wrap .caption .list li { display: flex; align-items: center; margin-bottom: 5px; }
.room-details2 .wrap .caption .icon span { font-size: 20px; color: #aa8453; }
.room-details2 .wrap .caption .text { margin-left: 10px; }
.room-details2 .wrap .caption .text p { font-size: 15px; margin: 0; }

/* Simple star rating rendering */
.star-rating { display: inline-block; margin-right: 4px; }
.star-rating::before { content: "★"; color: #aa8453; font-size: 16px; line-height: 1; }

/* Default gallery height and cover images (override via Elementor control) */
.room-details2 .wrap figure,
.room-details2 .wrap figure .owl-carousel,
.room-details2 .wrap figure .img { height: 377px; }
.room-details2 .wrap figure .img { overflow: hidden; }
.room-details2 .wrap figure .img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Responsive: account for mobile header height (adjust CSS var as needed) */
@media (max-width: 991.98px) {
  .room-details2 { height: calc(100vh - var(--triology-mobile-header-height, 80px)); }
  .room-details2 .wrap {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'gallery' 'caption';
    align-items: start;
  }
  .room-details2 .wrap figure { width: auto; margin: 0; }
  .room-details2 .wrap .caption { position: relative; width: auto; max-width: none; transform: none; padding: 30px 0 0 0; z-index: 1; }
}