/* H3X Sliding Standalone Image — frontend styles.
 *
 * Each slide is 100% of the viewport's width (so the carousel fills its
 * parent column). The track is a horizontal flex row whose transform
 * translates one viewport-width at a time. The last track item is a
 * JS-inserted clone of slide 0 so the wrap-around step animates
 * forward and then snaps back invisibly — no rewind. */

.h3x-sliding-standalone-image:not(.is-editor) {
    position: relative;
    width: 100%;
}

/* Below 782px, optionally cap the block at a percentage of the page
   width (set via the `--h3x-mobile-max-vw` custom property written by
   the render callback). Use case: parent column becomes a horizontal
   scroll carousel and the author wants multiple blocks visible at
   once instead of one filling the whole 80% column. */
@media (max-width: 781.98px) {
    .h3x-sliding-standalone-image:not(.is-editor).has-mobile-cap {
        max-width: var( --h3x-mobile-max-vw, 100vw );
    }
}

.h3x-sliding-standalone-image:not(.is-editor) .h3x-sliding-standalone-image__viewport {
    overflow: hidden;
    width: 100%;
}

.h3x-sliding-standalone-image:not(.is-editor) .h3x-sliding-standalone-image__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    transition: transform 0.6s ease;
    will-change: transform;
}

.h3x-sliding-standalone-image:not(.is-editor) .h3x-sliding-standalone-image-slide {
    flex: 0 0 100%;
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.h3x-sliding-standalone-image:not(.is-editor) .h3x-sliding-standalone-image-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Editor preview ------------------------------------------------- */
.h3x-sliding-standalone-image.is-editor .h3x-sliding-standalone-image__track {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.h3x-sliding-standalone-image-slide.is-editor {
    display: block;
    width: 120px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: rgba( 0, 0, 0, 0.04 );
    border: 1px dashed rgba( 0, 0, 0, 0.15 );
}

.h3x-sliding-standalone-image-slide.is-editor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}