@charset "UTF-8";
/* ==========================================================================
   Property page gallery (parts/filmstrip-gallery-static.blade.php)
   --------------------------------------------------------------------------
   Two slick carousels wired to each other: #estate-filmstrip-gallery is the
   stage, #estate-filmstrip-gallery-nav the thumbnail strip under it.

   Neither had a height of its own, so both took whatever their current image
   happened to be:

   - A portrait photo made the stage two or three times taller than a landscape
     one. The thumbnail strip sits after it in the flow, so landing on a
     property whose first photo is portrait pushed the strip off the bottom of
     a phone screen — the reader never saw there were other photos.
   - In the strip, slick fixes each slide's *width* and nothing else, so a
     60x89 portrait thumbnail rendered 15x22 next to its 69x48 neighbours.

   Both get a fixed box now. The stage letterboxes with object-fit: contain, so
   a tall photo is shown whole rather than cropped; each stage slide is still
   the lightbox link it always was, so tapping opens it full size.

   Loaded from estate.blade.php's cssIncludes — this is the only page that has
   a filmstrip, and the rules are worth nothing to the rest of the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

#estate-filmstrip-gallery .slick-slide {
    /* Roughly the ratio of the landscape photos that make up most galleries,
       so the common case letterboxes barely at all. */
    aspect-ratio: 3 / 2;
    background-color: #1c1c1c;
}

#estate-filmstrip-gallery .slick-slide > picture {
    display: block;
    width: 100%;
    height: 100%;
}

#estate-filmstrip-gallery .slick-slide img {
    display: block;
    width: 100%;
    height: 100%;
    /* Browsers without aspect-ratio (IE11, Safari < 15) ignore the box above,
       so cap the tallest a photo can get there instead. */
    max-height: 70vh;
    -o-object-fit: contain;
    object-fit: contain;
}

@supports (aspect-ratio: 3 / 2) {
    #estate-filmstrip-gallery .slick-slide img {
        max-height: none;
    }
}

/* --------------------------------------------------------------------------
   Thumbnail strip

   slick makes each <picture> the slide and sets its width inline; the height
   is ours. The gap between thumbnails is padding on the slide rather than a
   margin on the image, so the image can fill its slide edge to edge — which is
   what object-fit needs to crop every thumbnail to the same height.
   -------------------------------------------------------------------------- */

#estate-filmstrip-gallery-nav .slick-slide {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 64px;
    padding-right: 8px;
}

#estate-filmstrip-gallery-nav .slick-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    -o-object-fit: cover;
    object-fit: cover;
    /* The thumbnails are the control for the stage; say so. */
    cursor: pointer;
    opacity: 0.65;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

#estate-filmstrip-gallery-nav .slick-slide:hover img,
#estate-filmstrip-gallery-nav .slick-current img {
    opacity: 1;
}

#estate-filmstrip-gallery-nav .slick-current img {
    outline: 2px solid #f1bf29;
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Phone

   The stage is the width of the viewport here, so 3:2 is 250px at 375px wide —
   enough to read a room, and it leaves the thumbnail strip on screen with the
   price beside it, which was the whole problem.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    #estate-filmstrip-gallery-nav .slick-slide {
        height: 56px;
        padding-right: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #estate-filmstrip-gallery-nav .slick-slide img {
        -webkit-transition: none;
        transition: none;
    }
}