/* ========================================in-bo
   ABOUT PAGE
   Dr Sarah Crowe Website
======================================== */


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

.about-introduction{

    max-width:1100px;
    margin:35px auto;
    padding:0 25px;

}

.about-intro-layout{
    display:grid;
    grid-template-columns:1fr 400px;
    gap:55px;
    align-items:start;
}


/* LEFT TEXT */

.about-intro-text{

    text-align:left;

}


.about-intro-text h1{

    font-family:'Montserrat',sans-serif;
    font-size:56px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:15px;

}


.about-intro-text h2{

    font-family:'Montserrat',sans-serif;
    font-size:40px;
    line-height:1.25;
    color:var(--navy);
    margin-bottom:20px;

}


.intro-lead{

    font-size:25px;
    font-weight:600;
    line-height:1.55;
    color:var(--green);
    margin-bottom:30px;

}




/* PROFILE IMAGE */

.about-intro-image{
    display:flex;
    justify-content:center;
    margin-top:45px;  /* adjust until it lines up nicely */
}

.about-intro-image img{
    width:100%;
    max-width:360px;
    height:auto;
    border-radius:24px;
    object-fit:cover;
}

/* BIOGRAPHY */

.about-intro-columns p {
    font-size:20px;
    line-height:1.75;
    color:var(--light-text);
    margin-bottom:30px;
}

.about-intro-columns p:last-child {
    margin-bottom:0;
}


.about-intro-button{
    text-align:center;
    margin:10px 0 10px;
}
/* ========================================
   PROFESSIONAL JOURNEY
======================================== */


.journey{

    padding:20px 25px;
    border-top:1px solid rgba(20,40,60,0.18);

}


.journey h2{

    font-family:'Montserrat',sans-serif;
    font-size:42px;
    color:var(--navy);
    margin-bottom:35px;
    text-align:center;

}



.journey-grid{

    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}



.journey-grid div{

    background:linear-gradient(180deg,#FFFFFF,#FBFCFB);

    padding:35px;

    border-radius:18px;

    border:1px solid var(--border);

    position:relative;

    overflow:hidden;

}



/* Top gradient accent */

.journey-grid div::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        var(--navy),
        var(--green)
    );

}



.journey-grid h3{

    font-family:'Montserrat',sans-serif;
    font-size:24px;
    color:var(--navy);
    margin-bottom:15px;

}



.journey-grid p{

    font-size:18px;
    line-height:1.7;
    color:var(--light-text);

}

/* ========================================
   PRACTICE & EXPERTISE
======================================== */


.research-themes{

    max-width:1100px;
    margin:0 auto 30px;
    padding:20px 25px;
    text-align:center;
    border-top:1px solid rgba(20,40,60,0.18);

}


.research-themes h2{

    font-family:'Montserrat',sans-serif;
    font-size:42px;
    color:var(--navy);
    margin-bottom:20px;

}


.research-themes > p{

    max-width:800px;
    margin:0 auto 35px;

    font-size:20px;
    line-height:1.7;
    color:var(--light-text);

}


.theme-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;

}


.theme-grid div{

    background:white;
    padding:30px;
    border-radius:18px;
    border:1px solid var(--border);

}


.theme-grid h3{

    font-family:'Montserrat',sans-serif;
    font-size:23px;
    color:var(--navy);
    margin-bottom:10px;

}


.theme-grid p{

    font-size:18px;
    line-height:1.6;
    color:var(--light-text);

}


/* ========================================
   QUALIFICATIONS & RECOGNITION
======================================== */


.recognition{

    max-width:1100px;
    margin:50px auto;
    padding:35px 35px 25px;
    border-top:1px solid var(--border);

}



.recognition h2{

    text-align:center;

    font-family:'Montserrat',sans-serif;

    font-size:42px;

    color:var(--navy);

    margin-bottom:40px;

}



.recognition-grid{

    display:grid;

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

    gap:40px;

}



.recognition-card{

    background:var(--sage);

    padding:35px;

    border-radius:20px;

}



.recognition-card h3{

    font-family:'Montserrat',sans-serif;

    font-size:26px;

    color:var(--navy);

    margin-bottom:25px;

}



.recognition-card p{

    font-size:18px;

    line-height:1.8;

    color:var(--light-text);

    margin-bottom:18px;

}



.recognition-card strong{

    color:var(--navy);

}


/* ========================================
   LEADERSHIP + RESEARCH
======================================== */


.leadership-section,
.research-section{

    max-width:950px;
    margin:35px auto;
    padding:35px 25px;
    border-top:1px solid var(--border);

}


.leadership-section h2,
.research-section h2{

    font-family:'Montserrat',sans-serif;
    font-size:38px;
    text-align:center;
    color:var(--navy);
    margin-bottom:25px;

}


.leadership-section p,
.research-section p{

    font-size:20px;
    line-height:1.75;
    color:var(--light-text);
    margin-bottom:20px;

}


.leadership-section p:last-child,
.research-section p:last-child{

    margin-bottom:0;

}


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


.about-cta{

    background:var(--sage);
    padding:45px 20px;
    text-align:center;

}


.about-cta h2{

    font-family:'Montserrat',sans-serif;
    font-size:42px;
    color:var(--navy);

}


.about-cta p{

    max-width:700px;
    margin:20px auto 30px;

    font-size:21px;
    line-height:1.7;
    color:var(--light-text);

}


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

@media (max-width:900px){

    .about-intro-layout{
        display:grid;
        grid-template-columns:1fr;
        gap:0;
    }

    .about-intro-text{
        order:1;
        text-align:left;
    }

    .about-intro-image{
        order:2;
        margin-top:0;
    }

    /* Add this */
    .about-intro-columns{
        margin-top:30px;   /* adjust to taste */
    }

    .journey-grid,
    .theme-grid,
    .recognition-grid{
        grid-template-columns:1fr;
    }
}