/* ==========================================================================
   Home hero — placeholder section, built mainly so the transparent header can
   be seen in its real context. Content and art direction still to be refined.
   ========================================================================== */

.hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background-color: var(--bb-black);
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

/* picture needs a definite box of its own, or the img's height:100% resolves
   against auto and the photo overflows instead of being cropped. */
.hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Frame is 3:2 against a much wider viewport, so trim sky rather than pool. */
    object-position: 50% 62%;
}

/*
 * The scrim the template bakes into its render. It carries the copy contrast,
 * so the left ramp has to stay strong while the bar and pool keep their glow.
 */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            100deg,
            rgba(0, 0, 0, 0.94) 0%,
            rgba(0, 0, 0, 0.86) 20%,
            rgba(0, 0, 0, 0.6) 38%,
            rgba(0, 0, 0, 0.26) 54%,
            rgba(0, 0, 0, 0.06) 70%,
            rgba(0, 0, 0, 0.16) 100%
        ),
        /* Clear through the middle: the two layers multiply, so any overlap
           here is what drains the pool and the bar lights. */
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.5) 0%,
                transparent 28%,
                transparent 72%,
                rgba(0, 0, 0, 0.16) 100%
            );
}

.hero__inner {
    width: 100%;
    max-width: var(--bb-shell);
    margin-inline: auto;
    padding: calc(var(--bb-logo-h) + 3rem) var(--bb-gutter) clamp(3rem, 8vh, 7rem);
}

.hero__content {
    max-width: 46rem;
}

/* Line sizes mirror the template: lines 1-2 share one size, line 3 steps down. */
.hero__title {
    margin: 0;
    color: #fff;
    font-family: var(--bb-font-display);
    font-size: clamp(2.25rem, 1rem + 5.2vw, 6.1875rem);
    font-weight: 700;
    line-height: 0.96;
    text-transform: uppercase;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.hero__title-line {
    display: block;
    /* Shrink-to-fit keeps the gold gradient box the width of the word itself. */
    width: fit-content;
}

.hero__title-line--sm {
    font-size: clamp(1.625rem, 0.75rem + 3.7vw, 4.375rem);
}

.hero__title-line--gold {
    background: linear-gradient(
        180deg,
        var(--bb-gold-100) 0%,
        var(--bb-gold-400) 42%,
        var(--bb-gold-500) 72%,
        var(--bb-gold-700) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.hero__rule {
    margin-block: clamp(1.25rem, 3vh, 2.25rem);
}

.hero__lead {
    max-width: 30rem;
    color: var(--bb-text-muted);
    font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem);
    line-height: 1.75;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin-top: clamp(1.75rem, 4vh, 3rem);
}

.hero__actions .btn {
    padding-block: 1.15em;
    padding-inline: 1.85em;
}

/*
 * Portrait viewports crop most of the frame's width away, so aim at the bar
 * and pool and swap the left-hand ramp for a vertical scrim — at this crop
 * there is no dark side left for the copy to sit on.
 */
@media (max-width: 780px) {
    .hero__media img {
        object-position: 68% center;
    }

    .hero__media::after {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.66) 0%,
            rgba(0, 0, 0, 0.46) 40%,
            rgba(0, 0, 0, 0.7) 100%
        );
    }
}