/*
 * Per-design stylesheet for the Elegant hero.
 *
 * Minimalist editorial layout: near-white background driven by an inline
 * `--cover-bg` custom property on the partial's outer <header> (default
 * #FAF9F7), large serif headline (Playfair Display), narrow centered
 * column, hairline divider. Optional full-bleed cover photo under a dark
 * scrim (added post-fn-5; colour-only when no cover is set). No swirls,
 * no scroll-arrow.
 *
 * All rules are scoped under `.elegant-hero` so they never leak onto
 * Classic / Cover / Profile / Featured 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.
 *
 * Heading font composes with the existing font-settings selector in
 * Gifts2.cshtml: `header.elegant-hero h1...h6` is added to the same
 * selector list that already targets split-header / single-header /
 * profile-header / featured-cover. When the admin sets a custom
 * HeadingFont via FontSettingsJson, that inline <style> wins (loaded
 * after this file). When no custom font is set, the rules below pick
 * Playfair Display as the design's signature.
 */
.elegant-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--cover-bg, #FAF9F7);
    /* --cover-fg is set inline by the partial and derived from CoverBgColor
       luminance in BuildCoverElegantVm (light text on dark bg, dark text on
       light bg; forced white when a cover photo renders under the scrim).
       Falls back to near-black for the default near-white case when the
       inline custom property is missing. */
    color: var(--cover-fg, #111111);
    padding: clamp(48px, 10vh, 160px) 24px;
    text-align: center;
}

/* Optional cover photo + scrim (rendered by the partial only when the
   registry has a cover image). Same layering as .profile-header__bg /
   __overlay: photo at z-0, scrim at z-1, text container above both. */
.elegant-hero__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;
}

.elegant-hero__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Solid black at 0.6 opacity — the Auto default. The partial overrides
       the opacity inline with the owner's Fade Cover Photo choice when one
       is set (Auto/0 keeps this 0.6). 0.6 (not Profile's 0.5) because a
       pure-white cover under 0.5 black blends to ~#808080 and opaque white
       text only reaches ~3.95:1 (fails AA); at 0.6 the blend is ~#666666
       → ~5.7:1. An explicit lighter fade is the owner's contrast call. */
    background-color: #000;
    opacity: 0.6;
    z-index: 1;
}

.elegant-hero__container {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

/* Over a cover photo (the __bg sibling only renders when one exists), lift
   the text the same way .profile-header__title does, and make the meta /
   monogram fully opaque — their translucent defaults were contrast-tuned
   for the flat near-white background, not a photo. */
.elegant-hero__bg ~ .elegant-hero__container {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.elegant-hero__bg ~ .elegant-hero__container .elegant-hero__monogram,
.elegant-hero__bg ~ .elegant-hero__container .elegant-hero__location,
.elegant-hero__bg ~ .elegant-hero__container .elegant-hero__hashtag,
.elegant-hero__bg ~ .elegant-hero__container .elegant-hero__date {
    opacity: 1;
}

.elegant-hero__monogram {
    font-family: "Playfair Display", "Times New Roman", serif;
    /* Px not rem across this file: the registry pages declare
       `html { font-size: 10px }` (a 1rem=10px reset), which silently
       shrank every elegant text element to 62.5% of intent — monogram
       was rendering at 8.75px instead of 14px, description at 10.625px
       instead of 17px, etc. Locking to px insulates the design from the
       global root-font-size reset. */
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 24px;
    color: currentcolor;
    opacity: 0.7;
}

.elegant-hero__title {
    font-family: "Playfair Display", "Times New Roman", serif;
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    color: currentcolor;
    overflow-wrap: break-word;
}

.elegant-hero__divider {
    width: 64px;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.3;
    margin: 24px auto;
}

.elegant-hero__description {
    font-size: 17px;
    line-height: 1.6;
    margin: 16px 0;
    color: currentcolor;
    white-space: pre-line;
    /* The hero clips overflow (cover-photo layering), so an unbroken run
       (long URL/identifier) must wrap instead of being cut off. */
    overflow-wrap: anywhere;
}

.elegant-hero__location,
.elegant-hero__hashtag,
.elegant-hero__date {
    display: inline-block;
    font-size: 15px;
    margin: 4px 8px;
    color: currentcolor;
    opacity: 0.85;
    /* The hero clips overflow (cover-photo layering), so an unbroken
       hashtag/location must wrap instead of being cut off. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    /* Mirrors the desktop buffer applied to .profile-header and
       .featured-cover. The elegant-hero already has clamp(48px, 10vh, 160px)
       internal padding-top, but the minimalist 0.875rem monogram + the near-
       white --cover-bg (#FAF9F7) bleeding into the navbar reads as cramped
       without an explicit gap between navbar and hero. */
    .elegant-hero {
        margin-top: 32px;
    }

    .elegant-hero__container {
        padding: 0 16px;
    }

    .elegant-hero__divider {
        margin: 32px auto;
    }
}