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

.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: .7;
    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-plandrawings .splide__track li {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    padding: var(--dd-viewport-gallery-padding);
    text-align: center;
}
.dd-viewport-gallery-plandrawings .splide__track a {
    /* height: 100%;
    width: 100%;
    text-align: center; */
}
.dd-viewport-gallery-plandrawings .splide__track img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

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



/* 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;
}

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

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





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

.dd-viewport-gallery-images .splide__slide a:focus-visible {
    outline: 3px solid var(--dd-color-accent);
    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-accent);
    opacity: 1;
}

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

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

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

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

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

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

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

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

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

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






/* 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 */
html body .fancybox__container.dd-viewport-gallery-plandrawings-lightbox {
    --fancybox-color: black;
}
.dd-viewport-gallery-plandrawings-lightbox .fancybox__backdrop {
    background: var(--dd-color-viewport);
}
.dd-viewport-gallery-plandrawings-lightbox .fancybox__viewport .has-image .fancybox__content {
    background:transparent;
}

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

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

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

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