/*==================================================
NATURE CONNECTIONS
Jessica Feldman
==================================================*/


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

.nature-hero{

    padding:70px 0;

}

.nature-hero-image{

    position:relative;

    width:min(1100px,92%);

    height:560px;

    margin:auto;

    overflow:hidden;

    border-radius:28px;

    box-shadow:var(--shadow);

}

.nature-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.nature-hero-panel{

    position:absolute;

    left:55px;

    bottom:48px;

    width:min(500px,86%);

    padding:30px 34px;

    border-radius:22px;

    background:rgba(248,248,238,.91);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    box-shadow:0 12px 35px rgba(0,0,0,.12);

}

.nature-eyebrow{

    margin:0 0 10px;

    color:var(--teal);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.nature-hero-panel h1{

    margin:0 0 18px;

    color:var(--deep-teal);

    font-size:clamp(2.1rem,4vw,3.3rem);

    line-height:1.12;

}

.nature-hero-panel p:last-child{

    margin:0;

    color:var(--brown);

    line-height:1.8;

}


/*==================================================
INTRO
==================================================*/

.nature-intro{

    padding:100px 0;

    text-align:center;

}

.nature-intro p{

    max-width:720px;

    margin:0 auto 22px;

    color:var(--brown);

    font-size:1.12rem;

    line-height:1.9;

}


/*==================================================
EXPERIENCE
==================================================*/

.nature-experience{

    padding:105px 0;

    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.12),
            rgba(19,96,94,.06)
        ),
        var(--cream);

}

.nature-grid{

    display:grid;

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

    gap:24px;

    margin-top:60px;

}

.nature-card{

    min-height:260px;

    padding:32px 28px;

    border-radius:22px;

    background:var(--cream);

    box-shadow:var(--shadow);

    border-bottom:6px solid var(--teal);

}

.nature-card:nth-child(2){

    border-bottom-color:var(--deep-teal);

}

.nature-card:nth-child(3){

    border-bottom-color:var(--magenta);

}

.nature-card:nth-child(4){

    border-bottom-color:var(--teal);

}

.nature-number{

    display:block;

    margin-bottom:28px;

    color:var(--teal);

    font-family:var(--heading-font);

    font-size:2rem;

    opacity:.55;

}

.nature-card h3{

    margin-bottom:12px;

    color:var(--deep-teal);

}

.nature-card p{

    margin:0;

    color:var(--brown);

    line-height:1.75;

}


/*==================================================
TRAIL
==================================================*/

.nature-trail-section{

    padding:110px 0;

    background:var(--cream);

}

.nature-trail{

    width:min(850px,94%);

    margin:70px auto 0;

}

.trail-step{

    display:grid;

    grid-template-columns:70px 1fr;

    gap:24px;

    align-items:start;

}

.trail-marker{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--teal);

    color:var(--deep-teal);

    font-family:var(--heading-font);

    font-size:1.4rem;

    font-weight:600;

    box-shadow:0 8px 18px rgba(22,207,191,.18);

}

.trail-step:nth-of-type(3) .trail-marker{

    background:var(--magenta);

    color:var(--cream);

}

.trail-step:nth-of-type(5) .trail-marker{

    background:var(--deep-teal);

    color:var(--cream);

}

.trail-step:nth-of-type(7) .trail-marker{

    background:var(--teal);

}

.trail-content{

    padding:22px 28px;

    border-radius:20px;

    background:rgba(22,207,191,.07);

}

.trail-content h3{

    margin-bottom:10px;

    color:var(--deep-teal);

}

.trail-content p{

    margin:0;

    color:var(--brown);

    line-height:1.8;

}

.trail-line{

    width:3px;

    height:55px;

    margin:8px 0 8px 30px;

    background:rgba(19,96,94,.22);

}


/*==================================================
WHO IT'S FOR
==================================================*/

.nature-for{

    padding:110px 0;

    background:var(--deep-teal);

}

.nature-for .section-heading h2,
.nature-for .section-heading p{

    color:var(--cream);

}

.nature-audience-grid{

    display:grid;

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

    gap:28px;

    margin-top:60px;

}

.nature-audience-card{

    padding:36px;

    border-radius:22px;

    background:var(--cream);

    box-shadow:0 14px 34px rgba(0,0,0,.12);

}

.nature-audience-card h3{

    margin-bottom:14px;

    color:var(--deep-teal);

}

.nature-audience-card p{

    margin:0;

    color:var(--brown);

    line-height:1.8;

}


/*==================================================
WHY OUTDOORS
==================================================*/

.why-nature{

    padding:110px 0;

    background:var(--cream);

}

.custom-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.why-nature-image img{

    width:100%;

    min-height:520px;

    object-fit:cover;

    border-radius:26px;

    box-shadow:var(--shadow);

}

.why-nature-content h2{

    margin-bottom:25px;

    color:var(--deep-teal);

    text-align:left;

}

.why-nature-content p{

    color:var(--brown);

    line-height:1.85;

}

.nature-highlight{

    margin-top:32px;

    padding-left:22px;

    border-left:5px solid var(--teal);

    color:var(--deep-teal) !important;

    font-family:var(--heading-font);

    font-size:1.25rem;

}


/*==================================================
ACTIVITIES
==================================================*/

.nature-activities{

    padding:105px 0;

    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.08),
            rgba(162,34,130,.05)
        ),
        var(--cream);

}

.activity-grid{

    display:grid;

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

    gap:26px;

    margin-top:55px;

}

.activity-card{

    min-height:190px;

    padding:30px;

    border-radius:20px;

    background:var(--cream);

    box-shadow:var(--shadow);

}

.activity-card span{

    display:block;

    margin-bottom:14px;

    color:var(--magenta);

    font-family:var(--heading-font);

    font-size:1.25rem;

}

.activity-card:nth-child(3n+1) span{

    color:var(--teal);

}

.activity-card:nth-child(3n) span{

    color:var(--deep-teal);

}

.activity-card p{

    margin:0;

    color:var(--brown);

    line-height:1.75;

}


/*==================================================
CUSTOM
==================================================*/

.nature-custom{

    padding:100px 0;

    text-align:center;

    background:var(--magenta);

}

.nature-custom .nature-eyebrow{

    color:var(--teal);

}

.nature-custom h2{

    margin-bottom:24px;

    color:var(--cream);

}

.nature-custom p{

    max-width:720px;

    margin:0 auto 20px;

    color:var(--cream);

    line-height:1.85;

}


/*==================================================
ENDING
==================================================*/

.nature-ending{

    padding:110px 0;

    text-align:center;

    background:var(--cream);

}

.nature-ending h2{

    margin-bottom:20px;

    color:var(--deep-teal);

}

.nature-ending p{

    max-width:650px;

    margin:0 auto 30px;

    color:var(--brown);

    font-size:1.08rem;

    line-height:1.8;

}


/*==================================================
CONTINUE
==================================================*/

.continue-section{

    padding:90px 0;

    background:rgba(22,207,191,.07);

}

.continue-section .section-title h2{

    margin-bottom:50px;

    color:var(--deep-teal);

    text-align:center;

}


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

@media(max-width:900px){

    .nature-grid{

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

    }

    .activity-grid{

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

    }

    .custom-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

}


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

@media(max-width:700px){

    .nature-hero{

        padding:0;

    }

    .nature-hero-image{

        width:100%;

        height:auto;

        border-radius:0;

    }

    .nature-hero-image img{

        height:420px;

    }

    .nature-hero-panel{

        position:relative;

        left:auto;

        bottom:auto;

        width:auto;

        padding:28px 22px;

        border-radius:0;

        background:var(--cream);

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        box-shadow:none;

    }

    .nature-intro,
    .nature-experience,
    .nature-trail-section,
    .nature-for,
    .why-nature,
    .nature-activities,
    .nature-custom,
    .nature-ending,
    .continue-section{

        padding:70px 0;

    }

    .nature-grid,
    .nature-audience-grid,
    .activity-grid{

        grid-template-columns:1fr;

    }

    .trail-step{

        grid-template-columns:52px 1fr;

        gap:14px;

    }

    .trail-marker{

        width:48px;

        height:48px;

        font-size:1.1rem;

    }

    .trail-line{

        margin-left:23px;

    }

    .trail-content{

        padding:20px;

    }

    .why-nature-image img{

        min-height:360px;

    }

}


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

@media(max-width:450px){

    .nature-hero-image img{

        height:350px;

    }

    .nature-card,
    .nature-audience-card,
    .activity-card{

        padding:26px 22px;

    }

}