/* ==========================================================================
   VILLA GRID GALLERY — above the fold, single villa page
   Pure CSS grid, zero JS required for first paint.

   Desktop layout (10 equal columns):
     col 1-6 row 1-2  → hero image
     col 7-10 row 1   → image 2
     col 7-10 row 2   → image 3
     col 1-2  row 3   → image 4
     col 3-4  row 3   → image 5
     col 5-6  row 3   → image 6
     col 7-8  row 3   → image 7
     col 9-10 row 3   → image 8 (+N badge)
   ========================================================================== */

.villa-grid-gallery {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 240px 240px 160px;
    gap: 4px;
    max-width: 1000px;
    margin: 0 auto;
    cursor: pointer;
    overflow: hidden;
}

.villa-grid-item {
    position: relative;
    overflow: hidden;
}

.villa-grid-item img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.villa-grid-item:hover img {
    transform: scale(1.04);
}

/* Grid placement */
.villa-grid-item:nth-child(1) { grid-column: 1 / 7;  grid-row: 1 / 3; }
.villa-grid-item:nth-child(2) { grid-column: 7 / 11; grid-row: 1; }
.villa-grid-item:nth-child(3) { grid-column: 7 / 11; grid-row: 2; }
.villa-grid-item:nth-child(4) { grid-column: 1 / 3;  grid-row: 3; }
.villa-grid-item:nth-child(5) { grid-column: 3 / 5;  grid-row: 3; }
.villa-grid-item:nth-child(6) { grid-column: 5 / 7;  grid-row: 3; }
.villa-grid-item:nth-child(7) { grid-column: 7 / 9;  grid-row: 3; }
.villa-grid-item:nth-child(8) { grid-column: 9 / 11; grid-row: 3; }

/* Mobile badge hidden on desktop; desktop badge hidden on mobile (item 8 is display:none anyway) */
.grid-badge-mobile { display: none; }

/* "+N photos" badge on the last grid cell */
.grid-photo-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(96, 197, 199, 0.75);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}

/* ==========================================================================
   MASONRY OVERLAY
   Full-screen modal. CSS columns provides masonry layout — no JS needed.
   ========================================================================== */

#mi-masonry-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: #fff;
    flex-direction: column;
}
.admin-bar #mi-masonry-overlay, .admin-bar #mi-fullscreen-viewer {
    top: 30px;
}
#mi-masonry-overlay.is-open {
    display: flex;
}

.mi-masonry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 0 12px 0 20px;
    height: 56px;
    border-bottom: 1px solid #eee;
}

/* Header action buttons — enquire + close grouped together */
.mi-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mi-enquire-btn {
    height: 40px;
    padding: 0 16px;
    background: #EFA1DF;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.mi-enquire-btn:hover {
    background: rgba(239,161,223,.5);
}

.mi-enquire-short { display: none; }

/* Pulse the availability widget on desktop after enquire click */
.mi-enquire-highlight {
    border-radius: 4px;
    animation: mi-widget-pulse 2.5s ease forwards;
}

@keyframes mi-widget-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(239,161,223, 0); }
    15%  { box-shadow: 0 0 0 6px rgba(239,161,223, 0.75); }
    75%  { box-shadow: 0 0 0 6px rgba(239,161,223, 0.75); }
    100% { box-shadow: 0 0 0 0   rgba(239,161,223, 0); }
}

.mi-masonry-title, .mi-viewer-title {
    margin: 0;
    font-size: 18px;
    font-weight: 300!important;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#mi-masonry-overlay .mi-overlay-close, #mi-fullscreen-viewer .mi-viewer-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(96, 197, 199) !important;
    border: none !important;
    border-radius: 6px;
    color: #fff !important;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

#mi-masonry-overlay .mi-overlay-close:hover, #mi-fullscreen-viewer .mi-viewer-close:hover {
    background: rgba(96, 197, 199, 0.75) !important;
}

.mi-masonry-scroll {
    flex: 1;
    overflow-y: auto;
}

.mi-masonry-grid {
    columns: 3;
    column-gap: 4px;
    padding: 4px;
}

.mi-masonry-item {
    break-inside: avoid;
    margin-bottom: 4px;
    cursor: pointer;
    overflow: hidden;
    display: block;
}

.mi-masonry-item img {
    width: 100%;
    height: auto; /* preserves aspect ratio; native width/height attrs prevent CLS */
    display: block;
    transition: opacity 0.2s;
}

.mi-masonry-item:hover img {
    opacity: 0.82;
}

/* Briefly highlights the image the user clicked from the grid */
.mi-masonry-item.is-active {
    outline: 3px solid rgb(96, 197, 199);
    outline-offset: -3px;
}

/* ==========================================================================
   FULLSCREEN VIEWER
   Swiper virtual slides (main) + thumbnail strip.
   Layered above the masonry overlay. Escape key closes this first,
   returning the user to the masonry.
   ========================================================================== */

#mi-fullscreen-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #fff;
    --swiper-navigation-color: #333;
}

#mi-fullscreen-viewer.is-open {
    display: block;
}

.mi-viewer-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
    z-index: 10;
}
/* Thumbnail strip — anchored to the bottom of the fixed viewer.
   !important overrides Swiper's own .swiper { position: relative } rule.
   The 8px gap above comes from mi-viewer-main bottom: 108px vs height: 100px. */
.mi-viewer-thumbs {
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #f0f0f0;
    overflow: hidden;
}

/* Main slide area — sits between header and thumb strip.
   left/right: 0 give Swiper a concrete, measurable width. */
.mi-viewer-main {
    position: absolute !important;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 108px;
}

.mi-viewer-main .swiper-wrapper,
.mi-viewer-main .swiper-slide {
    height: 100%;
}

.mi-viewer-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-viewer-main .swiper-slide img {
    display: block;
    width: auto;
    height: auto;
}

.mi-viewer-thumbs .swiper-slide {
    width: 100px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s;
}

.mi-viewer-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid rgb(96, 197, 199);
    outline-offset: -2px;
}

.mi-viewer-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thumbnail strip prev/next — teal arrows overlaid on the strip edges */
.mi-viewer-thumbs .swiper-button-next,
.mi-viewer-thumbs .swiper-button-prev {
    top: 0;
    height: 100%;
    width: 36px;
    background: rgba(96, 197, 199, 0.5);
    transform: none;
    color: #fff;
}

.mi-viewer-thumbs .swiper-button-next { right: 0; }
.mi-viewer-thumbs .swiper-button-prev { left: 0; }

.mi-viewer-thumbs .swiper-button-next:hover,
.mi-viewer-thumbs .swiper-button-prev:hover {
    background: rgba(96, 197, 199, 0.75);
}

.mi-viewer-thumbs .swiper-button-next:after,
.mi-viewer-thumbs .swiper-button-prev:after {
    font-size: 14px;
    font-weight: 900;
}

/* ==========================================================================
   SHARED NAVIGATION BUTTONS
   Used by simple archive galleries and the fullscreen viewer.
   ========================================================================== */

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 40%;
    transform: none;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    border: none;
    transition: color 0.3s ease;
}

.swiper-button-next { right: 10px; }
.swiper-button-prev { left: 10px; }

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: rgb(96, 197, 199);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

/* Centre nav buttons in the fullscreen viewer — green arrows, no background */
.mi-viewer-main .swiper-button-next.swiper-button-disabled, .mi-viewer-main .swiper-button-prev.swiper-button-disabled {
    opacity: .1;
}
.mi-viewer-main .swiper-button-next,
.mi-viewer-main .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border-radius: 0;
    color: rgb(96, 197, 199);
    width: 44px;
    height: 44px;
}

.mi-viewer-main .swiper-button-next:hover,
.mi-viewer-main .swiper-button-prev:hover {
    background: none;
    color: rgb(96, 197, 199);
}

/* ==========================================================================
   SIMPLE GALLERY (archive / listing pages)
   ========================================================================== */

.simple-gallery-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.home .simple-gallery-container {
    max-width: 450px;
}

.simple-gallery-main {
    position: relative;
    overflow: hidden;
    width: 100% !important;
}

.slider-listings .simple-gallery-main {
    padding-bottom: 5px !important;
}

.simple-gallery-main .swiper-slide {
    position: relative;
    cursor: pointer;
}

.simple-gallery-main .swiper-slide img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.simple-gallery-container .swiper-button-next,
.simple-gallery-container .swiper-button-prev {
    color: #fff;
    background: transparent;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease;
}

.simple-gallery-container .swiper-button-next { right: 0 !important; }
.simple-gallery-container .swiper-button-prev { left: 0 !important; }

.simple-gallery-container .swiper-button-next:hover,
.simple-gallery-container .swiper-button-prev:hover {
    color: rgb(96, 197, 199);
    transform: scale(1.1);
}

.simple-gallery-container .swiper-button-next:after,
.simple-gallery-container .swiper-button-prev:after {
    font-size: 20px;
    font-weight: bold;
}

/* ==========================================================================
   GLIGHTBOX (floorplan lightbox)
   ========================================================================== */

.goverlay {
    background: rgba(255, 255, 255, 1) !important;
}

.gslide-description.description-bottom {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /* Grid: 1 full-width landscape on top, 2 side-by-side below. */
    .villa-grid-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 200px 140px;
    }

    .villa-grid-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    .villa-grid-item:nth-child(2) { grid-column: 1 / 2; grid-row: 2; }
    .villa-grid-item:nth-child(3) { grid-column: 2 / 3; grid-row: 2; }
    .villa-grid-item:nth-child(n+4) { display: none; }

    /* Show the dynamic photo count badge on the 3rd (last visible) cell */
    .grid-badge-mobile { display: block; }

    /* Masonry: 2 columns on small screens */
    .mi-masonry-grid { columns: 2; }

    /* No thumbnail strip on mobile — main image fills down to the bottom */
    .mi-viewer-main { bottom: 0; }

    /* Shorten enquire button text on small screens */
    .mi-enquire-long { display: none; }
    .mi-enquire-short { display: inline; }

    /* Two-row mobile header: [Enquire] [×] on top, title underneath */
    .mi-masonry-header,
    .mi-viewer-header {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 12px;
        gap: 6px;
        align-content: flex-start;
    }

    .mi-header-actions {
        order: 1;
        width: 100%;
        justify-content: end;
    }

    .mi-masonry-title,
    .mi-viewer-title {
        order: 2;
        width: 100%;
        font-size: 15px;
        margin: 20px auto;
    }

    /* Viewer main must push down to clear the taller 2-row mobile header */
    .mi-viewer-main { top: 86px; }

    .simple-gallery-container .swiper-button-next:after,
    .simple-gallery-container .swiper-button-prev:after {
        font-size: 16px;
    }
    .mi-viewer-main .swiper-slide img {
        width:100%;
    }
}

@media (min-width: 769px) {
    .glightbox-clean .gclose,
    .glightbox-clean .gnext,
    .glightbox-clean .gprev {
        background-color: rgba(96, 197, 199, 0.6) !important;
        border: 0 !important;
    }

    .goverlay {
        background: rgba(255, 255, 255, 0.92);
    }

    .gslide-description.description-bottom {
        display: none;
    }
}