/***************************************************************************************************

    ██╗  ██╗███████╗██████╗  ██████╗     ███████╗███████╗ ██████╗████████╗██╗ ██████╗ ███╗   ██╗
    ██║  ██║██╔════╝██╔══██╗██╔═══██╗    ██╔════╝██╔════╝██╔════╝╚══██╔══╝██║██╔═══██╗████╗  ██║
    ███████║█████╗  ██████╔╝██║   ██║    ███████╗█████╗  ██║        ██║   ██║██║   ██║██╔██╗ ██║
    ██╔══██║██╔══╝  ██╔══██╗██║   ██║    ╚════██║██╔══╝  ██║        ██║   ██║██║   ██║██║╚██╗██║
    ██║  ██║███████╗██║  ██║╚██████╔╝    ███████║███████╗╚██████╗   ██║   ██║╚██████╔╝██║ ╚████║
    ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝     ╚══════╝╚══════╝ ╚═════╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                                                
 ***************************************************************************************************/




/* Main style */
.hero-section:not( .no-hero-media ) {
    background: var(--brand-color-pale-blue);
    position: relative;
}

    .hero-section:not( .no-hero-media ) .hero-section-image,
    .hero-section:not( .no-hero-media ) .hero-section-video {
        height: 400px !important;
    }
    
        .hero-section:not( .no-hero-media ) .hero-section-video video {
            height: 100% !important;
            object-position: center;
            object-fit: cover;
        }

        .laptop .hero-section:not( .no-hero-media ) .hero-section-image,
        .laptop .hero-section:not( .no-hero-media ) .hero-section-video {
            height: 700px !important;
        }

    .hero-section:not( .no-hero-media ) .hero-section-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: var(--nvm-grid-gutter);
    }

        .hero-section:not( .no-hero-media ) .hero-section-text .page-title {
            display: inline;
            font-family: var(--nvm-font-serif);
            font-style: italic;
            line-height: 1.4;
            color: var(--brand-color-white);
            background: var(--brand-color-blue);
            padding-inline: 20px;
        }

        .hero-section:not( .no-hero-media ) .hero-section-text .single-post-title {
            display: inline;
            font-family: var(--nvm-font-sans-serif);
            font-weight: 700;
            font-size: clamp(40px, 28px + 3vw, 80px);
            text-transform: capitalize;
            line-height: 1.4;
            color: var(--brand-color-white);
            background: var(--brand-color-blue);
        }

            .hero-section:not( .no-hero-media ) .hero-section-text .single-post-title.has-padding {
                padding-inline: 20px;
            }

        .hero-section:not( .no-hero-media ) .hero-section-text .single-post-subtitle {
            width: fit-content;
            font-family: var(--nvm-font-serif);
            font-style: italic;
            font-size: clamp(24px, 18px + 1.6vw, 40px);
            color: var(--brand-color-blue);
            background: var(--brand-color-white);
            padding-inline: 8px;
            margin-bottom: 10px;
        }



/* Overlay background version. */
.hero-section.has-bg-overlay {
    position: relative;
}

    .hero-section.has-bg-overlay .hero-section-background-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( var(--brand-color-black), transparent );
        opacity: 0.6;
    }



/* No hero media version. */
.hero-section.no-hero-media {
    background: var(--brand-color-pale-blue);
    padding-top: 180px;
}

    .hero-section.no-hero-media .hero-section-text {
        background: var(--brand-color-grey);
    }

        .hero-section.no-hero-media .hero-section-text .page-title {
            font-family: var(--nvm-font-serif);
            font-weight: 400;
            font-style: italic;
            font-size: clamp(48px, 32px + 4vw, 100px);
        }

        .hero-section.no-hero-media .hero-section-text p.page-title {
            line-height: 1.2;
        }

        .hero-section.no-hero-media .hero-section-text .decorative-column {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

            .hero-section.no-hero-media .hero-section-text .decorative-column .decorative-icon-box {
                position: relative;
                height: 100px;
                width: 100%;
            }

                .hero-section.no-hero-media .hero-section-text .decorative-column .decorative-icon-box::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    content: '';
                    background-image: url('../img/icons/brand-triangle-pattern-white.svg');
                }