/* ========================================================================
   BPP HOMEPAGE HERO TYPOGRAPHY V20.1

   Existing markup authority:
       .rpgx-hero-badge
       heading immediately beside that badge
       hero paragraph
       .rpgx-hero-points

   No search-form or background styling in this file.
   ======================================================================== */


/* ------------------------------------------------------------------------
   ACTUAL HERO COPY OWNER

   Select the existing element whose direct child is the unique hero badge.
   This avoids changing the Blade HTML or guessing an old wrapper name.
   ------------------------------------------------------------------------ */

:where(div, section, article):has(> .rpgx-hero-badge) {
    width: 100%;

    text-align: center !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    z-index: 2;
}


/* ------------------------------------------------------------------------
   SMALL TOP LABEL
   ------------------------------------------------------------------------ */

:where(div, section, article):has(> .rpgx-hero-badge)
> .rpgx-hero-badge {
    width: fit-content !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 18px !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    text-align: center !important;

    letter-spacing: 0 !important;
}


/* Keep the star compact too. */

:where(div, section, article):has(> .rpgx-hero-badge)
> .rpgx-hero-badge span {
    font-size: 13px !important;
}


/* ------------------------------------------------------------------------
   MAIN HEADING
   ------------------------------------------------------------------------ */

:where(div, section, article):has(> .rpgx-hero-badge)
> h1 {
    width: 100% !important;
    max-width: 760px !important;

    margin:
        0
        auto !important;

    text-align: center !important;

    font-size: 58px !important;
    line-height: 1.03 !important;
    font-weight: 800 !important;

    letter-spacing: -0.045em !important;

    text-wrap: balance;
}


/* Dream Property keeps the current green accent. */

:where(div, section, article):has(> .rpgx-hero-badge)
> h1 span {
    font-size: inherit !important;
    line-height: inherit !important;
}


/* ------------------------------------------------------------------------
   HERO DESCRIPTION
   ------------------------------------------------------------------------ */

:where(div, section, article):has(> .rpgx-hero-badge)
> p {
    width: min(
        660px,
        100%
    ) !important;

    margin:
        20px
        auto
        0 !important;

    text-align: center !important;

    font-size: 17px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;

    letter-spacing: 0 !important;

    text-wrap: balance;
}


/* ------------------------------------------------------------------------
   VERIFIED / CONTACT / SECURE ROW
   ------------------------------------------------------------------------ */

:where(div, section, article):has(> .rpgx-hero-badge)
> .rpgx-hero-points {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 16px 26px !important;

    margin:
        28px
        auto
        0 !important;

    text-align: center !important;
}


:where(div, section, article):has(> .rpgx-hero-badge)
> .rpgx-hero-points
> span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;

    text-align: center !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    white-space: nowrap;
}


:where(div, section, article):has(> .rpgx-hero-badge)
> .rpgx-hero-points
> span
> i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto;

    font-size: 12px !important;
}


/* ------------------------------------------------------------------------
   LARGE DESKTOP
   ------------------------------------------------------------------------ */

@media (min-width: 1440px) {

    :where(div, section, article):has(> .rpgx-hero-badge)
    > h1 {
        max-width: 800px !important;

        font-size: 60px !important;
    }

}


/* ------------------------------------------------------------------------
   LAPTOP / TABLET
   ------------------------------------------------------------------------ */

@media (max-width: 1100px) {

    :where(div, section, article):has(> .rpgx-hero-badge)
    > h1 {
        max-width: 680px !important;

        font-size: 48px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > p {
        max-width: 600px !important;

        font-size: 16px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > .rpgx-hero-points
    > span {
        font-size: 12px !important;
    }

}


/* ------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {

    :where(div, section, article):has(> .rpgx-hero-badge) {
        padding-left: 14px;
        padding-right: 14px;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > .rpgx-hero-badge {
        margin-bottom: 12px !important;

        font-size: 11px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > .rpgx-hero-badge
    span {
        font-size: 11px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > h1 {
        max-width: 500px !important;

        font-size: 38px !important;
        line-height: 1.04 !important;

        letter-spacing: -0.038em !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > p {
        max-width: 500px !important;

        margin-top: 14px !important;

        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > .rpgx-hero-points {
        gap: 10px 16px !important;

        margin-top: 20px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > .rpgx-hero-points
    > span {
        font-size: 11px !important;
    }

}


/* ------------------------------------------------------------------------
   SMALL PHONE
   ------------------------------------------------------------------------ */

@media (max-width: 390px) {

    :where(div, section, article):has(> .rpgx-hero-badge)
    > h1 {
        font-size: 34px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > p {
        font-size: 13px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > .rpgx-hero-points {
        gap: 9px 12px !important;
    }

    :where(div, section, article):has(> .rpgx-hero-badge)
    > .rpgx-hero-points
    > span {
        font-size: 10.5px !important;
    }

}