/*
 * Per-design stylesheet for the Profile hero.
 *
 * Port of the abandoned 2022 Next.js prototype's RegistryHero. All rules
 * are scoped under `.profile-header` so they never leak onto Classic /
 * Cover / Featured / Elegant rows. No `body { ... }` rules — admins who
 * override `body.registry { ... }` via Registry.CustomCSS must still win
 * on specificity. No `!important` anywhere.
 *
 * Loaded from Web/Views/Registry/Gifts2.cshtml inside @section Styles
 * BEFORE the inline <style> block (font-settings, CoverColor,
 * Registry.CustomCSS), so per-registry overrides win on cascade order.
 */
.profile-header {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background-color: #1f2937;
    min-height: 480px;
}

.profile-header__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

.profile-header__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.profile-header__container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 24px;
}

.profile-header__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.profile-avatar {
    display: block;
    /* px not rem: the registry pages declare `html { font-size: 10px }` (a
       1rem=10px reset), so the 5rem we used to write evaluated to 50px
       instead of the intended 80px. Locking to px makes the design intent
       survive the root-font-size reset. */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    object-fit: cover;
    background-color: #6b7280;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.profile-avatar--fallback {
    /* Default to the brand teal so the placeholder reads as intentional even
       when no CoverBgColor is set (the partial passes CoverBgColor inline
       when present, which still overrides this on cascade). Previously
       defaulted to a neutral grey that disappeared against dark photos. */
    background-color: #0CAD9A;
}

.profile-header__text {
    max-width: 720px;
}

.profile-header__title {
    margin: 0;
    color: #ffffff;
    font-weight: 800;
    /* clamp ramps from 40px on tiny phones to 96px on wide desktops. Px,
       not rem, because the registry pages reset `html { font-size: 10px }`
       and rem would render at 62.5% of intent (25–60px instead of 40–96).
       Previous range topped out at 72px, which read as small once the cover
       photo took the full viewport width — the title is the design's
       primary signal so it should occupy real estate. */
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1.1;
    overflow-wrap: break-word;
    /* Soft drop shadow so the title stays legible across arbitrary user
       cover photos without forcing the .profile-header__overlay alpha higher
       (which would muddy bright photography). */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.profile-header__divider {
    width: 80px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    margin: 16px auto;
}

.profile-header__description {
    color: #f3f4f6;
    font-size: 18px;
    line-height: 1.5;
    margin: 8px 0 16px;
    white-space: pre-line;
}

.profile-header__location,
.profile-header__hashtag,
.profile-header__date {
    display: inline-block;
    color: #e5e7eb;
    font-size: 15px;
    margin: 4px 8px;
}

@media (min-width: 768px) {
    .profile-header {
        min-height: 560px;
        /* Buffer between the site navbar and the colored hero so the design
           doesn't read as jammed against the header. Padding-top inside the
           container already pushes the title 96px down, but that's inside the
           colored region — this margin creates the visible white-space gap. */
        margin-top: 32px;
    }

    .profile-header__container {
        padding: 96px 32px;
    }

    .profile-header__row {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 48px;
    }

    .profile-avatar {
        /* Larger on desktop so the avatar reads as the primary identity
           anchor next to the title, not a marginal accent. Px not rem —
           see top-of-file note on the registry 10px html font-size reset. */
        width: 160px;
        height: 160px;
    }

    .profile-header__divider {
        margin: 16px 0;
    }
}