<!--
  ======================================================================================================
  Version: v2.14.3
  Updated: 2026-07-26
  File: mamadex-mama-profile.html
  Path: mamadex/mamadex-mama-profile.html
  Author: Buktika Webdesk (Binka)
  Purpose: Single template page for all Mama profiles.
           All content is injected at runtime by mamadex-mama-profile.js.
           URL pattern: /mamadex/mamadex-mama-profile.html?mama={slug}
           Sections rendered by JS (hidden until populated):
             #section-hero          Hero image via CSS custom property --hero on body
             #section-portrait-bio  Portrait + biography fragment body + slogan
             #section-stories       Three seasonal story images (graceful hide if absent)
             #section-video         Short video (graceful hide if absent)
             #section-evidence      Evidence and weekly note — shown unconditionally for
                                     every found+active Mama since v2.13.0 (see that
                                     changelog entry: the prior hidden state traced to an
                                     overclaiming copy issue, now fixed, not a structural
                                     blocker)
  Type: HTML template
  License: © Buktika, 2026. All rights reserved.
  ISO Reference: ISO 27001, ISO 9241-110
  Source Naming Standard: Buktika v7.1 (ISO Aligned)

  ChangeLog:
    v2.14.3 (2026-07-26): Replaced the invalid optional-chaining footer-year
              assignment with a one-time lookup and null guard; visible
              behaviour is unchanged.
    v2.14.2 (2026-07-17): Expanded legacy lightbox caption pills to the safe
              available width so desktop captions avoid needless wrapping.
    v2.14.1 (2026-07-17): Aligned the shared lightbox CSS and JavaScript
              cache keys with the current component versions.
    v2.14.0 (2026-07-17): Standardised all gallery and video lightbox
              triggers on the zoom-in cursor and the proven Firefox native-
              button border reset. Page stylesheet cache key bumped to
              mamadex-mama-profile.css v3.9.0.
    v2.13.0 (2026-07-14): #section-evidence UN-HIDDEN — owner instruction
              ("audit and decide the visibility of #section-evidence", BKT-
              35120 follow-up). AUDIT: the only prior record of why this
              section was hidden was mamadex-mama-profile.js's own comment,
              "hidden per owner instruction — kept in HTML for future use,"
              with no reason recorded. Reading the actual static copy
              (mamadex.profile.evidence_body: "Each image and clip has a
              consent id... Summaries are compiled each quarter...") found it
              asserted specific record-keeping facts as already true for
              EVERY Mama regardless of centre — not confirmed by any
              canonical data (mamadex-centres.registry.json is explicitly
              PROTOTYPE/PLACEHOLDER; no per-Mama Evidence Pack exists
              anywhere in the data). DECISION: this is very likely the actual
              reason the section was withheld — an overclaim, the same
              category of problem the rest of BKT-35120 has been correcting
              (claims-safe wording, placeholder-disclosure) — not a
              structural reason to keep it hidden forever. No HTML change in
              this file (the section markup, id="evidence-open-link" from
              v2.12.0, was already correct); the fix is entirely the copy
              (see mamadex-mama-profile.js v2.8.0 and the i18n/vault
              changelog entries for the rewritten mamadex.profile.
              evidence_body value in all 5 locales, plus a fr-FR-only
              correction to evidence_cta/evidence_title — "Ouvrir la
              preuve"/"Preuve et note hebdomadaire" personalised the word
              "proof" to one named Mama, closer to the site's own banned
              "Mama proof" phrase than the generic chain-step use of
              "preuve(s)" elsewhere) plus one line in mamadex-mama-profile.js
              (show(document.getElementById("section-evidence")), always
              reached in renderMama() — no asset probe applies here, unlike
              stories/video). This is what makes the v2.12.0 ?mama={slug}
              link, and the v2.6.0 context bridge on mamadex-restoration-
              evidence.html it lands on, reachable by a real visitor for the
              first time.
    v2.12.0 (2026-07-14): MAMA CONTEXT CARRIED TO DOOR 1 — owner instruction
              (BKT-35120 context-loss repair pass). PROBLEM: the v2.11.0 dead-
              link fix pointed #section-evidence's "Open evidence" button at
              the now-complete Door 1 page (mamadex-restoration-evidence.html)
              but explicitly left the link bare — no ?mama={slug} — meaning a
              visitor reading one specific Mama's own profile lost that
              context the moment they followed the evidence link, landing on
              a fully generic orientation page with no reference back to her.
              FIXED: the anchor gained id="evidence-open-link" (no other
              attribute/class/text changed) so mamadex-mama-profile.js can set
              its href at render time once the slug is known (see that file's
              own v2.7.0 changelog) — href becomes
              "/mamadex/mamadex-restoration-evidence.html?mama=" +
              encodeURIComponent(slug). The slug used is the SAME canonical
              value this template already resolves from its own ?mama= query
              param and roster lookup — no second slug source, no derivation
              from the visible name. NOT CHANGED, FLAGGED FOR OWNER ATTENTION:
              #section-evidence itself is still never un-hidden anywhere in
              mamadex-mama-profile.js (renderMama()'s own comment: "hidden per
              owner instruction — section kept in HTML for future use") — so
              on the live site today this button, and therefore this fix, is
              not yet visible to any real visitor. This pass only corrects the
              href that will be used once/if that prior owner decision to hide
              the section is revisited; it does not itself un-hide the
              section, per instruction scope (carry context through the
              existing action, not redesign or re-enable the page).
    v2.11.0 (2026-07-12): DEAD LINK FIXED — owner instruction (BKT-35120
              Pass C, run only after the Door 1 page at mamadex-restoration-
              evidence.html was built and verified functional in this same
              work item). #section-evidence's "Open evidence" button href
              changed from "/evidence" (404 — no such route exists anywhere
              on the site) to "/mamadex/mamadex-restoration-evidence.html"
              (the now-complete Door 1 orientation page). No query-string
              context (e.g. ?mama={slug}) was added to this link: the
              existing href was a bare, static "/evidence" string with no
              query parameters to begin with, so there was nothing to
              preserve per instruction ("preserve any existing Mama or
              centre context in the query string if the current template
              already has such identifiers available") — this template's
              own ?mama={slug} slug is read by mamadex-mama-profile.js at
              render time but was never wired to this specific button's
              href, and wiring that up is new behaviour, not a dead-link
              fix, so it was left out of scope for this pass. No other
              content on this page, and no archived per-Mama page, was
              touched this pass (owner instruction: archived pages are a
              separate future item).
-->

<!doctype html>
<html lang="en-ZA" data-theme="light" data-locale="en-ZA">
<head>
  <!-- auth-state.js MUST be first. No defer. No async. DOC-www-G §1.2-HR1 -->
  <script src="/assets/js/partials/auth-state.js?v=1.1.0"></script>
  <!-- Theme: read stored choice before first paint to prevent flash -->
  <script>(function(){var t=localStorage.getItem('sdx-theme');var d=t||(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',d);}());</script>
  <meta charset="utf-8">
  <title data-i18n="mamadex.profile.page_title">Mama Profile | MamaDEX | Buktika</title>
  <link rel="canonical" href="https://www.buktika.com/mamadex/mamadex-mama-profile">

  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" id="meta-description"
        content="Profile of a MamaDEX centre leader — portrait, story, seasonal photos, and a short video.">

  <link rel="icon" href="/favicon.ico" sizes="any">

  <!-- Fonts: self-hosted only per BKT-DOC-www-D HARD RULE. Google Fonts CDN rejected. -->

  <!-- Styles — load order: global → themes → footer → page → extras (§13.4)
       NOTE: header.css is NOT linked here. includes.js lifts it automatically
       from inside header.html. A duplicate link causes doubled specificity. -->
  <link rel="stylesheet" href="/assets/css/global.css?v=3.16.0">
  <link rel="stylesheet" href="/assets/css/themes.css?v=2.5.0">
  <link rel="stylesheet" href="/assets/css/partials/footer.css?v=4.9.3">
  <link rel="stylesheet" href="/assets/css/mamadex/mamadex-mama-profile.css?v=3.9.4">
  <link rel="stylesheet" href="/assets/css/mamadex/partials/mamadex-mama-profile-hero.css?v=3.2.0">
  <link rel="stylesheet" href="/assets/css/partials/media-lightbox.css?v=2.6.1">
</head>

<body class="page-mamadex-mama-profile">

  <!-- Header -->
  <div id="site-header" role="banner" data-include="/partials/header.html"></div>

  <!-- Hero section partial — injected by includes.js -->
  <div data-include="/mamadex/partials/mamadex-mama-profile-hero.html"></div>

  <main>

    <div class="container">

    <!-- ═══════════════════════════════════════════════════════════════════════
         NOT FOUND — shown if slug is missing or not in roster.
         www-A §13.7 HARD RULE: ALL .sdx-card-section elements inside .container.
    ════════════════════════════════════════════════════════════════════════ -->
    <section class="sdx-card-section" id="section-not-found" hidden>
      <div class="cards">
        <article class="card">
          <p data-i18n="[html]mamadex.profile.not_found_body">This Mama profile could not be found. Please <a href="/mamadex/mamadex-mamas.html">return to all Mamas</a>.</p>
        </article>
      </div>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════════════
         PORTRAIT + BIO
    ════════════════════════════════════════════════════════════════════════ -->
    <section class="sdx-card-section" id="section-portrait-bio" aria-label="Portrait and bio" data-i18n-aria="mamadex.profile.portrait_bio_aria" hidden>
      <div class="portrait-grid">

        <div class="portrait-panel">
          <img
            class="portrait"
            id="portrait-img"
            src=""
            alt=""
            loading="lazy">
        </div>

        <div class="bio-panel mama-bio">
          <h2 id="bio-title"></h2>
          <div id="bio-body" class="mama-bio-text"></div>
          <p class="muted" id="bio-slogan" hidden></p>
        </div>

      </div>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════════════
         THREE SEASONAL STORY IMAGES
    ════════════════════════════════════════════════════════════════════════ -->
    <section class="sdx-card-section" id="section-stories" aria-label="This season in pictures" data-i18n-aria="mamadex.profile.season_pictures" hidden>
      <h2 data-i18n="mamadex.profile.season_pictures">This season in pictures</h2>

      <div class="gallery3" id="stories-grid">
        <!-- Figures injected by JS for each story image that resolves -->
      </div>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════════════
         SHORT VIDEO
    ════════════════════════════════════════════════════════════════════════ -->
    <section class="sdx-card-section section-video" id="section-video" aria-label="Short video" data-i18n-aria="mamadex.profile.short_video" hidden>
      <h2 data-i18n="mamadex.profile.short_video">Short video</h2>

      <figure class="mama-video-figure" id="video-figure">
        <!-- Entire video thumb injected by JS when poster probe succeeds -->
      </figure>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════════════
         EVIDENCE NOTE — always present, no dynamic content
    ════════════════════════════════════════════════════════════════════════ -->
    <section class="sdx-card-section" id="section-evidence" aria-label="Evidence and weekly note" data-i18n-aria="mamadex.profile.evidence_title" hidden>
      <h2 data-i18n="mamadex.profile.evidence_title">Evidence and weekly note</h2>

      <div class="cards">
        <article class="card">
          <p class="muted" data-i18n="mamadex.profile.evidence_body">
            Each image and clip has a consent id and a short note that matches the task list.
            Summaries are compiled each quarter as a chapter with photos and signatures.
          </p>
          <a class="sdx-btn-primary" href="/mamadex/mamadex-restoration-evidence.html"
             id="evidence-open-link"
             data-i18n="mamadex.profile.evidence_cta">Open evidence</a>
        </article>
      </div>
    </section>

    </div><!-- /.container -->

    <!-- ═══════════════════════════════════════════════════════════════════════
         CTA BAND — mandatory closing section (Design System v4.0.0)
         www-A §13.7: direct child of <main>, outside .container, before #site-footer.
         Uses <section> per canonical main structure pattern.
    ════════════════════════════════════════════════════════════════════════ -->
    <section class="sdx-cta-band">
      <div class="sdx-cta-band-inner">
        <h2 data-i18n="mamadex.profile.cta_title">Discover more Mamas</h2>
        <p data-i18n="mamadex.profile.cta_body">
          Every Mama has a story. Explore the full MamaDEX community of centre leaders.
        </p>
        <a class="sdx-btn-primary" href="/mamadex/mamadex-mamas.html"
           data-i18n="mamadex.profile.cta_button">See all Mamas</a>
      </div>
    </section>

  </main>

  <!-- ═══════════════════════════════════════════════════════════════════════════
       SHARED MEDIA LIGHTBOX (images + videos)
       §8.8.2 canonical: #media-lightbox > .lightbox-backdrop + .lightbox-inner
       .lightbox-inner > .lightbox-close (ABOVE media) + .lightbox-media
       .lightbox-media > img.lightbox-image + video.lightbox-video + figcaption.lightbox-caption
       JS adds is-image or is-video class to #media-lightbox at open time.
  ════════════════════════════════════════════════════════════════════════════ -->
  <div id="media-lightbox" hidden>
    <button class="lightbox-backdrop" type="button" aria-label="Close media" data-i18n-aria="mamadex.profile.close_media_aria"></button>

    <div class="lightbox-inner">
      <button class="lightbox-close" type="button" aria-label="Close lightbox" data-i18n-aria="mamadex.profile.close_lightbox_aria"></button>

      <div class="lightbox-media">
        <img class="lightbox-image" src="" alt="" hidden>

        <video class="lightbox-video" controls preload="none" hidden>
          <!-- <source> injected by media-lightbox.js at open time -->
        </video>

        <figcaption class="lightbox-caption"></figcaption>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div id="site-footer" role="contentinfo" data-include="/partials/footer.html"></div>

  <!-- Scripts — www-A §13.5 canonical order:
       1. Popper + Tippy: synchronous, no defer — window.tippy must exist when
          headerInjected fires. Deferring causes silent tooltip failure.
       2. includes.js: defer
       3. i18n + language-switcher: defer
       4. Page JS: defer -->
  <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js"></script>
  <script src="/assets/js/includes.js?v=1.7.5" defer></script>
  <script src="/assets/js/theme.js?v=1.0.0" defer></script>
  <script src="https://unpkg.com/i18next@23.15.1/dist/umd/i18next.min.js" defer></script>
  <script src="/assets/js/i18n/i18nextHttpBackend.min.js?v=2.5.2" defer></script>
  <script src="/assets/js/partials/language-switcher.js?v=2.5.4" defer></script>
  <script src="/assets/js/i18n/i18n-core-loader.js?v=1.7.0" defer></script>
  <script src="/assets/js/partials/media-lightbox.js?v=1.18.0" defer></script>
  <script src="/assets/js/mamadex/mamadex-mama-profile.js?v=2.7.2" defer></script>

  <script>
    const footerYearNode = document.getElementById('y');
    if (footerYearNode != null) {
      footerYearNode.textContent = new Date().getFullYear();
    }
  </script>

</body>
</html>