/* ── Gallery Extension ──────────────────────────────────────────────────────── */

/* ── Masonry mode ─────────────────────────────────────────────────────────── */
/*
 * CSS columns layout. WP's inline flex/grid styles are stripped server-side
 * in index.php so we don't need excessive !important hacks.
 * Column count controlled via --oi-masonry-columns CSS variable.
 */

/* Override all WP gallery layout on masonry — force CSS columns */
.wp-block-gallery.oi-gallery--masonry,
.wp-block-gallery.oi-gallery--masonry.is-layout-flex,
.wp-block-gallery.oi-gallery--masonry.is-layout-grid {
    display:               block !important;
    column-count:          var( --oi-masonry-columns, 3 );
    column-gap:            var(--oi-gallery-gap, 1em);
    columns:               var( --oi-masonry-columns, 3 );
    flex-wrap:             unset !important;
    grid-template-columns: unset !important;
    overflow:              hidden;
}

.wp-block-gallery.oi-gallery--masonry .wp-block-image,
.wp-block-gallery.oi-gallery--masonry figure.wp-block-image {
    break-inside:  avoid;
    margin:        0 0 var(--oi-gallery-gap, 1em) 0 !important;
    display:       block !important;
    width:         100% !important;
    max-width:     100% !important;
    height:        auto !important;
    overflow:      hidden;
    box-sizing:    border-box;
}

.wp-block-gallery.oi-gallery--masonry .wp-block-image img {
    width:   100% !important;
    height:  auto !important;
    display: block;
}

@media ( max-width: 600px ) {
    .wp-block-gallery.oi-gallery--masonry {
        column-count: 1 !important;
    }
}

@media ( min-width: 601px ) and ( max-width: 900px ) {
    .wp-block-gallery.oi-gallery--masonry {
        column-count: 2 !important;
    }
}

/* ── Bento mode ───────────────────────────────────────────────────────────── */
/*
 * CSS Grid with repeating featured tile pattern.
 * Row height controlled via --oi-bento-row-height CSS variable.
 * Every 6th+1 image (1, 7, 13…) spans 2×2 as a featured tile.
 */

.wp-block-gallery.oi-gallery--bento {
    display:               grid !important;
    grid-template-columns: repeat( 3, 1fr ) !important;
    grid-auto-rows:        var( --oi-bento-row-height, 220px );
    gap:                   var( --wp--style--gallery-gap-default, 0.5em );
}

.wp-block-gallery.oi-gallery--bento .wp-block-image {
    overflow:  hidden;
    margin:    0 !important;
    width:     100% !important;
    max-width: 100% !important;
}

.wp-block-gallery.oi-gallery--bento .wp-block-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Featured tile: every 6th+1 item (1, 7, 13…) */
.wp-block-gallery.oi-gallery--bento .wp-block-image:nth-child( 6n+1 ) {
    grid-column: span 2;
    grid-row:    span 2;
}

@media ( max-width: 600px ) {
    .wp-block-gallery.oi-gallery--bento {
        grid-template-columns: 1fr !important;
        grid-auto-rows:        200px;
    }
    .wp-block-gallery.oi-gallery--bento .wp-block-image:nth-child( 6n+1 ) {
        grid-column: span 1;
        grid-row:    span 1;
    }
}

@media ( min-width: 601px ) and ( max-width: 900px ) {
    .wp-block-gallery.oi-gallery--bento {
        grid-template-columns: repeat( 2, 1fr ) !important;
    }
    .wp-block-gallery.oi-gallery--bento .wp-block-image:nth-child( 6n+1 ) {
        grid-column: span 2;
        grid-row:    span 1;
    }
}

/* Cursor hint for lightbox-enabled galleries */
.wp-block-gallery.oi-gallery--lightbox .wp-block-image img {
    cursor: zoom-in;
}

/* ── Lightbox dialog ──────────────────────────────────────────────────────── */

.oi-lightbox__dialog:not([open]) {
    display: none;
}

.oi-lightbox__dialog[open] {
    border:           none;
    background:       rgba( 0, 0, 0, 0.92 );
    padding:          0;
    max-width:        100vw;
    max-height:       100vh;
    width:            100%;
    height:           100%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    z-index:          999999;
}

.oi-lightbox__dialog::backdrop {
    background: rgba( 0, 0, 0, 0.9 );
}

.oi-lightbox__inner {
    position:         relative;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            100%;
    height:           100%;
}

.oi-lightbox__img {
    max-width:   90vw;
    max-height:  90vh;
    object-fit:  contain;
    display:     block;
    user-select: none;
}

.oi-lightbox__close {
    position:       absolute;
    top:            1rem;
    right:          1rem;
    z-index:        10;
    background:     rgba( 0, 0, 0, 0.5 );
    border:         none;
    color:          #fff;
    font-size:      2rem;
    cursor:         pointer;
    line-height:    1;
    padding:        0.5rem 0.75rem;
    opacity:        0.9;
    transition:     opacity 0.15s;
    border-radius:  4px;
    pointer-events: auto;
}

.oi-lightbox__close:hover { opacity: 1; }

/* Offset close button when admin bar is present */
.admin-bar .oi-lightbox__close {
    top: calc( 32px + 1rem );
}
@media screen and ( max-width: 782px ) {
    .admin-bar .oi-lightbox__close {
        top: calc( 46px + 1rem );
    }
}

.oi-lightbox__prev,
.oi-lightbox__next {
    position:      absolute;
    top:           50%;
    transform:     translateY( -50% );
    background:    rgba( 255, 255, 255, 0.15 );
    border:        none;
    color:         #fff;
    font-size:     1.5rem;
    cursor:        pointer;
    padding:       0.75rem 1rem;
    border-radius: 4px;
    opacity:       0.8;
    transition:    opacity 0.15s, background 0.15s;
}

.oi-lightbox__prev:hover,
.oi-lightbox__next:hover {
    opacity:    1;
    background: rgba( 255, 255, 255, 0.25 );
}

.oi-lightbox__prev { left: 1rem; }
.oi-lightbox__next { right: 1rem; }

.oi-lightbox__counter {
    position:    absolute;
    bottom:      1.25rem;
    left:        50%;
    transform:   translateX( -50% );
    color:       rgba( 255, 255, 255, 0.7 );
    font-size:   0.875rem;
    white-space: nowrap;
}