/*******************************************************************************
  File Name : root/assets/css/hero-page.css
  Purpose   : Static Page Hero
*******************************************************************************/

/* =====================================================
   PAGE HERO
===================================================== */
.page-hero {

    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 360px;
    padding: 55px 0;
    overflow: hidden;
    background:
        linear-gradient(
            rgba(7,17,31,.12),
            rgba(7,17,31,.12)
        ),
        var(--hero-bg) center center / cover no-repeat;

}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.64) 0%,
            rgba(0,0,0,.48) 45%,
            rgba(0,0,0,.26) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,.18) 100%
        );
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

/* =====================================================
   CONTENT
===================================================== */
.page-hero-content {
    width: 1100px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* =====================================================
   BADGE
===================================================== */
.page-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 12px 24px;
    margin-bottom: 36px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.page-hero-badge i {
    color: #0d6efd;
    font-size: .95rem;
}

/* =====================================================
   TITLE
===================================================== */
.page-hero-content h1 {

    margin: 0 0 18px;
    max-width: 1100px;
    font-size: clamp(2.6rem,4vw,4.5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    color: #ffffff;
    text-shadow:
        0 4px 12px rgba(0,0,0,.45),
        0 12px 32px rgba(0,0,0,.35);
}

/* =====================================================
   SUBTITLE
===================================================== */

.page-hero-content p {
    margin: 0;
    max-width: 760px;
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255,255,255,.92);
}

/* =====================================================
   BREADCRUMB
===================================================== */
.page-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
    font-size: .95rem;
    font-weight: 500;
}

.page-hero-breadcrumb a {
    color: rgba(255,255,255,.88);
    text-decoration: none;
    transition: .25s;
}

.page-hero-breadcrumb a:hover {
    color: #ffffff;
}

.page-hero-breadcrumb span {
    color: rgba(255,255,255,.70);
}

.page-hero-breadcrumb span:last-child {
    color: #ffffff;
    font-weight: 600;
}

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

.page-hero::after {

    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        #0d6efd,
        #4dabff,
        #74c0fc
    );

    z-index: 3;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:991px) {

    .page-hero {

        min-height:320px;

        padding:40px 0;

        align-items:flex-end;

    }

    .page-hero-content {

        width:100%;

    }

    .page-hero-badge {

        margin-bottom:28px;

        padding:10px 20px;

        font-size:.78rem;

    }

    .page-hero-content h1 {

        max-width:100%;

        font-size:3rem;

        line-height:1.10;

        letter-spacing:-1px;

        margin-bottom:16px;

    }

    .page-hero-content p {

        max-width:100%;

        font-size:1rem;

        line-height:1.70;

    }

    .page-hero-breadcrumb {

        margin-top:22px;

        font-size:.90rem;

    }

}

@media (max-width:768px) {

    .page-hero {

        min-height:280px;

        padding:32px 0;

        align-items:flex-end;

    }

    .page-hero-content {

        width:100%;

    }

    .page-hero-badge {

        margin-bottom:20px;

        padding:9px 18px;

        font-size:.74rem;

    }

    .page-hero-content h1 {

        max-width:100%;

        font-size:2.35rem;

        line-height:1.12;

        letter-spacing:0;

        margin-bottom:14px;

    }

    .page-hero-content p {

        max-width:100%;

        font-size:.96rem;

        line-height:1.65;

    }

    .page-hero-breadcrumb {

        margin-top:18px;

        gap:10px;

        font-size:.84rem;

    }

}

@media (max-width:576px) {

    .page-hero {

        min-height:240px;

        padding:24px 0;

        align-items:flex-end;

    }

    .page-hero-content {

        width:100%;

    }

    .page-hero-badge {

        margin-bottom:16px;

        padding:8px 14px;

        font-size:.70rem;

        letter-spacing:1px;

    }

    .page-hero-content h1 {

        max-width:100%;

        font-size:1.80rem;

        line-height:1.15;

        letter-spacing:0;

        margin-bottom:10px;

    }

    .page-hero-content p {

        max-width:100%;

        font-size:.90rem;

        line-height:1.55;

    }

    .page-hero-breadcrumb {

        margin-top:14px;

        gap:8px;

        font-size:.78rem;

    }

}