/* ============================================================
 * Global Gallery — LCMS Slider stijl-update
 * Vertaling van Galleria.js selectors naar LCMS (Global Gallery 10.x)
 *
 * Mappings:
 *   .gg_galleria_slider_wrap          → .gg_lcms_slider
 *   .gg_galleria_slider_show_thumbs   → .gg_lcms_has_thumbs
 *   .galleria-container               → .gg_lcms_slider .lcms_wrap
 *   .galleria-stage                   → .gg_lcms_slider .lcms_container
 *   .galleria-image                   → .gg_lcms_slider .lcms_slide
 *   .galleria-image img               → .gg_lcms_slider .lcms_slide .lcms_bg img
 *   .galleria-image-nav-left          → .gg_lcms_left_cmd
 *   .galleria-image-nav-right         → .gg_lcms_right_cmd
 *   .galleria-gg-lightbox             → .gg_lcms_trigger_lb
 *   .galleria-gg-play                 → .lcms_play / .gg_lcms_toggle_texts
 *   .galleria-thumbnails-list         → .lcms_nav_dots
 *   .galleria-thumbnails img          → .lcms_nav_dots span img
 *   .sidebar .gg_galleria_slider_wrap → .sidebar .gg_lcms_slider
 * ============================================================ */


/* ── Desktop: basisafmetingen slider ─────────────────────────────── */
/*
 * GEEN vaste height meer op .lcms_wrap of .lcms_container:
 * de LCMS-plugin berekent de hoogte zelf via JavaScript (inline style
 * op .gg_lcms_slider) op basis van de afbeeldingsverhouding.
 * Vaste hoogtes van de oude Galleria.js (.galleria-container: 455/460px)
 * knippen de afbeelding af en worden hier bewust weggelaten.
 */

/*
 * min-height: de LCMS plugin gebruikt gg_min_slider_h (= 200px in de database)
 * als minimale hoogte. De oude Galleria container was 455-460px.
 * We zetten hier een hogere minimum zodat de gallery niet te klein blijft.
 * De plugin overschrijft dit via inline style met de werkelijke hoogte
 * op basis van de afbeeldingsverhouding.
 */
.gg_lcms_slider {
    width: 100%;
    max-width: 100%;
    min-height: 420px;
}

/* Mobiel: kleinere minimum hoogte */
@media (max-width: 991px) {
    .gg_lcms_slider {
        min-height: 55vw;
    }
}
@media (max-width: 767px) {
    .gg_lcms_slider {
        min-height: 65vw;
    }
}

.gg_lcms_slider .lcms_container {
    left: 1px !important;
    right: 1px !important;
    top: 3px !important;
}


/* ── Verberg gallery in de sidebar ───────────────────────────────── */

.sidebar .gg_lcms_slider,
.galleria-errors {
    display: none !important;
}


/* ── Navigatiepijlen ─────────────────────────────────────────────── */

.gg_lcms_left_cmd,
.gg_lcms_right_cmd {
    opacity: .9;
    cursor: pointer;
    width: 26px;
    height: 56px;
    border-radius: 2px;
    background-color: #fff;
    color: #555;
    text-align: center;
    font-size: 25px !important;
    transform: scale(1.2) !important;
    font-weight: 700 !important;
    transition: opacity .2s linear;
}

.gg_lcms_right_cmd {
    font-family: 'Font Awesome 5 Pro', fontawesome !important;
    font-weight: 100 !important;
    font-size: 27px !important;
    margin-right: -0.6vw !important;
}

.gg_lcms_left_cmd {
    font-family: 'Font Awesome 5 Pro', fontawesome !important;
    font-weight: 100 !important;
    font-size: 27px !important;
    margin-left: -1vw !important;
}


/* ── Loader kleuren ──────────────────────────────────────────────── */

/* .gg_loader is ongewijzigd in LCMS — regels blijven geldig */
.gg_loader .ggl_1,
.gg_loader .ggl_2,
.gg_loader .ggl_3,
.gg_loader .ggl_4 {
    background-color: #fff;
}


/* ── Lightbox & slideshow-knop ───────────────────────────────────── */

.gg_lcms_trigger_lb {
    float: right !important;
    margin-right: -64px;
}

.lcms_play,
.gg_lcms_toggle_texts {
    float: right !important;
    margin-right: 59px;
}


/* ── Afbeelding object-fit ───────────────────────────────────────── */

.gg_lcms_slider .lcms_slide .lcms_bg img {
    object-fit: cover;
    width: 100%;
}

.lcms_nav_dots span img {
    width: 60px !important;
    object-fit: cover;
}


/* ── Thumbnails verbergen ────────────────────────────────────────── */

body .gg_lcms_slider.gg_lcms_has_thumbs {
    padding-bottom: 0px !important;
}


/* ── #newdiv1 marges (via mobiel-wrap in main.js) ────────────────── */

#newdiv1 {
    margin-top: 4px !important;
}

body.page-template-bouw-template #newdiv1 {
    margin-top: -8px !important;
}

body.single #newdiv1 {
    width: 100%;
}

#newdiv1 .gg_lcms_slider .lcms_slide .lcms_bg img {
    width: 100% !important;
    object-fit: cover;
    left: 0 !important;
}


/* ── Responsive ≤ 1199px ─────────────────────────────────────────── */

@media (max-width: 1199px) {

    body.single #newdiv1 {
        margin-bottom: 215px !important;
    }

    .gg_lcms_slider .lcms_container {
        left: 0px !important;
        right: 0px !important;
    }

}


/* ── Responsive ≤ 991px (tablet) ────────────────────────────────── */

@media (max-width: 991px) {

    #tabfotos #newdiv1 {
        margin-left: 0px !important;
        width: 100%;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

    /* Thumbnailstrip verbergen in mobiele fotostab */
    #tabfotos #newdiv1 .lcms_nav_dots {
        display: none !important;
    }

    .gg_lcms_slider .lcms_slide {
        width: 100%;
    }

    .gg_lcms_slider .lcms_slide .lcms_bg img {
        object-fit: cover;
        width: 100%;
    }

    /* Hoogte wordt door de plugin zelf bepaald — niet overschrijven */

    .gg_lcms_slider .lcms_container {
        left: 0px !important;
        right: 0px !important;
    }

    body .gg_lcms_slider.gg_lcms_has_thumbs {
        padding-bottom: 0px !important;
    }

    #tabfotos #newdiv1 {
        margin-top: -16px !important;
    }

    /* Navigatiepijlen mobiel */
    .gg_lcms_right_cmd {
        right: 3vw !important;
        background-color: transparent !important;
        color: #fff !important;
    }

    .gg_lcms_left_cmd {
        left: 3vw !important;
        background-color: transparent !important;
        color: #fff !important;
    }

    /* Lightbox- en play-knop verbergen op mobiel */
    .gg_lcms_trigger_lb,
    .gg_lcms_toggle_texts,
    .lcms_play {
        display: none;
    }

}


/* ── Responsive ≤ 767px (mobiel) ────────────────────────────────── */

@media (max-width: 767px) {

    /* Thumbnail-navigatie verbergen */
    .lcms_nav_left,
    .lcms_nav_right {
        display: none !important;
    }

    .single .entry #newdiv1 {
        width: 100% !important;
    }

    #newdiv1 .gg_lcms_slider .lcms_slide .lcms_bg img {
        width: 100% !important;
        object-fit: cover;
    }

}