/* Shared media kit: card shell, YouTube video cards, GLightbox + Plyr
   theme. Enqueued by genesis_media_kit_enqueue() (inc/genesis-youtube.php)
   on the media and podcasts pages. */
/* --- card shell: photo cards (media page) and video cards --- */
.gm-card {
    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-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}
@media (prefers-reduced-motion: reduce) {
    .gm-card:hover { transform: none; }
}
/* card caption line: photo figcaptions and video titles */
.gm-card figcaption.widget-image-caption,
.gm-video-card p.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 */
}

/* --- 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);
}

/* collection cards: heading + 3-line description under the cover.
   The padding lives on the body: inside the clamped box it would show
   a sliver of the 4th line. */
.gm-video-card__body--item { padding: 16px 18px 18px; }
.gm-video-card__date {
    display: block;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #8a93a6;
}
.gm-video-card h3.gm-video-card__title--h {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #284D9A;
}
.gm-video-card p.gm-video-card__desc {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4a5468;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* --- 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; }
/* 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-clean .desc-bottom .gslide-description {
    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; }
    /* video captions scroll in the space between the video (centered,
       16:9 at full width less the 12px insets) and the nav bar (8px
       clear of it), so a
       long description never covers the player. GLightbox ignores
       swipes that start inside .gslide-desc, so scrolling is safe. */
    .glightbox-mobile .gvideo-container .gslide-description {
        max-height: max(96px, calc(50vh - 76px - (100vw - 24px) * 9 / 32 - 16px));
        max-height: max(96px, calc(50dvh - 76px - env(safe-area-inset-bottom, 0px) - (100vw - 24px) * 9 / 32 - 16px));
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* solid, not the photo fade: text scrolls over the page behind;
           inset and rounded like the media above it */
        background: rgba(10, 22, 50, .96) !important;
        left: 12px;
        right: 12px;
        width: auto !important;
        padding: 0 !important;
        border-radius: 12px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .3) transparent;
    }
    .glightbox-mobile .gvideo-container .gdesc-inner { padding: 14px 16px; }
    /* 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; }