/* I-STEM — Mentorship & About pages */

/* ===== Shared page intro ===== */
.page-hero { position: relative; overflow: hidden; color: #fff; }
.page-hero .wrap { position: relative; padding: 64px 28px 60px; }
.page-hero.mentor { background: radial-gradient(110% 90% at 100% 0%, #1a7d57, transparent 55%), linear-gradient(160deg, #11533a, #0a2a1e); }
.page-hero.about { background: radial-gradient(110% 90% at 100% 0%, var(--navy-600), transparent 55%), linear-gradient(160deg, var(--navy-700), var(--navy-900)); }
.page-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); background-size: 26px 26px; opacity:.5; mask-image: linear-gradient(180deg,#000,transparent 75%); }
.page-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; max-width: 16ch; margin-top: 20px; }
.page-hero .lede { color: #d6e4dd; max-width: 56ch; margin-top: 18px; font-size: clamp(16px, 1.5vw, 19px); }
.page-hero.about .lede { color: #c8d2ec; }
.ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); padding: 7px 13px; border-radius: 999px; }
.ph-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.ph-stats { display: flex; flex-wrap: wrap; gap: 38px; margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.16); }
.ph-stat .n { font-family: var(--ff-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: #fff; }
.ph-stat .l { font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 2px; }

/* ===== Mentor cards ===== */
.mentor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px){ .mentor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .mentor-grid { grid-template-columns: 1fr; } }
.mentor-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; transition: transform .14s, box-shadow .18s, border-color .18s; }
.mentor-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.mc-top { display: flex; align-items: center; gap: 13px; }
.mc-avatar { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-family: var(--ff-display); font-weight: 700; font-size: 18px; flex-shrink: 0; }
.mc-name { font-family: var(--ff-display); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.mc-role { font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.mc-inst { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); margin-top: 16px; }
.mc-inst .ic { color: var(--ink-3); flex-shrink: 0; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mc-tag { font-size: 12px; font-weight: 600; color: var(--brand-600); background: var(--brand-50); border-radius: 7px; padding: 4px 9px; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mc-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.mc-meta .stars { color: #f5a623; }

/* ===== Mission / value blocks ===== */
.mission { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px){ .mission { grid-template-columns: 1fr; gap: 30px; } }
.mission-q { font-family: var(--ff-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.32; color: var(--ink); font-weight: 500; text-wrap: balance; }
.mission-q b { color: var(--brand); font-weight: 700; }
.mission-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.mission-list li { display: flex; gap: 14px; align-items: flex-start; }
.mission-list .ic-wrap { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.mission-list b { display: block; font-size: 15.5px; color: var(--ink); }
.mission-list span { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ===== Timeline ===== */
.timeline { position: relative; margin-top: 8px; }
.timeline::before { content:""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--brand), var(--cyan)); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 30px 52px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 6px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 3px solid var(--brand); }
.tl-year { font-family: var(--ff-display); font-weight: 700; font-size: 15px; color: var(--brand); }
.tl-title { font-family: var(--ff-display); font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 3px; }
.tl-body { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.6; max-width: 60ch; }

/* ===== Governance lockup ===== */
.gov-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; display: grid; grid-template-columns: auto 1px 1fr; gap: 34px; align-items: center; }
@media (max-width: 760px){ .gov-card { grid-template-columns: 1fr; gap: 22px; } .gov-div { display: none; } }
.gov-emblem { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.gov-emblem .chip { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-sm); }
.gov-emblem .cap { font-size: 12.5px; color: var(--ink-3); max-width: 18ch; line-height: 1.4; }
.gov-div { background: var(--line); height: 100%; min-height: 90px; }
.gov-body h3 { font-size: 20px; }
.gov-body p { color: var(--ink-2); margin-top: 8px; font-size: 14.5px; line-height: 1.6; max-width: 64ch; }

/* ===== Compliance badges ===== */
.comp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px){ .comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px){ .comp-grid { grid-template-columns: 1fr; } }
.comp-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.comp-card .ic-wrap { width: 38px; height: 38px; border-radius: 10px; background: var(--green-50, #e4f6ec); color: var(--green); display: grid; place-items: center; }
.comp-card b { font-size: 14.5px; color: var(--ink); }
.comp-card span { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* ===== CTA band ===== */
.cta-band { background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); border-radius: var(--r-lg); padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta-band.green { background: linear-gradient(150deg, #11533a, #0a2a1e); }
.cta-band::before { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size: 24px 24px; opacity:.5; }
.cta-band > * { position: relative; }
.cta-band h3 { color: #fff; font-size: clamp(22px, 2.6vw, 28px); max-width: 22ch; }
.cta-band p { color: rgba(255,255,255,.74); margin-top: 8px; max-width: 52ch; font-size: 15px; }