/* =========================================================
   GIZMOO CORE
   Global Page Hero
   ========================================================= */


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

.gizmoo-page-hero {

    width: 100%;
    max-width: none;

    margin: 0;

    padding: 56px 0 64px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(31,133,91,.10),
            transparent 36%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(31,133,91,.045),
            transparent 32%
        ),
        var(--gizmoo-bg);

}


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

.gizmoo-page-hero-grid {

    width: 100%;
    max-width: var(--gizmoo-container-width);

    margin-inline: auto;

    padding-inline: var(--gizmoo-container-padding);

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .75fr);

    align-items: center;

    gap: 72px;

}


/* Remove Gutenberg column spacing */

.gizmoo-page-hero-grid.wp-block-columns {

    margin-bottom: 0;

}


/* =========================================================
   CONTENT
   ========================================================= */

.gizmoo-page-hero-content {

    width: 100%;
    max-width: 720px;

}


.gizmoo-page-hero-content h1 {

    margin: 0 0 18px;

    color: var(--gizmoo-text);

    font-size:
        clamp(36px, 4.5vw, 52px);

    font-weight: 700;

    line-height: 1.18;

    letter-spacing: -.035em;

}


.gizmoo-page-hero-content
p:not(.gizmoo-section-eyebrow) {

    max-width: 650px;

    margin: 0;

    color: var(--gizmoo-text-muted);

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.gizmoo-page-hero .gizmoo-section-eyebrow {

    display: inline-flex;

    align-items: center;

    margin: 0 0 16px;

    color: var(--gizmoo-primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .06em;

}


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

.gizmoo-page-hero-side {

    width: 100%;

    display: flex;

    justify-content: flex-end;

}


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

.gizmoo-page-hero-card {

    position: relative;

    width: 100%;

    min-height: 280px;

    padding: 40px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    border: 1px solid rgba(31,133,91,.18);

    border-radius: var(--gizmoo-radius-lg);

    background:

        linear-gradient(
            145deg,
            rgba(31,133,91,.11),
            transparent 58%
        ),

        var(--gizmoo-bg-soft);

    box-shadow:

        0 20px 50px
        rgba(15,23,42,.06);

}


/* =========================================================
   CARD DECORATION
   ========================================================= */

.gizmoo-page-hero-card::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    top: -100px;
    right: -80px;

    border-radius: 50%;

    background:
        rgba(31,133,91,.10);

}


.gizmoo-page-hero-card::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    bottom: -55px;
    left: -35px;

    border-radius: 50%;

    border: 1px solid
        rgba(31,133,91,.10);

}


/* =========================================================
   CARD TEXT
   ========================================================= */

.gizmoo-page-hero-card p {

    position: relative;

    z-index: 2;

    margin: 0 0 14px;

    color: var(--gizmoo-primary);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .12em;

}


.gizmoo-page-hero-card h3 {

    position: relative;

    z-index: 2;

    max-width: 360px;

    margin: 0;

    color: var(--gizmoo-text);

    font-size: 27px;

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: -.025em;

}


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

@media (max-width: 900px) {

    .gizmoo-page-hero {

        padding: 48px 0 56px;

    }


    .gizmoo-page-hero-grid {

        grid-template-columns: 1fr;

        gap: 42px;

    }


    .gizmoo-page-hero-side {

        justify-content: stretch;

    }

}


@media (max-width: 768px) {

    .gizmoo-page-hero {

        padding: 44px 0 48px;

    }


    .gizmoo-page-hero-grid {

        padding-inline: 16px;

    }


    .gizmoo-page-hero-card {

        min-height: 230px;

        padding: 30px;

    }


    .gizmoo-page-hero-card h3 {

        font-size: 24px;

    }

}


@media (max-width: 480px) {

    .gizmoo-page-hero-content h1 {

        font-size: 32px;

    }


    .gizmoo-page-hero-content
    p:not(.gizmoo-section-eyebrow) {

        font-size: 15px;

        line-height: 1.85;

    }


    .gizmoo-page-hero-card {

        min-height: 210px;

        padding: 24px;

    }


    .gizmoo-page-hero-card h3 {

        font-size: 22px;

    }

}