/* =========================================================================
   May Tay — responsive / device fixes  (v2)
   Loaded on gallery pages AFTER the inline slider CSS so these rules win.

   Fixes addressed here:
     #1 Tablet thumbnails missing
     #2 Thumbnails always visible (ALL devices, no hover needed)
     #3 iPhone thumbnail taps (paired with maytay-responsive-fixes.js)
     #4 Bridal / lightbox modal text cutoff  (Simple Lightbox = SLB)
     #6 Commercial model heads cut off (nivoSlider)

   NOT fixable here:
     #5 Contact asterisks — the form is a cross-origin iframe
        (forms.bng.tools). Its colours must be changed in Formaloo itself.
   ========================================================================= */


/* -------------------------------------------------------------------------
   #1 #2 #3  THUMBNAILS — visibility behaviour by screen width.

   DESKTOP ( > 768px ):
       Keep the ORIGINAL design — the thumbnail strip stays hidden and only
       appears when the user hovers the bottom hover zone. We do NOT override
       anything here, so the theme's inline CSS governs:
           .slider-pro .thumbnail-scroller { opacity:0; pointer-events:none; }
           .thumb-hover-container:hover .thumbnail-scroller { opacity:1; ... }

   TABLET / PHONE ( <= 768px ):
       Touch devices have no hover, so the strip must be ALWAYS visible and
       tappable. All the "force visible" rules live inside the max-width:768px
       media query below so they never touch desktop.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Force the strip visible + interactive regardless of hover. */
    .slider-pro .thumbnail-scroller {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* The invisible upward hover-pad blocks taps on the main image; neutralise
       it and let the container size to the strip. */
    .slider-pro .thumb-hover-container {
        padding-top: 0 !important;
        pointer-events: auto !important;
    }

    /* Keep the always-on strip usable and scrollable on narrow screens. */
    .slider-pro .thumbnails-visible-container {
        max-width: 96vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Belt-and-braces: any touch device that reports no hover capability (some
   large tablets exceed 768px) should also show the strip, since hover-reveal
   is unusable there. This intentionally does NOT catch hover-capable desktops. */
@media (hover: none) and (pointer: coarse) {
    .slider-pro .thumbnail-scroller {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        transition: none !important;
    }
    .slider-pro .thumb-hover-container {
        padding-top: 0 !important;
        pointer-events: auto !important;
    }
    .slider-pro .thumbnails-visible-container {
        max-width: 96vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
}


/* -------------------------------------------------------------------------
   #4  BRIDAL modal image CUT OFF at sides on mobile — FooBox lightbox.
   The bridal gallery uses FooBox (foogallery-lightbox-foobox). FooBox ships
   with NO responsive rules: it centres .fbx-inner with left:50% + a negative
   margin and sizes .fbx-item-image to the image's NATURAL width. On a narrow
   phone that width is wider than the screen, so the image overflows and both
   sides are clipped.

   Fix: cap the modal inner + image to the viewport width and let height
   scale, so the whole image fits with no horizontal cropping. #foobox raises
   specificity so we beat FooBox's own inline-ish rules; !important beats the
   width/height FooBox sets inline via JS.
   ------------------------------------------------------------------------- */
#foobox .fbx-modal,
.fbx-modal {
    max-width: 100vw !important;
    overflow: hidden !important;   /* no page-level horizontal scroll */
}

/* THE KEY FIX.
   FooBox JS writes inline styles on .fbx-inner like:
       width:480px; height:480px; margin-top:-260px; margin-left:-240px;
   and centres it with left:50% (the -240 is half the 480 width). max-width
   alone can't fix this because the fixed width + the -240px margin remain, so
   the box stays 480px and sits off-centre / touching the edges.

   We must: (a) force the width down, (b) KILL the negative left margin, and
   (c) re-centre with transform. Height becomes auto so it follows the image.
   On phones we go near-fullscreen width. */
#foobox .fbx-inner,
.fbx-inner {
    left: 50% !important;
    top: 50% !important;
    width: auto !important;
    max-width: 94vw !important;
    height: auto !important;
    max-height: 90vh !important;
    /* neutralise FooBox's inline centring margins */
    margin-left: 0 !important;
    margin-top: 0 !important;
    /* re-centre based on the element's own (now smaller) size */
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
}

/* Stage + item containers must fill the (now viewport-bound) inner, not the
   image's natural size. */
#foobox .fbx-stage,
#foobox .fbx-item-current,
#foobox .fbx-item-next,
.fbx-stage,
.fbx-item-current,
.fbx-item-next {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 94vw !important;
    box-sizing: border-box !important;
}

/* THE actual image: never wider than the viewport, height scales to keep
   aspect ratio. This is what stops the left/right cut-off.
   NOTE: FooBox base CSS has `img.fbx-item { max-width:none; max-height:none }`
   (specificity 0,1,1) which would defeat a plain .fbx-item-image rule, so we
   match `img.fbx-item` here and also prefix with #foobox to be safe. */
#foobox img.fbx-item,
#foobox img.fbx-item-image,
#foobox .fbx-item-image,
img.fbx-item,
img.fbx-item-image,
.fbx-item-image {
    position: relative !important;
    max-width: 94vw !important;
    max-height: 86vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    overflow: visible !important;
}

/* Caption text under the image: wrap, don't clip. */
#foobox .fbx-caption,
#foobox .fbx-caption-title,
#foobox .fbx-caption-desc,
.fbx-caption,
.fbx-caption-title,
.fbx-caption-desc {
    max-width: 96vw !important;
    white-space: normal !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    #foobox .fbx-item-image,
    #foobox .fbx-item img,
    .fbx-item-image,
    .fbx-item img {
        max-width: 94vw !important;
        max-height: 78vh !important;
    }
    #foobox .fbx-caption-title,
    .fbx-caption-title { font-size: 16px !important; }
    #foobox .fbx-caption-desc,
    .fbx-caption-desc  { font-size: 13px !important; line-height: 1.4 !important; }
}

/* -------------------------------------------------------------------------
   #4b  Also cover Simple Lightbox (SLB) — some galleries fall back to it.
   ------------------------------------------------------------------------- */
#slb_viewer_wrap .slb_theme_slb_default .slb_container,
#slb_viewer_wrap .slb_theme_slb_default .slb_content {
    max-width: 96vw !important;
    box-sizing: border-box !important;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_content img,
#slb_viewer_wrap .slb_theme_slb_default img {
    max-width: 96vw !important;
    max-height: 78vh !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_details,
#slb_viewer_wrap .slb_theme_slb_default .slb_data,
#slb_viewer_wrap .slb_theme_slb_default .slb_data_title,
#slb_viewer_wrap .slb_theme_slb_default .slb_data_desc {
    max-width: 96vw !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}


/* -------------------------------------------------------------------------
   #6  COMMERCIAL (nivoSlider) — model heads cut off on Samsung tablet.
   Anchor the crop to the TOP so faces/heads stay in frame at tablet widths.
   ------------------------------------------------------------------------- */
.nivoSlider img,
.nivo-main-image,
.nivoSlider a img {
    object-fit: cover !important;
    object-position: center top !important;
}

@media (max-width: 1024px) {
    .nivoSlider,
    .nivo-wrapper {
        height: auto !important;
    }
    .nivoSlider img,
    .nivo-main-image {
        object-position: center top !important;
        height: auto !important;
        max-height: none !important;
    }
    .nivo-slice,
    .nivo-box {
        top: 0 !important;
    }
}