/* ==========================================================================
   Delta Auriga
   Hero Styles
   ========================================================================== */

/**
 * Hero
 * Hero Overlay
 * Hero Container
 * Hero Content
 * Hero Badge
 * Hero Typography
 * Hero Description
 * Hero Buttons
 * Hero Scroll Indicator
 * Responsive
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.auriga-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    overflow: hidden;
    isolation: isolate;

    background-image:
    linear-gradient(
        rgba(10,16,32,.15),
        rgba(10,16,32,.15)
    ),
    url("../images/hero-image.png");

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* ==========================================================================
   Hero Overlay
   ========================================================================== */

.auriga-hero::before {

    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(11,17,32,.82) 0%,
        rgba(11,17,32,.60) 30%,
        rgba(11,17,32,.28) 60%,
        rgba(11,17,32,.08) 100%
    );

    z-index: 1;

}

/* ==========================================================================
   Hero Container
   ========================================================================== */

.auriga-hero__container {

    position: relative;
    z-index: 2;

    width: min(1280px,100%);
    margin-inline: auto;

    padding:
        clamp(5rem,8vw,8rem)
        clamp(2rem,6vw,6rem);

}

.auriga-hero__content {

     width: min(960px, 100%);

}

/* ==========================================================================
   Badge
   ========================================================================== */

.auriga-hero__badge {

    margin: 0 0 2rem;

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: .28em;

    text-transform: uppercase;

    color: var(--wp--preset--color--text);

    opacity: .85;

}

/* ==========================================================================
   Typography
   ========================================================================== */

.auriga-hero__title {

    margin: 0;

    font-size: clamp(4rem,7vw,6.5rem);

    line-height: .92;

    font-weight: 700;

    color: var(--wp--preset--color--text);

}

.auriga-hero__of {

    margin: 1.25rem 0 .5rem;

    font-size: 2rem;

    line-height: 1;

    color: var(--wp--preset--color--text-muted);

}

.auriga-hero__highlight {

    margin: 0;

    padding-bottom: .25rem;

    font-size: clamp(4.8rem,8vw,7rem);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.04em;

    background: linear-gradient(
        180deg,
        #FFE59A 0%,
        #F4C85C 45%,
        #C88D1E 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

}

/* ==========================================================================
   Description
   ========================================================================== */

.auriga-hero__description {

    margin-top: 2rem;

    max-width: 560px;

    font-size: 1.2rem;

    line-height: 1.8;

    color: var(--wp--preset--color--text);

    opacity: .92;

}

/* ==========================================================================
   Buttons
   ========================================================================== */

.auriga-hero__buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 1.25rem;

    margin-top: 3rem;

}

.auriga-hero__buttons .wp-block-button__link {

    min-width: 220px;

    border-radius: 999px;

    padding: 1rem 2rem;

    font-weight: 600;

    transition: all .3s ease;

}

.auriga-hero__buttons .wp-block-button:first-child
.wp-block-button__link {

    background: var(--wp--preset--color--primary);

    color: #111;

}

.auriga-hero__buttons .wp-block-button:first-child
.wp-block-button__link:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 30px rgba(244,200,92,.35);

}

.is-style-outline .wp-block-button__link {

    border: 2px solid rgba(255,255,255,.85);

    color: #fff;

    background: transparent;

}

.is-style-outline .wp-block-button__link:hover {

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

}

/* ==========================================================================
   Scroll Indicator
   ========================================================================== */

.auriga-hero__scroll {

    margin-top: 4rem;

    font-size: 2rem;

    opacity: .7;

    animation: auriga-scroll 2s infinite;

}

@keyframes auriga-scroll {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {

    .auriga-hero {

        align-items: center;

        background-attachment: scroll;

    }

    .auriga-hero__container {

        padding: 5rem 2rem;

    }

    .auriga-hero__content {

        max-width: 100%;

    }

}

@media (max-width: 768px) {

    .auriga-hero {

        min-height: auto;

        padding: 6rem 0;

        background-attachment: scroll;

    }

    .auriga-hero__title {

        font-size: clamp(3rem,10vw,4.5rem);

    }

    .auriga-hero__highlight {

        font-size: clamp(3.5rem,11vw,5rem);

    }

    .auriga-hero__description {

        font-size: 1.05rem;

    }

    .auriga-hero__buttons {

        flex-direction: column;

    }

    .auriga-hero__buttons .wp-block-button {

        width: 100%;

    }

    .auriga-hero__buttons .wp-block-button__link {

        width: 100%;

    }

}