/* Kim Dukarker — profile-specific assets and focal tweaks.
   Shared layout: ../../css/profile-base.css */

/* Opening quote — photo backdrop (desktop / tablet) */
.profile-quote.profile-quote--opening.profile-quote--opening-photo {
    background-image:
        linear-gradient(
            92deg,
            rgba(44, 44, 44, 0.93) 0%,
            rgba(44, 44, 44, 0.78) 22%,
            rgba(44, 44, 44, 0.5) 42%,
            rgba(44, 44, 44, 0.22) 62%,
            rgba(44, 44, 44, 0.06) 82%,
            rgba(44, 44, 44, 0) 100%
        ),
        image-set(
            url("images/quote-opening.webp") type("image/webp"),
            url("images/quote-opening.jpg") type("image/jpeg")
        );
    background-position: 84% center;
}

/* Opening quote — mobile: drop photo for a centred cinematic slab */
@media (max-width: 720px) {
    .profile-quote.profile-quote--opening.profile-quote--opening-photo {
        justify-content: center;
        text-align: center;
        align-items: center;
        min-height: clamp(17.5rem, 48vmin, 24rem);
        padding-block: clamp(3rem, 11vw, 5rem);
        background-color: var(--color-primary-dark);
        background-image:
            radial-gradient(
                ellipse 130% 90% at 50% -10%,
                rgba(189, 173, 123, 0.07) 0%,
                transparent 52%
            ),
            linear-gradient(165deg, #343434 0%, #2C2C2C 52%, #2a2826 100%);
        background-size: auto, auto;
        background-position: center, center;
        background-repeat: no-repeat;
        background-attachment: scroll, scroll;
    }

    .profile-quote--opening-photo .profile-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .profile-quote--opening-photo .profile-quote__text {
        max-width: min(38ch, 100%);
        margin-inline: auto;
        text-align: center;
        font-size: clamp(1.3rem, 4.85vw, 1.82rem);
        line-height: 1.43;
        letter-spacing: -0.01em;
        text-wrap: balance;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.45),
            0 2px 24px rgba(0, 0, 0, 0.25);
    }

    .profile-quote--opening-photo .profile-quote__text::before,
    .profile-quote--opening-photo .profile-quote__text::after {
        margin-inline: auto;
        background-color: rgba(244, 240, 227, 0.38);
    }
}

/* Hero — keep face unobstructed */
@media (max-width: 720px) {
    .profile-hero {
        align-items: flex-end;
        justify-content: center;
        padding-bottom: max(
            env(safe-area-inset-bottom, 0px),
            clamp(2.75rem, 12vh, 5.5rem)
        );
    }

    .profile-hero__content {
        margin-bottom: clamp(0.5rem, 3vh, 1.75rem);
    }
}

@media (min-width: 721px) {
    .profile-hero .profile-hero__content {
        margin-top: clamp(4.25rem, 11vh, 10rem);
    }
}

/* Closing quote — quote-closing cinematic layers */
.profile-quote.profile-quote--closing-photo {
    isolation: isolate;
}

.profile-quote.profile-quote--closing-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 55% 48% at 40% 42%,
            rgba(255, 247, 236, 0.06) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 130% 115% at 50% 50%,
            transparent 35%,
            rgba(10, 9, 12, 0.35) 72%,
            rgba(6, 5, 8, 0.72) 100%
        );
    opacity: 1;
}

@media (min-width: 721px) {
    .profile-quote.profile-quote--closing-photo {
        background-image:
            linear-gradient(
                90deg,
                rgba(12, 11, 14, 0.14) 0%,
                rgba(12, 11, 14, 0.05) 28%,
                rgba(12, 11, 14, 0.28) 58%,
                rgba(8, 7, 10, 0.82) 100%
            ),
            linear-gradient(
                165deg,
                rgba(22, 20, 24, 0.55) 0%,
                rgba(22, 20, 24, 0.18) 32%,
                transparent 52%,
                rgba(18, 16, 20, 0.12) 100%
            ),
            radial-gradient(
                ellipse 95% 90% at 38% 44%,
                rgba(6, 5, 8, 0) 0%,
                rgba(6, 5, 8, 0.12) 45%,
                rgba(6, 5, 8, 0.45) 100%
            ),
            image-set(
                url("images/quote-closing.webp") type("image/webp"),
                url("images/quote-closing.jpg") type("image/jpeg")
            );
        background-size: cover, cover, cover, 112% auto;
        background-position:
            center center,
            center center,
            center center,
            40% 42%;
        background-repeat: no-repeat;
        background-attachment: scroll, scroll, scroll, fixed;
    }

    .profile-quote.profile-quote--closing-photo::before {
        background:
            radial-gradient(
                ellipse 50% 45% at 38% 41%,
                rgba(255, 244, 232, 0.07) 0%,
                transparent 50%
            ),
            radial-gradient(
                ellipse 125% 110% at 48% 48%,
                transparent 38%,
                rgba(8, 7, 10, 0.4) 70%,
                rgba(4, 3, 6, 0.78) 100%
            );
    }

    .profile-quote--closing-photo .profile-quote__text {
        text-shadow:
            0 1px 22px rgba(0, 0, 0, 0.65),
            0 2px 42px rgba(0, 0, 0, 0.45),
            0 0 1px rgba(0, 0, 0, 0.9);
    }
}

@media (max-width: 720px) {
    .profile-quote.profile-quote--closing-photo {
        place-items: start center;
        min-height: clamp(26rem, 90vw, 38rem);
        padding-block-start: clamp(8rem, 44vw, 14rem);
        padding-block-end: clamp(2rem, 5vw, 3.5rem);
        background-image:
            linear-gradient(
                180deg,
                rgba(16, 14, 18, 0.88) 0%,
                rgba(16, 14, 18, 0.38) 28%,
                rgba(16, 14, 18, 0.16) 48%,
                rgba(12, 10, 14, 0.72) 100%
            ),
            linear-gradient(
                195deg,
                rgba(20, 18, 22, 0.55) 0%,
                transparent 42%
            ),
            radial-gradient(
                ellipse 100% 75% at 50% 36%,
                rgba(5, 4, 7, 0) 0%,
                rgba(5, 4, 7, 0.22) 45%,
                rgba(5, 4, 7, 0.55) 100%
            ),
            image-set(
                url("images/quote-closing.webp") type("image/webp"),
                url("images/quote-closing.jpg") type("image/jpeg")
            );
        background-size: cover, cover, cover, cover;
        background-position:
            center center,
            center center,
            center center,
            50% 28%;
        background-repeat: no-repeat;
        background-attachment: scroll, scroll, scroll, scroll;
    }

    .profile-quote.profile-quote--closing-photo::before {
        background:
            radial-gradient(
                ellipse 70% 55% at 50% 30%,
                rgba(255, 244, 232, 0.05) 0%,
                transparent 55%
            ),
            radial-gradient(
                ellipse 120% 100% at 50% 55%,
                transparent 32%,
                rgba(8, 7, 10, 0.38) 68%,
                rgba(4, 3, 6, 0.78) 100%
            );
    }

    .profile-quote--closing-photo .profile-quote__text {
        text-shadow:
            0 2px 28px rgba(0, 0, 0, 0.72),
            0 1px 8px rgba(0, 0, 0, 0.88);
    }
}

@media (max-width: 480px) {
    .profile-quote.profile-quote--closing-photo {
        min-height: clamp(24rem, 92vw, 34rem);
        padding-block-start: clamp(7.5rem, 46vw, 13rem);
        background-position:
            center center,
            center center,
            center center,
            50% 28%;
    }
}

#service,
#kim-legacy {
    scroll-margin-top: var(--profile-scroll-offset);
}

@media (prefers-reduced-motion: reduce) {
    .profile-quote.profile-quote--closing-photo {
        background-attachment: scroll, scroll, scroll, scroll !important;
    }
}