/**
 * Fichier  : /pages/about-us/assets/css/hero.css
 * Fonction : hero de la page À propos
 */


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

.hero {
    position: relative;
}

.hero {
    min-height: 100svh;
}

.hero {
    display: flex;
    align-items: flex-end;
}

.hero {
    overflow: hidden;
}

.hero {
    background: var(--main-background, #111);
}

.hero {
    color: #fff;
}


/* ==================================================
   BACKGROUND
================================================== */

.hero > .background {
    position: absolute;
    inset: 0;
}

.hero > .background {
    background-image:
        linear-gradient(
            180deg,
            rgba(10,10,10,.48) 0%,
            rgba(10,10,10,.58) 48%,
            rgba(10,10,10,.88) 100%
        ),
        linear-gradient(
            90deg,
            rgba(10,10,10,.64) 0%,
            rgba(10,10,10,.42) 55%,
            rgba(10,10,10,.58) 100%
        ),
        radial-gradient(
            circle at 75% 30%,
            rgba(196,18,18,.18),
            transparent 38%
        ),
        var(
            --about-hero-active-image,
            var(--about-hero-desktop-image)
        );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


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

.hero > .inner {
    position: relative;
    z-index: 2;
}

.hero > .inner {
    width: min(
        100% - (2 * var(--page-padding, clamp(24px,6vw,100px))),
        1320px
    );
}

.hero > .inner {
    margin: 0 auto;
}

.hero > .inner {
    padding: clamp(9em,16vh,13em) 0 clamp(4em,7vw,7em);
}


/* ==================================================
   KICKER
================================================== */

.hero > .inner > .kicker {
    display: block;
}

.hero > .inner > .kicker {
    font-family: 'bold-font';
    font-size: 8px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.hero > .inner > .kicker {
    color: var(--color-primary);
}


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

.hero > .inner > h1 {
    max-width: 1100px;
}

.hero > .inner > h1 {
    margin-top: .35em;
}

.hero > .inner > h1 {
    font-size: 6em;
    line-height: .82;
    letter-spacing: -.065em;
}


/* ==================================================
   BOTTOM
================================================== */

.hero > .inner > footer {
    margin-top: clamp(3em,6vw,6em);
}

.hero > .inner > footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3em;
}


/* ==================================================
   DESCRIPTION
================================================== */

.hero > .inner > footer > p {
    max-width: 500px;
}

.hero > .inner > footer > p {
    margin: 0;
}

.hero > .inner > footer > p {
    font-family: 'content-font';
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-soft,rgba(255,255,255,.68));
}


/* ==================================================
   LINK
================================================== */

.hero > .inner > footer > a {
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.hero > .inner > footer > a {
    font-family: 'bold-font';
    font-size: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #fff;
}

.hero > .inner > footer > a span {
    font-size: 18px;
    color: var(--color-primary);
}

.hero > .inner > footer > a span {
    transition: translate .3s ease;
}


/* ==================================================
   HOVER
================================================== */

@media
    (hover:hover)
    and (pointer:fine) {

    .hero > .inner > footer > a:hover span {
        translate: 0 5px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width:700px) {


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

    .hero {
        --about-hero-active-image: var( --about-hero-mobile-image, var(--about-hero-desktop-image) );
    }


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

    .hero > .inner {
        width: calc(100% - 2.8em);
    }

    .hero > .inner {
        padding-bottom: 3em;
    }


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

    .hero > .inner > h1 {
        font-size: 3.2em;
    }


    /* ==================================================
       BOTTOM
    ================================================== */

    .hero > .inner > footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2em;
    }

}