/* ==========================================================
   MENTORS.CSS
   Rising Sons Africa
========================================================== */


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

.mentor-hero{
    position:relative;
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#ffffff;
    background:
        linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.58)),
        url("/static/images/branding/mentor.jpg") center/cover no-repeat;
}

.mentor-hero .container{
    max-width:850px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.75rem 1.6rem;
    margin-bottom:1.8rem;
    border-radius:50px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(10px);
    color:#FFD166;
    font-weight:700;
    letter-spacing:.5px;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.mentor-hero h1{
    margin-bottom:1.3rem;
    font-size:clamp(2.8rem,5vw,4.2rem);
    font-weight:800;
    color:#FFFFFF;
    text-shadow:
        0 5px 18px rgba(0,0,0,.55),
        0 2px 8px rgba(0,0,0,.35);
}

.mentor-hero p{
    max-width:700px;
    margin:0 auto 2rem;
    line-height:1.9;
    font-size:1.1rem;
    color:#FFF8E8;
    text-shadow:
        0 2px 10px rgba(0,0,0,.55);
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:1rem 2.4rem;
    border-radius:12px;
    background:var(--primary);
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.hero-btn:hover{
    transform:translateY(-4px);
    filter:brightness(.95);
}





/* ==========================================================
   SECTIONS
========================================================== */

.section{
    padding:5rem 0;
}

.section-light{
    background:#f8fafc;
}

.section-header{
    max-width:760px;
    margin:0 auto 3rem;
    text-align:center;
}

.section-header h2{
    margin-bottom:1rem;
}

.section-header p{
    color:#64748b;
    line-height:1.8;
}


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

.intro-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:4rem;
    align-items:center;
}

.intro-content h2{
    margin-bottom:1.5rem;
}

.intro-content p{
    margin-bottom:1.25rem;
    line-height:1.9;
    color:#555;
}

.intro-image img{
    width:100%;
    border-radius:20px;
    display:block;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}


/* ==========================================================
   VALUES
========================================================== */

.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:2rem;
}

.info-card{
    background:#fff;
    padding:2rem;
    border-radius:18px;
    text-align:center;
    box-shadow:0 12px 30px rgba(15,23,42,.08);
    transition:.3s;
}

.info-card:hover{
    transform:translateY(-8px);
}

.card-icon{
    width:70px;
    height:70px;
    margin:0 auto 1.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fef3c7;
    font-size:2rem;
}

.info-card h3{
    margin-bottom:1rem;
}

.info-card p{
    color:#64748b;
    line-height:1.8;
}


/* ==========================================================
   EXPECTATIONS
========================================================== */

.expectations-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

.expectation-card{
    background:#fff;
    padding:2rem;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.expectation-card h3{
    margin-bottom:1rem;
}

.expectation-card p{
    color:#64748b;
    line-height:1.8;
}


/* ==========================================================
   MENTORS
========================================================== */

.mentor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

.mentor-card{
    background:#fff;
    border-radius:20px;
    padding:2rem;
    text-align:center;
    box-shadow:0 12px 35px rgba(15,23,42,.08);
    transition:.3s;
}

.mentor-card:hover{
    transform:translateY(-8px);
}

.mentor-card img{
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:50%;
    margin:0 auto 1.5rem;
    display:block;
}

.mentor-avatar{
    width:130px;
    height:130px;
    margin:0 auto 1.5rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2563eb;
    color:#fff;
    font-size:2rem;
    font-weight:700;
}

.mentor-card h3{
    margin-bottom:.5rem;
}

.mentor-role{
    color:#2563eb;
    font-weight:600;
    margin-bottom:.3rem;
}

.mentor-company{
    color:#64748b;
    margin-bottom:1rem;
}

.mentor-bio{
    color:#555;
    line-height:1.7;
}


/* ==========================================================
   APPLICATION FORM
========================================================== */

.application-form{
    max-width:950px;
    margin:auto;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
}

.form-group{
    display:flex;
    flex-direction:column;
    margin-bottom:1.5rem;
}

.form-group label{
    margin-bottom:.6rem;
    font-weight:600;
}

.form-control{
    width:100%;
    padding:1rem;
    border:1px solid #d1d5db;
    border-radius:12px;
    font-size:1rem;
    transition:.3s;
}

.form-control:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

textarea.form-control{
    resize:vertical;
    min-height:180px;
}

.form-actions{
    text-align:center;
    margin-top:2rem;
}


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

.mentor-cta{
    padding:5rem 0;
    background:#0f172a;
    color:#fff;
    text-align:center;
}

.mentor-cta h2{
    margin-bottom:1rem;
}

.mentor-cta p{
    max-width:700px;
    margin:0 auto 2rem;
    color:#cbd5e1;
    line-height:1.8;
}


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

@media (max-width:992px){

    .intro-grid{
        grid-template-columns:1fr;
        gap:2.5rem;
    }

}

@media (max-width:768px){

    .mentor-hero{
        min-height:60vh;
        padding:4rem 0;
    }

    .cards-grid,
    .mentor-grid,
    .expectations-grid{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .mentor-card img,
    .mentor-avatar{
        width:110px;
        height:110px;
    }

}