/* Shared artwork-stage rules for every gallery detail page.
   The series' tallest item defines the row/grid track. Smaller originals are
   centred inside that transparent stage without cropping or stretching. */
.ice-painting-content .carousel-slide.active .card-image,
.ice-painting-content .carousel-1995-slide.active .carousel-1995-image {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.ice-painting-content .carousel-slide.active .card-image img,
.ice-painting-content .carousel-1995-slide.active .carousel-1995-image img,
.ice-painting-content .irregular-item > img {
    object-fit: contain !important;
    object-position: center center !important;
}

@media (min-width: 769px) {
    /* Irregular works previously used natural image heights, so paired works
       did not share a stage. Use the series' 400×350px largest frame and
       centre every untouched original within it. */
    #irregular .carousel-slide.active .irregular-item > img {
        width: 400px !important;
        height: 350px !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Design detail page: grid rows naturally take the height of their tallest
   original. Every other work is vertically centred in that same row frame. */
.ice-painting-content .gallery-grid {
    align-items: stretch !important;
}

.ice-painting-content .gallery-grid > .gallery-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    min-width: 0 !important;
    height: auto !important;
    background: transparent !important;
}

.ice-painting-content .gallery-grid > .gallery-item > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* The script measures the active artwork frame, not its caption, and writes
   the exact arrow offset. These defaults keep the layout stable before load. */
.ice-painting-content .carousel-main,
.ice-painting-content .carousel-1995-main {
    position: relative !important;
}

.ice-painting-content .artwork-arrow-flow {
    align-self: flex-start !important;
}

.ice-painting-content .artwork-arrow-absolute {
    transform: translateY(-50%) !important;
}

/* Continuous adjacent-slide layer shared by desktop and mobile detail pages. */
.continuous-carousel-swipe-open {
    position: relative !important;
    height: var(--continuous-swipe-height) !important;
    min-height: var(--continuous-swipe-height) !important;
    overflow: hidden !important;
}

.continuous-carousel-swipe-open > .carousel-slide,
.continuous-carousel-swipe-open > .carousel-1995-slide {
    visibility: hidden !important;
    pointer-events: none !important;
}

.continuous-carousel-swipe-stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 12 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.continuous-carousel-swipe-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    will-change: transform, opacity !important;
    pointer-events: none !important;
    animation: none !important;
    scale: none !important;
}

/* Never inherit page hover/zoom effects while a connected transition is
   running. Only the panel itself translates and fades. */
.continuous-carousel-swipe-stage .gallery-item,
.continuous-carousel-swipe-stage .carousel-card,
.continuous-carousel-swipe-stage .card-image,
.continuous-carousel-swipe-stage .carousel-1995-card,
.continuous-carousel-swipe-stage .carousel-1995-image,
.continuous-carousel-swipe-stage .movie-img-wrap,
.continuous-carousel-swipe-stage .irregular-item,
.continuous-carousel-swipe-stage .gua-card,
.continuous-carousel-swipe-stage img {
    transform: none !important;
    scale: none !important;
    animation: none !important;
}

.continuous-lightbox-swipe-stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: block !important;
    overflow: hidden !important;
    background: transparent !important;
    pointer-events: none !important;
    touch-action: pan-y !important;
}

.continuous-lightbox-swipe-panel {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    will-change: transform, opacity !important;
}

.continuous-lightbox-swipe-panel img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
    max-height: 82vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

.lightbox .lightbox-close,
.lightbox .lightbox-nav,
#lightbox .lightbox-close,
#lightbox .lightbox-nav {
    z-index: 24 !important;
}

@media (max-width: 768px) {
    .ice-painting-content .carousel-wrapper,
    .ice-painting-content .carousel-1995-wrapper {
        touch-action: pan-y !important;
    }
}

/* Desktop carousel safety rail shared by Ice Painting, Calligraphy and
   Storyboard detail pages. The artwork viewport always occupies the middle
   track; the 48px controls own separate side tracks and can never overlap it. */
@media (min-width: 769px) {
    .ice-painting-content .carousel-main,
    .ice-painting-content .carousel-1995-main {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) 48px !important;
        grid-template-rows: auto !important;
        column-gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ice-painting-content .carousel-main > .carousel-wrapper,
    .ice-painting-content .carousel-1995-main > .carousel-1995-wrapper {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .ice-painting-content .carousel-main > .carousel-arrow,
    .ice-painting-content .carousel-1995-main > .carousel-1995-arrow {
        position: relative !important;
        inset: auto !important;
        grid-row: 1 !important;
        align-self: start !important;
        justify-self: center !important;
        flex: none !important;
        width: 48px !important;
        height: 48px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 2 !important;
    }

    .ice-painting-content .carousel-main > .carousel-prev,
    .ice-painting-content .carousel-1995-main > .carousel-1995-prev {
        grid-column: 1 !important;
    }

    .ice-painting-content .carousel-main > .carousel-next,
    .ice-painting-content .carousel-1995-main > .carousel-1995-next {
        grid-column: 3 !important;
    }

    .ice-painting-content .carousel-wrapper > .carousel-slide.active,
    .ice-painting-content .carousel-1995-wrapper > .carousel-1995-slide.active {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .ice-painting-content .carousel-slide.active .carousel-card,
    .ice-painting-content .carousel-1995-slide.active .carousel-1995-card,
    .ice-painting-content .carousel-slide.active .card-image,
    .ice-painting-content .carousel-1995-slide.active .carousel-1995-image,
    .ice-painting-content .carousel-slide.active .movie-img-wrap,
    .ice-painting-content .carousel-slide.active .irregular-item {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ice-painting-content .carousel-slide.active .card-image img,
    .ice-painting-content .carousel-1995-slide.active .carousel-1995-image img,
    .ice-painting-content .carousel-slide.active .movie-img-wrap img,
    .ice-painting-content .carousel-slide.active .irregular-item > img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* 1995-style series frame: the shared script measures every page in one
       carousel, stores the tallest artwork frame here, and keeps all smaller
       works centred inside that fixed-height stage throughout paging. */
    .ice-painting-content .detail-series-frame-normalized .carousel-slide .card-image,
    .ice-painting-content .detail-series-frame-normalized .carousel-1995-slide .carousel-1995-image,
    .ice-painting-content .detail-series-frame-normalized .carousel-slide .movie-img-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: var(--detail-series-frame-height) !important;
        min-height: var(--detail-series-frame-height) !important;
        max-height: var(--detail-series-frame-height) !important;
        overflow: hidden !important;
    }

    .ice-painting-content .detail-series-frame-normalized .carousel-slide .card-image img,
    .ice-painting-content .detail-series-frame-normalized .carousel-1995-slide .carousel-1995-image img,
    .ice-painting-content .detail-series-frame-normalized .carousel-slide .movie-img-wrap img {
        display: block !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .ice-painting-content .detail-series-frame-normalized .carousel-slide .irregular-item > img {
        display: block !important;
        width: 100% !important;
        height: var(--detail-series-frame-height) !important;
        min-height: var(--detail-series-frame-height) !important;
        max-height: var(--detail-series-frame-height) !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Calligraphy 2020 / Mercy is the only extra-wide first slide. At narrower
       desktop widths its auto-sized card could remain wider than the protected
       centre rail. Make the card and frame follow the rail, then contain the
       complete original inside the fixed series-height stage. */
    [id="2020"] .detail-series-frame-normalized .carousel-slide.vertical-stack.active > .carousel-card,
    [id="2020"] .detail-series-frame-normalized .carousel-slide.vertical-stack.active > .carousel-card .card-image {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    [id="2020"] .detail-series-frame-normalized .carousel-slide.vertical-stack.active > .carousel-card .card-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Storyboard rows previously kept fixed-height images at max-width:none.
       Let every card share the protected centre track while retaining each
       section's existing row height and inter-image gap variables. */
    #modern-security .carousel-slide.active > .carousel-card,
    #teppanyaki .carousel-slide.active > .carousel-card,
    #zhuigui .carousel-slide.active > .carousel-card,
    #concept .carousel-slide.active > .carousel-card,
    #scenes .carousel-slide.active > .carousel-card {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #modern-security .carousel-slide.active .card-image,
    #teppanyaki .carousel-slide.active .card-image,
    #zhuigui .carousel-slide.active .card-image,
    #concept .carousel-slide.active .card-image,
    #scenes .carousel-slide.active .card-image {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #modern-security .carousel-slide.active .card-image img,
    #teppanyaki .carousel-slide.active .card-image img,
    #zhuigui .carousel-slide.active .card-image img,
    #concept .carousel-slide.active .card-image img,
    #scenes .carousel-slide.active .card-image img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* These two storyboard series intentionally have no desktop paging. Do
       not reserve empty control tracks after their arrows are hidden. */
    #modern-security .carousel-main,
    #teppanyaki .carousel-main {
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
    }

    #modern-security .carousel-main > .carousel-wrapper,
    #teppanyaki .carousel-main > .carousel-wrapper {
        grid-column: 1 !important;
    }
}