/* The public gallery grid. Configurable desktop columns, unlimited rows. */
.webkapitan-gallery {
	width: 100%;
	padding: 2rem 0;
}
.webkapitan-gallery__grid { display: grid; grid-template-columns: repeat(var(--webkapitan-gallery-columns, 4), minmax(0, 1fr)); gap: var(--webkapitan-gallery-gap, 1rem); }
.webkapitan-gallery__link { display: block; position: relative; min-width: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #eceef1; border-radius: .375rem; cursor: zoom-in; text-decoration: none; }
.webkapitan-gallery__link:focus-visible { outline: .2rem solid #2688e7; outline-offset: .15rem; }
.webkapitan-gallery__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
@media (hover: hover) { .webkapitan-gallery__link:hover .webkapitan-gallery__image { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .webkapitan-gallery__image { transition: none; } }
@media (max-width: 960px) { .webkapitan-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 576px) { .webkapitan-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fancybox 4 custom layout: image + thumbs on the left, fixed ad slot on the right. */
.webkapitan-gallery-lightbox.fancybox__container { --webkapitan-ad-width: 20rem; --webkapitan-ad-gap: 1rem; --fancybox-bg: rgba(13, 17, 25, .97); }
.webkapitan-gallery-lightbox.has-webkapitan-gallery-ad .fancybox__carousel,
.webkapitan-gallery-lightbox.has-webkapitan-gallery-ad .fancybox__thumbs { width: calc(100% - var(--webkapitan-ad-width) - var(--webkapitan-ad-gap)); align-self: flex-start; }
.webkapitan-gallery-lightbox .fancybox__carousel { min-width: 0; }
/* Keep adjacent slides from appearing behind the ad column. */
.webkapitan-gallery-lightbox .fancybox__viewport { overflow: hidden; }
.webkapitan-gallery-lightbox .fancybox__slide { padding: 4rem 3.25rem 1.25rem; }
.webkapitan-gallery-lightbox .fancybox__thumbs { padding-bottom: .75rem; }
.webkapitan-gallery-lightbox .fancybox__thumbs .carousel__slide { --fancybox-thumbs-width: 5.5rem; }
.webkapitan-gallery-lightbox .fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after { border-color: #fff; }
.webkapitan-gallery-lightbox .fancybox__caption { max-width: 60rem; font-size: .875rem; }

.webkapitan-gallery-lightbox .webkapitan-gallery__ad { position: absolute; z-index: 35; right: 1rem; top: 5rem; bottom: 3rem; width: var(--webkapitan-ad-width); display: flex; justify-content: flex-start; align-items: center; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.webkapitan-gallery__ad-placeholder { box-sizing: border-box; width: 100%; padding: 1rem; background: #fff; color: #1a2233; border-radius: .65rem; text-align: center; font-family: inherit; }
.webkapitan-gallery__ad-eyebrow { display: block; color: #778090; text-transform: uppercase; letter-spacing: .14em; font-size: .625rem; margin-bottom: .8rem; }
.webkapitan-gallery__ad-design { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 6 / 5; border-radius: .45rem; background: linear-gradient(135deg,#eaf0f8,#f4f6fa); border: 1px dashed #b6c3d3; }
.webkapitan-gallery__ad-design span { font-size: 2rem; font-weight: 700; letter-spacing: -.05em; color: #a3afc0; }
.webkapitan-gallery__ad-placeholder p { color: #687486; margin: .75rem 0 .2rem; font-size: .8125rem; }

/* On smaller viewports the ad disappears, leaving enough space for photos/thumbnails. */
@media (max-width: 1100px) {
    .webkapitan-gallery-lightbox .webkapitan-gallery__ad { display: none; }
    .webkapitan-gallery-lightbox.has-webkapitan-gallery-ad .fancybox__carousel,
    .webkapitan-gallery-lightbox.has-webkapitan-gallery-ad .fancybox__thumbs { width: 100%; }
}
@media (max-width: 576px) {
    .webkapitan-gallery-lightbox .fancybox__slide { padding: 3.25rem .75rem .75rem; }
    .webkapitan-gallery-lightbox .fancybox__thumbs .carousel__slide { --fancybox-thumbs-width: 4rem; }
}

/* The sidebar is not a native Fancybox element. Guarantee that it cannot
   remain visible while Fancybox is closing (including gesture closes). */
.webkapitan-gallery-lightbox.is-closing .webkapitan-gallery__ad,
.webkapitan-gallery-lightbox[aria-hidden="true"] .webkapitan-gallery__ad { display: none !important; }

/* Keep the page's content width identical before, during and after Fancybox.
   We preserve the native scrollbar gutter while preventing page scrolling.
   This class only exists while a WebKapitan lightbox is open. */
html.webkapitan-gallery-scroll-locked { overflow: hidden !important; }
html.webkapitan-gallery-scroll-locked.webkapitan-gallery-had-scrollbar { scrollbar-gutter: stable; }

/* Older browsers without scrollbar-gutter support. */
@supports not (scrollbar-gutter: stable) {
    html.webkapitan-gallery-scroll-locked.webkapitan-gallery-had-scrollbar {
        padding-right: var(--webkapitan-gallery-scrollbar-width, 0px);
    }
}