/* ==========================================================================
   ACMOBOOK portrait — premium digital photograph
   Loaded last on the public talent profile.

   One visual shell. The image fills it. Edge is a hairline. Gloss is glass.
   No backing panel, no offset layer, no physical picture frame.
   Sizes stay large. Layout engine remains in acm-profile-hero.css.
   ========================================================================== */

.acm-portrait,
.acm-profile-portrait {
    --acm-portrait-w: var(--acm-hero-avatar, 220px);
    --acm-portrait-radius: 22px;
    --acm-portrait-pos: center 18%;
    --acm-portrait-edge: 1px solid rgba(255, 255, 255, 0.55);
    --acm-portrait-depth: 0 8px 24px rgba(20, 24, 45, 0.10);
    width: var(--acm-portrait-w);
    max-width: 100%;
    aspect-ratio: var(--acm-portrait-ratio, 4 / 5);
    height: auto;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: var(--acm-portrait-radius);
    overflow: visible;
    background: transparent;
    box-shadow: none;
    position: relative;
    flex-shrink: 0;
}

/* Kill leftover marketplace / v1 avatar chrome. Do not reset concept variables here. */
.acm-profile-hero .acm-portrait.acm-profile-hero__avatar,
.acm-profile-hero .acm-profile-hero__avatar.acm-portrait {
    border: 0 !important;
    outline: 0;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
    filter: none;
    width: var(--acm-portrait-w);
    max-width: 100%;
    aspect-ratio: var(--acm-portrait-ratio, 4 / 5);
    height: auto;
    border-radius: var(--acm-portrait-radius);
}

.acm-portrait__glow,
.acm-portrait__accent,
.acm-profile-portrait__accent,
.acm-portrait__specular,
.acm-specular {
    display: none !important;
    pointer-events: none;
}

.acm-portrait::before,
.acm-portrait::after,
.acm-profile-portrait::before {
    content: none;
}

.acm-portrait__frame,
.acm-profile-portrait__frame,
.acm-profile-hero .acm-portrait__frame,
.acm-profile-hero .acm-profile-portrait__frame,
.acm-portrait .acm-glass,
.acm-profile-hero .acm-portrait .acm-glass {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: inherit;
    background: transparent;
    border: var(--acm-portrait-edge);
    box-shadow: var(--acm-portrait-depth);
}

.acm-portrait__frame::before,
.acm-profile-portrait__frame::before {
    content: none;
}

/* Subtle glass reflection over the photograph — not a white overlay. */
.acm-portrait__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0) 28%,
            rgba(255, 255, 255, 0) 72%,
            rgba(255, 255, 255, 0.04) 100%
        );
}

.acm-portrait__img,
.acm-profile-portrait__img,
.acm-portrait .acm-profile-hero__monogram,
.acm-profile-portrait .acm-profile-hero__monogram,
.acm-profile-hero .acm-portrait img,
.acm-profile-hero .acm-portrait img.acm-portrait__img,
.acm-profile-hero .acm-portrait img.ac-profile-avatar,
.acm-profile-hero .acm-profile-hero__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0 !important;
    outline: 0;
    background: transparent;
    box-shadow: none;
    object-fit: cover;
    object-position: var(--acm-portrait-pos, center);
    border-radius: inherit;
}

.acm-portrait .acm-profile-hero__monogram,
.acm-profile-portrait .acm-profile-hero__monogram {
    font-size: clamp(1.6rem, 28%, 2.4rem);
}

/* --------------------------------------------------------------------------
   Hire Me — premium glass conversion portrait
   -------------------------------------------------------------------------- */

.acm-profile-hero--hire_me,
.acm-profile-hero--classic,
.acm-profile-hero--layout-classic {
    --acm-hero-avatar: clamp(172px, 22vw, 268px);
    --acm-portrait-ratio: 4 / 5;
}

.acm-portrait--hire-me,
.acm-profile-hero--hire_me .acm-portrait,
.acm-profile-hero--classic .acm-portrait {
    --acm-portrait-radius: 22px;
    --acm-portrait-edge: 1px solid rgba(255, 255, 255, 0.55);
    --acm-portrait-depth:
        0 0 0 1px color-mix(in srgb, var(--ps-accent, #635bff) 18%, transparent),
        0 8px 24px rgba(20, 24, 45, 0.10);
}

.acm-profile-hero--hire_me .acm-portrait__frame,
.acm-profile-hero--classic .acm-portrait__frame,
.acm-portrait--hire-me .acm-portrait__frame {
    background: transparent;
    border: var(--acm-portrait-edge);
    box-shadow: var(--acm-portrait-depth);
}

/* --------------------------------------------------------------------------
   Showcase — editorial 4:5, large and centered
   -------------------------------------------------------------------------- */

.acm-profile-hero--showcase,
.acm-profile-hero--centered,
.acm-profile-hero--layout-centered {
    --acm-hero-avatar: clamp(180px, 20vw, 280px);
    --acm-portrait-ratio: 4 / 5;
}

.acm-portrait--showcase,
.acm-profile-hero--showcase .acm-portrait,
.acm-profile-hero--centered .acm-portrait {
    --acm-portrait-radius: 20px;
    --acm-portrait-edge: 1px solid rgba(255, 255, 255, 0.40);
    --acm-portrait-depth: 0 8px 24px rgba(20, 24, 45, 0.08);
}

.acm-profile-hero--showcase .acm-portrait__frame,
.acm-profile-hero--centered .acm-portrait__frame,
.acm-portrait--showcase .acm-portrait__frame {
    background: transparent;
    border: var(--acm-portrait-edge);
    box-shadow: var(--acm-portrait-depth);
}

.acm-portrait--showcase .acm-portrait__frame::after {
    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 32%,
            rgba(255, 255, 255, 0) 78%,
            rgba(255, 255, 255, 0.03) 100%
        );
}

/* --------------------------------------------------------------------------
   Spotlight — cinematic photo, clean object, atmospheric glow only
   -------------------------------------------------------------------------- */

.acm-profile-hero--spotlight,
.acm-profile-hero--split,
.acm-profile-hero--layout-split {
    --acm-hero-avatar: clamp(200px, 18vw, 260px);
    --acm-portrait-ratio: 3 / 4;
}

.acm-portrait--spotlight,
.acm-profile-hero--spotlight .acm-portrait,
.acm-profile-hero--split .acm-portrait {
    --acm-portrait-radius: 22px;
    --acm-portrait-edge: 1px solid rgba(255, 255, 255, 0.18);
    --acm-portrait-depth: 0 0 28px rgba(129, 140, 248, 0.14);
}

.acm-profile-hero--spotlight .acm-portrait__frame,
.acm-profile-hero--split .acm-portrait__frame,
.acm-portrait--spotlight .acm-portrait__frame {
    background: transparent;
    border: var(--acm-portrait-edge);
    box-shadow: var(--acm-portrait-depth);
}

.acm-portrait--spotlight .acm-portrait__frame::after {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0) 70%,
            rgba(196, 181, 253, 0.06) 100%
        );
}

/* Mobile Spotlight: the portrait is a hero image bridging cover and content,
   so it straddles a dark and a light surface. Edge must read on both. */
@media (max-width: 767px) {
    .acm-profile-hero--spotlight,
    .acm-profile-hero--split,
    .acm-profile-hero--layout-split {
        --acm-hero-avatar: clamp(138px, calc(41.8vw - 14.8px), 172px);
    }

    .acm-portrait--spotlight,
    .acm-profile-hero--spotlight .acm-portrait,
    .acm-profile-hero--split .acm-portrait {
        --acm-portrait-edge: 1px solid rgba(255, 255, 255, 0.45);
        --acm-portrait-depth: 0 10px 30px rgba(20, 24, 45, 0.10);
    }
}

/* --------------------------------------------------------------------------
   Creator — rounded-square media object
   -------------------------------------------------------------------------- */

.acm-profile-hero--creator,
.acm-profile-hero--layered,
.acm-profile-hero--layout-layered {
    --acm-hero-avatar: clamp(170px, 21vw, 256px);
    --acm-portrait-ratio: 1 / 1;
}

.acm-portrait--creator,
.acm-profile-hero--creator .acm-portrait,
.acm-profile-hero--layered .acm-portrait {
    --acm-portrait-radius: 24px;
    --acm-portrait-edge: 1px solid rgba(255, 255, 255, 0.50);
    --acm-portrait-depth: 0 8px 24px rgba(20, 24, 45, 0.08);
}

.acm-profile-hero--creator .acm-portrait__frame,
.acm-profile-hero--layered .acm-portrait__frame,
.acm-portrait--creator .acm-portrait__frame {
    background: transparent;
    border: var(--acm-portrait-edge);
    box-shadow: var(--acm-portrait-depth);
}

.acm-portrait--creator .acm-portrait__frame::after {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 26%,
            rgba(255, 236, 248, 0.06) 68%,
            rgba(255, 255, 255, 0.04) 100%
        );
}

/* --------------------------------------------------------------------------
   Signature — editorial, almost no decoration
   -------------------------------------------------------------------------- */

.acm-profile-hero--signature,
.acm-profile-hero--minimal,
.acm-profile-hero--layout-minimal {
    --acm-hero-avatar: clamp(172px, 22vw, 276px);
    --acm-portrait-ratio: 3 / 4;
}

.acm-portrait--signature,
.acm-profile-hero--signature .acm-portrait,
.acm-profile-hero--minimal .acm-portrait {
    --acm-portrait-radius: 20px;
    --acm-portrait-edge: 1px solid rgba(255, 255, 255, 0.38);
    --acm-portrait-depth: 0 8px 22px rgba(20, 24, 45, 0.06);
}

.acm-profile-hero--signature .acm-portrait__frame,
.acm-profile-hero--minimal .acm-portrait__frame,
.acm-portrait--signature .acm-portrait__frame {
    background: transparent;
    border: var(--acm-portrait-edge);
    box-shadow: var(--acm-portrait-depth);
}

.acm-portrait--signature .acm-portrait__frame::after {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0) 26%,
            rgba(255, 255, 255, 0) 80%,
            rgba(255, 255, 255, 0.03) 100%
        );
}

/* --------------------------------------------------------------------------
   Hero type + CTA polish (restrained) — unchanged behaviour
   -------------------------------------------------------------------------- */

.acm-profile-hero--hire_me .acm-profile-hero__name,
.acm-profile-hero--classic .acm-profile-hero__name {
    font-size: clamp(2rem, 3.4vw, 3.15rem);
}

.acm-profile-hero--showcase .acm-profile-hero__name,
.acm-profile-hero--centered .acm-profile-hero__name {
    font-size: clamp(2.15rem, 4vw, 3.5rem);
}

.acm-profile-hero--spotlight .acm-profile-hero__name,
.acm-profile-hero--split .acm-profile-hero__name {
    font-size: clamp(1.85rem, 3.6vw, 3.25rem);
}

.acm-profile-hero--signature .acm-profile-hero__name,
.acm-profile-hero--minimal .acm-profile-hero__name {
    font-size: clamp(2.15rem, 4.2vw, 3.6rem);
}

.acm-profile-hero .acm-btn {
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .acm-profile-hero .acm-btn--primary:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    body.acm-profile-page-body .acm-svc-card:hover,
    body.acm-profile-page-body .ac-section-card:hover {
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acm-portrait,
    .acm-profile-hero .acm-btn,
    body.acm-profile-page-body .acm-svc-card {
        transition: none;
        transform: none;
    }
}

body.acm-profile-page-body .acm-svc-card {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* --------------------------------------------------------------------------
   Mobile composition locks — sizes held, radii slightly tighter
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .acm-portrait,
    .acm-profile-portrait {
        --acm-portrait-radius: 20px;
    }

    .acm-portrait--hire-me,
    .acm-profile-hero--hire_me .acm-portrait,
    .acm-profile-hero--classic .acm-portrait {
        --acm-portrait-radius: 20px;
        --acm-hero-avatar: clamp(170px, 46vw, 194px);
    }

    .acm-profile-hero--hire_me,
    .acm-profile-hero--classic {
        --acm-hero-avatar: clamp(170px, 46vw, 194px);
    }

    .acm-portrait--showcase,
    .acm-profile-hero--showcase .acm-portrait,
    .acm-profile-hero--centered .acm-portrait {
        --acm-portrait-radius: 18px;
        margin-inline: auto;
        justify-self: center;
    }

    .acm-profile-hero--showcase,
    .acm-profile-hero--centered {
        --acm-hero-avatar: clamp(180px, 52vw, 210px);
    }

    .acm-portrait--spotlight,
    .acm-profile-hero--spotlight .acm-portrait,
    .acm-profile-hero--split .acm-portrait {
        --acm-portrait-radius: 20px;
    }

    .acm-portrait--creator,
    .acm-profile-hero--creator .acm-portrait,
    .acm-profile-hero--layered .acm-portrait {
        --acm-portrait-radius: 22px;
    }

    .acm-profile-hero--creator,
    .acm-profile-hero--layered {
        --acm-hero-avatar: clamp(170px, 46vw, 194px);
    }

    .acm-portrait--signature,
    .acm-profile-hero--signature .acm-portrait,
    .acm-profile-hero--minimal .acm-portrait {
        --acm-portrait-radius: 18px;
    }

    .acm-profile-hero--signature,
    .acm-profile-hero--minimal {
        --acm-hero-avatar: clamp(170px, 48vw, 208px);
    }
}

@media (max-width: 991.98px) {
    body.acm-profile-page-body .acm-profile,
    body.acm-profile-page-body .site-main {
        padding-bottom: calc(76px + var(--acm-bottom-nav-h, 64px) + 24px + env(safe-area-inset-bottom, 0px));
    }
}