/* =================================================
   FRP GALLERY — lb-* component
   Identiek aan vastgoedhulpinspanje.nl implementatie

   ⚠ BRICKS 2.0+ COMPATIBILITEIT
   Bricks 2.0 heeft CSS Cascade Layers standaard geactiveerd.
   Gevolg: de Bricks reset-stylesheet staat in een layer onder
   de browser user-agent styles. Elementen als <figure>, <button>,
   <fieldset>, <table> krijgen hun UA-defaults terug tenzij wij
   ze expliciet resetten. Nooit vertrouwen op dat een ander
   stylesheet dit voor ons doet.
   ================================================= */

.frp-gallery.lb-wrap { display: grid; gap: 14px; }

/* Hoofdslider */
.lb-slider-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
.lb-slider {
    display: flex;
    height: clamp(260px, 48vw, 560px);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    border-radius: inherit;
}

/* Subtiele fade-in op actieve slide via opacity */
.lb-slide {
    transition: opacity .35s ease;
    opacity: .92;
}
.lb-slide.is-active {
    opacity: 1;
}
.lb-slide {
    /* BRICKS 2.0+ COMPAT: Cascade Layers zijn sinds Bricks 2.0 standaard
       enabled, waardoor hun reset-stylesheet in een lagere layer staat dan
       browser user-agent styles. De UA-default `figure { margin: 1em 40px }`
       wint nu van de Bricks reset — dus wij moeten zelf resetten, anders
       breekt de slide-width berekening en faalt object-fit: cover.
       Sinds v1.0.3.dev.103 (20 apr 2026). */
    min-width: 100%;
    width: 100%;
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
    cursor: zoom-in;
    overflow: hidden;
    position: relative;
}
.lb-slide img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    user-select: none; -webkit-user-drag: none;
}

/* Pijlen */
.lb-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; padding: 0; border-radius: 999px;
    background: rgba(0,0,0,.45); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    z-index: 2; transition: background .2s;
}
.lb-arrow:hover { background: rgba(0,0,0,.7); }
.lb-arrow svg   { flex-shrink: 0; pointer-events: none; display: block; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

/* Thumbnail strip */
.lb-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.lb-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background-image: var(--thumb);
    background-size: cover;
    background-position: center;
    /* border BINNEN het vlak via box-shadow inset — valt nooit buiten */
    box-shadow: inset 0 0 0 3px transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s;
    /* Reset button defaults */
    border: 0;
    padding: 0;
}
.lb-thumb:hover     { box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.lb-thumb.is-active { box-shadow: inset 0 0 0 3px #d39669; }

/* +meer teller */
.lb-more {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(0,0,0,.5); color: #fff;
    font-size: 20px; font-weight: 700;
    border-radius: inherit; pointer-events: none;
}

/* Lightbox overlay */
.lb-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.lb-lightbox.is-active {
    opacity: 1; pointer-events: all;
}
.lb-lightbox-img {
    max-width: 92vw; max-height: 88vh;
    object-fit: contain; border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    user-select: none; -webkit-user-drag: none;
    transition: opacity .2s ease;
}

/* Lightbox knoppen */
.lb-close {
    position: absolute; top: 16px; right: 16px;
    width: 42px; height: 42px;
    background: rgba(255,255,255,.15); border: 0; border-radius: 999px;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s; z-index: 2;
}
.lb-close:hover { background: rgba(255,255,255,.3); }
.lb-close svg   { flex-shrink: 0; }

.lb-lightbox-prev,
.lb-lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; padding: 0;
    background: rgba(255,255,255,.15); border: 0; border-radius: 999px;
    color: #fff; font-size: 32px; line-height: 50px; text-align: center;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; z-index: 2;
}
.lb-lightbox-prev:hover,
.lb-lightbox-next:hover { background: rgba(255,255,255,.3); }
.lb-lightbox-prev { left: 16px; }
.lb-lightbox-next { right: 16px; }

.lb-counter {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.5); color: #fff;
    font-size: 13px; font-weight: 600;
    padding: 4px 14px; border-radius: 20px;
    pointer-events: none; white-space: nowrap;
}