/* All selectors scoped so the viewer can be used alongside other Concrete blocks. */
.aurora-project-viewer {
    --apv-height: clamp(430px, 68vh, 720px);
    --apv-thumb-height: clamp(112px, 19vh, 174px);
    --apv-gap: 14px;
    width: 100%;
    min-width: 0;
}


/* Optional section heading. No spacing is introduced when all fields are blank. */
.aurora-project-viewer .apv__intro {
    margin-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
}

.aurora-project-viewer .apv__intro-title {
    margin: 0 0 .35em;
}

.aurora-project-viewer .apv__intro-subtitle {
    margin: 0 0 .75rem;
    font-size: clamp(.95rem, 1.4vw, 1.2rem);
    font-weight: 500;
}

.aurora-project-viewer .apv__intro-description {
    max-width: 75ch;
    margin: 0;
    line-height: 1.65;
}

/* Keep the two-column layout inside the site's fluid container. */
.aurora-project-viewer .inner-wrapper {
   display: grid;
   grid-template-columns: minmax(0, 1fr) clamp(120px, 23%, 250px);
   gap: 1rem;
   width: 100%;
   height: var(--apv-height);
   min-width: 0;
   position: relative;
   border-top: 1px solid rgba(90, 201, 232, 0.15);
   border-bottom: 1px solid rgba(90, 201, 232, 0.15);
   position:relative;
}

.aurora-project-viewer .inner-wrapper:before{
   content:'';
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:6px;
   background:linear-gradient(rgb(8, 24, 39) 0%, var(--dark-body-color) 100%);
}

.aurora-project-viewer .inner-wrapper:after{
   content:'';
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:6px;
   background:linear-gradient(var(--dark-body-color) 0%, rgb(8, 24, 39) 100%);
}

.aurora-project-viewer *,
.aurora-project-viewer *::before,
.aurora-project-viewer *::after {
    box-sizing: border-box;
}

.aurora-project-viewer .apv__featured {
    min-height: 0;
    min-width: 0;
    position: relative;
    height: 100%;
    /* box-shadow: 0 0 0 1px var(--light-blue-color) inset; */
    border-radius: 5px;
    padding: 1rem 0;
}
.aurora-project-viewer .apv__stage {
    position: relative;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.aurora-project-viewer .apv__slide {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(7px);
    margin: 0;
    pointer-events: none;
    transition: opacity 330ms ease, transform 330ms ease;
    border-radius: 5px;
}

.aurora-project-viewer .apv__slide.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.aurora-project-viewer .apv__photo {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
    border-radius: 5px;
    overflow: hidden;
}

.aurora-project-viewer .apv__photo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(var(--apv-height) - 64px);
    object-fit: contain;
}

/* Project title and type share one compact label on the featured image. */
.aurora-project-viewer .apv__caption {
    position: absolute;
    left: clamp(8px, 1.4vw, 18px);
    bottom: clamp(8px, 1.4vw, 18px);
    max-width: calc(100% - 16px);
    padding: 9px 12px;
    color: #fff;
    background: rgba(17, 21, 25, .83);
    font-size: clamp(11px, .9vw, 13px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .015em;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Desktop relies on scrolling, clickable thumbnails and keyboard navigation.
   The arrow buttons are retained in the markup for mobile only. */
.aurora-project-viewer .apv__rail-column {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    z-index:10;
}



.aurora-project-viewer .apv__arrow {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 21, 25, .76);
    color: #fff;
    opacity: .85;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    transition: opacity 180ms ease, background-color 180ms ease;
}

.aurora-project-viewer .apv__arrow--up {
    top: 10px;
}

.aurora-project-viewer .apv__arrow--down {
    bottom: 10px;
}

.aurora-project-viewer .apv__arrow:hover,
.aurora-project-viewer .apv__arrow:focus-visible {
    opacity: 1;
    background: var(--mid-blue-color);
}

.aurora-project-viewer .apv__arrow:focus-visible {
    outline: 2px solid var(--mid-blue-color);
    outline-offset: -2px;
}

.aurora-project-viewer .apv__arrow:disabled {
    opacity: .2;
    cursor: default;
}

.aurora-project-viewer .apv__arrow-icon {
    display: block;
    width: 13px;
    height: 13px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateY(3px) rotate(45deg);
}

.aurora-project-viewer .apv__arrow--down .apv__arrow-icon {
    transform: translateY(-3px) rotate(225deg);
}

.aurora-project-viewer .apv__rail {
   position: relative; /* All thumbnail offsetTop values are now rail-relative. */
   min-width: 0;
   min-height: 0;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior-y: contain;
   scroll-snap-type: y mandatory;
   scrollbar-width: none;
   -ms-overflow-style: none;
   outline-offset: 3px;
   -webkit-overflow-scrolling: touch;
   overflow-anchor: none; /* Prevent browser scroll anchoring from moving clone groups. */
}

.aurora-project-viewer .apv__rail-column:after{
   content:'';
   position:absolute;
   inset:0;
   background:linear-gradient(rgba(10, 29, 43, 1) 0%, rgba(10, 29, 43, 0) 20%, rgba(10, 29, 43, 0) 80%, rgba(10, 29, 43, 1) 100%);
   pointer-events:none;
}


.aurora-project-viewer .apv__rail::-webkit-scrollbar {
   display: none;
}

.aurora-project-viewer .apv__rail:focus-visible {
   outline: 2px solid var(--mid-blue-color);
}

.aurora-project-viewer .apv__track {
   display: flex;
   flex-direction: column;
   gap: var(--apv-gap);
}

.aurora-project-viewer .apv__thumb {
   position: relative;
   flex: 0 0 var(--apv-thumb-height);
   height: var(--apv-thumb-height);
   width: 100%;
   overflow: hidden;
   opacity: .48;
   background: transparent;
   border: 0;
   appearance: none;
   -webkit-appearance: none;
   font: inherit;
   text-align: left;
   cursor: pointer;
   scroll-snap-align: center;
   transition: opacity 220ms ease;
   border-radius: 10px;
   padding: 5px;
}

.aurora-project-viewer .apv__thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 5px;
   filter: saturate(0);
   transition:all 0.3s;
}


.aurora-project-viewer .apv__thumb.is-active {
    opacity: 1;
}

.aurora-project-viewer .apv__thumb.is-active img{
   filter: saturate(1);
}

/* Hide any opacity transition during the off-screen copy swap at rest. */
.aurora-project-viewer.apv--rebasing .apv__thumb {
    transition: none;
}

/* The site's own .outlined class provides the animated selection border. */
.aurora-project-viewer .apv__thumb:focus-visible {
    outline: 2px solid var(--mid-blue-color);
    outline-offset: 2px;
}

.aurora-project-viewer.apv--single .apv__track {
    min-height: 100%;
    justify-content: center;
}

.aurora-project-viewer.apv--single .apv__rail {
    overflow-y: hidden;
}

.aurora-project-viewer.apv--single .apv__arrow {
    display: none;
}

.aurora-project-viewer-empty {
    padding: 24px;
    border: 1px dashed #b8b8b8;
    color: #666;
}

/* On mobile: one contained image, with left/right controls underneath.
   The track stays in the DOM as the source of Express project metadata. */
@media (max-width: 767px) {
    .aurora-project-viewer {
        --apv-mobile-stage-height: clamp(290px, 85vw, 500px);
    }
    .aurora-project-viewer .inner-wrapper {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        height: auto;
        padding: 1rem;
    }
    .aurora-project-viewer .apv__featured {
        height: auto;
        padding: 0;
    }
    .aurora-project-viewer .apv__stage {
        height: var(--apv-mobile-stage-height);
    }
    .aurora-project-viewer .apv__photo img {
        max-height: calc(var(--apv-mobile-stage-height) - 8px);
    }
    .aurora-project-viewer .apv__caption {
        left: 8px;
        bottom: 8px;
        padding: 8px 10px;
        font-size: 11px;
    }
    .aurora-project-viewer .apv__rail-column {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        height: auto;
        min-height: 44px;
    }
    .aurora-project-viewer .apv__rail {
        display: none;
    }
    .aurora-project-viewer .apv__arrow,
    .aurora-project-viewer .apv__arrow--up,
    .aurora-project-viewer .apv__arrow--down {
        display: flex;
        position: static;
        transform: none;
        opacity: 1;
        width: 44px;
        height: 44px;
    }
    .aurora-project-viewer .apv__arrow--up .apv__arrow-icon {
        transform: translateX(3px) rotate(-45deg);
    }
    .aurora-project-viewer .apv__arrow--down .apv__arrow-icon {
        transform: translateX(-3px) rotate(135deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aurora-project-viewer .apv__slide,
    .aurora-project-viewer .apv__thumb,
    .aurora-project-viewer .apv__arrow {
        transition: none;
    }
}