/*
 * Celebrate Communities — structural fixes.
 *
 * These are corrections tied to Houzez 4.3.5 internals and to MyStateMLS
 * external images, so they live with the code rather than in Theme Options
 * where they cannot be versioned or reviewed.
 *
 * Brand and presentation CSS stays in Theme Options -> Custom Code.
 *
 * 1. Gallery banner height
 * 2. Lightbox slider
 * 3. Single-property block framing
 */

/* ==========================================================================
   1. Gallery banner height
   --------------------------------------------------------------------------
   Houzez sets .hs-gallery-v4-grid to grid-template-columns: 2fr 1fr but never
   defines a row height. Its images use object-fit: cover with height: 100%,
   which resolves against a grid item that has no height of its own - so the
   row collapses to auto and the source image's intrinsic height drives the
   whole banner. With cropped WordPress sizes that is predictable; with
   full-resolution MLS originals the banner can exceed 800px.
   .gallery-hidden items are display:none and add no rows.
   ========================================================================== */

@media (min-width: 768px) {
    .hs-gallery-v4-grid {
        height: clamp(420px, 46vw, 620px);
    }

    /* Right column holds two stacked thumbnails; split it evenly. */
    .hs-gallery-v4-grid-item-02 {
        grid-template-rows: 1fr 1fr;
    }

    /* min-height:0 lets grid children shrink below their content size. */
    .hs-gallery-v4-grid-item,
    .hs-gallery-v4-grid-item > a {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .hs-gallery-v4-grid-item .img-fluid {
        height: 100% !important;
        object-fit: cover;
    }
}

@media (max-width: 767.98px) {
    .property-banner .property-featured-image {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
}


/* ==========================================================================
   2. Lightbox slider
   --------------------------------------------------------------------------
   Slick writes an inline height on .slick-list from the measured slide
   content. Slides hold img-fluid images (max-width:100%; height:auto), so a
   full-resolution MLS original produces an inline height of 1500px+ and the
   modal scrolls endlessly. !important is required because that height is an
   inline style.

   Arrows: Houzez styles .slick-prev/.slick-next as white icons with no
   background, invisible against a light photo, and hides them entirely below
   768px. Drag: the native image-drag gesture competes with Slick's pointer
   handling, so the image is taken out of the event path.
   ========================================================================== */

.property-lightbox .lightbox-slider .slick-list {
    height: clamp(320px, calc(100vh - 180px), 860px) !important;
    touch-action: pan-y;
    cursor: grab;
}

.property-lightbox .lightbox-slider .slick-list:active {
    cursor: grabbing;
}

.property-lightbox .lightbox-slider .slick-track,
.property-lightbox .lightbox-slider .slick-slide {
    height: 100%;
}

.property-lightbox .lightbox-slider .slick-slide img {
    width: 100%;
    height: 100% !important;
    max-height: none;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.property-lightbox .lightbox-slider .slick-prev,
.property-lightbox .lightbox-slider .slick-next {
    width: 44px;
    height: 44px;
    background: rgb(0 0 0 / 55%);
    border-radius: 50%;
    transition: background 0.2s ease;
}

.property-lightbox .lightbox-slider .slick-prev:hover,
.property-lightbox .lightbox-slider .slick-next:hover {
    background: rgb(0 0 0 / 80%);
}

.property-lightbox .lightbox-slider .slick-prev {
    left: 16px;
}

.property-lightbox .lightbox-slider .slick-next {
    right: 16px;
}

@media (max-width: 767.98px) {
    .property-lightbox .lightbox-slider .slick-list {
        height: clamp(240px, 60vh, 520px) !important;
    }

    /* Houzez hides arrows below 768px; keep them inside the lightbox. */
    .property-lightbox .lightbox-slider .slick-prev,
    .property-lightbox .lightbox-slider .slick-next {
        display: block !important;
        width: 38px;
        height: 38px;
    }

    .property-lightbox .lightbox-slider .slick-prev { left: 8px; }
    .property-lightbox .lightbox-slider .slick-next { right: 8px; }
}


/* ==========================================================================
   3. Single-property block framing
   --------------------------------------------------------------------------
   Houzez registers footer widgets as
   "footer-widget widget widget-wrap mb-4 p-4", so an unqualified
   .widget-wrap rule also frames every footer widget on a property page.
   Excluding .footer-widget keeps the border on content and sidebar blocks.

   Below 768px Houzez sets .block-wrap margin-top to 0 because it only draws
   a single border-top separator; a full border on each block then produces a
   doubled line at every junction. Mobile therefore uses a bottom rule only,
   full-bleed.
   ========================================================================== */

body.single-property .content-wrap .block-wrap:not(.border-0),
body.single-property .content-wrap .widget-wrap:not(.footer-widget) {
    border: 1px solid var(--cc-border, #dddddd);
}

@media (max-width: 767.98px) {
    body.single-property .content-wrap .block-wrap:not(.border-0),
    body.single-property .content-wrap .widget-wrap:not(.footer-widget) {
        margin-top: 0;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid var(--cc-border, #dddddd);
        border-left: 0;
        border-radius: 0;
    }
}

/* ==========================================================================
   4. Map popup — NOT NEEDED
   --------------------------------------------------------------------------
   An earlier revision styled .property-info-window here. That turned out to
   be treating a symptom: Houzez already ships a complete popup component in
   its own style.css, which simply was not loading because Houzez enqueues
   get_stylesheet_uri() (the CHILD style.css) rather than the parent file.

   functions.php now enqueues the parent stylesheet directly, so the theme's
   own popup, map message and marker label styling applies as designed. Add
   rules here only to intentionally restyle beyond the theme default.
   ========================================================================== */