/* GALLERY ( SPLIDE + FANCYBOX ) */
:root {
    --dd-viewport-gallery-padding: 4%;
}

.dd-viewport-gallery {
    width: 100%;
    height: 100%;
}
.dd-viewport-gallery .splide {
    width: 100%;
    height: 100%;
}

.dd-viewport-gallery .splide__track a {
    display: inline-block;
    height: 100%;
}
.dd-viewport-gallery .splide .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 1;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1;
}
.dd-viewport-gallery button:hover,
.dd-viewport-gallery button:focus,
.dd-viewport-gallery button:active,
.dd-viewport-gallery button:visited {
    outline:none;
    background: transparent;
}
.dd-viewport-gallery .splide .splide__pagination__page {
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    width: 12px;
    margin: 5px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
}
.dd-viewport-gallery .splide .splide__arrow[disabled]{
    display: none;
}
.dd-viewport-gallery .splide .splide__arrow:hover,
.dd-viewport-gallery .splide .splide__pagination__page.is-active{
    opacity: 1;
}
.dd-viewport-gallery .splide .splide__arrow,
.dd-viewport-gallery .splide .splide__pagination__page{
	background: var(--dd-color-text);
}
.dd-viewport-gallery .splide .splide__arrow svg {
	fill:var(--dd-color-background);
}


/* FILL VIEWPORT */
.dd-viewport-gallery .splide__track {
    height: 100%;
}


/* Plans: center, contain and pad */
.dd-viewport-gallery-contain .splide__track li {
    padding: var(--dd-viewport-gallery-padding);
    text-align: center;
}

.dd-viewport-gallery-contain .splide__track a {

}

.dd-viewport-gallery-contain .splide__track img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Images: Cover viewport */
.dd-viewport-gallery-cover .splide__slide a {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}

.dd-viewport-gallery-cover .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;    
}

/* Pagination */
.dd-viewport-gallery-pagination-titles .splide .splide__pagination__page {
    display: inline-block;
    position: relative;
    width: unset;
    height: unset;
    margin: calc( var(--dd-biw-viewport-controls-button-gap) / 2.0 );
    padding: 0.25em 1.25em;
    border: 0;
    font-size: 1em;
    line-height: 1em;
    opacity: 1;
    transition: transform .2s linear;
    /* Apply standard inverted button colors */
    border-radius: var(--dd-button-border-radius);
    border-color: var(--dd-color-text);
    background-color: var(--dd-color-text);
    -webkit-text-fill-color: var(--dd-color-background);
    color: var(--dd-color-background);
}

.dd-viewport-gallery-pagination-titles .splide .splide__pagination__page.is-active {
    transform: scale(1.0);
    /* Apply standard highlighted button colors */
    border-color: var(--dd-color-accent);
    background-color: var(--dd-color-accent);
    -webkit-text-fill-color: var(--dd-color-accent-contrast);
    color: var(--dd-color-accent-contrast);
}

.dd-viewport-gallery-pagination-titles .splide.is-focus-in .splide__pagination__page:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}



/* SINGLE IMAGE (no splide) */
.dd-viewport-gallery-single,
.dd-viewport-gallery-single a,
.dd-viewport-gallery-single img {
    width: 100%;
    height: 100%;
}

.dd-viewport-gallery-single a {
    display: inline-block;
    position: relative;
}

/* Plandrawings - Contain */
.dd-viewport-gallery-single-contain { 
    padding: var(--dd-viewport-gallery-padding);
}
.dd-viewport-gallery-single-contain img {
    object-fit: contain;
}

/* Images - Cover */
.dd-viewport-gallery-single-cover img {
    object-fit: cover;
}





/* FOCUS COLOR */
.dd-viewport-gallery-contain .splide__slide a:focus-visible {
    outline: 3px solid var(--dd-color-text);
    outline-offset: 12px; /* These are contained and have padding */
}

.dd-viewport-gallery-cover .splide__slide a:focus-visible {
    outline: 3px solid var(--dd-color-text);
    outline-offset: -3px; /* These cover the viewport, and outline needs to be retracted */
}

.dd-viewport-gallery .splide__arrow:focus-visible {
    outline-color: var(--dd-color-text);
    opacity: 1;
}

.dd-viewport-gallery .splide.is-focus-in .splide__arrow:focus {
    outline-color: var(--dd-color-text);
    opacity: 1;
}

.dd-viewport-gallery .splide__pagination__page:focus-visible {
    outline-color: var(--dd-color-text);
}

.dd-viewport-gallery .splide.is-focus-in .splide__pagination__page:focus {
    outline-color: var(--dd-color-text);
}

.dd-viewport-gallery .splide__toggle:focus-visible {
    outline-color: var(--dd-color-text);
}

.dd-viewport-gallery .splide.is-focus-in .splide__toggle:focus {
    outline-color: var(--dd-color-text);
}

@supports(outline-offset: -3px) {
    .dd-viewport-gallery .splide__slide:focus-visible {
        outline-color: var(--dd-color-text);
    }
}

@media screen and (-ms-high-contrast:none) {
    .dd-viewport-gallery .splide__slide:focus-visible {
        border-color: var(--dd-color-text);
    }
}

@supports(outline-offset: -3px) {
    .dd-viewport-gallery .splide.is-focus-in .splide__slide:focus {
        outline-color: var(--dd-color-text);
    }
}

@media screen and (-ms-high-contrast:none) {
    .dd-viewport-gallery .splide.is-focus-in .splide__slide:focus {
        border-color: var(--dd-color-text);
    }

    .dd-viewport-gallery .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
        border-color: var(--dd-color-text);
    }
}






/* LIGHTBOX / FANCYBOX */
html body .fancybox__container {
    --carousel-button-color: #FFF;
    --carousel-button-bg: transparent;
    --carousel-button-bg-hover: transparent;
    --carousel-button-border-radius: 50%;
    --carousel-button-svg-stroke-width: 2.5;
    
    --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
    --fancybox-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);

    --fancybox-bg: #000000EC;
    --fancybox-color: #FFF;
    --fancybox-accent-color: var(--dd-color-accent);
    --fancybox-opacity: 1;
    --fancybox-content-bg: #FFF;
    --fancybox-content-color: #374151;

    --fancybox-thumbs-width: 96px;
    --fancybox-thumbs-ratio: 1.5;
    --fancybox-thumbs-border-radius: 0;
}

/* Fancybox for plandrawings (NEW 0.4 way - Light mode) */
html body .fancybox__container.dd-viewport-gallery-light-lightbox {
    --fancybox-color: black;
}
.dd-viewport-gallery-light-lightbox .fancybox__backdrop {
    background: var(--dd-color-viewport);
}
.dd-viewport-gallery-light-lightbox .fancybox__viewport .has-image .fancybox__content {
    background:transparent;
}

.dd-viewport-gallery-light-lightbox .carousel__button {
    padding: 0;
    background: unset;
    border-radius: 99px;
}

.dd-viewport-gallery-light-lightbox .carousel__button:focus {
    background: unset;
}

.dd-viewport-gallery-light-lightbox .carousel__button svg {
    color:var(--fancybox-color);
    filter:none;
}

.dd-viewport-gallery-light-lightbox.fancybox__container button:focus,
.dd-viewport-gallery-light-lightbox.fancybox__container button:focus-visible {
    outline: 2px solid var(--fancybox-color);
}