/* =====================================================
   PRO-F — ABOUT PAGE (loads AFTER app.css)
   Hero banner comes from app.css (shared hero).
   ===================================================== */

/* ---------- HERO (page-specific only) ---------- */
.about-hero-actions {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-wrap: wrap;
}
@media (max-width: 560px) {
    .about-hero-actions { gap: 23px; }
}


/* ---------- PHOTO + TEXT ROWS ---------- */
.about-row { --bs-gutter-y: 25px; }
@media (min-width: 768px) { .about-row { --bs-gutter-x: 55px; } }
.about-photo { height: 400px !important; }
.about-copy h3 {
    margin: 10px 0 10px;
    color: var(--navy-deep);
    font: 500 clamp(38px, 2.8vw, 38px)/1.25 var(--font-display);
}
.about-copy h3 em { font-weight: 400; color: var(--accent); }
.about-copy p { margin-bottom: 15px; color: var(--muted); line-height: 1.8; }
.about-copy p b { color: var(--navy-deep); font-weight: 700; }
@media (max-width: 760px) { .about-photo { height: 280px; } }

/* ---------- VISION & MISSION ---------- */
.about-mission { position: relative; isolation: isolate; }
.about-mission::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(120deg, rgba(12, 36, 59, .95), rgba(12, 36, 59, .86)),
        url('../images/about-image-2.jpg') center / cover no-repeat;
}
.mission-card {
    height: 100%;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(12, 36, 59, .55);
}
.mission-label { color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.mission-card h3 {
    margin: 12px 0 14px;
    color: #fff;
    font: 500 clamp(28px, 3vw, 36px)/1.25 var(--font-display);
}
.mission-card h3 em { font-weight: 400; color: var(--accent); }
.mission-card p { margin: 0; color: #ffffff; line-height: 1.8; }
.mission-values { margin-top: 10px; }
.value { height: 100%; padding-top: 16px; border-top: 2px solid var(--emerald); }
.value b { display: block; color: #fff; font: 500 22px/1.3 var(--font-display); }
.value span { display: block; margin-top: 4px; color: #ffffff; font-size: 14px; line-height: 1.6; }
@media (max-width: 650px) { .mission-card { padding: 20px; } }

/* ---------- FOUNDERS ---------- */
/*.founder-list { border-top: 1px solid var(--line); }*/
.founder {
    /*padding-block: 50px;*/
    padding-bottom: 50px;
    /*border-bottom: 1px solid var(--line); }*/
.founder-row { --bs-gutter-x: 56px; --bs-gutter-y: 28px; }
.founder-photo {
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    /*padding: 20px;*/
    text-align: center;
    color: var(--navy-mid);
    font-size: 13px;
}
.founder-photo span { position: relative; z-index: 0; }
.founder-photo img {  inset: 0; }
.founder-copy h3 {
    margin: 0 0 8px;
    color: var(--navy-deep);
    font: 500 clamp(22px, 3.4vw, 22px)/1.2 var(--font-display);
}
.founder-copy .card-label { 
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: capitalize;}
.founder-copy p { margin-bottom: 14px; color: var(--muted); line-height: 1.8; }
.cred-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 10px; }
.cred-list span {
    padding: 5px 12px;
    background: #f0f4f7;
    color: var(--navy-mid);
    font-size: 12.5px;
    font-weight: 700;
}
.founder-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.founder-links .text-link { font-size: 14px; margin-top: 10px; }
@media (max-width: 767.98px) { .founder-photo { max-width: 300px; } }
.about-hero-actions .btn-light,
.about-hero-actions .text-link {
    width: 230px;
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 22px; 
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
} 

/* ==========================================
   ABOUT PAGE – MOBILE HORIZONTAL SCROLL FIX
   ========================================== */

/* Prevent horizontal overflow */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.about-hero,
.stats-band,
.about-row,
#guide,
#what,
#approach,
#mission,
#founders {
    max-width: 100%;
    overflow-x: clip;
}

/* Images should never exceed their containers */
.about-hero-photo,
.photo-frame,
.card-media {
    max-width: 100%;
}

.photo-frame img,
.card-media img {
    max-width: 100%;
    
}

/* Bootstrap row overflow correction */


/* Mobile specific fixes */
@media (max-width: 767px) {

    .about-hero-inner,
    .about-copy,
    .founder-copy,
    .founder-photo {
        min-width: 0;
        max-width: 100%;
    }

    .about-hero-actions {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .founder-links,
    .cred-list {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .founder-links a,
    .cred-list span {
        overflow-wrap: anywhere;
    }

    .stats-band .row,
    .mission-values {
        margin-left: 0;
        margin-right: 0;
    }

    .about-hero h1,
    .section h2,
    .founder-copy h3 {
        overflow-wrap: break-word;
    }
}