/*
 * Shot carousel component
 *
 * Keeps one stable card footprint in both grid and masonry layouts. Navigation
 * controls are separate from the shot link to avoid nested interactive elements.
 */
.shots_idin,
.grid-item {
    min-width: 0;
}

.shot-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: inherit;
}

.shot-carousel__link {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.shot-carousel__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-secondary, #111827);
    touch-action: pan-y pinch-zoom;
}

/*
 * The loading layer lives inside the real shot viewport, so it never owns card
 * dimensions of its own. It simply covers the exact footprint that the first
 * visible image will occupy and fades independently for each card.
 */
.shot-card__skeleton {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    border-radius: inherit;
    transition:
        opacity 160ms ease,
        visibility 0s linear 160ms;
}

.shot-card.is-media-ready .shot-card__skeleton {
    opacity: 0;
    visibility: hidden;
}

.shot-carousel__track {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    direction: rtl;
    transform: translate3d(0, 0, 0);
    transition: transform 260ms cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.shot-carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    margin: 0;
    overflow: hidden;
}

.shot-carousel__image,
#shot-grid.is-masonry .shot-carousel__image {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/*
 * Video previews sit above the poster image but remain non-interactive so the
 * entire card keeps its existing click target. JavaScript requests only metadata
 * near the viewport, then starts actual playback exclusively from pointer hover.
 */
.shot-carousel__hover-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 120ms ease,
        visibility 0s linear 120ms;
}

.shot-carousel__slide.is-hover-video-playing .shot-carousel__hover-video {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

#shot-grid.is-masonry .shot-carousel--single .shot-carousel__hover-video {
    object-fit: contain;
}

/* Compact Pinterest-like duration marker. It is revealed only after the browser
   has resolved real media metadata, so no guessed or stale duration is shown. */
.shot-carousel__duration {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(13,18,28,.68);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 3px 12px rgba(0,0,0,.16);
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 120ms ease,
        visibility 0s linear 0s;
}

.shot-carousel__duration[hidden] {
    display: none !important;
}

.shot-carousel__duration-play {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    opacity: .9;
}

/* Existing category badges use the same corner. Before interaction the duration
   owns the first row; on hover it fades out and categories return to that corner. */
.shot-card:has([data-shot-hover-video]) .card-top-left {
    top: 44px !important;
    transition: top 120ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .shot-card:has([data-shot-hover-video]):hover .shot-carousel__duration {
        opacity: 0;
        visibility: hidden;
        transition-delay: 0s, 120ms;
    }

    .shot-card:has([data-shot-hover-video]):hover .card-top-left {
        top: 10px !important;
    }
}

.shot-carousel__control {
    position: absolute;
    top: 50%;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #111827;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
    opacity: 0;
    transform: translateY(-50%) scale(.92);
    transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
    cursor: pointer;
}

.shot-carousel__control:hover { background: #fff; }
.shot-carousel__control:focus-visible {
    opacity: 1;
    outline: 2px solid var(--accent-primary, #fff);
    outline-offset: 2px;
}
/* RTL: next continues toward the left; previous returns toward the right. */
.shot-carousel__control--previous { right: 10px; }
.shot-carousel__control--next { left: 10px; }

.shot-carousel:hover .shot-carousel__control,
.shot-carousel:focus-within .shot-carousel__control {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.shot-carousel__pagination {
    position: absolute;
    right: 50%;
    bottom: 10px;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .58);
    backdrop-filter: blur(8px);
    transform: translateX(50%);
}

.shot-carousel__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: width 160ms ease, background-color 160ms ease;
    cursor: pointer;
}

.shot-carousel__dot.is-active {
    width: 16px;
    border-radius: 999px;
    background: #fff;
}

.shot-carousel__counter {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 7;
    min-width: 42px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .68);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    backdrop-filter: blur(8px);
}

@media (hover: none) {
    .shot-carousel__control { display: none; }
    .shot-carousel__hover-video { display: none; }
}

/*
 * Keep the compact pagination dots as desktop controls only. On every mobile
 * viewport the carousel remains discoverable through the numeric counter and
 * swipe gesture, while the undersized dot buttons are removed from touch audits.
 */
@media (max-width: 767.98px) {
    .shot-carousel__pagination { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .shot-card__skeleton,
    .shot-carousel__track,
    .shot-carousel__control,
    .shot-carousel__dot,
    .shot-carousel__hover-video,
    .shot-carousel__duration,
    .shot-card .card-top-left { transition: none; }
}