/* Shaked Dahan: quote-band layout and image crops.
   Shared layout: ../../css/profile-base.css */

.profile-hero {
    --hero-focus: center;
    /* hero-mobile-military (691×1024): night portrait, face upper-centre.
       Anchor high so beanie and chin stay in frame on narrow viewports. */
    --hero-focus-mobile: center 28%;
    /* Keep name + dates as one centred block, sitting in the lower
       cover so they do not cover the faces in the split portrait. */
    align-items: flex-end;
    justify-content: center;
    padding-bottom: clamp(1.5rem, 3.2vh, 2.25rem);
}

.profile-hero__content {
    max-width: min(92vw, 74rem);
}

@media (min-width: 1101px) {
    .profile-hero {
        padding-bottom: clamp(1.5rem, 3vh, 2rem);
    }
}

@media (min-width: 721px) and (max-width: 1100px) {
    .profile-hero {
        padding-bottom: clamp(2rem, 5.5vh, 3.25rem);
    }
}

@media (max-width: 767px) {
    .profile-hero {
        padding-bottom: max(
            env(safe-area-inset-bottom, 0px),
            clamp(1.75rem, 5.5vh, 2.75rem)
        );
    }
}

/* Override the global img/picture reset (`max-width: 100%; height: auto`)
   so the hero fills its frame with cover-crop, never stretch. */
.profile-hero > picture {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

.profile-hero__bg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .profile-hero__bg {
        object-position: var(--hero-focus-mobile, center 28%);
    }
}

@media (max-width: 379px) {
    .profile-hero {
        --hero-focus-mobile: center 26%;
    }
}

@media (max-width: 340px) {
    .profile-hero {
        --hero-focus-mobile: center 24%;
    }
}

/* Tall tablets still use the 16:9 split photo; bias left so adult
   Shaked stays in frame instead of the centre seam. */
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
    .profile-hero__bg {
        object-position: 22% 30%;
    }
}

.profile-media-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background:
        linear-gradient(
            165deg,
            rgba(44, 44, 44, 0.35) 0%,
            rgba(28, 27, 26, 0.2) 42%,
            rgba(15, 14, 13, 0.45) 100%
        ),
        linear-gradient(145deg, #4a4743 0%, #2c2a28 52%, #171615 100%);
}

.profile-media-placeholder--video {
    min-height: 100%;
}

/* Military portrait is 576×1024 (9:16) with the cap at the top of
   the frame. The shared 4:5 cover crop cut the head. Match the native
   ratio and contain so nothing is stretched or clipped. A little
   padding keeps breathing room above the cap. */
#his-story .profile-couple__figure {
    aspect-ratio: 9 / 16;
    max-width: min(100%, 22rem);
    padding-top: 0.85rem;
    box-sizing: content-box;
}

#his-story .profile-couple__figure img {
    object-fit: contain;
    object-position: center top;
}

/* About portrait is native 9:16 in a 4:5 frame. Bias toward his face
   so the pool float crop does not sit too low. */
.profile-about__figure img {
    object-position: center 32%;
}

/* Landscape gallery still (selfie of three) needs a wider tile so
   faces on both sides are not cover-cropped in the 3:4 frame. */
#memorial-gallery .profile-gallery__item--landscape {
    width: calc(var(--gallery-item-width) * 1.38);
}

#memorial-gallery .profile-gallery__item--landscape .profile-gallery__figure {
    aspect-ratio: 4 / 3;
}

/* Opening quote: compact dark band that wraps the quote, not a second hero */
.profile-quote.profile-quote--opening.profile-quote--opening-photo {
    min-height: 0;
    justify-content: center;
    padding-block: clamp(1.35rem, 2.8vw, 2.15rem);
    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%
        ),
        linear-gradient(145deg, #4a4743 0%, #2c2a28 48%, #171615 100%);
    background-size: cover, cover;
    background-position:
        center center,
        84% center;
}

.profile-quote--opening.profile-quote--opening-photo .profile-container {
    max-width: min(920px, 100%);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 2rem);
}

.profile-quote--opening.profile-quote--opening-photo .profile-quote__text {
    max-width: 100%;
    margin-inline: 0;
    text-align: left;
}

.profile-quote--opening.profile-quote--opening-photo .profile-quote__text::before {
    margin-bottom: clamp(0.85rem, 1.8vw, 1.25rem);
}

.profile-quote--opening.profile-quote--opening-photo .profile-quote__text::after {
    margin-top: clamp(0.85rem, 1.8vw, 1.25rem);
}

/* Closing quote: compact band like the opening (no photo supplied) */
.profile-quote.profile-quote--closing-photo {
    min-height: 0;
    justify-content: center;
    place-items: center;
    padding-block: clamp(1.35rem, 2.8vw, 2.15rem);
    background-image:
        linear-gradient(
            90deg,
            rgba(44, 44, 44, 0.28) 0%,
            rgba(44, 44, 44, 0.06) 24%,
            transparent 48%
        ),
        linear-gradient(145deg, #3d3a36 0%, #2c2a28 52%, #1a1918 100%);
    background-size: cover, cover;
    background-position:
        center center,
        68% center;
}

.profile-quote--closing-photo .profile-container {
    grid-template-columns: 1fr;
    max-width: min(920px, 100%);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 2rem);
}

.profile-quote--closing-photo .profile-quote__text {
    grid-column: 1;
    max-width: 100%;
    margin-inline: 0;
    text-align: left;
}

.profile-quote--closing-photo .profile-quote__text::before,
.profile-quote--closing-photo .profile-quote__text::after {
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 720px) {
    .profile-quote.profile-quote--opening.profile-quote--opening-photo {
        min-height: 0;
        padding-block: clamp(1.35rem, 4.5vw, 1.85rem);
        background-image:
            linear-gradient(
                185deg,
                rgba(44, 44, 44, 0.91) 0%,
                rgba(44, 44, 44, 0.72) 28%,
                rgba(44, 44, 44, 0.45) 55%,
                rgba(44, 44, 44, 0.2) 100%
            ),
            linear-gradient(165deg, #4a4743 0%, #2c2a28 52%, #171615 100%);
        background-position:
            center center,
            82% 32%;
    }

    .profile-quote--opening.profile-quote--opening-photo .profile-container {
        display: block;
        width: 100%;
        max-width: min(920px, 100%);
        padding-inline: clamp(1.25rem, 5.5vw, 1.75rem);
    }

    .profile-quote--opening.profile-quote--opening-photo .profile-quote__text {
        max-width: 100%;
        margin-inline: 0;
        text-align: left;
    }

    .profile-quote.profile-quote--closing-photo {
        min-height: 0;
        place-items: center;
        padding-block: clamp(1.35rem, 4.5vw, 1.85rem);
        padding-block-start: clamp(1.35rem, 4.5vw, 1.85rem);
        padding-block-end: clamp(1.35rem, 4.5vw, 1.85rem);
        background-image:
            linear-gradient(
                185deg,
                rgba(44, 44, 44, 0.91) 0%,
                rgba(44, 44, 44, 0.72) 28%,
                rgba(44, 44, 44, 0.45) 55%,
                rgba(44, 44, 44, 0.2) 100%
            ),
            linear-gradient(165deg, #3d3a36 0%, #2c2a28 52%, #1a1918 100%);
        background-position:
            center center,
            38% 16%;
    }

    .profile-quote--closing-photo .profile-quote__text {
        text-align: left;
        margin-inline: 0;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .profile-quote.profile-quote--closing-photo {
        min-height: 0;
        padding-block: clamp(1.35rem, 5vw, 1.85rem);
        padding-block-start: clamp(1.35rem, 5vw, 1.85rem);
        padding-block-end: clamp(1.35rem, 5vw, 1.85rem);
    }
}

/* Contextual link to The Tank — October 7 story section */
.profile-story-context {
    margin: clamp(1.75rem, 3.5vw, 2.35rem) 0;
    padding: clamp(1.15rem, 2.5vw, 1.5rem) 0;
    border-top: 1px solid rgba(44, 44, 44, 0.1);
    border-bottom: 1px solid rgba(44, 44, 44, 0.1);
}

.profile-story-context__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    max-width: 36rem;
    min-height: 2.75rem;
    padding: 0.25rem 0;
    color: rgba(44, 44, 44, 0.78);
    text-decoration: none;
    transition: color 0.45s var(--ease, ease);
}

.profile-story-context__text {
    font-size: clamp(1rem, 0.35vw + 0.94rem, 1.08rem);
    font-style: italic;
    line-height: 1.65;
}

.profile-story-context__arrow {
    flex-shrink: 0;
    color: rgba(189, 173, 123, 0.9);
    font-size: 1.05em;
    line-height: 1;
    transition: transform 0.45s var(--ease, ease);
}

@media (hover: hover) and (pointer: fine) {
    .profile-story-context__link:hover,
    .profile-story-context__link:focus-visible {
        color: #2C2C2C;
    }

    .profile-story-context__link:hover .profile-story-context__arrow,
    .profile-story-context__link:focus-visible .profile-story-context__arrow {
        transform: translateX(0.25rem);
    }
}

.profile-story-context__link:focus-visible {
    outline: 2px solid rgba(189, 173, 123, 0.55);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .profile-story-context__link,
    .profile-story-context__arrow {
        transition: none;
    }
}

/* Tribute section: quieter secondary link to The Tank, under Watch the tribute */
.profile-video__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.profile-video__story-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted-on-light);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: gap var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.profile-video__story-link:hover,
.profile-video__story-link:focus-visible {
    color: var(--color-text-on-light);
    border-bottom-color: currentColor;
}

.profile-video__story-link:focus-visible {
    outline: 1px solid var(--color-accent-on-light);
    outline-offset: 3px;
}

.profile-video__story-link:hover .profile-video__cta-arrow,
.profile-video__story-link:focus-visible .profile-video__cta-arrow {
    transform: translateX(3px);
}

@media (max-width: 720px) {
    .profile-video__actions {
        align-items: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-video__story-link,
    .profile-video__story-link .profile-video__cta-arrow {
        transition: none;
    }
}