/* =========================================================
   LIVIGO
   PUBLIC EXPLORE
   =========================================================
 *
 * Path:
 * /public_html/assets/css/explore.css
 *
 * Page:
 * /public_html/explore/index.php
 *
 * Purpose:
 * Public discovery experience for Livigo.
 *
 * Design principles:
 * - Livigo blue foundation
 * - clean white discovery surfaces
 * - lime used as functional accent
 * - strong editorial typography
 * - no neon / glow
 * - responsive from mobile to desktop
 */


/* =========================================================
   PAGE
   ========================================================= */

body.lv-public-explore {
    margin: 0;

    background:
        #f5f7fb;

    color:
        #10263c;
}


.lv-explore,
.lv-explore *,
.lv-explore *::before,
.lv-explore *::after {
    box-sizing: border-box;
}


.lv-explore {
    width: 100%;

    overflow: hidden;

    background:
        #f5f7fb;
}


.lv-explore-shell {
    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin:
        0 auto;
}


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

.lv-explore-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #58742a;

    font-size:
        12px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.lv-explore-eyebrow::before {
    content:
        "";

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        #c7eb70;
}


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

.lv-explore-hero {
    position:
        relative;

    isolation:
        isolate;

    padding:
        86px 0 72px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #062f78 0%,
            #0a46d1 56%,
            #174ee5 100%
        );

    color:
        #ffffff;
}


.lv-explore-hero::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    width:
        520px;

    height:
        520px;

    top:
        -270px;

    right:
        -120px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .055
        );
}


.lv-explore-hero::after {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    width:
        380px;

    height:
        380px;

    left:
        -190px;

    bottom:
        -260px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius:
        50%;
}


.lv-explore-hero .lv-explore-eyebrow {
    color:
        #d9f58a;
}


.lv-explore-hero__copy {
    width:
        min(
            790px,
            100%
        );
}


.lv-explore-hero h1 {
    max-width:
        800px;

    margin:
        17px 0 0;

    color:
        #ffffff;

    font-size:
        clamp(
            44px,
            6.2vw,
            78px
        );

    line-height:
        .96;

    font-weight:
        850;

    letter-spacing:
        -.055em;
}


.lv-explore-hero__copy > p {
    max-width:
        650px;

    margin:
        25px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .78
        );

    font-size:
        18px;

    line-height:
        1.65;

    font-weight:
        500;
}


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

.lv-explore-search {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(220px, .8fr)
        auto;

    align-items:
        end;

    gap:
        10px;

    width:
        min(
            100%,
            980px
        );

    margin:
        48px 0 0;

    padding:
        12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .22
        );

    border-radius:
        24px;

    background:
        rgba(
            3,
            24,
            57,
            .34
        );

    box-shadow:
        0 18px 45px
        rgba(
            2,
            18,
            50,
            .16
        );
}


.lv-explore-search__field {
    min-width:
        0;
}


.lv-explore-search__field label {
    display:
        block;

    margin:
        0 0 7px 4px;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size:
        11px;

    line-height:
        1.2;

    font-weight:
        750;

    letter-spacing:
        .02em;
}


.lv-explore-search input,
.lv-explore-search select {
    width:
        100%;

    min-height:
        58px;

    margin:
        0;

    padding:
        0 17px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .20
        );

    border-radius:
        15px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #10263c;

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        650;
}


.lv-explore-search input::placeholder {
    color:
        #8190a0;
}


.lv-explore-search input:focus,
.lv-explore-search select:focus {
    border-color:
        #c7eb70;

    box-shadow:
        0 0 0 3px
        rgba(
            199,
            235,
            112,
            .20
        );
}


.lv-explore-search__button {
    min-width:
        138px;

    min-height:
        58px;

    padding:
        0 22px;

    border:
        0;

    border-radius:
        15px;

    background:
        #c7eb70;

    color:
        #263c09;

    font:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        background .18s ease;
}


.lv-explore-search__button:hover {
    background:
        #b8df5a;

    transform:
        translateY(-1px);
}


.lv-explore-search__button:focus-visible {
    outline:
        3px solid
        rgba(
            255,
            255,
            255,
            .72
        );

    outline-offset:
        3px;
}


/* =========================================================
   STANDARD SECTION
   ========================================================= */

.lv-explore-section {
    padding:
        94px 0;
}


.lv-explore-section:nth-of-type(odd) {
    background:
        #ffffff;
}


.lv-explore-section__head {
    max-width:
        700px;

    margin-bottom:
        40px;
}


.lv-explore-section__head h2 {
    max-width:
        680px;

    margin:
        13px 0 0;

    color:
        #10263c;

    font-size:
        clamp(
            35px,
            4.5vw,
            55px
        );

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        -.045em;
}


.lv-explore-section__head p {
    max-width:
        620px;

    margin:
        18px 0 0;

    color:
        #667789;

    font-size:
        17px;

    line-height:
        1.65;
}


/* =========================================================
   PURPOSE GRID
   ========================================================= */

.lv-explore-purpose-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        15px;
}


.lv-explore-purpose {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        250px;

    padding:
        26px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            8,
            38,
            69,
            .10
        );

    border-radius:
        24px;

    background:
        #ffffff;

    color:
        #10263c;

    text-decoration:
        none;

    box-shadow:
        0 14px 34px
        rgba(
            5,
            25,
            45,
            .055
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.lv-explore-purpose:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            126,
            167,
            48,
            .30
        );

    box-shadow:
        0 20px 44px
        rgba(
            5,
            25,
            45,
            .09
        );
}


.lv-explore-purpose__mark {
    display:
        block;

    width:
        42px;

    height:
        8px;

    margin-bottom:
        34px;

    border-radius:
        999px;

    background:
        #c7eb70;
}


.lv-explore-purpose h3 {
    margin:
        0;

    color:
        #10263c;

    font-size:
        24px;

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -.03em;
}


.lv-explore-purpose p {
    margin:
        13px 0 24px;

    color:
        #68798a;

    font-size:
        14px;

    line-height:
        1.6;
}


.lv-explore-purpose__action {
    display:
        block;

    margin-top:
        auto;

    color:
        #476814;

    font-size:
        13px;

    font-weight:
        800;
}


/* =========================================================
   DESTINATIONS
   ========================================================= */

.lv-explore-section--destinations {
    background:
        #eef3f8;
}


.lv-explore-city-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        15px;
}


.lv-explore-city {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        270px;

    padding:
        28px;

    overflow:
        hidden;

    border-radius:
        26px;

    background:
        #082b58;

    color:
        #ffffff;

    text-decoration:
        none;

    transition:
        transform .2s ease,
        background .2s ease;
}


.lv-explore-city::after {
    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -65px;

    bottom:
        -65px;

    border:
        26px solid
        rgba(
            199,
            235,
            112,
            .13
        );

    border-radius:
        50%;
}


.lv-explore-city:hover {
    transform:
        translateY(-4px);

    background:
        #0a356d;
}


.lv-explore-city__state {
    position:
        relative;

    z-index:
        1;

    color:
        #c7eb70;

    font-size:
        11px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.lv-explore-city h3 {
    position:
        relative;

    z-index:
        1;

    margin:
        20px 0 0;

    color:
        #ffffff;

    font-size:
        34px;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        -.04em;
}


.lv-explore-city p {
    position:
        relative;

    z-index:
        1;

    max-width:
        270px;

    margin:
        14px 0 26px;

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    font-size:
        14px;

    line-height:
        1.55;
}


.lv-explore-city__action {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-top:
        auto;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        750;
}


/* =========================================================
   DISCOVERY AREAS
   ========================================================= */

.lv-explore-area-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        15px;
}


.lv-explore-area {
    display:
        flex;

    flex-direction:
        column;

    min-height:
        300px;

    padding:
        27px;

    border:
        1px solid
        rgba(
            8,
            38,
            69,
            .10
        );

    border-radius:
        25px;

    background:
        #ffffff;

    color:
        #10263c;

    text-decoration:
        none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.lv-explore-area:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            126,
            167,
            48,
            .30
        );

    box-shadow:
        0 18px 42px
        rgba(
            5,
            25,
            45,
            .07
        );
}


.lv-explore-area__symbol {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        50px;

    height:
        50px;

    margin-bottom:
        31px;

    border-radius:
        15px;

    background:
        rgba(
            126,
            167,
            48,
            .12
        );

    color:
        #52731b;

    font-size:
        25px;

    font-weight:
        700;
}


.lv-explore-area__eyebrow {
    color:
        #718091;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.lv-explore-area h3 {
    margin:
        8px 0 0;

    color:
        #10263c;

    font-size:
        27px;

    line-height:
        1.05;

    font-weight:
        830;

    letter-spacing:
        -.035em;
}


.lv-explore-area p {
    margin:
        14px 0 24px;

    color:
        #68798a;

    font-size:
        14px;

    line-height:
        1.6;
}


.lv-explore-area__action {
    margin-top:
        auto;

    color:
        #476814;

    font-size:
        13px;

    font-weight:
        800;
}


/* =========================================================
   QUICK DISCOVERY
   ========================================================= */

.lv-explore-section--quick {
    background:
        #edf2f7;
}


.lv-explore-quick-links {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        10px;
}


.lv-explore-quick-links a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    min-height:
        66px;

    padding:
        0 19px;

    border:
        1px solid
        rgba(
            8,
            38,
            69,
            .10
        );

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        #10263c;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        750;

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.lv-explore-quick-links a:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            126,
            167,
            48,
            .34
        );
}


.lv-explore-quick-links a span {
    color:
        #587b1d;

    font-size:
        18px;
}


/* =========================================================
   ACCOUNT CTA
   ========================================================= */

.lv-explore-account {
    padding:
        30px 16px 94px;

    background:
        #edf2f7;
}


.lv-explore-account__inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;

    width:
        min(
            1180px,
            100%
        );

    margin:
        0 auto;

    padding:
        52px;

    border-radius:
        30px;

    background:
        #062b59;

    color:
        #ffffff;
}


.lv-explore-account .lv-explore-eyebrow {
    color:
        #c7eb70;
}


.lv-explore-account h2 {
    max-width:
        700px;

    margin:
        13px 0 0;

    color:
        #ffffff;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        -.045em;
}


.lv-explore-account p {
    max-width:
        640px;

    margin:
        17px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    font-size:
        15px;

    line-height:
        1.65;
}


.lv-explore-account__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    min-height:
        54px;

    padding:
        0 23px;

    border-radius:
        15px;

    background:
        #c7eb70;

    color:
        #263c09;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        800;

    white-space:
        nowrap;

    transition:
        transform .18s ease,
        background .18s ease;
}


.lv-explore-account__button:hover {
    transform:
        translateY(-2px);

    background:
        #b8df5a;
}


/* =========================================================
   FOCUS
   ========================================================= */

.lv-explore-purpose:focus-visible,
.lv-explore-city:focus-visible,
.lv-explore-area:focus-visible,
.lv-explore-quick-links a:focus-visible,
.lv-explore-account__button:focus-visible {
    outline:
        3px solid
        #c7eb70;

    outline-offset:
        3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 768px
) and (
    max-width: 1023px
) {

    .lv-explore-shell {
        width:
            calc(100% - 40px);
    }


    .lv-explore-hero {
        padding:
            70px 0 62px;
    }


    .lv-explore-search {
        grid-template-columns:
            1fr
            1fr;
    }


    .lv-explore-search__button {
        grid-column:
            1 / -1;
    }


    .lv-explore-purpose-grid,
    .lv-explore-city-grid,
    .lv-explore-area-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .lv-explore-quick-links {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .lv-explore-account__inner {
        padding:
            42px;
    }

}


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

@media (max-width: 767px) {

    .lv-explore-shell {
        width:
            calc(100% - 28px);
    }


    .lv-explore-hero {
        padding:
            58px 0 48px;
    }


    .lv-explore-hero h1 {
        font-size:
            clamp(
                40px,
                13vw,
                59px
            );
    }


    .lv-explore-hero__copy > p {
        margin-top:
            20px;

        font-size:
            16px;

        line-height:
            1.55;
    }


    .lv-explore-search {
        grid-template-columns:
            1fr;

        margin-top:
            34px;

        padding:
            10px;

        border-radius:
            20px;
    }


    .lv-explore-search__field label {
        margin-top:
            3px;
    }


    .lv-explore-search input,
    .lv-explore-search select,
    .lv-explore-search__button {
        min-height:
            54px;
    }


    .lv-explore-search__button {
        width:
            100%;

        margin-top:
            3px;
    }


    .lv-explore-section {
        padding:
            68px 0;
    }


    .lv-explore-section__head {
        margin-bottom:
            29px;
    }


    .lv-explore-section__head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                45px
            );
    }


    .lv-explore-section__head p {
        font-size:
            15px;
    }


    .lv-explore-purpose-grid,
    .lv-explore-city-grid,
    .lv-explore-area-grid,
    .lv-explore-quick-links {
        grid-template-columns:
            1fr;
    }


    .lv-explore-purpose {
        min-height:
            220px;

        padding:
            23px;
    }


    .lv-explore-purpose__mark {
        margin-bottom:
            27px;
    }


    .lv-explore-city {
        min-height:
            235px;

        padding:
            24px;
    }


    .lv-explore-city h3 {
        font-size:
            31px;
    }


    .lv-explore-area {
        min-height:
            250px;

        padding:
            24px;
    }


    .lv-explore-area__symbol {
        margin-bottom:
            25px;
    }


    .lv-explore-account {
        padding:
            16px 14px 68px;
    }


    .lv-explore-account__inner {
        display:
            block;

        padding:
            30px 24px;

        border-radius:
            24px;
    }


    .lv-explore-account h2 {
        font-size:
            35px;
    }


    .lv-explore-account__button {
        width:
            100%;

        margin-top:
            27px;
    }

}


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

@media (max-width: 390px) {

    .lv-explore-shell {
        width:
            calc(100% - 22px);
    }


    .lv-explore-hero h1 {
        font-size:
            39px;
    }


    .lv-explore-purpose,
    .lv-explore-city,
    .lv-explore-area {
        border-radius:
            20px;
    }


    .lv-explore-account__inner {
        padding:
            27px 20px;
    }


    .lv-explore-account h2 {
        font-size:
            31px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .lv-explore-purpose,
    .lv-explore-city,
    .lv-explore-area,
    .lv-explore-quick-links a,
    .lv-explore-account__button,
    .lv-explore-search__button {
        transition:
            none;
    }

}