/* ============================================================
 * 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  (overlay buttons, NIET nav pijlen!)
 *   .galleria-image-nav-right         → .gg_lcms_right_cmd (overlay buttons, NIET nav pijlen!)
 *   .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
 *   nav pijlen                        → .lcms_prev / .lcms_next (binnen .lcms_nav)
 * ============================================================ */


/* ── #newdiv1: basis wrapper ──────────────────────────────────────────
 *
 * Desktop: GEEN hoogte-override — de plugin regelt de hoogte zelf
 *   via padding-bottom op .gg_lcms_slider (inline style door plugin).
 *
 * Mobiel: hoogte via vw + absolute slider (zie media queries hieronder).
 * ──────────────────────────────────────────────────────────────────── */

#newdiv1 {
    position: relative;
    width: 100%;
    margin-top: 14px !important;
    overflow: visible;
}

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

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

#newdiv1 .gg_lcms_slider .lcms_prev:before {
    content: "\f104";
}

#newdiv1 .gg_lcms_slider .lcms_next:before {
    content: "\f105";
}


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

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


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

.gg_loader .ggl_1,
.gg_loader .ggl_2,
.gg_loader .ggl_3,
.gg_loader .ggl_4 {
    background-color: #fff;
}


/* ── Desktop: navigatiepijlen — hover gedrag + icon stijl ────────────
 *
 * De plugin toont .lcms_prev/.lcms_next alleen bij hover via:
 *   .gg_lcms_slider.lcms_wrap:hover .lcms_nav > * { opacity: 1 }
 * (de inner .lcms_wrap heeft ook .gg_lcms_slider class → hover werkt)
 *
 * Het standaard icoon (12px, opacity 0.6, grijs) op een witte knop
 * is bijna onzichtbaar. We maken het groter, voller en beter zichtbaar.
 *
 * Play-button bug: de plugin heeft een geneste selector
 *   .gg_lcms_slider .gg_lcms_slider .lcms_play span:before { font-size: 11px }
 * die altijd matcht (inner .lcms_wrap heeft ook .gg_lcms_slider).
 * We fixen dit met hogere specificiteit via #newdiv1.
 * ──────────────────────────────────────────────────────────────────── */

@media (min-width: 992px) {

    /* Nav-pijlen desktop: zelfde stijl als mobiel — transparant, wit, Font Awesome */
    #newdiv1 .gg_lcms_slider .lcms_prev,
    #newdiv1 .gg_lcms_slider .lcms_next {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* plugin custom.css zet opacity: 0.6 op :before — overschrijven met hogere specificiteit */
    #newdiv1 .gg_lcms_slider .lcms_prev:before,
    #newdiv1 .gg_lcms_slider .lcms_next:before {
        font-family: "Font Awesome 5 Free", fontawesome;
        font-weight: 100;
        font-size: 31px;
        color: #fff;
        line-height: 42px;
        position: relative;
        top: -1px;
        opacity: 1;
    }

    /* ── Hover show/hide: pijltjes en overlay-knoppen ──────────────────────
     * Opacity op de CONTAINER-elementen (niet op de kind-spans), zodat
     * CSS-stacking van parent-opacity geen problemen geeft.
     *   .lcms_nav       → container van .lcms_prev / .lcms_next
     *   .gg_lcms_left_cmd / .gg_lcms_right_cmd → container van play, fullscreen
     * ──────────────────────────────────────────────────────────────────── */
    #newdiv1 .lcms_nav,
    #newdiv1 .gg_lcms_left_cmd,
    #newdiv1 .gg_lcms_right_cmd {
        opacity: 0 !important;
        transition: opacity .2s ease !important;
    }

    /* Hover op .lcms_wrap (bevat afbeelding + knoppen).
     * #newdiv1 heeft height:0 waardoor :hover daar niet betrouwbaar werkt
     * buiten de absoluut gepositioneerde child-elementen. */
    #newdiv1 .lcms_wrap:hover .lcms_nav,
    #newdiv1 .lcms_wrap:hover .gg_lcms_left_cmd,
    #newdiv1 .lcms_wrap:hover .gg_lcms_right_cmd {
        opacity: 1 !important;
    }

    /* ── Play-button: icoon centreren + correcte grootte ──────────────────
     *
     * Bug 1: geneste selector .gg_lcms_slider .gg_lcms_slider .lcms_play
     *        span:before verkleint het icoon naar 11px (frontend.css regel
     *        2139) — we herstellen dit naar 13px met hogere specificiteit.
     *
     * Bug 2: het icoon staat niet gecentreerd in de ronde knop. De plugin
     *        lost dit normaal op met handmatige relative-offsets (top: -1px/
     *        -2px, left: -1px, text-indent: 2px) die zijn afgestemd op het
     *        oorspronkelijke icoon/font-formaat. Bij onze aangepaste
     *        font-size (13px i.p.v. 11px) kloppen die offsets niet meer.
     *
     * Structurele oplossing: i.p.v. opnieuw te schuiven met offsets,
     * centreren we het icoon met flexbox (zowel op de knop als de span).
     * Dat werkt altijd correct, ongeacht icoon-formaat of lettertype-
     * metrics, en de oude offset-/inspring-regels zetten we expliciet uit.
     * ──────────────────────────────────────────────────────────────────── */
    #newdiv1 .gg_lcms_slider .lcms_play {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-indent: 0 !important;
    }
    #newdiv1 .gg_lcms_slider .lcms_play span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        height: 100%;
    }
    #newdiv1 .gg_lcms_slider .lcms_play span:before {
        font-size: 13px !important;
        position: relative !important;
        /* Optische correctie: flex centreert wiskundig correct, maar het
         * driehoekige play-icoon oogt daardoor net iets te ver naar links-
         * boven. 1px naar rechts en naar beneden compenseert dat. */
        top: 1px !important;
        left: 1px !important;
    }

    /* ── Thumbnails desktop: zorg dat ze altijd zichtbaar zijn ────────────
     *
     * Probleem: lc-micro-slider.min.js injecteert:
     *   .lcms_wrap.lcms_has_nav_dots { max-height: calc(100% - 40px) }  → specificiteit 0,2,0
     * plugin custom.css heeft:
     *   .gg_lcms_thumbs_shown div.lcms_wrap { max-height: calc(100% - 57px) }  → specificiteit 0,1,1
     * De JS-regel WINT (hogere specificiteit), dus de inner wrap is 40px korter.
     * Maar .lcms_nav_dots staat op bottom: -57px (van custom.css, specificiteit 0,1,1 > 0,1,0).
     * Resultaat: thumbnailstrip valt deels buiten de slider → wordt soms weggeclipt.
     *
     * Fix:
     *  1. Forceer de juiste max-height/margin-bottom met hogere specificiteit (#newdiv1).
     *  2. Forceer overflow: visible op hele ancestor-keten.
     *  3. Geef #newdiv1 padding-bottom = thumbnailhoogte zodat de strip altijd ruimte heeft.
     * ──────────────────────────────────────────────────────────────────── */

    /* Forceer lcms_wrap hoogte = slider − 57px  (= 4:3 van de sliderbreedte).
     * max-height alleen werkt niet: de plugin zet inline height via JS.
     * height: !important overschrijft inline styles wél. */
    #newdiv1 .gg_lcms_slider .lcms_wrap.lcms_has_nav_dots {
        height: calc(100% - 57px) !important;
        max-height: calc(100% - 57px) !important;
        margin-bottom: 57px !important;
    }

    /* Forceer thumbnail strip zichtbaar */
    #newdiv1 .gg_lcms_has_thumbs .lcms_nav_dots {
        position: absolute !important;
        bottom: -57px !important;
        opacity: 1 !important;
        display: block !important;
        overflow: hidden !important;   /* clip horizontale overflow; drag-scroll via plugin */
        white-space: nowrap !important; /* thumbnails op één rij houden */
    }

    /* Herstel spans verborgen door: .single .entry span { display: none !important }
     * (style_oud.css regels 1530-1534 — verbergt ALLE spans in .entry op single-pagina's).
     * Op mobiel is dit geen probleem: gallery staat buiten .entry (#tabfotos).
     * Op desktop staat de gallery WEL in .entry → alle gallery-spans verborgen.
     *
     * Verborgen spans in de gallery:
     *   .lcms_nav_dots span      → thumbnail-afbeeldingen
     *   .lcms_prev / .lcms_next  → navigatiepijltjes  (<span role="button">)
     *   .gg_lcms_trigger_lb      → fullscreen-knop     (<span class="fas fa-expand-alt">)
     *   .lcms_play span          → play-icoon          (<div.lcms_play><span></span></div>)
     *   .gg_lcms_toggle_texts    → tekst-toggle knop   (<span class="fas ...">)
     *   .gg_lcms_toggle_thumbs   → thumbnail-toggle    (<span class="fas ...">)
     *
     * Specificiteit: #newdiv1 .lcms_xxx = 1,1,0  >  .single .entry span = 0,2,1  ✓ */
    #newdiv1 .lcms_nav_dots span,
    #newdiv1 .lcms_prev,
    #newdiv1 .lcms_next,
    #newdiv1 .gg_lcms_trigger_lb,
    #newdiv1 .lcms_play span,
    #newdiv1 .gg_lcms_toggle_texts,
    #newdiv1 .gg_lcms_toggle_thumbs {
        display: inline-block !important;
    }

    /* Overschrijf eventuele overflow op ancestorelementen */
    #newdiv1,
    #newdiv1 .gg_lcms_slider {
        overflow: visible !important;
    }

    /* ── Gallery-hoogte op desktop: beschikbare ruimte, met 4:3-bovengrens ──
     *
     * Probleem met een breedte-gebaseerde hoogte (bv. padding-bottom: 75%):
     * de container van .single bevriest op 1170px vanaf 1200px viewport-
     * breedte (Bootstrap .container, bewust — voorkomt te lange tekstregels
     * op brede schermen). Dat betekent dat de gallery op bv. 1366×768 en
     * 1920×1080 EXACT dezelfde breedte/hoogte in pixels zou krijgen (~558px),
     * wat op de minder hoge 768px-viewport verhoudingsgewijs te groot oogt.
     *
     * Een vaste vh-waarde (bv. 51.7vh) loste dat op voor de 1920×1080-
     * referentie, maar is geen structurele maat: op een 1366×768-scherm is
     * er feitelijk meer verticale ruimte beschikbaar (na aftrek van header/
     * footer) dan 51.7vh oplevert, en een hogere vh-waarde (bv. 80.7vh) laat
     * de gallery op 1920×1080 juist te groot worden.
     *
     * Oplossing: de twee eisen los van elkaar uitdrukken en het kleinste
     * resultaat aanhouden via min():
     *   1. Beschikbare ruimte = 100vh − 122px reserve. Dit laat de gallery
     *      meeschalen met de daadwerkelijke kijkhoogte, op elk schermformaat.
     *      De 122px is handmatig in de browser bepaald (niet de eerder
     *      aangenomen header/footer/marge-optelsom: de footer staat
     *      initieel buiten beeld en lijkt daardoor geen ruimte te kosten,
     *      maar overlapt de gallery zodra je scrollt — 122px is de waarde
     *      waarbij dat niet meer gebeurt).
     *   2. Bovengrens = 558px, de oorspronkelijke 4:3-referentiemaat
     *      (501px beeld + 57px thumbnail-strip = 501 + 57 = 558).
     *      Dit voorkomt dat de gallery op hoge viewports groter wordt
     *      dan het vertrouwde 4:3-formaat.
     *
     * Resultaat:
     *   1920×1080 → min(958px, 558px) = 558px  (= volledige 4:3-referentie,
     *                                            ongewijzigd t.o.v. origineel)
     *   1366×768  → min(646px, 558px) = 558px  (eveneens volledige 4:3-
     *                                            referentie, mits er ≥ 680px
     *                                            viewporthoogte is)
     *   Op lagere viewports (< 680px) krimpt de gallery automatisch mee
     *   met de beschikbare hoogte, zodat hij nooit overlapt met de footer.
     *
     * Opbouw (ongewijzigd):
     *   #newdiv1 hoogte      = berekende waarde (totaal, incl. thumbnail-strip)
     *   .gg_lcms_slider      = vult #newdiv1 volledig (100%)
     *   .lcms_wrap           = slider − 57px  (ruimte voor thumbnails)
     *   .lcms_container      = vult lcms_wrap
     *   .lcms_nav_dots       = bottom: −57px van lcms_wrap
     *
     * De afbeeldingen gebruiken object-fit: cover, dus de exacte
     * beeldverhouding van het zichtbare vlak varieert licht per scherm-
     * formaat zonder dat foto's vervormen.
     *
     * Scope: deze regel valt binnen @media (min-width: 992px) — de mobiele
     * weergave (@media max-width: 991px / 767px, elders in dit bestand)
     * blijft volledig ongemoeid.
     * ──────────────────────────────────────────────────────────────────── */
    body.single #newdiv1 {
        height: min(calc(100vh - 122px), 558px);
    }

    /* Slider vult #newdiv1 volledig; plugin inline padding-bottom uitschakelen */
    body.single #newdiv1 .gg_lcms_slider {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;        /* expliciet zodat % op kinderen werkt */
        padding-bottom: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
    }

}


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

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

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


/* ── Responsive ≤ 1200px ─────────────────────────────────────────── */

@media (max-width: 1200px) {

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

}


/* ── Responsive ≤ 991px (tablet/mobiel) ─────────────────────────────
 *
 * STRATEGIE MOBIEL: hoogte volledig via #newdiv1 (vw-based).
 * De .gg_lcms_slider vult #newdiv1 via position: absolute.
 * Thumbnails worden verborgen; lege ruimte geven we terug.
 * ──────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

    /* Hoogte via viewport-breedte */
    #newdiv1 {
        height: 55vw;
    }

    /* Slider vult #newdiv1 volledig; plugin padding-bottom uitgeschakeld */
    #newdiv1 .gg_lcms_slider {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        max-width: 100%;
    }

    /* Geef afbeeldingsgebied de volledige hoogte terug (plugin reserveert 57px voor thumbs) */
    #newdiv1 .gg_lcms_slider .lcms_wrap,
    #newdiv1 .gg_lcms_slider div.lcms_wrap,
    #newdiv1 .gg_lcms_slider .lcms_wrap.lcms_has_nav_dots {
        max-height: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Verberg thumbnail-strip */
    #newdiv1 .lcms_nav_dots {
        display: none !important;
    }

    /* Verberg overlay-knoppen (fullscreen, play, tekst-toggle) */
    .gg_lcms_left_cmd,
    .gg_lcms_right_cmd {
        display: none !important;
    }

    /* Navigatiepijlen: transparant, wit icoon, altijd zichtbaar */
    #newdiv1 .gg_lcms_slider .lcms_prev,
    #newdiv1 .gg_lcms_slider .lcms_next {
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    #newdiv1 .gg_lcms_slider .lcms_prev {
        left: 12px !important;
    }

    #newdiv1 .gg_lcms_slider .lcms_next {
        right: 12px !important;
    }

    /* Pijl-iconen: wit, iets dunner dan desktop */
    #newdiv1 .gg_lcms_slider .lcms_prev:before,
    #newdiv1 .gg_lcms_slider .lcms_next:before {
        font-family: "Font Awesome 5 Free", fontawesome;
        font-weight: 100;           /* light gewicht = dunnere pijl */
        font-size: 31px;
        color: #fff;
        transition: opacity .2s;
        line-height: normal;
        position: relative;
        top: -1px;
        opacity: 1;
    }

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

    .gg_lcms_slider .lcms_slide {
        width: 100%;
    }

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

}


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

@media (max-width: 767px) {

    /* 4:3 verhouding */
    #newdiv1 {
        height: 75vw;
    }

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

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

}