/**
 * Photo Marquee widget — base styles.
 *
 * The React island (frontend/src/islands/WsPhotoMarquee.jsx) drives the
 * __track transform via rAF; this file only lays the static structure out
 * so the PHP-baked fallback row is correct from the first frame (no
 * hydration flash) and so `prefers-reduced-motion` degrades to a static
 * scroll strip.
 *
 * Tile geometry is a 3:2 LANDSCAPE rectangle by default (60vh × 40vh —
 * no border-radius on purpose). On mobile the tile width switches to a
 * vw-based calc so EXACTLY two tiles fit on screen (portrait crop via
 * object-fit: cover); the height stays 40vh.
 *
 * NOTE: % tile widths do not work here — the track is width:max-content,
 * so an item % would resolve against the item's own parent width (circular).
 * vw / vh / px only.
 */

.wb-photo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.wb-photo-marquee__track {
    display: flex;
    width: max-content;
    gap: 12px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.wb-photo-marquee__item {
    flex: 0 0 auto;
    width: 60vh;
    height: 40vh;
    overflow: hidden;
    background: #f2f2f2;
    line-height: 0;
}

.wb-photo-marquee__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wb-photo-marquee__item a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Edge fade — enabled by the widget's "Edge fade" switcher (--fade). */
.wb-photo-marquee--fade {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Mobile: exactly two tiles on screen (portrait crop), height unchanged. */
@media (max-width: 767px) {
    .wb-photo-marquee__track {
        gap: 12px;
    }

    .wb-photo-marquee__item {
        width: calc((100vw - 40px) / 2);
    }
}

/* Reduced motion: no rAF from the island; static row, user scrolls. */
@media (prefers-reduced-motion: reduce) {
    .wb-photo-marquee {
        overflow-x: auto;
    }

    .wb-photo-marquee__track {
        will-change: auto;
        transform: none;
    }
}