/* Ron Shemer — profile-specific overrides.
   Shared layout: ../../css/profile-base.css
   Canonical reference: ../kim-dukarker/style.css

   Hero focal point is set on .profile-hero in index.html (--hero-focus / --hero-focus-mobile). */

.profile-about__figure img {
    object-fit: cover;
    object-position: center 18%;
}

@media (max-width: 720px) {
    .profile-about__figure img {
        object-position: center 14%;
    }
}

@media (min-width: 1024px) {
    .profile-about__figure img {
        object-position: center 20%;
    }
}

/* Hero — keep face unobstructed on every viewport (Kim lower-third pattern).
   Ron’s portrait sits in the upper half of the landscape hero, so the name
   and dates stay in the lower third rather than over the face. */
.profile-hero {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: max(
        env(safe-area-inset-bottom, 0px),
        clamp(2.75rem, 10vh, 5.5rem)
    );
}

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

@media (min-width: 721px) {
    .profile-hero .profile-hero__content {
        margin-top: 0;
        margin-bottom: clamp(1.75rem, 7vh, 4rem);
    }
}

/* Desktop-only crop for the surf/portrait composite. Tablet keeps --hero-focus. */
@media (min-width: 1024px) {
    .profile-hero__bg {
        object-position: 78% 28%;
    }
}

#ron-legacy {
    scroll-margin-top: var(--profile-scroll-offset);
}

/* Opening-quote band: 1920×600 Vimeo banner covers the existing container. */
.profile-quote--opening {
    overflow: hidden;
    isolation: isolate;
}

.profile-quote--opening .profile-quote__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    clip-path: inset(0);
    pointer-events: none;
}

.profile-quote--opening .profile-quote__video-parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.profile-quote--opening .profile-quote__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    aspect-ratio: 1920 / 600;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

.profile-quote--opening .profile-container {
    z-index: 1;
}

/* Banner video already carries the quote on screen; keep the HTML quote
   for structure and assistive tech without stacking a second copy. */
.profile-quote.profile-quote--opening:not(.profile-quote--opening-photo) .profile-quote__text {
    color: transparent;
    text-shadow: none;
}

.profile-quote.profile-quote--opening:not(.profile-quote--opening-photo) .profile-quote__text::before,
.profile-quote.profile-quote--opening:not(.profile-quote--opening-photo) .profile-quote__text::after {
    content: none;
    display: none;
}

@media (max-width: 720px) {
    .profile-quote.profile-quote--opening {
        display: none;
    }
}

/*
 * Desktop only — match Shalev’s opening-photo shell:
 *   min-height: clamp(21rem, 72vh, 38rem)
 *   padding-block: clamp(2.25rem, 6vw, 4.25rem)
 *   parallax: background-attachment: fixed from 721px in profile-base.css
 *
 * Ron’s 768px tablet band must stay the current short strip, so the taller
 * window and viewport-locked shift start at 1024px (site desktop), not 721px.
 */
@media (min-width: 1024px) {
    .profile-quote.profile-quote--opening {
        min-height: clamp(21rem, 72vh, 38rem);
        padding-block: clamp(2.25rem, 6vw, 4.25rem);
        overflow: hidden;
    }

    .profile-quote--opening .profile-quote__video-parallax {
        inset: auto;
        top: 0;
        left: 0;
        width: 100%;
        /* Cover the section plus a short overrun so parallax can move
           without sizing the iframe to the full viewport (100vh). */
        height: calc(100% + 4.5rem);
        will-change: transform;
        filter: none;
        transform: translateZ(0);
    }

    .profile-quote--opening .profile-quote__video iframe {
        top: 50%;
        left: 0;
        width: auto;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        max-width: none;
        aspect-ratio: 1920 / 600;
        transform: translate(0, -50%);
        filter: none;
        image-rendering: auto;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .profile-quote--opening .profile-quote__video-parallax {
        inset: 0;
        width: auto;
        height: auto;
        transform: none !important;
        will-change: auto;
    }

    .profile-quote--opening .profile-quote__video iframe {
        top: 50%;
        left: 0;
        height: 100%;
        transform: translate(0, -50%);
    }
}

#memorial-gallery .profile-gallery__item--pos-cafe img { object-position: center 18%; }
#memorial-gallery .profile-gallery__item--pos-overlook img { object-position: center 68%; }
#memorial-gallery .profile-gallery__item--pos-surf img { object-position: center 20%; }
#memorial-gallery .profile-gallery__item--pos-stacked img { object-position: 54% center; }
#memorial-gallery .profile-gallery__item--pos-coconut img { object-position: center 18%; }
#memorial-gallery .profile-gallery__item--pos-stars img { object-position: 32% 18%; }
#memorial-gallery .profile-gallery__item--pos-bench img { object-position: center 22%; }
#memorial-gallery .profile-gallery__item--pos-glide img { object-position: 42% 28%; }
#memorial-gallery .profile-gallery__item--pos-handstand img { object-position: center 55%; }
#memorial-gallery .profile-gallery__item--pos-salt img { object-position: center 55%; }
#memorial-gallery .profile-gallery__item--pos-horses img { object-position: center 48%; }
#memorial-gallery .profile-gallery__item--pos-glacier img { object-position: center 20%; }
#memorial-gallery .profile-gallery__item--pos-dog img { object-position: center 28%; }
#memorial-gallery .profile-gallery__item--pos-portrait img { object-position: center 16%; }
#memorial-gallery .profile-gallery__item--pos-child img { object-position: center 16%; }
#memorial-gallery .profile-gallery__item--pos-boys img { object-position: center 16%; }
#memorial-gallery .profile-gallery__item--pos-hug img { object-position: center 22%; }
#memorial-gallery .profile-gallery__item--pos-chair img { object-position: center 18%; }