/* XI NIU project details and image gallery. */

.mark-invitation {
    width: min(100%, 420px);
    justify-self: start;
}

.mark-invitation video,
.mark-print { width: 100%; height: auto; display: block; }

.mark-invitation video {
    aspect-ratio: 9 / 16;
    object-fit: contain;
}

.mark-section { margin-bottom: calc(var(--space-xl) - 24px); }

.mark-print-row {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.mark-print {
    flex: none;
    width: min(35vw, 420px);
}

.website-section { align-items: center; }
.website-phone {
    width: min(100%, 350px);
    justify-self: end;
}
.website-phone video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 630 / 1280;
    background: var(--bg);
}

.xiniu-gallery {
    width: 100%;
    margin: 0 0 var(--space-xl);
    padding: 24px 0 40px;
    overflow: hidden;
    --gallery-gap: clamp(20px, 2.5vw, 40px);
    --gallery-image-height: min(76vh, 820px);
}

.xiniu-gallery-head {
    max-width: var(--measure);
    margin: 0 auto 24px;
    padding: 0 var(--gutter);
    display: flex;
    justify-content: flex-end;
}

.xiniu-gallery-hint {
    margin: 0;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.xiniu-gallery-hint { color: #aaa; }

.xiniu-gallery-viewport {
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}
.xiniu-gallery-viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.xiniu-gallery-viewport.is-dragging { cursor: grabbing; user-select: none; }

.xiniu-gallery-track {
    display: flex;
    align-items: flex-start;
    gap: var(--gallery-gap);
    width: max-content;
    padding-inline: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
    padding-bottom: 16px;
}

.xiniu-gallery-slide {
    flex: 0 0 auto;
    width: min(calc(var(--gallery-image-height) * var(--image-ratio)), 90vw, 1200px);
    margin: 0;
}

.xiniu-gallery-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--image-ratio);
    user-select: none;
    -webkit-user-drag: none;
}

.xiniu-gallery-slide figcaption {
    max-width: 48ch;
    margin-top: 14px;
    color: #d0d0d0;
    font-size: clamp(.95rem, 1.2vw, 1.1rem);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .mark-invitation { width: min(100%, 380px); align-self: flex-start; }
    .mark-print { width: min(78vw, 340px); }
    .full-screen-section { height: auto; aspect-ratio: 16 / 9; }
    .full-screen-section video { width: 100%; height: 100%; object-fit: cover; }
    .full-screen-section + .content-wrapper { padding-top: var(--gutter); }
    .website-phone { width: min(90%, 330px); margin: 0 auto; }

    .xiniu-gallery {
        --gallery-gap: 14px;
        --gallery-image-height: min(68svh, 600px);
        padding-top: 16px;
        margin-bottom: var(--space-lg);
    }
    .xiniu-gallery-head { margin-bottom: 20px; }
    .xiniu-gallery-hint { font-size: .62rem; text-align: right; }
    .xiniu-gallery-slide { width: min(calc(var(--gallery-image-height) * var(--image-ratio)), 90vw); }
    .xiniu-gallery-slide figcaption { font-size: 1rem; }
}