/* ==========================================================
   LITTLE POUCH CREW TASMANIA
   ABOUT PAGE
========================================================== */


/* ==========================================================
   ABOUT HEADER
========================================================== */

.about-header{
    background:var(--white);
    text-align:center;
    padding:100px 0 90px;
}

.about-header .container{
    max-width:900px;
}

.about-header h1{
    max-width:850px;
    margin:0 auto 25px;
}

.about-intro{
    max-width:760px;
    margin:0 auto;
    font-size:1.15rem;
    line-height:1.8;
}


/* ==========================================================
   KAREN'S STORY
========================================================== */

.about-story{
    background:var(--cream);
}

.about-story-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-story-image img{
    width:100%;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.about-story-content{
    max-width:600px;
}

.about-story-content h2{
    margin-bottom:25px;
}


/* ==========================================================
   ABOUT CARE
========================================================== */

.about-care{
    background:var(--white);
}

.about-care .section-heading{
    max-width:800px;
    margin:0 auto 55px;
    text-align:center;
}

.about-care-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.about-care-item{
    background:var(--cream);
    padding:38px 32px;
    border-radius:var(--radius);
}

.about-care-item h3{
    margin-bottom:15px;
}


/* ==========================================================
   PROPERTY
========================================================== */

.about-property{
    background:var(--cream);
    padding:100px 0;
}

.property-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.property-image{
    position:relative;
}

.property-image img{
    width:100%;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.image-caption{
    position:absolute;
    left:18px;
    bottom:18px;
    background:rgba(255,255,255,.92);
    padding:10px 17px;
    border-radius:30px;
    font-size:.85rem;
    color:var(--text);
    box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.property-content{
    max-width:600px;
}

.property-content h2{
    margin-bottom:25px;
}

.property-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:38px;
}

.property-feature{
    text-align:center;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    line-height:1.5;
    color:var(--green);
}

.property-icon{
    width:62px;
    height:62px;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#E9EEE6;
    font-size:1.7rem;
}


/* ==========================================================
   ENCLOSURES
========================================================== */

.about-enclosures{
    background:#F1F4EE;
    padding:100px 0;
}

.enclosure-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:70px;
    align-items:center;
}

.enclosure-content{
    max-width:560px;
}

.enclosure-content h2{
    margin-bottom:25px;
}

.enclosure-image{
    position:relative;
}

.enclosure-image img{
    width:100%;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.about-button{
    display:inline-block;
    margin-top:15px;
    padding:15px 28px;
    background:var(--green);
    color:var(--white);
    border-radius:30px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.about-button:hover{
    background:var(--green-dark);
    transform:translateY(-2px);
}


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

.about-focus{
    background:var(--white);
    text-align:center;
}

.about-focus-content{
    max-width:800px;
    margin:auto;
}

.about-focus-content h2{
    margin-bottom:25px;
}


/* ==========================================================
   THANK YOU
========================================================== */

.about-thanks{
    background:var(--cream);
    text-align:center;
    padding:75px 0;
}

.about-thanks blockquote{
    max-width:800px;
    margin:auto;
    font-family:'Cormorant Garamond',serif;
    font-size:2.8rem;
    font-weight:500;
    font-style:italic;
    color:var(--green);
}


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

@media (max-width:900px){

    .about-story-grid,
    .property-grid,
    .enclosure-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-story-content,
    .property-content,
    .enclosure-content{
        max-width:none;
    }

    .about-care-grid{
        grid-template-columns:1fr;
    }

    .property-grid .property-content{
        order:-1;
    }

}


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

@media (max-width:600px){

    .about-header{
        padding:70px 0 65px;
    }

    .about-header h1{
        font-size:2.8rem;
    }

    .about-intro{
        font-size:1rem;
    }

    .about-property,
    .about-enclosures{
        padding:70px 0;
    }

    .property-features{
        gap:10px;
    }

    .property-feature{
        font-size:.65rem;
        letter-spacing:1px;
    }

    .property-icon{
        width:52px;
        height:52px;
        font-size:1.4rem;
    }

    .image-caption{
        left:12px;
        bottom:12px;
        font-size:.72rem;
        padding:8px 12px;
    }

    .about-thanks{
        padding:60px 0;
    }

    .about-thanks blockquote{
        font-size:2.2rem;
    }

}