/* =============================================================================
   local/mentorship/styles.css
   Scoped to body.local-mentorship — never affects other Moodle pages.
   Matches the GatE Mentorship Programme reference design.
============================================================================= */

/* ── 0. Google Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* ── 1. Design tokens ────────────────────────────────────────────────────── */
body.local-mentorship {
    --ment-teal-dark:   #17495a;
    --ment-teal-mid:    #1d5c70;
    --ment-green-dark:  #2d6a4f;
    --ment-green-mid:   #5a8a3c;
    --ment-green-light: #d9ecc4;
    --ment-green-pale:  #e9f3dc;
    --ment-cream:       #faf7f0;
    --ment-text-dark:   #16241e;
    --ment-text-body:   #33463c;
    --ment-blue-icon:   #dfe9f5;
    --ment-blue-icon-fg:#3a6ea5;
    --ment-white:       #ffffff;
    --ment-radius-card: 16px;
    --ment-font:        'Nunito', 'Segoe UI', Arial, sans-serif;
}

/* ── 2. Strip Moodle's content wrappers (keep the real header/navbar) ────── */
body.local-mentorship #page,
body.local-mentorship #page-content,
body.local-mentorship #region-main-box,
body.local-mentorship #region-main,
body.local-mentorship [role="main"] {
    padding:    0 !important;
    margin:     0 !important;
    max-width:  none !important;
    width:      100% !important;
}

/* Moove wraps #page-content in a ".main-inner" that gets its own white
   background, border-radius and a capped max-width (the "card" look) via
   "#page.drawers .main-inner" / "body.limitedwidth #page.drawers .main-inner"
   in theme/moove/style/moodle.css. Those selectors are more specific than a
   plain "#page-content" rule, so they must be overridden by name here. */
body.local-mentorship #page.drawers .main-inner,
body.local-mentorship .main-inner {
    max-width:        none !important;
    width:            100% !important;
    background-color: transparent !important;
    border-radius:    0 !important;
    padding:          0 !important;
    margin:           0 !important;
}

body.local-mentorship [role="main"] > .container,
body.local-mentorship [role="main"] > .container-fluid,
body.local-mentorship [role="main"] > .container-xl,
body.local-mentorship [role="main"] > .container-lg {
    max-width:     none !important;
    width:         100% !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
}

/* ── 3. Full-width wrapper ────────────────────────────────────────────────── */
body.local-mentorship .mentorship-fullwidth-wrap {
    width:       100%;
    overflow-x:  hidden;
    font-family: var(--ment-font);
    color:       var(--ment-text-body);
    background:  var(--ment-cream);
}

/* ════════════════════════════════════════════════════════════════════════
   HERO IMAGE — full-width band, sits right under the Moodle header,
   fades into the cream background at its bottom edge
════════════════════════════════════════════════════════════════════════ */
.ment-hero-img-wrap {
    position:      relative;
    width:         100%;
    aspect-ratio:  2.6 / 1;
    max-height:    520px;
    overflow:      hidden;
    background:    linear-gradient(135deg, var(--ment-teal-dark), var(--ment-green-mid));
}
.ment-hero-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
/* Soft fade at the bottom, blending the photo into the page background. */
.ment-hero-img-wrap::after {
    content:    '';
    position:   absolute;
    inset:      auto 0 0 0;
    height:     45%;
    background: linear-gradient(to bottom, rgba(250, 247, 240, 0) 0%, var(--ment-cream) 92%);
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — eyebrow badge, title, subtitle, intro card
════════════════════════════════════════════════════════════════════════ */
.ment-hero {
    padding: 40px 20px 8px;
    text-align: center;
}

.ment-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    background:     var(--ment-green-pale);
    color:          var(--ment-green-dark);
    font-size:      0.78rem;
    font-weight:    700;
    padding:        6px 16px;
    border-radius:  30px;
    margin-bottom:  18px;
}
.ment-eyebrow__icon {
    display: inline-flex;
    width:   16px;
    height:  16px;
}
.ment-eyebrow__icon svg { width: 100%; height: 100%; }

.ment-hero__title {
    font-size:   3rem;
    font-weight: 800;
    color:       var(--ment-text-dark);
    max-width:   680px;
    margin:      0 auto 12px;
    line-height: 1.25;
}

.ment-hero__subtitle {
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--ment-green-mid);
    margin:      0 auto 28px;
}

/* Intro card */
.ment-intro-card {
    max-width:     680px;
    margin:        0 auto 8px;
    background:    var(--ment-white);
    border-radius: var(--ment-radius-card);
    padding:       28px 30px 30px;
    text-align:    left;
    box-shadow:    0 2px 16px rgba(23,73,90,.08);
}

.ment-intro-card__desc {
    font-size:   0.92rem;
    line-height: 1.65;
    color:       var(--ment-teal-mid);
    margin:      0;
}

.ment-intro-card__divider {
    border:     none;
    border-top: 1px solid #e4e4e0;
    margin:     18px 0;
}

.ment-intro-card__lead {
    font-size:   0.92rem;
    font-weight: 700;
    color:       var(--ment-text-dark);
    margin:      0 0 10px;
}

.ment-intro-card__list {
    margin:       0;
    padding-left: 20px;
}
.ment-intro-card__list li {
    font-size:   0.9rem;
    line-height: 1.6;
    color:       var(--ment-text-body);
    margin-bottom: 8px;
}
.ment-intro-card__list li::marker { color: var(--ment-green-mid); }
.ment-intro-card__list li:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════
   PATH CARDS
════════════════════════════════════════════════════════════════════════ */
.ment-paths {
    padding: 36px 20px 8px;
    text-align: center;
}

.ment-paths__title {
    font-size:   1.3rem;
    font-weight: 800;
    color:       var(--ment-text-dark);
    max-width:   680px;
    margin:      0 auto 26px;
}

.ment-card-grid {
    max-width:  980px;
    margin:     0 auto;
    display:    grid;
    grid-template-columns: repeat(3, 1fr);
    gap:        20px;
}

.ment-card {
    background:     var(--ment-white);
    border-radius:  var(--ment-radius-card);
    padding:        28px 20px 26px;
    box-shadow:     0 2px 16px rgba(23,73,90,.08);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
}

.ment-card__icon {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   16px;
}
.ment-card__icon svg { width: 24px; height: 24px; }
.ment-card__icon--blue  { background: var(--ment-blue-icon);  color: var(--ment-blue-icon-fg); }
.ment-card__icon--green { background: var(--ment-green-pale); color: var(--ment-green-dark); }

.ment-card__title {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--ment-text-dark);
    margin:      0 0 20px;
}

.ment-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    font-family:     var(--ment-font);
    font-size:       0.9rem;
    font-weight:     700;
    padding:         11px 18px;
    border-radius:   10px;
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    transition:      background .2s, transform .15s;
}
.ment-btn--dark {
    background: var(--ment-teal-dark);
    color:      var(--ment-white) !important;
}
.ment-btn--dark:hover {
    background: var(--ment-teal-mid);
    transform:  translateY(-1px);
    color:      var(--ment-white) !important;
    text-decoration: none;
}
.ment-btn--light {
    background: var(--ment-green-light);
    color:      var(--ment-green-dark) !important;
}
.ment-btn--light:hover {
    background: var(--ment-green-pale);
    transform:  translateY(-1px);
    color:      var(--ment-green-dark) !important;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
   QUOTE BANNER
════════════════════════════════════════════════════════════════════════ */
.ment-quote {
    margin-top:  40px;
    background:  var(--ment-green-pale);
    padding:     34px 20px;
    text-align:  center;
}
.ment-quote p {
    max-width:   620px;
    margin:      0 auto;
    font-size:   1.3rem;
    font-weight: 700;
    font-style:  italic;
    color:       var(--ment-green-dark);
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .ment-card-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

@media (max-width: 480px) {
    .ment-hero { padding: 28px 14px 4px; }
    .ment-hero__title { font-size: 1.5rem; }
    .ment-hero__subtitle { font-size: 0.95rem; }
    .ment-hero-img-wrap { aspect-ratio: 4 / 3; max-height: 260px; }
    .ment-intro-card { padding: 20px 18px 22px; }
    .ment-paths { padding: 28px 14px 4px; }
    .ment-paths__title { font-size: 1.12rem; }
    .ment-quote p { font-size: 0.95rem; }
}