/*
 * Property Single Gallery Styles
 * ---------------------------------
 * This file contains the compiled CSS for the advanced property gallery,
 * designed for direct use without needing a SCSS compiler.
 */

/* Prevents the main page from scrolling when a modal is open */
body.modal-open {
    overflow: hidden;
}

hr.property-divider {
    border: 1px solid #efefef;
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Main Gallery Container */
#gallery-media-wrapper {
    aspect-ratio: 1.3333333333;
}
.property-gallery-advanced {
  box-sizing: border-box;
}
.property-gallery-advanced *,
.property-gallery-advanced *::before,
.property-gallery-advanced *::after {
  box-sizing: inherit;
}
.property-gallery-advanced .gallery-layout {
  display: grid;
  grid-template-columns: 75% calc(25% - 24px);
  column-gap: 24px;
  width: 100%;
  align-items: stretch;
}
.property-gallery-advanced .gallery-main {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.property-gallery-advanced .gallery-main img,
.property-gallery-advanced .gallery-main iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.property-gallery-advanced .gallery-main .gallery-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.property-gallery-advanced .gallery-thumbnails-wrapper {
  width: 100%;
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  /* Establish a size containment context so child elements can reference
     this wrapper's RESOLVED height via container query units (cqh / cqw).
     WebKit (Safari) has a bug where percentages inside calc() in
     `grid-auto-rows` fail to resolve when the parent's height comes from
     `aspect-ratio` rather than an explicit pixel value — they get treated
     as indefinite, the calc collapses, and the thumbnail rows fall back
     to their natural intrinsic size (stretching to the image's aspect
     ratio at the column width). cqh sidesteps this entirely: container
     query units have explicit resolution semantics that all engines
     (Blink, Gecko, WebKit) handle the same way. */
  container-type: size;
}
.property-gallery-advanced .gallery-thumbnails-list {
  display: grid;
  grid-template-columns: 1fr;
  /* Each row = (container height - 2 gaps of 24px) / 3, giving exactly
     three rows visible at a time with the remainder scrolling — same
     visual outcome as the previous calc-with-percentage, just using a
     unit that Safari resolves reliably. Container query units require
     `container-type: size` on the parent (set above).
     See WebKit bug history around aspect-ratio-derived heights and
     percentage track sizing. */
  grid-auto-rows: calc((100cqh - 48px) / 3);
  gap: 24px;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.property-gallery-advanced .gallery-thumbnails-list::-webkit-scrollbar {
  display: none;
}
.property-gallery-advanced .gallery-thumbnail-item {
  height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.property-gallery-advanced .gallery-thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-gallery-advanced .gallery-thumbnail-item:hover:not(.active) {
  border-color: #888;
}
.property-gallery-advanced .gallery-thumbnail-item .thumbnail-play-icon {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-shadow: 0 0 10px black;
    pointer-events: none;
}
.property-gallery-advanced .gallery-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s;
  font-size: 24px;
  /* z-index: 10; */
}
.property-gallery-advanced .gallery-nav-arrow:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}
.property-gallery-advanced .gallery-nav-arrow:hover:not(:disabled) {
  opacity: 1;
}
.property-gallery-advanced .gallery-nav-arrow-prev {
  left: 1em;
}
.property-gallery-advanced .gallery-nav-arrow-next {
  right: 1em;
}
.property-gallery-advanced .gallery-flags {
  position: absolute;
  top: 1em;
  left: 1em;
  display: flex;
  gap: 8px;
  z-index: 1;
  width: 100%;
}
.property-gallery-advanced .flags {
  position: relative;
  width: inherit;
}

.property-gallery-advanced .gallery-flag {
  background: #259F46; /* default */
  color: #fff; /* default */
}
.property-gallery-advanced .gallery-counter-overlay {
  position: absolute;
  bottom: 1em;
  left: 1em;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.9rem;
  color: #fff;
  padding: 0.25em 0.75em;
  min-width: 3em;
  text-align: center;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 900px) {
  .property-gallery-advanced .gallery-layout {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .property-gallery-advanced .gallery-main {
    margin-right: 0;
    margin-bottom: 0;
  }
  .property-gallery-advanced .gallery-thumbnails-wrapper {
    display: none;
  }
}

/* --- MODAL STYLES (Collage, Fullscreen, etc.) --- */
.gallery-modal-collage {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(25, 25, 25, 0.97);
    z-index: 1000;
    display: none;
    flex-direction: column;
}
.gallery-modal-collage .collage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #111;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    justify-content: center;
}
.gallery-modal-collage .collage-tabs {
    display: flex;
}
.gallery-modal-collage .collage-tab {
    padding: 15px 25px;
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 1rem;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.gallery-modal-collage .collage-tab:hover {
    color: #fff;
}
.gallery-modal-collage .collage-tab.active {
    color: #fff;
}
.gallery-modal-collage .collage-close-btn {
    font-size: 35px;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.gallery-modal-collage .collage-close-btn:hover {
    color: #fff;
}
.gallery-modal-collage .collage-body {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

/* **FIX: Essential CSS rules for tab functionality** */
.gallery-modal-collage .collage-tab-content {
    display: none; /* Hide all tabs by default */
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.gallery-modal-collage .collage-tab-content.active {
    display: block; /* ONLY show the active tab */
}

/* Gallery Tab Specifics */
#collage-tab-gallery.active { /* Added .active here for consistency */
    display: block;
}
#collage-tab-gallery .gallery-collage-scroll {
    padding: 0;
    margin: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gallery-modal-collage .gallery-collage-row {
    display: flex;
    gap: 10px;
}
.gallery-modal-collage .gallery-collage-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.gallery-modal-collage .gallery-collage-image.single-image { width: 100%; aspect-ratio: 16/10; }
.gallery-modal-collage .gallery-collage-image.double-image { flex: 1; aspect-ratio: 4 / 3; }
.gallery-modal-collage .gallery-collage-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Video Tab Specifics */
#collage-tab-media .modal-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}
#collage-tab-media .modal-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Floorplan Tab Specifics */
/* **FIX: Specificity fix - only apply display:flex when active** */
#collage-tab-floorplan.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#collage-tab-floorplan .modal-floorplan-wrapper {
    /* This wrapper will be hidden and shown correctly */
    display: contents; /* Or use flexbox/grid as needed */
}
#collage-tab-floorplan .modal-floorplan-image {
    max-width: 100%;
    height: auto;
}

/* Brochure Tab Specifics */
#collage-tab-brochure.active { /* Added .active for consistency */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.modal-brochure-image {
    max-width: 100%;
    height: auto;
}

/* Map Tab Specifics */
#collage-tab-map, #modal-map-container {
    height: 100%;
    width: 100%;
    padding: 0;
    min-height: 70vh; 
}

/* Mobile Responsive Styles for Collage Modal */
@media (max-width: 768px) {
    .gallery-modal-collage .gallery-collage-row {
        flex-direction: column;
    }
    .gallery-modal-collage .gallery-collage-image.double-image {
        width: 100%;
        flex: none;
        aspect-ratio: 16/10;
    }
    .gallery-modal-collage .collage-tab-content {
        padding: 1rem;
    }
}

/* Fullscreen Modal Styles */
.gallery-modal-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000;
    z-index: 2000;
    display: none;
    flex-direction: column;
}
.gallery-modal-fullscreen .fullscreen-header {
    padding: 10px 20px;
    background: rgba(20,20,20,0.8);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: white;
}
.gallery-modal-fullscreen .fullscreen-counter { margin-right: auto; }
.gallery-modal-fullscreen .fullscreen-close-btn { font-size: 30px; color: white; background: none; border: none; cursor: pointer; }
.gallery-modal-fullscreen .fullscreen-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.gallery-modal-fullscreen .fullscreen-img {
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
}
.gallery-modal-fullscreen .fullscreen-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.4); color: white; border: none; border-radius: 50%;
    width: 50px; height: 50px; font-size: 30px; cursor: pointer; z-index: 2;
    transition: background-color 0.2s;
}
.gallery-modal-fullscreen .fullscreen-nav-arrow:hover { background: rgba(0,0,0,0.6); }
.gallery-modal-fullscreen .fullscreen-nav-arrow:disabled { display: none; }
.gallery-modal-fullscreen .fullscreen-nav-prev { left: 20px; }
.gallery-modal-fullscreen .fullscreen-nav-next { right: 20px; }


/* --- VIRTUAL TOUR STYLES (Placeholder to Active) --- */

.virtual-tour-container {
    /* Ensures the container fills the space of the video section */
    position: relative;
    width: 100%;
    /* Use an aspect ratio container for proper sizing */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #1a1a1a; /* Dark background behind the overlay */
    cursor: pointer;
    z-index: 1; /* Safety index */
    /* Add this line to manage the context for the absolutely positioned iframe */
    contain: layout size; 
}

/* Styles for the Placeholder State (NO CHANGES NEEDED HERE) */
.virtual-tour-container .virtual-tour-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle vertical gradient for depth */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    z-index: 10;
    transition: opacity 0.3s, background 0.3s;
    /* Ensure text elements are easy to see */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.virtual-tour-container .virtual-tour-overlay:hover {
    opacity: 0.95;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); 
}

.virtual-tour-overlay h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
}

.virtual-tour-overlay p {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Play button: white triangle inside a semi-transparent dark circle */
.virtual-tour-overlay .play-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    justify-self: center;
    pointer-events: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.virtual-tour-overlay:hover .play-icon {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.08);
}
.virtual-tour-overlay .play-icon svg {
    width: 28px;
    height: 28px;
    margin-left: 3px; /* Optical centering for play triangle */
    fill: white;
}

/* ❌ REMOVE THIS BLOCK ENTIRELY ❌ 
   It breaks the aspect ratio and causes layout shifts.
.virtual-tour-container.active-tour {
    height: auto; 
    padding-bottom: 0; 
    overflow: visible; 
}
*/

/* Styles for the Active Iframe State */
.virtual-tour-container .virtual-tour-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* CRITICAL: Fills the space pre-allocated by padding-bottom */
    border: none;
    z-index: 2; /* Ensures it is above the container */
    /* REMOVE min-height: 250px; if possible, as height: 100% is sufficient */
}