/*
================================================

Space Vanta Theme 1.0

Module:
Hero

File:
public/hero/hero.css

Version:
1.0

Purpose:
Hero base visual system

Responsibilities:
- Hero viewport
- Hero height
- Media positioning
- Desktop / Mobile image switching
- Content positioning
- Typography
- CTA
- Wordmark extension point

================================================
*/


/*
---------------------------------
01. Hero
---------------------------------
*/

.sv-hero {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    box-sizing: border-box;

}


/*
---------------------------------
02. Viewport
---------------------------------
*/

.sv-hero__viewport {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}


/*
---------------------------------
03. Track Height
---------------------------------
*/

.sv-hero__track {

    height: 100%;

}


/*
---------------------------------
04. Slide
---------------------------------
*/

.sv-hero__slide {

    position: relative;

    width: 100%;

    height: 100%;

    box-sizing: border-box;

    overflow: hidden;

}


/*
---------------------------------
05. Media
---------------------------------
*/

.sv-hero__media {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 0;

}


/*
---------------------------------
06. Images
---------------------------------
*/

.sv-hero__image {

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    margin: 0;

    padding: 0;

    object-fit: cover;

}


/*
---------------------------------
07. Desktop Image
---------------------------------
*/

.sv-hero__image--desktop {

    display: block;

    object-position: 55% center;

}


/*
---------------------------------
08. Mobile Image
---------------------------------
*/

.sv-hero__image--mobile {

    display: none;

    object-position: center center;

}


/*
---------------------------------
09. Content
---------------------------------
*/

.sv-hero__content {

    position: absolute;

    z-index: 2;

    box-sizing: border-box;

}


/*
---------------------------------
10. Desktop Content
---------------------------------
*/

.sv-hero__content--desktop {

    display: block;

    left:
        clamp(48px,
            7vw,
            120px);

    top: 50%;

    width: 100%;

    max-width: 500px;

    transform:
        translateY(-50%);

}


/*
---------------------------------
11. Mobile Content
---------------------------------
*/

.sv-hero__content--mobile {

    display: none;

}


/*
---------------------------------
12. Eyebrow
---------------------------------
*/

.sv-hero__eyebrow {

    display: block;

    margin: 0;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 500;

    letter-spacing: .14em;

    text-transform: uppercase;

}


/*
---------------------------------
13. Hero Title
---------------------------------
*/

.sv-hero__title {

    display: block;

    width: 100%;

    max-width: 9ch;

    margin:
        18px 0 0;

    font-size:
        clamp(48px,
            7vw,
            100px);

    line-height: .94;

    font-weight: 500;

    letter-spacing: -.04em;

}


/*
---------------------------------
14. Hero Text
---------------------------------
*/

.sv-hero__text {

    display: block;

    width: 100%;

    max-width: 540px;

    margin:
        28px 0 0;

    font-size: 18px;

    line-height: 1.55;

}


/*
---------------------------------
15. Hero Button
---------------------------------
*/

.sv-hero__button {

    display: inline-flex;

    min-height: 46px;

    margin-top: 32px;

    padding:
        0 22px;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background:
        var(--sv-text);

    color: #fff;

    font-size: 13px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: .01em;

    text-decoration: none;

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.sv-hero__button:hover {

    opacity: .82;

}


.sv-hero__button:active {

    transform:
        translateY(1px);

}


/*
---------------------------------
16. Wordmark Extension
---------------------------------

Hero-specific wordmark styling
is intentionally not defined here.

Reserved selector:

.sv-hero__eyebrow

The visual extension is provided by:

public/brand/hero/wordmark.css

---------------------------------
*/


/*
---------------------------------
17. Mobile
---------------------------------
*/

@media (max-width: 767px) {


    .sv-hero {

        aspect-ratio: 4 / 5;

    }


    /*
    Mobile image
    */

    .sv-hero__image--desktop {

        display: none;

    }


    .sv-hero__image--mobile {

        display: block;

    }


    /*
    Mobile content
    */

    .sv-hero__content--desktop {

        display: none;

    }


    .sv-hero__content--mobile {

        display: block;

        left: 0;

        right: 0;

        bottom: 0;

        width: 100%;

        padding:
            48px var(--sv-mobile-padding) 64px;

    }


    /*
    Mobile typography
    */

    .sv-hero__title {

        max-width: 9ch;

        margin-top: 16px;

        font-size:
            clamp(44px,
                13vw,
                72px);

        line-height: .95;

    }


    .sv-hero__text {

        max-width: 100%;

        margin-top: 22px;

        font-size: 16px;

        line-height: 1.55;

    }


    .sv-hero__button {

        min-height: 44px;

        margin-top: 28px;

        padding:
            0 20px;

        font-size: 13px;

    }

}


/*
---------------------------------
18. Small Mobile
---------------------------------
*/

@media (max-width: 374px) {


    .sv-hero {

        min-height: 70vh;

    }


    .sv-hero__content--mobile {

        padding-top: 40px;

        padding-bottom: 52px;

    }


    .sv-hero__title {

        font-size: 42px;

    }


    .sv-hero__text {

        font-size: 15px;

    }

}