/* ==========================================================================
   Showreel Block — Image Slider
   Active slide large (left), secondary slides smaller peek (right).
   On navigation the next slide slides into the large position.
   ========================================================================== */

.cf-showreel {
    position: relative;
    width: 100%;
    background-color: #000000;

    /* Slide dimension tokens */
    --cf-large-w: clamp(300px, 66.67vw, 960px);
    --cf-large-h: clamp(169px, 37.5vw, 540px);   /* large-w × 9/16 */
    --cf-small-w: clamp(150px, 20.83vw, 300px);
    --cf-small-h: clamp(84px, 11.72vw, 169px);    /* small-w × 9/16 */
    --cf-gap:     24px;
}

.cf-showreel__container {
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(5rem, 8.33vw, 7.5rem) clamp(0.75rem, 2.78vw, 2.5rem);
}

/* === Headline === */
.cf-showreel__headline {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 1.33rem + 2.78vw, 3rem);
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 clamp(3rem, 5.56vw, 5rem);
}

.cf-showreel__headline-regular { font-weight: 400; }
.cf-showreel__headline-bold    { font-weight: 600; }

/* === Track === */
.cf-showreel__track {
    position: relative;
    overflow: hidden;
    height: var(--cf-large-h);
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Slides (desktop) === */
.cf-showreel__slide {
    position: absolute;
    top: 0;
    border-radius: 4px;
    overflow: hidden;
    transition:
        left      0.6s cubic-bezier(0.4, 0, 0.2, 1),
        width     0.6s cubic-bezier(0.4, 0, 0.2, 1),
        height    0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active: large, anchored to the left */
.cf-showreel__slide.is-active {
    left:      0;
    width:     var(--cf-large-w);
    height:    var(--cf-large-h);
    transform: none;
    z-index:   2;
}

/* Next: small thumbnail peeking to the right */
.cf-showreel__slide.is-next {
    left:      calc(var(--cf-large-w) + var(--cf-gap));
    width:     var(--cf-small-w);
    height:    var(--cf-small-h);
    transform: none;
    z-index:   1;
}

/* Prev: off-screen left at large size (ready for back-navigation) */
.cf-showreel__slide.is-prev {
    left:      0;
    width:     var(--cf-large-w);
    height:    var(--cf-large-h);
    transform: translateX(calc(-100% - var(--cf-gap)));
    z-index:   2;
}

/*
 * Idle: off-screen right — far enough to always be clipped by overflow:hidden
 * even on very wide viewports. 960 + 24 + 2×(300+24) = 1632px > max inner ≈ 1280px
 */
.cf-showreel__slide.is-idle {
    left:      calc(var(--cf-large-w) + var(--cf-gap) + 2 * (var(--cf-small-w) + var(--cf-gap)));
    width:     var(--cf-small-w);
    height:    var(--cf-small-h);
    transform: none;
    z-index:   1;
}

/* Image */
.cf-showreel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Portrait images: no cropping in any slot */
.cf-showreel__slide[data-portrait="true"] .cf-showreel__img {
    object-fit: contain;
}

/* === Navigation === */
.cf-showreel__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(1.5rem, 2.78vw, 2.5rem);
}

.cf-showreel__counter {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: #FFFFFF;
}

.cf-showreel__arrows {
    display: flex;
    gap: 1rem;
}

.cf-showreel__nav-prev,
.cf-showreel__nav-next {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #FFFFFF;
    transition: opacity 0.3s ease;
}

.cf-showreel__nav-prev:hover,
.cf-showreel__nav-next:hover {
    opacity: 0.6;
}

.cf-showreel__nav-prev:disabled,
.cf-showreel__nav-next:disabled {
    opacity: 0.2;
    cursor: default;
}

/* === Mobile — standard full-width slider === */
@media (max-width: 767px) {

    .cf-showreel__track {
        /* Maintain aspect ratio via padding-bottom (works with absolutely-positioned children) */
        height: 0;
        padding-bottom: calc(199 / 354 * 100%); /* ≈ 56.2% */
    }

    /* All slot variants fill the entire track area */
    .cf-showreel__slide.is-active,
    .cf-showreel__slide.is-next,
    .cf-showreel__slide.is-prev,
    .cf-showreel__slide.is-idle {
        left:          0;
        right:         0;
        top:           0;
        bottom:        0;
        width:         auto;
        height:        auto;
        border-radius: 0;
    }

    /* Position via transform only */
    .cf-showreel__slide            { transform: translateX(100%);  }
    .cf-showreel__slide.is-active  { transform: translateX(0);     }
    .cf-showreel__slide.is-prev    { transform: translateX(-100%); }
    .cf-showreel__slide.is-next,
    .cf-showreel__slide.is-idle    { transform: translateX(100%);  }
}