/**
 * ==========================================================================
 * INSTALL COMMUNICATION 33
 * HERO BOUTIQUE
 * Fichier : assets/css/shop/hero.css
 * ==========================================================================
 */


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

.ic33-shop-hero {
    position: relative;

    width: 100%;
    max-width: none;

    height: 400px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #091726;
}


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

.ic33-shop-hero__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


.ic33-shop-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center right;
}


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

.ic33-shop-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 18, 31, .88) 0%,
            rgba(5, 18, 31, .72) 28%,
            rgba(5, 18, 31, .35) 52%,
            rgba(5, 18, 31, .08) 78%,
            rgba(5, 18, 31, 0) 100%
        );
}


/* ==========================================================================
   CONTENEUR INTERNE
========================================================================== */

.ic33-shop-hero > .ic33-container {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    width: 100%;
    max-width: 100%;
    height: 100%;

    margin: 0;

    padding-left: clamp(40px, 5vw, 90px);
    padding-right: clamp(40px, 5vw, 90px);
}


/* ==========================================================================
   CONTENU
========================================================================== */

.ic33-shop-hero__content {
    width: 100%;
    max-width: 570px;

    padding: 0;
    margin: 0;
}


/* ==========================================================================
   SUR-TITRE
========================================================================== */

.ic33-shop-hero__eyebrow {
    display: block;

    margin: 0 0 12px;

    font-size: .76rem;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #f58220;
}


/* ==========================================================================
   TITRE
========================================================================== */

.ic33-shop-hero__title {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    line-height: .90;
}


.ic33-shop-hero__title-light {
    display: block;

    font-size: clamp(2.6rem, 4vw, 4.4rem);
    line-height: .95;

    font-weight: 300;

    letter-spacing: -.03em;

    color: #ffffff;
}


.ic33-shop-hero__title-accent {
    display: block;

    margin-top: 5px;

    font-size: clamp(3.2rem, 5vw, 5.2rem);
    line-height: .95;

    font-weight: 800;

    letter-spacing: -.04em;

    color: var(--ic33-primary, #0875d1);
}


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

.ic33-shop-hero__description {
    max-width: 540px;

    margin: 20px 0 0;
    padding: 0;

    font-size: .98rem;
    line-height: 1.65;

    color: rgba(255, 255, 255, .94);
}


/* ==========================================================================
   TABLETTE
========================================================================== */

@media (max-width: 991px) {

    .ic33-shop-hero {
        height: 360px;
    }

    .ic33-shop-hero > .ic33-container {
        padding-left: 32px;
        padding-right: 32px;
    }

    .ic33-shop-hero__content {
        max-width: 500px;
    }

}


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

@media (max-width: 767px) {

    .ic33-shop-hero {
        height: 340px;
    }

    .ic33-shop-hero > .ic33-container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .ic33-shop-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5, 18, 31, .92) 0%,
                rgba(5, 18, 31, .78) 60%,
                rgba(5, 18, 31, .40) 100%
            );
    }

    .ic33-shop-hero__eyebrow {
        font-size: .68rem;
        margin-bottom: 10px;
    }

    .ic33-shop-hero__title-light {
        font-size: 2.25rem;
    }

    .ic33-shop-hero__title-accent {
        font-size: 2.85rem;
    }

    .ic33-shop-hero__description {
        margin-top: 16px;

        max-width: 440px;

        font-size: .88rem;
        line-height: 1.55;
    }

}


/* ==========================================================================
   FIN
========================================================================== */