/* ==========================================================
   ÉLAN Hero
   Version: 0.2.0
========================================================== */

/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 100svh;

    overflow: hidden;

    background: var(--color-background);

    isolation: isolate;

}

/* ==========================================================
   HERO IMAGE
========================================================== */

.hero__image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.05);

    will-change: transform;

}

/* ==========================================================
   HERO OVERLAY
========================================================== */

.hero__overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.18),
            rgba(0,0,0,.32)
        );

}

/* ==========================================================
   HERO CONTENT
========================================================== */

.hero__content {

    position: relative;

    z-index: var(--z-content);

    display: grid;

    place-items: center;

    width: 100%;

    padding-inline: var(--container-padding);

}

/* ==========================================================
   HERO INNER
========================================================== */

.hero__inner {

    display: grid;

    gap: clamp(1rem,2vw,2rem);

    max-width: 760px;

    text-align: center;

}

/* ==========================================================
   DATE
========================================================== */

.hero__date {

    color: rgba(255,255,255,.92);

    text-transform: uppercase;

    letter-spacing: .35rem;

    font-size: var(--font-size-sm);

    font-weight: 500;

}

/* ==========================================================
   TITLE
========================================================== */

.hero__title {

    color: white;

    text-wrap: balance;

    text-shadow:

        0 4px 18px rgba(0,0,0,.18);

}

/* ==========================================================
   AMPERSAND
========================================================== */

.hero__ampersand {

    display: block;

    margin-block: .35rem;

    color: var(--color-primary);

    font-size: .65em;

    font-weight: 400;

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator {

    display: grid;

    place-items: center;

    margin-top: clamp(2rem,5vw,4rem);

}

.scroll-indicator span {

    display: block;

    width: 1px;

    height: 70px;

    background: rgba(255,255,255,.8);

    position: relative;

    overflow: hidden;

    border-radius: var(--radius-full);

}

.scroll-indicator span::after {

    content: "";

    position: absolute;

    inset-inline: 0;

    top: -30%;

    height: 30%;

    background: white;

}

/* ==========================================================
   HERO CONTENT SPACING
========================================================== */

.hero__inner > * {

    margin: 0;

}