/* Media page gallery + video grid + GLightbox/Plyr theming.
   Enqueued on the media page only by inc/genesis-media-gallery.php. */
/* --- Photo gallery + video grid: one shared column grid --- */
.gm-media-gallery,
.gm-media-videos {
    /* !important throughout: the Elementor e-con/e-con-inner
       container CSS loads after this block and would win otherwise */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: start;
    /* the boxed width lived on .e-con-inner, dissolved below:
       restate the site content column (header, banner, sections) */
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 32px !important;
    box-sizing: border-box;
}
/* boxed containers wrap children in .e-con-inner: make it
   layout-transparent so the widgets are the grid items */
.gm-media-gallery > .e-con-inner,
.gm-media-videos > .e-con-inner { display: contents !important; }
/* the old video panel painted white; cards now sit on the page bg
   like the photos above */
.gm-media-videos { background: transparent !important; padding-bottom: 48px !important; }

/* --- shared card look (photos + videos) --- */
.gm-media-gallery .elementor-widget-image,
.gm-media-videos .elementor-widget-video {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(31, 45, 80, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* same lift as the service cards (a.genesis-sl-service-card:hover) */
.gm-media-gallery .elementor-widget-image:hover,
.gm-media-videos .elementor-widget-video:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}
@media (prefers-reduced-motion: reduce) {
    .gm-media-gallery .elementor-widget-image:hover,
    .gm-media-videos .elementor-widget-video:hover { transform: none; }
}
.gm-media-gallery figure { margin: 0; width: 100%; }
.gm-media-gallery .elementor-widget-container { display: block; }
.gm-media-gallery a { display: block; }
.gm-media-gallery img {
    display: block;
    height: auto;
    border-radius: 0; /* the card clips the corners */
    /* trim 1px off every edge: the Artboard-* exports carry a baked-in
       near-white 1px border that showed as hairlines (the card
       overflow:hidden does the cropping) */
    width: calc(100% + 2px) !important;
    max-width: none !important;
    margin: -1px -1px -1px;
}
.gm-media-gallery .elementor-widget-image figcaption.widget-image-caption {
    position: relative; /* paints over the trimmed bottom pixel row */
    background: #fff;
}
.gm-media-gallery .elementor-widget-image figcaption.widget-image-caption,
.gm-media-videos .gm-video-card__title {
    margin: 0;
    padding: 12px 16px 14px;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    text-align: left;
    color: #4a5468 !important; /* the kit paints captions brand blue */
}

/* the row-span script switches the photo grid into masonry mode;
   fine 2px rows with the gap folded into each span keep spacing a
   consistent 24px instead of rounding up in (row + gap) steps */
.gm-media-gallery.gm-masonry-on { grid-auto-rows: 2px; row-gap: 0 !important; }
/* in the Elementor editor masonry is off: plain rows, normal gap */
.elementor-editor-active .gm-media-gallery { grid-auto-rows: auto; }
.gm-media-gallery.gm-masonry-on .elementor-widget-image { align-self: start; }

/* 3 columns desktop, 2 tablet, 1 mobile (the site breakpoints) */
@media (max-width: 1024px) {
    .gm-media-gallery,
    .gm-media-videos { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
    .gm-media-gallery,
    .gm-media-videos { grid-template-columns: 1fr !important; }
}

/* --- video cards --- */
.gm-video-cover {
    position: relative;
    display: block;
}
.gm-video-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gm-video-cover__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(40, 77, 154, .92);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .25);
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.gm-video-cover__play svg { width: 26px; height: 26px; margin-left: 3px; }
.gm-video-cover:hover .gm-video-cover__play {
    background: #1e3a75;
    transform: translate(-50%, -50%) scale(1.06);
}

/* --- Lightbox, in brand navy/blue rather than black/white --- */
.goverlay,
.glightbox-mobile .goverlay { background: rgba(10, 22, 50, .94); }
.glightbox-clean .gclose,
.glightbox-clean .gprev,
.glightbox-clean .gnext {
    background-color: rgba(40, 77, 154, .9);
    border-radius: 50%;
}
.glightbox-clean .gclose:hover,
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover { background-color: #1e3a75; }
.glightbox-clean .gprev,
.glightbox-clean .gnext { width: 44px; height: 44px; }
.glightbox-clean .gprev svg,
.glightbox-clean .gnext svg { width: 18px; }
.glightbox-clean .gclose { width: 40px; height: 40px; }
.glightbox-clean .gclose svg { width: 16px; }
/* never enlarge past the saved resolution: GLightbox sizes images at
   width:auto but floors them at min-width:200px; downscaling to fit
   (max-width/max-height) still applies */
.gslide-image img { min-width: 0 !important; }
/* same 1px edge trim as the grid cards; .gslide-media clips it */
.gslide-image img { margin: -1px !important; }
/* fit inside the viewport as a card: a slim 24px margin above and
   below, room for the caption box (--gm-desc-h, measured per slide
   by the gallery JS) and, on desktop, clear of the side arrows */
@media (min-width: 769px) {
    .gslide-image img {
        max-height: calc(100vh - 48px - var(--gm-desc-h, 0px)) !important;
        max-height: calc(100dvh - 48px - var(--gm-desc-h, 0px)) !important;
        max-width: calc(100vw - 220px) !important;
    }
}
/* rounded media: photo/video + caption box read as one card */
.glightbox-clean .gslide-media {
    border-radius: 14px;
    overflow: hidden;
}
.glightbox-clean .desc-bottom .gslide-media { border-radius: 14px 14px 0 0; }
/* GLightbox pins the caption to the image natural width (inline
   max-width), 2px wider than the edge-trimmed photo: clip it to match */
.glightbox-clean .desc-bottom .gslide-description {
    clip-path: inset(0 1px round 0 0 14px 14px);
}
/* videos are not trimmed, so their caption keeps its full width */
.glightbox-clean .gvideo-container .gslide-description {
    clip-path: none;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}
.glightbox-clean .gslide-description { background: #fff; }
.glightbox-clean .gdesc-inner { padding: 14px 18px; }
.glightbox-clean .gslide-desc { color: #4a5468; font-size: 15px; line-height: 1.5; }
/* GLightbox parks prev/next off-screen (top: -100%) below its desktop
   breakpoint. Desktop: side arrows. Mobile: a nav bar pinned to the
   bottom of the overlay, with the caption lifted above it so the two
   never overlap. */
@media (min-width: 769px) {
    .glightbox-clean .gprev,
    .glightbox-clean .gnext { top: 50% !important; transform: translateY(-50%); }
    .glightbox-clean .gprev { left: 30px; }
    .glightbox-clean .gnext { right: 30px; }
}
@media (max-width: 768px) {
    .glightbox-container::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(68px + env(safe-area-inset-bottom, 0px));
        background: #12254f;
        border-top: 2px solid #284D9A;
        /* just under .gcontainer (9999): the arrows live inside that
           stacking context, so a higher bar paints over them */
        z-index: 9998;
        pointer-events: none;
    }
    .glightbox-clean .gprev,
    .glightbox-clean .gnext {
        position: fixed;
        top: auto !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .glightbox-clean .gprev { left: 20px; }
    .glightbox-clean .gnext { right: 20px; }
    /* caption sits directly above the bar, on a navy fade */
    .glightbox-mobile .glightbox-container .gslide-description {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: 16px !important;
        background: linear-gradient(to bottom, rgba(10, 22, 50, 0) 0, rgba(10, 22, 50, .9) 100%) !important;
    }
    .glightbox-mobile .glightbox-container .gslide-desc { color: #dbe4f5; }
    /* the caption detaches on mobile, so the media rounds on all four
       corners, inset from the screen edges so the rounding shows */
    .glightbox-mobile .ginner-container { padding: 0 12px; box-sizing: border-box; }
    .glightbox-mobile .gslide-image img {
        max-width: 100% !important;
        /* clear of the nav bar, with the same slim margin */
        max-height: calc(100vh - 68px - 48px) !important;
        max-height: calc(100dvh - 68px - 48px - env(safe-area-inset-bottom, 0px)) !important;
    }
    .glightbox-mobile .glightbox-container .desc-bottom .gslide-media { border-radius: 12px; }
}

/* --- Video player (Plyr): brand blue, not the site red buttons.
   The Elementor kit styles every <button> as a red pill; the player
   controls are buttons, so reset them at higher specificity. --- */
.gslide-video .plyr {
    --plyr-color-main: #284D9A;
    --plyr-video-control-color: #fff;
    --plyr-video-control-color-hover: #fff;
    --plyr-video-control-background-hover: #284D9A;
    --plyr-video-controls-background: linear-gradient(rgba(10, 22, 50, 0), rgba(10, 22, 50, .88));
    --plyr-range-thumb-background: #fff;
    --plyr-range-fill-background: #4f7bd6;
    --plyr-video-range-track-background: rgba(255, 255, 255, .28);
}
.gslide-video .plyr button.plyr__control,
.gslide-video .plyr button.plyr__control:focus {
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 7px !important;
    min-height: 0 !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
}
.gslide-video .plyr button.plyr__control:hover,
.gslide-video .plyr button.plyr__control[aria-expanded="true"] {
    background: #284D9A !important;
}
.gslide-video .plyr button.plyr__control--overlaid {
    background: rgba(40, 77, 154, .92) !important;
    border-radius: 50% !important;
    padding: 20px !important;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .2) !important;
}
.gslide-video .plyr button.plyr__control--overlaid:hover { background: #1e3a75 !important; }
/* the kit styles every <input> as a light form field; the seek and
   volume sliders are inputs: translucent pill, inset from its ends */
.gslide-video .plyr input[type="range"] {
    background: rgba(255, 255, 255, .12) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
    box-sizing: border-box;
    box-shadow: none !important;
}
.gslide-video .plyr__menu__container { background: #fff; }
.gslide-video .plyr__menu__container button.plyr__control { color: #12254f !important; }
.gslide-video .plyr__menu__container button.plyr__control:hover { background: #EAF1FA !important; }