/* ==========================================================
   LITTLE POUCH CREW TASMANIA
   STORIES PAGE
   Version 2.2
========================================================== */


/* ==========================================================
   STORIES HEADER
========================================================== */

.stories-header{

    text-align:center;

    padding:80px 0 65px;

}

.stories-header h1{

    font-size:4rem;

    max-width:850px;

    margin:0 auto 20px;

}

.stories-intro{

    max-width:780px;

    margin:0 auto;

    font-size:1.2rem;

    color:#666;

}


/* ==========================================================
   INTRODUCTION
========================================================== */

.stories-introduction{

    background:#ffffff;

    text-align:center;

}

.stories-introduction-content{

    max-width:800px;

    margin:0 auto;

}

.stories-introduction-content h2{

    font-size:3.3rem;

    margin-bottom:25px;

}

.stories-introduction-content p{

    color:#555;

}

.story-names{

    margin-top:30px;

    font-family:'Cormorant Garamond',serif;

    font-size:1.35rem;

    font-weight:600;

    color:var(--green) !important;

}


/* ==========================================================
   STORIES LIST
========================================================== */

.stories-list{

    background:var(--cream);

}

.section-heading{

    max-width:750px;

    margin:0 auto 65px;

    text-align:center;

}

.section-heading h2{

    font-size:3.3rem;

}

.section-heading > p:last-child{

    color:#666;

}


/* ==========================================================
   STORY
========================================================== */

.story-list{

    display:flex;

    flex-direction:column;

    gap:100px;

}

.story{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:start;

    max-width:1100px;

    margin:0 auto;

}

.story-reverse{

    grid-template-columns:1fr 420px;

}

.story-reverse .story-image{

    order:2;

}

.story-reverse .story-content{

    order:1;

}


/* ==========================================================
   STORY IMAGE
========================================================== */

.story-image{

    position:sticky;

    top:190px;

    align-self:start;

    display:flex;

    justify-content:center;

}

.story-image img{

    display:block;

    width:100%;

    height:auto;

    border-radius:14px;

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

}


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

.story-content{

    padding-top:5px;

}

.story-category{

    font-family:'Open Sans',sans-serif;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:2px;

    color:var(--brown);

    margin-bottom:12px;

}

.story-content h2{

    font-size:3rem;

    margin-bottom:25px;

}

.story-content p{

    color:#555;

}

.story-ending{

    font-family:'Cormorant Garamond',serif;

    font-size:1.35rem;

    font-weight:600;

    color:var(--green) !important;

    margin-top:25px;

}


/* ==========================================================
   STORY REFLECTION
========================================================== */

.story-reflection{

    margin:30px 0;

    padding:30px 35px;

    background:#ffffff;

    border-left:4px solid var(--green);

    border-radius:0 12px 12px 0;

}

.story-reflection h3{

    font-size:2rem;

    margin-bottom:15px;

}

.story-reflection p{

    color:#666;

}

.story-reflection p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   INSTAGRAM
========================================================== */

.stories-instagram{

    background:var(--green);

    color:#ffffff;

    text-align:center;

}

.stories-instagram-content{

    max-width:750px;

    margin:0 auto;

}

.stories-instagram .section-label{

    color:#d7e3d2;

}

.stories-instagram h2{

    color:#ffffff;

    font-size:3.3rem;

}

.stories-instagram p{

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

    margin-bottom:35px;

}

.stories-instagram .btn{

    display:inline-block;

    background:#ffffff;

    color:var(--green);

    padding:16px 35px;

    border-radius:40px;

    font-weight:700;

}

.stories-instagram .btn:hover{

    background:#f2f2f2;

    transform:translateY(-2px);

}


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

@media(max-width:1000px){

    .story{

        grid-template-columns:330px 1fr;

        gap:45px;

    }

    .story-reverse{

        grid-template-columns:1fr 330px;

    }

    .story-image{

        top:175px;

    }

}

@media(max-width:800px){

    .story,
    .story-reverse{

        grid-template-columns:1fr;

        gap:35px;

    }

    .story-image,
    .story-reverse .story-image{

        position:static;

        width:100%;

        order:1;

    }

    .story-content,
    .story-reverse .story-content{

        order:2;

    }

}

@media(max-width:600px){

    .stories-header{

        padding:60px 0 45px;

    }

    .stories-header h1{

        font-size:2.8rem;

    }

    .stories-intro{

        font-size:1.05rem;

    }

    .stories-introduction-content h2,
    .section-heading h2{

        font-size:2.6rem;

    }

    .story-list{

        gap:60px;

    }

    .story-content h2{

        font-size:2.5rem;

    }

    .story-reflection{

        padding:25px;

    }

}