/* ─── Foto Frames ────────────────────────────────────────────────────────────
   Infinite auto-scrolling strip of staggered photo frames.
   The image set is duplicated in PHP; the track animates from 0 to -50%
   so the loop is seamless.
   ─────────────────────────────────────────────────────────────────────────── */

.ff-slider {
    overflow: hidden;
    padding-top: 80px; /* absorbs max translateY(-72px) so tallest frames aren't clipped */
}

.ff-track {
    display: flex;
    align-items: flex-end;
    gap: 32px;
    width: max-content;
    animation: ff-scroll 75s linear infinite;
    will-change: transform;
}

@keyframes ff-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Individual frame ────────────────────────────────────────────────────── */

a.ff-frame {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ff-frame {
    position: relative;
    flex: 0 0 auto;
    border-radius: 32px;
    overflow: hidden;
    background: #ffffff;
    isolation: isolate;
}

/* ── Predefined shapes ───────────────────────────────────────────────────── */
/* Five fixed shapes assigned in rotation; the image always fills the frame
   via object-fit: cover regardless of the source aspect ratio.              */

.ff-frame--square {
    width: clamp(220px, 20vw, 320px);
    aspect-ratio: 1 / 1;
}

.ff-frame--landscape-wide {
    width: clamp(300px, 28vw, 440px);
    aspect-ratio: 16 / 9;
}

.ff-frame--landscape-mid {
    width: clamp(260px, 24vw, 380px);
    aspect-ratio: 4 / 3;
}

.ff-frame--portrait-tall {
    width: clamp(160px, 12vw, 210px);
    height: clamp(270px, 30vw, 400px);
}

.ff-frame--portrait-mid {
    width: clamp(190px, 16vw, 250px);
    height: clamp(240px, 26vw, 340px);
}

.ff-frame__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Staggered vertical rhythm ───────────────────────────────────────────── */
/* Classes are set per frame index in PHP so the pattern is correct across
   both copies of the duplicated set. */

.ff-frame--offset-1 { transform: translateY(-48px); }
.ff-frame--offset-2 { transform: translateY(-16px); }
.ff-frame--offset-3 { transform: translateY(-72px); }

/* ── Accessibility ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ff-track {
        animation-play-state: paused;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .ff-track {
        gap: 20px;
    }

    .ff-frame--square {
        width: clamp(180px, 18vw, 260px);
    }

    .ff-frame--landscape-wide {
        width: clamp(240px, 24vw, 360px);
    }

    .ff-frame--landscape-mid {
        width: clamp(200px, 20vw, 300px);
    }

    .ff-frame--portrait-tall {
        width: clamp(120px, 10vw, 170px);
        height: clamp(210px, 26vw, 330px);
    }

    .ff-frame--portrait-mid {
        width: clamp(150px, 13vw, 200px);
        height: clamp(190px, 22vw, 280px);
    }
}

@media (max-width: 768px) {
    .ff-slider {
        padding-top: 32px;
    }

    .ff-frame--square        { width: 180px; }
    .ff-frame--landscape-wide { width: 240px; }
    .ff-frame--landscape-mid  { width: 210px; }

    .ff-frame--portrait-tall {
        width: 130px;
        height: 210px;
    }

    .ff-frame--portrait-mid {
        width: 155px;
        height: 195px;
    }

    .ff-frame--offset-1,
    .ff-frame--offset-2,
    .ff-frame--offset-3 {
        transform: translateY(-24px);
    }
}

@media (max-width: 480px) {
    .ff-frame--square         { width: 150px; }
    .ff-frame--landscape-wide { width: 200px; }
    .ff-frame--landscape-mid  { width: 175px; }

    .ff-frame--portrait-tall {
        width: 110px;
        height: 180px;
    }

    .ff-frame--portrait-mid {
        width: 130px;
        height: 165px;
    }
}