/**
 * Media Gallery Block styles (front-end + editor).
 * Loaded conditionally as the block's `style` / `editor_style`.
 */

.rn-gallery {
    --rn-gallery-cols: 3;
    --rn-gallery-gap: 12px;
    --rn-item-ratio: 1 / 1;
    margin: 0;
}

/* ---- Grid ---- */
.rn-gallery--grid {
    display: grid;
    grid-template-columns: repeat(var(--rn-gallery-cols), 1fr);
    gap: var(--rn-gallery-gap);
}
.rn-gallery--grid .rn-gallery__item {
    aspect-ratio: var(--rn-item-ratio);
    height: 100%;
}
.rn-gallery--grid.is-ratio-original .rn-gallery__item {
    aspect-ratio: auto;
}
.rn-gallery--grid .rn-gallery__item img,
.rn-gallery--grid .rn-gallery__item video {
    height: 100%;
    object-fit: cover;
}

/* ---- Masonry ----
   Base state is a normal grid (each item one auto row) so the layout is
   never broken before rn-gallery.js runs; the script then switches
   grid-auto-rows to a fine unit and assigns per-item row spans. */
.rn-gallery--masonry {
    display: grid;
    grid-template-columns: repeat(var(--rn-gallery-cols), 1fr);
    gap: var(--rn-gallery-gap);
    align-items: start;
}

/* ---- Item ---- */
.rn-gallery__item {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: rgba(22, 54, 92, 0.05);
}
.rn-gallery__item.is-rounded,
.rn-gallery.is-rounded .rn-gallery__item {
    border-radius: 8px;
}
.rn-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    cursor: pointer;
}
.rn-gallery__item img,
.rn-gallery__item video {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover — matches the product/article image hover: navy veil + centre logo
   reveal, with the zoom kept on. The overlay (::after) and logo (::before) sit
   on the item itself so they work with or without a lightbox link. */
.rn-gallery__item:hover img,
.rn-gallery__item:hover video {
    transform: scale(1.08);
}
.rn-gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(22, 54, 92, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.rn-gallery__item:hover::after {
    opacity: 1;
}
/* Logo reveal — image tiles only (video tiles show the play button instead). */
.rn-gallery__item--image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20px);
    width: 72px;
    height: 60px;
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    pointer-events: none;
}
.rn-gallery__item--image:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%);
}
html[data-theme="dark"] .rn-gallery__item::after {
    background: rgba(255, 255, 255, 0.7);
}
html[data-theme="dark"] .rn-gallery__item--image::before {
    background-image: url('/wp-content/themes/remigration-now/assets/images/logo-blue.png');
}

/* ---- Video play overlay (poster mode) ---- */
.rn-gallery__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.rn-gallery__play::before {
    content: '';
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.3s ease, transform 0.3s ease;
}
.rn-gallery__play::after {
    content: '';
    position: absolute;
    /* Play triangle */
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}
.rn-gallery__item:hover .rn-gallery__play::before {
    background: rgba(22, 54, 92, 0.85);
    transform: scale(1.08);
}

/* ---- Caption ---- */
.rn-gallery__item figcaption,
.rn-gallery__caption {
    font-size: 0.82rem;
    line-height: 1.35;
    padding: 0.4rem 0.1rem 0;
    opacity: 0.75;
}

/* ---- Responsive column drop ----
   The column count is set inline (style="--rn-gallery-cols:N") which outranks a
   media query that tries to reassign the variable, so instead override
   grid-template-columns directly. min() caps the count without ever raising it
   above the author's choice (e.g. a 1-column gallery stays 1). */
@media screen and (max-width: 900px) {
    .rn-gallery--grid,
    .rn-gallery--masonry {
        grid-template-columns: repeat(min(var(--rn-gallery-cols), 2), 1fr);
    }
}
@media screen and (max-width: 540px) {
    .rn-gallery--grid,
    .rn-gallery--masonry {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ================================================================
   EDITOR-ONLY
   ================================================================ */
.rn-gallery-editor__ctrls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 3;
}
.rn-gallery__item:hover .rn-gallery-editor__ctrls {
    opacity: 1;
}
.rn-gallery-editor__ctrls .components-button.is-destructive {
    color: #cc1818;
}
/* In the editor, suppress the front-end hover (zoom + overlay + logo) so it
   doesn't fight the move/remove controls. */
.rn-gallery-editor .rn-gallery__item:hover img,
.rn-gallery-editor .rn-gallery__item:hover video {
    transform: none;
}
.rn-gallery-editor .rn-gallery__item::after,
.rn-gallery-editor .rn-gallery__item::before {
    display: none;
}

/* "Generating poster…" overlay while a video frame is captured + uploaded. */
.rn-gallery-editor__generating {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.25;
    color: #fff;
    background: rgba(22, 54, 92, 0.72);
}
.rn-gallery-editor__generating .components-spinner {
    margin: 0;
}

/* ================================================================
   LIGHTBOX SKIN — GLightbox + Plyr, branded dark navy (#16365c)
   ----------------------------------------------------------------
   Plyr's CSS is injected after ours (it loads on demand when a video
   plays), so the variable overrides use !important to win regardless
   of load order. Scoped to .glightbox-container so only the gallery
   lightbox's player is affected.
   ================================================================ */
.glightbox-container .plyr {
    --plyr-color-main:                     #16365c !important;
    --plyr-video-control-color:            #ffffff !important;
    --plyr-video-control-color-hover:      #ffffff !important;
    --plyr-video-control-background-hover: #16365c !important;
    --plyr-audio-control-background-hover: #16365c !important;
    --plyr-range-fill-background:          #16365c !important;
    --plyr-range-thumb-background:         #ffffff !important;
    --plyr-range-thumb-active-shadow-color: rgba(22, 54, 92, 0.5) !important;
    --plyr-video-range-track-background:   rgba(255, 255, 255, 0.3) !important;
    --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.25) !important;
    --plyr-menu-background:                rgba(22, 54, 92, 0.96) !important;
    --plyr-menu-color:                     #ffffff !important;
    --plyr-tab-focus-color:                #16365c !important;
    --plyr-badge-background:               #16365c !important;
}

/* Progress/volume slider unfilled tracks — keep them a soft white, not blue. */
.glightbox-container .plyr--full-ui input[type="range"] {
    color: #16365c !important; /* fill (some Plyr builds map the fill to color) */
}

/* Control-bar buttons: crisp hover with the brand navy background. */
.glightbox-container .plyr__control:hover,
.glightbox-container .plyr__control[aria-expanded="true"] {
    background: #16365c !important;
    color: #fff !important;
}

/* Big centre play button — add a real hover + a 2px ring to match the theme. */
.glightbox-container .plyr__control--overlaid {
    background: rgba(22, 54, 92, 0.85) !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.glightbox-container .plyr__control--overlaid:hover,
.glightbox-container .plyr__control--overlaid:focus {
    background: #16365c !important;
    box-shadow: 0 0 0 6px rgba(22, 54, 92, 0.3);
}

/* Prev / next / close — brand colour, 2px border, and a hover state. */
.glightbox-container .gnext,
.glightbox-container .gprev,
.glightbox-container .gclose {
    background-color: rgba(22, 54, 92, 0.75) !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 6px;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover,
.glightbox-container .gclose:hover {
    background-color: #16365c !important;
    border-color: #fff !important;
    transform: scale(1.06);
}
.glightbox-container .gnext:active,
.glightbox-container .gprev:active,
.glightbox-container .gclose:active {
    transform: scale(0.96);
}

/* Mobile: the video slide should hug the viewport edge-to-edge — the default
   width cap left a bar of empty space down the right-hand side. Also hide the
   fullscreen control as a CSS backstop (it's disabled in the Plyr config). */
@media screen and (max-width: 782px) {
    .glightbox-container .gslide-video,
    .glightbox-container .gslide-media.gslide-video {
        max-width: 100vw !important;
        width: 100vw !important;
    }
    .glightbox-container .plyr [data-plyr="fullscreen"] {
        display: none !important;
    }
    /* Square / portrait videos: Plyr's forced 16:9 ratio is disabled on mobile
       (see rn-gallery.js), so let the video's own aspect drive the height and
       fill the full viewport width — no letterbox padding either side. */
    .glightbox-container .gvideo-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .glightbox-container .plyr__video-wrapper {
        padding-bottom: 0 !important;
        height: auto !important;
    }
    .glightbox-container .plyr--video video {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: 100vh;
    }
}