/**
 * Shared page hero — experiences, dining, events, etc.
 */

.sv-page-hero {
    position: relative;
    /* Tall enough that a real 3:2 photo still reads as a room or a view, not a strip of texture. */
    min-height: clamp(20rem, 48vh, 32rem);
    display: flex;
    align-items: flex-end;
    padding-block: var(--sv-space-16) var(--sv-space-12);
    margin-top: var(--sv-header-height);
    background-color: var(--sv-color-cedar);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.sv-page-hero--tall {
    min-height: clamp(24rem, 62vh, 40rem);
    align-items: center;
    background-position: center 40%;
}

.sv-page-hero--center {
    align-items: flex-end;
    text-align: center;
}

.sv-page-hero--center .sv-page-hero__inner {
    text-align: center;
}

.sv-page-hero--center .sv-page-hero__title {
    max-width: none;
    margin-inline: auto;
}

.sv-page-hero--center .sv-page-hero__lead {
    margin-inline: auto;
}

.sv-page-hero__scrim {
    position: absolute;
    inset: 0;
    /* Copy sits at the bottom: keep the photo open above it and pool the shade under the text. */
    background:
        linear-gradient(180deg, rgba(12, 14, 12, 0.2) 0%, rgba(12, 14, 12, 0.34) 38%, rgba(8, 10, 9, 0.8) 100%),
        radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

.sv-page-hero--tall .sv-page-hero__scrim {
    background:
        linear-gradient(180deg, rgba(12, 14, 12, 0.18) 0%, rgba(12, 14, 12, 0.3) 42%, rgba(8, 10, 9, 0.82) 100%),
        radial-gradient(ellipse 90% 70% at 50% 20%, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

.sv-page-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--sv-container-content);
    margin-inline: auto;
    padding-inline: var(--sv-space-gutter);
}

.sv-page-hero__title {
    font-family: var(--sv-font-display);
    font-size: var(--sv-text-display-lg);
    line-height: var(--sv-leading-display);
    letter-spacing: var(--sv-tracking-display);
    font-weight: 400;
    color: var(--sv-color-surface);
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
    margin: var(--sv-space-4) 0 0;
    max-width: 18ch;
}

.sv-page-hero--tall .sv-page-hero__title {
    max-width: 22ch;
}

.sv-page-hero__lead {
    font-family: var(--sv-font-body);
    font-size: var(--sv-text-body-lg);
    line-height: var(--sv-leading-relaxed);
    color: rgba(255, 252, 248, 0.9);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
    max-width: 36em;
    margin: var(--sv-space-6) 0 0;
}

.sv-page-hero--center .sv-page-hero__lead {
    max-width: 38em;
}

.sv-page-hero .sv-eyebrow {
    color: var(--sv-color-bronze-light);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

@media (min-width: 48rem) {
    .sv-page-hero--tall {
        align-items: flex-end;
    }

    .sv-page-hero--tall.sv-page-hero--center {
        align-items: flex-end;
    }
}