/**
 * /assets/css/components/image-stack.css
 *
 * Styles for includes/components/image-stack.php - a pile of photographs the
 * top one can be dragged off. Sizing is done with clamp() rather than a JS
 * breakpoint listener, so the deck is the right size on the first paint and
 * never jumps.
 */

.image-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    user-select: none;
}

.image-stack-deck {
    position: relative;
    width: clamp(220px, 70vw, 320px);
    aspect-ratio: 1 / 1;
    /* the depth the 3D tilt is read against while dragging */
    perspective: 1200px;
}

.image-stack-card {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    background: #0d1118;
    box-shadow: 0 18px 40px rgba(2, 2, 4, 0.55);
    /* each card turns around its lower-right corner, so the pile fans out of
       one point the way a hand of cards does */
    transform-origin: 85% 85%;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.image-stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.image-stack-card.is-front {
    cursor: grab;
    box-shadow: 0 26px 60px rgba(2, 2, 4, 0.7);
}

.image-stack-card.is-front:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
}

/* While a finger or cursor is down the card must track it exactly, so the
   easing that makes the release feel springy is switched off. */
.image-stack-card.is-dragging {
    transition: none;
    cursor: grabbing;
}

.image-stack-hint {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(248, 246, 241, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .image-stack-card {
        transition: none;
    }
}

/* Inside a day of an itinerary the deck lines up with the paragraph text
   rather than floating in the middle of the column. */
.image-stack--day {
    align-items: flex-start;
    margin-bottom: 1.75rem;
}

/* In a day of an itinerary the deck fills the column it was given rather than
   sizing itself off the viewport. The cap matters below the two-column
   breakpoint, where "the column" is the whole text measure and an uncapped
   deck would be a 800px square sitting under every day. */
.image-stack--day .image-stack-deck {
    width: 100%;
    max-width: 420px;
}