/* =========================================================
   VIDA AI
   Model profile
   File: css/model-profile.css
   ========================================================= */


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

.model-profile-page {
    color: var(--vida-blue);
    background: var(--vida-gallery);
}

.model-profile-page .site {
    min-height: 100vh;
    background: var(--vida-gallery);
}

.model-profile-page main {
    background: var(--vida-gallery);
}


/* Screen-reader content remains available without appearing
   visually on the portfolio page. */

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    border: 0 !important;

    white-space: nowrap !important;
}


/* =========================================================
   2. MODEL PROFILE
   ========================================================= */

.model-profile {
    padding:
        clamp(72px, 8vw, 126px)
        var(--page-gutter)
        clamp(58px, 6vw, 92px);
}

.model-profile__inner {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(420px, 1.18fr);

    align-items: start;

    gap: clamp(44px, 6vw, 92px);

    width: min(100%, 1320px);

    margin-inline: auto;
}


/* =========================================================
   3. PROFILE INFORMATION
   ========================================================= */

.model-profile__information {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 0;

    padding-top: clamp(6px, 1vw, 18px);

    color: var(--vida-blue);
}


/* Model name */

.model-profile__name {
    margin:
        0
        0
        clamp(22px, 2.5vw, 38px);

    color: var(--vida-blue);

    font-size: clamp(2.5rem, 4.4vw, 4.25rem);
    font-weight: 200 !important;
    line-height: 1;

    letter-spacing: 0.23em;

    text-align: right;
    text-transform: uppercase;
}


/* Measurements */

.model-profile__measurements {
    display: grid;

    gap: 5px;

    width: min(100%, 390px);

    margin:
        0
        0
        clamp(38px, 4vw, 62px)
        auto;
}

.model-measurement {
    display: grid;

    grid-template-columns:
        minmax(112px, 0.8fr)
        minmax(150px, 1.2fr);

    align-items: baseline;

    column-gap: 22px;
}

.model-measurement dt,
.model-measurement dd {
    margin: 0;

    color: var(--vida-blue);

    font-size: clamp(0.92rem, 0.92vw, 0.98rem);
    font-weight: 500;
    line-height: 1.75;

    letter-spacing: 0.19em;

    text-transform: uppercase;
}

.model-measurement dt {
    text-align: right;
}

.model-measurement dd {
    text-align: right;
}


/* Biography */

.model-profile__biography {
    width: min(100%, 470px);

    margin-left: auto;

    color: var(--text-secondary);

    font-size: clamp(0.98rem, 1.02vw, 1.07rem);
    font-weight: 500;
    line-height: 2;

    letter-spacing: 0.15em;

    text-align: right;
}


/* =========================================================
   4. HERO PORTRAIT
   ========================================================= */

.model-profile__hero {
    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;

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


/*
   IMPORTANT:
   No forced aspect ratio and no object-fit: cover.

   The original hero image determines its own height so
   the photograph and watermark cannot be cropped by
   the profile container.
*/

.model-profile__hero-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
}


/* =========================================================
   5. VIDA AI WATERMARK
   ========================================================= */

/*
   Shared watermark system.

   Baseline:
   - bottom right
   - approximately 10% image width
   - 72% opacity
   - small proportional inset
   - independent from image hover / scaling
*/

.vida-ai-watermark {
    position: absolute;

    right: 2.25%;
    bottom: 2.25%;

    z-index: 3;

    display: block;

    width: 18%;
    min-width: 95px;
    max-width: 200px;
    height: auto;

    margin: 0;
    padding: 0;

    opacity: 0.90;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


/* Slightly larger maximum size on hero imagery */

.model-profile__hero .vida-ai-watermark {
    right: 3%;
    bottom: 3%;

    width: 30%;
    min-width: 150px;
    max-width: 300px;

    opacity: 0.90;
}


/* =========================================================
   6. FULL-WIDTH JUSTIFIED GALLERY
   ========================================================= */

.model-gallery-section {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

.model-gallery {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    gap: 0;

    overflow: hidden;

    background: transparent;
}

.model-gallery__item {
    position: relative;

    display: block;

    flex: 0 0 auto;
    flex-shrink: 0;

    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 0;

    color: inherit;
    background: transparent;

    cursor: zoom-in;
}

.model-gallery__image {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    transform: scale(1);

    transition:
        transform 800ms var(--ease-standard),
        filter 400ms var(--ease-soft);
}


/* Watermark */

.model-gallery__item .vida-ai-watermark {
    position: absolute;

    right: 2.25%;
    bottom: 2.25%;

    z-index: 3;

    width: 26%;
    min-width: 130px;
    max-width: 260px;
    height: auto;

    opacity: 0.90;

    object-fit: contain;

    pointer-events: none;
    user-select: none;

    transform: none;
}


/* Hover overlay */

.model-gallery__item::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: rgba(30, 45, 72, 0);

    transition:
        background-color 350ms var(--ease-soft);
}


/* Only photograph zooms — watermark stays fixed */

.model-gallery__item:hover .model-gallery__image,
.model-gallery__item:focus-visible .model-gallery__image {
    transform: scale(1.018);
}

.model-gallery__item:hover::after,
.model-gallery__item:focus-visible::after {
    background: rgba(30, 45, 72, 0.045);
}

/* =========================================================
   7. GALLERY PRE-LAYOUT STATE
   ========================================================= */

/*
   Prevent images appearing vertically before JavaScript
   has calculated the justified gallery layout.
*/

.model-gallery:not(.is-ready) {
    min-height: 520px;
}

.model-gallery:not(.is-ready) .model-gallery__item {
    visibility: hidden;
}

.model-gallery.is-ready {
    min-height: 0;
}

.model-gallery.is-ready .model-gallery__item {
    visibility: visible;
}


/* =========================================================
   8. BOOKING
   ========================================================= */

.model-booking {
    display: flex;
    justify-content: center;

    padding:
        clamp(56px, 7vw, 96px)
        var(--page-gutter)
        clamp(80px, 9vw, 140px);
}


/* =========================================================
   9. FULLSCREEN VIEWER
   ========================================================= */

.model-viewer {
    width: 100vw;
    max-width: none;

    height: 100dvh;
    max-height: none;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    color: var(--vida-white);
    background: rgba(11, 18, 30, 0.98);
}

.model-viewer[open] {
    display: block;
}

.model-viewer::backdrop {
    background: rgba(11, 18, 30, 0.98);
}


/* Viewer layout */

.model-viewer__interface {
    position: relative;

    display: grid;

    grid-template-columns:
        clamp(44px, 4vw, 64px)
        minmax(0, 1fr)
        clamp(44px, 4vw, 64px);

    align-items: center;

    width: 100%;
    height: 100dvh;
}


/* Viewer media */

.model-viewer__media {
    grid-column: 2;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100dvh;

    padding: clamp(12px, 2vw, 28px) 0;
}


/* Image + watermark wrapper */

.model-viewer__image-wrap {
    position: relative;

    display: inline-block;

    max-width: 100%;
    max-height: calc(100dvh - 32px);
}


/* Main viewer image */

.model-viewer__image-wrap > img:first-child {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: calc(100dvh - 32px);

    object-fit: contain;
}


/* Viewer watermark */

.model-viewer__watermark {
    position: absolute;

    right: 2.5%;
    bottom: 2.5%;

    z-index: 3;

    width: 26%;
    min-width: 140px;
    max-width: 280px;
    height: auto;

    opacity: 0.90;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


/* Close button */

.model-viewer__close {
    position: fixed;

    top: 16px;
    right: 20px;

    z-index: 4;

    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin: 0;
    padding: 0;

    border: 0;

    color: var(--vida-white);
    background: transparent;

    font-size: 2.15rem;
    font-weight: 200;
    line-height: 1;

    opacity: 0.72;

    cursor: pointer;

    transition:
        opacity var(--duration-fast) ease;
}


/* Navigation */

.model-viewer__navigation {
    position: relative;

    z-index: 3;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    color: var(--vida-white);
    background: transparent;

    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 200;

    opacity: 0.62;

    cursor: pointer;

    transition:
        opacity var(--duration-fast) ease,
        transform var(--duration-fast) ease;
}

.model-viewer__navigation--previous {
    grid-column: 1;
}

.model-viewer__navigation--next {
    grid-column: 3;
}


/* Hover + focus */

.model-viewer__navigation:hover,
.model-viewer__navigation:focus-visible,
.model-viewer__close:hover,
.model-viewer__close:focus-visible {
    opacity: 1;
}

.model-viewer__navigation--previous:hover {
    transform: translateX(-3px);
}

.model-viewer__navigation--next:hover {
    transform: translateX(3px);
}

.model-viewer__navigation:focus-visible,
.model-viewer__close:focus-visible {
    outline:
        1px solid
        rgba(255, 255, 255, 0.78);

    outline-offset: -5px;
}

/* =========================================================
   10. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .model-profile {
        padding:
            clamp(52px, 8vw, 84px)
            var(--page-gutter)
            58px;
    }

    .model-profile__inner {
        grid-template-columns: 1fr;

        gap: 46px;

        width: min(100%, 680px);
    }

    .model-profile__hero {
        grid-column: 1;
        grid-row: 1;
    }

    .model-profile__information {
        grid-column: 1;
        grid-row: 2;

        padding-top: 0;
    }

    .model-profile__name {
        text-align: left;
    }

    .model-profile__measurements {
        width: 100%;

        margin-left: 0;
    }

    .model-measurement {
        grid-template-columns:
            minmax(100px, 0.8fr)
            minmax(150px, 1.2fr);
    }

    .model-measurement dt {
        text-align: left;
    }

    .model-profile__biography {
        width: 100%;

        margin-left: 0;

        text-align: left;
    }

    .model-viewer__interface {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            58px;
    }
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .model-profile {
        padding:
            34px
            20px
            46px;
    }

    .model-profile__inner {
        gap: 34px;
    }

    .model-profile__name {
        margin-bottom: 24px;

        font-size:
            clamp(2.25rem, 13vw, 3.25rem);
    }

    .model-profile__measurements {
        gap: 4px;

        margin-bottom: 34px;
    }

    .model-measurement {
        grid-template-columns:
            minmax(86px, 0.75fr)
            minmax(150px, 1.25fr);

        column-gap: 14px;
    }

    .model-measurement dt,
    .model-measurement dd {
        font-size: 0.68rem;
        line-height: 1.7;

        letter-spacing: 0.13em;
    }

    .model-profile__biography {
        font-size: 0.75rem;
        line-height: 1.9;

        letter-spacing: 0.105em;
    }


    /* Mobile gallery becomes one image per row */

    .model-gallery {
        display: block;
    }

    .model-gallery__item {
        width: 100% !important;
        height: auto !important;
    }

    .model-gallery__image {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /* Watermark remains proportional on mobile */

    .vida-ai-watermark {
        right: 3%;
        bottom: 3%;

        width: 28%;
        min-width: 110px;
        max-width: 180px;
    }


    .model-booking {
        padding:
            36px
            20px
            60px;
    }


    .model-viewer__interface {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            48px;
    }

    .model-viewer__media {
        padding: 68px 0 34px;
    }

    .model-viewer__media img {
        max-height:
            calc(100dvh - 102px);
    }

    .model-viewer__close {
        top: 8px;
        right: 8px;
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

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

    .model-gallery__image,
    .model-gallery__item::after,
    .model-booking__button,
    .model-viewer__navigation,
    .model-viewer__close {
        transition: none;
    }

    .model-gallery__item:hover .model-gallery__image,
    .model-gallery__item:focus-visible .model-gallery__image {
        transform: none;
    }
}


/* =========================================================
   13. PRINT
   ========================================================= */

@media print {

    .model-viewer,
    .model-booking {
        display: none !important;
    }

    .model-profile-page,
    .model-profile-page .site,
    .model-profile-page main {
        color: #000000;
        background: #ffffff;
    }
}