/* Layout: columns using CSS grid */
.wp-block-hs-media-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.wp-block-hs-media-gallery img,
.wp-block-hs-media-gallery video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Column presets from the editor slider */
.wp-block-hs-media-gallery.has-hs-mg-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))!important;
}
.hs-media-gallery-editor.has-hs-mg-columns-1 .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(1, minmax(0, 1fr))!important;
}

.wp-block-hs-media-gallery.has-hs-mg-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))!important;
}
.hs-media-gallery-editor.has-hs-mg-columns-2 .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr))!important;
}

.wp-block-hs-media-gallery.has-hs-mg-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))!important;
}
.hs-media-gallery-editor.has-hs-mg-columns-3 .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr))!important;
}

.wp-block-hs-media-gallery.has-hs-mg-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
}
.hs-media-gallery-editor.has-hs-mg-columns-4 .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
}

.wp-block-hs-media-gallery.has-hs-mg-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))!important;
}
.hs-media-gallery-editor.has-hs-mg-columns-5 .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(5, minmax(0, 1fr))!important;
}

.wp-block-hs-media-gallery.has-hs-mg-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))!important;
}
.hs-media-gallery-editor.has-hs-mg-columns-6 .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(6, minmax(0, 1fr))!important;
}

/* Remove default figure margin so grid gap is consistent */
.wp-block-hs-media-gallery > figure {
    margin: 0;
    width: 100%;
    min-width: 0;
}

/* EDITOR: apply grid to the inner block list */
.hs-media-gallery-editor__inner .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* Optional: avoid extra margins inside editor */
.hs-media-gallery-editor__inner .block-editor-block-list__layout > .block-editor-block-list__block {
    margin: 0;
}

/* Existing styles below this line… */

/* Prevent background scroll when lightbox is open */
.hs-gl-lightbox-open {
    overflow: hidden;
}

/* Overlay */
.hs-gl-lightbox-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
}

.hs-gl-lightbox-overlay.is-visible {
    display: flex;
}

/* Inner container */
.hs-gl-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: flex;

    justify-content: center;
}

/* Content */
.hs-gl-lightbox-content {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-gl-lightbox-image,
.hs-gl-lightbox-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

/* Controls */
.hs-gl-lightbox-prev,
.hs-gl-lightbox-next,
.hs-gl-lightbox-close {
    position: absolute;
    border: none;
    padding: 0.5rem 0.75rem;

    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}

.hs-gl-lightbox-prev {
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hs-gl-lightbox-next {
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hs-gl-lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
}

/* Editor hints */
.hs-media-gallery-editor__hint {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 8px;
}

/* Optional placeholder styling for gallery videos */
.hs-gl-video-placeholder {

    pointer-events: none;
}

.wp-block-hs-media-gallery figure.hs-gl-video-item {
    position: relative;
    height: fit-content;

}

.wp-block-hs-media-gallery figure.hs-gl-video-item > video {
    pointer-events: none;
}

.wp-block-hs-media-gallery figure.hs-gl-video-item::after,
.wp-block-hs-media-gallery figure.hs-gl-video-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.wp-block-hs-media-gallery figure.hs-gl-video-item::after {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
}

.wp-block-hs-media-gallery figure.hs-gl-video-item::before {
    margin-left: 4px;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent #fff;
    z-index: 1;
}

.wp-block-hs-media-gallery figure.hs-gl-video-item:hover::after,
.wp-block-hs-media-gallery figure.hs-gl-video-item:hover::before {
    opacity: 1;
    
}


/* Force grid layout on frontend, even if theme tries to override it */
.wp-block-hs-media-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem;
}

/* Make every direct child a grid item and remove extra margins */
.wp-block-hs-media-gallery > * {
    margin: 0;
    min-width: 0;
    width: 100%;
}

.wp-block-hs-media-gallery figure img,
.wp-block-hs-media-gallery figure video,
img.hs-gl-lightbox-image,
video.hs-gl-lightbox-video {
    border-radius: 15px!important;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    top: 50%;
    left: 50%;

}
.wp-block-hs-media-gallery figure,
button.hs-gl-lightbox-prev,
button.hs-gl-lightbox-next,
button.hs-gl-lightbox-close
 {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='71' viewBox='0 0 53.739 63.699'%3E%3Cg data-name='Group 20' transform='translate(-202.526 -1153.541)'%3E%3Cpath data-name='Union 1' d='m223.716 1213.642-11.96-17.172-4.88-6.97a4.154 4.154 0 0 1 6.806-4.766l5.75 8.212v-31.65a4.154 4.154 0 0 1 8.309 0v15.787a4.154 4.154 0 1 1 8.308 0v3.046a4.154 4.154 0 0 1 8.309 0v3.877a4.154 4.154 0 0 1 8.308 0v11.078a4.143 4.143 0 0 1-.342 1.658l-5.755 16.9Zm12.333-17.155v-.3q0 .149-.01.3Zm-8.3-.1v-.2.2Z' fill='%23fff'/%3E%3Cpath data-name='Union 1 - Outline' d='m246.569 1213.641 5.755-16.9a4.154 4.154 0 0 0 .342-1.655v-11.081a4.154 4.154 0 0 0-4.154-4.154 4.154 4.154 0 0 0-4.155 4.154v-3.877a4.155 4.155 0 0 0-4.154-4.154 4.155 4.155 0 0 0-4.154 4.154v-3.046a4.154 4.154 0 0 0-4.154-4.154 4.155 4.155 0 0 0-4.154 4.154v-15.787a4.155 4.155 0 0 0-4.155-4.154 4.155 4.155 0 0 0-4.154 4.154v31.651l-5.75-8.212a4.154 4.154 0 0 0-5.786-1.02 4.155 4.155 0 0 0-1.021 5.786l4.88 6.97 11.961 17.17h22.853m-10.518-17.449v.3h-.01c.007-.1.01-.2.01-.3m-8.308 0v.2h-.01v-.2m18.828 21.048h-22.853a3.6 3.6 0 0 1-2.954-1.542l-11.961-17.17-4.875-6.962a7.764 7.764 0 0 1 1.9-10.8 7.711 7.711 0 0 1 4.444-1.4 7.768 7.768 0 0 1 5.557 2.342v-20.412a7.763 7.763 0 0 1 7.767-7.754 7.763 7.763 0 0 1 7.754 7.754v8.052a7.85 7.85 0 0 1 .555-.02 7.752 7.752 0 0 1 6.343 3.3 7.735 7.735 0 0 1 1.965-.252 7.761 7.761 0 0 1 6.8 4.025 7.76 7.76 0 0 1 1.511-.148 7.763 7.763 0 0 1 7.754 7.754v11.077a7.7 7.7 0 0 1-.575 2.934l-5.714 16.782a3.6 3.6 0 0 1-3.41 2.442Z'/%3E%3Crect data-name='Rectangle 40' width='3.062' height='14.543' rx='1.531' transform='translate(227.88 1169.783)'/%3E%3Crect data-name='Rectangle 41' width='3.062' height='14.543' rx='1.531' transform='translate(236.3 1172.844)'/%3E%3Crect data-name='Rectangle 42' width='3.062' height='13.778' rx='1.531' transform='translate(244.72 1175.906)'/%3E%3C/g%3E%3C/svg%3E") 14 0, pointer!important;
}

.hs-gl-lightbox-prev,
.hs-gl-lightbox-next,
.hs-gl-lightbox-close {
    border-radius: 200px;
    width: 2.5rem;
    height: 2.5rem;
    font-weight: 100;
    padding: 0;
    font-family: 'Verdana','helvetica', sans-serif;
}