/*
 * 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. No cover image, 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 {
    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). 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;
}

.elegant-hero__container {
    max-width: 640px;
    margin: 0 auto;
}

.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;
}

.elegant-hero__location,
.elegant-hero__hashtag,
.elegant-hero__date {
    display: inline-block;
    font-size: 15px;
    margin: 4px 8px;
    color: currentcolor;
    opacity: 0.85;
}

@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;
    }
}