/* ============================ MODELS CAROUSEL ============================
   Desktop (Figma): heading band 1440x120, arrows row 1440x44 (buttons 64px
   from the content's left edge), viewport 1440x620 with the active card
   centred at 864x580 and 72px gutters, indicator row 1440x16.
   Mobile (375): heading, one 320x290 card per view, 44px swiper row with the
   chevrons pinned to the gutters and the dots centred between them. */
.models {
    background: var(--page-bg);
    padding: 3.3333vw 0; /* 64 */
    overflow: hidden;
}

.models__head {
    text-align: center;
}

.models__title {
    font-family: var(--f-bold);
    font-weight: 700;
    font-size: 1.875vw; /* 36 */
    line-height: 1;
    color: var(--ink);
    margin: 0;
}

.models__rule {
    display: block;
    width: 6.25vw; /* 120 */
    height: 0.2083vw; /* 4 */
    background: var(--brand-accent);
    margin: 0.8333vw auto 0; /* 16 */
}

.models__carousel {
    position: relative;
}

/* ---- arrows ---- */
.models__arrows {
    display: flex;
    direction: ltr;
    gap: 1.0417vw; /* 20 */
    padding-left: 3.3333vw; /* 64 */
}

.models__nav {
    width: 2.2917vw; /* 44 */
    height: 2.2917vw;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.models__nav img {
    width: 1.25vw; /* 24 */
    height: 1.25vw;
    display: block;
}

.models__nav--next img {
    transform: rotate(180deg);
}

.models__nav:hover {
    transform: scale(1.08);
}

/* ---- track ---- */
.models__viewport {
    margin-top: 1.25vw; /* 24 */
    height: 32.2917vw; /* 620 */
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y; /* vertical gestures stay with the page */
}

.models__viewport:active {
    cursor: grabbing;
}

.models__viewport img {
    user-select: none;
    -webkit-user-drag: none;
}

.models__track {
    display: flex;
    direction: ltr;
    align-items: center;
    height: 100%;
    gap: 3.75vw; /* 72 */
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.models__track.is-instant {
    transition: none;
}

.models__card {
    flex: 0 0 45vw; /* 864 */
    height: 30.2083vw; /* 580 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6667vw; /* 32 */
    box-sizing: border-box;
}

.models__name {
    font-family: var(--f-extrabold);
    font-weight: 800;
    font-size: 3.3333vw; /* 64 */
    line-height: 0.75; /* 48 */
    color: var(--ink);
    text-align: center;
    direction: ltr;
    margin: 0;
}

.models__pic {
    width: 33.8542vw; /* 650 */
    height: auto;
    display: block;
}

/* ---- indicators ---- */
.models__dots {
    display: flex;
    direction: ltr;
    align-items: center;
    justify-content: center;
    gap: 0.8333vw; /* 16 */
    margin-top: 1.25vw; /* 24 */
    height: 0.8333vw; /* 16 */
}

.models__dot {
    width: 0.625vw; /* 12 */
    height: 0.625vw;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hairline);
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.models__dot.is-active {
    background: var(--brand-accent);
}


/* ============================================================================
   MOBILE (Figma 375 frame)
   ========================================================================== */
@media (max-width: 768px) {

    .models,
    .mobile .models {
        padding: 12.8vw 0; /* 48 */
    }

    .models__title,
    .mobile .models__title {
        font-size: 8.5333vw; /* 32 */
        line-height: 1.25; /* 40 */
        padding: 0 var(--gutter);
    }

    .models__rule,
    .mobile .models__rule {
        width: 32vw; /* 120 */
        height: 1.0667vw; /* 4 */
        margin-top: 2.1333vw; /* 8 */
    }

    .models__viewport,
    .mobile .models__viewport {
        margin-top: 6.4vw; /* 24 */
        height: 77.3333vw; /* 290 */
    }

    .models__track,
    .mobile .models__track {
        gap: 0;
    }

    .models__card,
    .mobile .models__card {
        flex: 0 0 85.3333vw; /* 320 */
        height: 77.3333vw; /* 290 */
        gap: 8.5333vw; /* 32 */
    }

    .models__name,
    .mobile .models__name {
        font-size: 12.8vw; /* 48 */
        line-height: 1; /* 48 */
    }

    .models__pic,
    .mobile .models__pic {
        width: 100%;
    }

    /* swiper row: dots centred, chevrons pinned to the gutters over the row */
    .models__dots,
    .mobile .models__dots {
        margin-top: 4.2667vw; /* 16 */
        height: 11.7333vw; /* 44 */
        gap: 8.5333vw; /* 32 */
    }

    .models__dot,
    .mobile .models__dot {
        width: 3.2vw; /* 12 */
        height: 3.2vw;
    }

    .models__arrows,
    .mobile .models__arrows {
        position: absolute;
        bottom: 0;
        left: var(--gutter);
        right: var(--gutter);
        justify-content: space-between;
        gap: 0;
        padding-left: 0;
    }

    .models__nav,
    .mobile .models__nav {
        width: 11.7333vw; /* 44 */
        height: 11.7333vw;
    }

    .models__nav img,
    .mobile .models__nav img {
        width: 6.4vw; /* 24 */
        height: 6.4vw;
    }
}