/* =========================================================
   VIDA AI
   Models landing page
   File: css/models.css
   ========================================================= */


/* =========================================================
   1. PAGE FOUNDATION
   ========================================================= */

.models-page {
    background: var(--vida-gallery);
}

.models-page .site {
    min-height: 100vh;

    background: var(--vida-gallery);
}


/* =========================================================
   2. MODELS SECTION
   ========================================================= */

.models-orbit {
    padding:
        clamp(150px, 16vw, 230px)
        var(--page-gutter)
        clamp(140px, 15vw, 220px);
}


/* =========================================================
   3. INTRODUCTION
   ========================================================= */

.models-orbit__header {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    width: min(100%, 1180px);

    margin-inline: auto;
    margin-bottom:
        clamp(140px, 15vw, 220px);

    text-align: left;
}


/* Main title */

.models-orbit__title {
    grid-column: 2 / 12;

    margin: 0;

    color: var(--vida-blue);

    font-size: var(--display-heading-size);
    font-weight: var(--display-heading-weight);
    line-height: var(--display-heading-line-height);

    letter-spacing: var(--display-heading-letter-spacing);
    word-spacing: var(--display-heading-word-spacing);

    text-align: center;
    text-transform: uppercase;

    text-wrap: balance;
}


/* Supporting lines */

.models-orbit__intro {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    margin-top:
        clamp(72px, 8vw, 116px);

    color: rgba(30, 45, 72, 0.72);

    font-size: var(--editorial-copy-size);
    font-weight: 300;
    font-variation-settings: "wght" 300;
    line-height: var(--editorial-copy-leading);

    letter-spacing: var(--editorial-copy-tracking);
    word-spacing: normal;
    text-transform: uppercase;
}

.models-orbit__intro-line {
    display: block;
}

.models-orbit__intro-line:first-child {
    grid-column: 2 / 13;

    text-align: left;
}

.models-orbit__intro-line:last-child {
    grid-column: 6 / 12;

    margin-top:
        clamp(16px, 1.8vw, 26px);

    text-align: left;
}


/* =========================================================
   4. EDITORIAL CONSTELLATION
   ========================================================= */

.models-orbit__constellation {
    position: relative;

    width: min(100%, 1040px);
    height: 1180px;

    margin-inline: auto;
}


/* =========================================================
   5. MODEL ITEM
   ========================================================= */

.model-orbit {
    position: absolute;

    width: var(--portrait-size);
}

.model-orbit__link {
    position: relative;

    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;
}

.model-orbit__link:focus {
    outline: none;
}


/* =========================================================
   6. CIRCULAR PORTRAIT
   ========================================================= */

.model-orbit__media {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 50%;

    background:
        rgba(30, 45, 72, 0.06);
}


/* Base portrait treatment */

.model-orbit__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 50% 50%;

    transform: scale(1.14);
    transform-origin: center;

    transition:
        transform
        900ms
        var(--ease-standard);

    will-change: transform;
}


/* =========================================================
   7. INDIVIDUAL FACE POSITIONING
   ========================================================= */

/*
   These values adjust framing only.
   The source imagery remains unchanged.
*/


/* JULI */

.model-orbit--juli
.model-orbit__media
img {
    object-position: 50% 44%;
}


/* HIRO */

.model-orbit--hiro
.model-orbit__media
img {
    object-position: 50% 43%;
}


/* DSHANA */

.model-orbit--dshana
.model-orbit__media
img {
    object-position: 50% 46%;
}


/* HELEN */

.model-orbit--helen
.model-orbit__media
img {
    object-position: 50% 20%;
}


/* DAMIEN */

.model-orbit--damien
.model-orbit__media
img {
    object-position: 50% 42%;
}


/* =========================================================
   8. PORTRAIT INTERACTION
   ========================================================= */

/*
   The circular frame remains fixed.
   Only the image subtly reveals more.
*/

.model-orbit__link:hover
.model-orbit__media
img,
.model-orbit__link:focus-visible
.model-orbit__media
img {
    transform: scale(1.035);
}

.model-orbit__link:focus-visible
.model-orbit__media {
    outline: 1px solid var(--vida-blue);

    outline-offset: 9px;
}


/* =========================================================
   9. MODEL NAME
   ========================================================= */

.model-orbit__name {
    position: absolute;

    top: 50%;
    left: calc(100% + 24px);

    margin: 0;

    color: var(--vida-blue);

    font-size:
        clamp(1.05rem, 1.15vw, 1.18rem);
    font-weight: 200;
    line-height: 1;

    letter-spacing: 0.2em;
    word-spacing: 0;

    text-transform: uppercase;
    white-space: nowrap;

    transform:
        translateY(-50%);

    transition:
        opacity 300ms ease,
        transform
        500ms
        var(--ease-standard);
}

.model-orbit__link:hover
.model-orbit__name,
.model-orbit__link:focus-visible
.model-orbit__name {
    opacity: 0.62;

    transform:
        translateY(-50%)
        translateX(4px);
}


/* =========================================================
   10. DESKTOP CONSTELLATION
   ========================================================= */


/* JULI */

.model-orbit--juli {
    top: 0;
    left: 30%;

    --portrait-size: 238px;
}

.model-orbit--juli
.model-orbit__name {
    right: calc(100% + 24px);
    left: auto;
}


/* HIRO */

.model-orbit--hiro {
    top: 118px;
    right: 4%;

    --portrait-size: 250px;
}

.model-orbit--hiro
.model-orbit__name {
    right: calc(100% + 24px);
    left: auto;
}


/* DSHANA */

.model-orbit--dshana {
    top: 370px;
    left: 2%;

    --portrait-size: 242px;
}


/* HELEN */

.model-orbit--helen {
    top: 455px;
    left: 43%;

    --portrait-size: 258px;
}


/* DAMIEN */

.model-orbit--damien {
    top: 760px;
    left: 18%;

    --portrait-size: 236px;
}

.model-orbit--damien
.model-orbit__name {
    right: calc(100% + 24px);
    left: auto;
}


/* =========================================================
   11. TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .models-orbit__header {
        width: min(100%, 900px);

        margin-bottom: 150px;
    }


    .models-orbit__title {
        grid-column: 2 / 12;

        letter-spacing: var(--display-heading-letter-spacing);
        word-spacing: var(--display-heading-word-spacing);
    }


    .models-orbit__intro {
        margin-top: 72px;

        line-height: var(--editorial-copy-leading);
        letter-spacing: var(--editorial-copy-tracking);
    }


    .models-orbit__intro-line:first-child {
        grid-column: 3 / 13;
    }


    .models-orbit__intro-line:last-child {
        grid-column: 1 / 10;

        margin-top: 22px;
    }


    .models-orbit__constellation {
        width: min(100%, 800px);
        height: 900px;
    }


    /* JULI */

    .model-orbit--juli {
        top: 0;
        left: 28%;

        --portrait-size: 200px;
    }


    /* HIRO */

    .model-orbit--hiro {
        top: 100px;
        right: 2%;

        --portrait-size: 212px;
    }


    /* DSHANA */

    .model-orbit--dshana {
        top: 305px;
        left: 1%;

        --portrait-size: 204px;
    }


    /* HELEN */

    .model-orbit--helen {
        top: 380px;
        left: 42%;

        --portrait-size: 216px;
    }


    /* DAMIEN */

    .model-orbit--damien {
        top: 635px;
        left: 17%;

        --portrait-size: 198px;
    }
}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .models-orbit {
        padding:
            120px
            var(--page-gutter)
            120px;
    }


    /* Header */

    .models-orbit__header {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        margin-bottom: 100px;
    }


    .models-orbit__title {
        width: 100%;

        font-size: var(--display-heading-size);
        line-height: var(--display-heading-line-height);

        letter-spacing: var(--display-heading-letter-spacing);
        word-spacing: var(--display-heading-word-spacing);

        text-align: center;
    }


    .models-orbit__intro {
        display: block;

        width: 100%;
        max-width: 100%;

        margin-top: 50px;

        font-size: var(--editorial-copy-size);
        line-height: var(--editorial-copy-leading);

        letter-spacing: var(--editorial-copy-tracking);
        word-spacing: normal;
    }


    .models-orbit__intro-line {
        display: block;
    }


    .models-orbit__intro-line:first-child {
        width: 88%;

        margin-left: auto;

        text-align: left;
    }


    .models-orbit__intro-line:last-child {
        width: 82%;

        margin-top: 20px;
        margin-right: auto;

        text-align: left;
    }


    /* Two-column portrait layout */

    .models-orbit__constellation {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        align-items: start;

        gap:
            clamp(64px, 16vw, 96px)
            clamp(22px, 7vw, 44px);

        width: 100%;
        height: auto;
    }


    .model-orbit,
    .model-orbit--juli,
    .model-orbit--hiro,
    .model-orbit--dshana,
    .model-orbit--helen,
    .model-orbit--damien {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;

        --portrait-size: 100%;
    }


    /*
       Editorial stagger:
       even-numbered models sit slightly lower.
    */

    .model-orbit:nth-child(even) {
        margin-top: 64px;
    }


    /* Names beneath portraits */

    .model-orbit__name,
    .model-orbit--juli
    .model-orbit__name,
    .model-orbit--hiro
    .model-orbit__name,
    .model-orbit--dshana
    .model-orbit__name,
    .model-orbit--helen
    .model-orbit__name,
    .model-orbit--damien
    .model-orbit__name {
        position: static;

        margin-top: 18px;

        font-size: 0.9rem;
        line-height: 1.2;

        letter-spacing: 0.16em;

        text-align: center;
        white-space: normal;

        transform: none;
    }


    .model-orbit__link:hover
    .model-orbit__name,
    .model-orbit__link:focus-visible
    .model-orbit__name {
        transform: none;
    }


    /*
       Reduce portrait zoom slightly on mobile.
       Keeps faces comfortably framed inside
       smaller circles.
    */

    .model-orbit__media img {
        transform: scale(1.08);
    }

    .model-orbit__link:hover
    .model-orbit__media
    img,
    .model-orbit__link:focus-visible
    .model-orbit__media
    img {
        transform: scale(1.03);
    }
}


/* =========================================================
   13. SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {


    .models-orbit__intro-line:first-child,
    .models-orbit__intro-line:last-child {
        width: 100%;
    }


    .model-orbit__name,
    .model-orbit--juli
    .model-orbit__name,
    .model-orbit--hiro
    .model-orbit__name,
    .model-orbit--dshana
    .model-orbit__name,
    .model-orbit--helen
    .model-orbit__name,
    .model-orbit--damien
    .model-orbit__name {
        margin-top: 13px;

        font-size: 0.58rem;

        letter-spacing: 0.13em;
    }
}


/* =========================================================
   14. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 350px) {

    .models-orbit__constellation {
        grid-template-columns: 1fr;

        gap: 58px;
    }


    .model-orbit,
    .model-orbit:nth-child(even) {
        width: min(100%, 250px);

        margin-top: 0;
        margin-inline: auto;
    }
}


/* =========================================================
   19. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .model-orbit__media img,
    .model-orbit__name,
    .models-page .contact-cta__button {
        transition: none;
    }

    .model-orbit__link:hover
    .model-orbit__media
    img,
    .model-orbit__link:focus-visible
    .model-orbit__media
    img {
        transform: none;
    }
}
/* =========================================================
   MODELS PAGE — CONTACT CTA
   EN + DE
   ========================================================= */

.models-page .contact-cta {
    width: 100%;
    margin: 0;

    padding:
        clamp(140px, 14vw, 220px)
        var(--page-gutter);

    background: var(--vida-light);
}

.models-page .contact-cta__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1fr);

    align-items: center;

    gap: clamp(80px, 10vw, 160px);

    width: min(100%, 1400px);
    margin-inline: auto;
}

.models-page .contact-cta__title {
    max-width: 620px;
    color: var(--vida-blue);
}

.models-page .contact-cta__title span {
    display: block;
}

.models-page .contact-cta__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    max-width: 560px;

    margin: 0;

    text-align: left;
}

.models-page .contact-cta__text {
    margin: 0 0 clamp(44px, 5vw, 68px);

    color: rgba(30, 45, 72, 0.72);
}


@media (max-width: 760px) {

    .models-page .contact-cta {
        padding:
            100px
            var(--page-gutter)
            110px;
    }

    .models-page .contact-cta__inner {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .models-page .contact-cta__content {
        max-width: none;
    }

    .models-page .contact-cta__text {
        margin-bottom: 42px;
    }
}
/* =========================================================
   MOBILE — MODELS TITLE FIT
   ========================================================= */

@media (max-width: 767px) {

    .models-orbit__title {
        font-size: clamp(2.8rem, 13vw, 4.5rem);
        line-height: 1.02;
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

}