/* ======================================================================================================
   File:    support-buktika.css
   Path:    /assets/css/support/support-buktika.css
   Version: v2.0.10
   Issued:  2026-09-06
   Author:  Buktika Webdesk (Binka)
   Purpose: Support Buktika page — positive, story-led public invitation for the Buktika Support
            Wallet (BKT 50110:2026 §35 item 7). Non-pillar support page (universal tokens only,
            no pillar-brand colour).
   Colour Map:    v3.0.0 Section 4 (LOCKED)
   Design System: v4.0.0
   License: © Buktika, 2026. All rights reserved.
   Changelog:
   v2.0.10: Rebuilds the Support Story and Support Wallet sections as unboxed editorial
            narratives. Rails now stack as short chapters; prelaunch copy and Simply support
            use typography and whitespace instead of comparison-table or nested-card geometry.
   v2.0.9: Wallet presentation only. Replaces badges, outlined product cards and dashed status
           boxes with two quiet editorial rail panels while preserving every consumer hook.
   v2.0.8: Support-build list only. Removes the nested two-column options-grid treatment and
           restores one compact, top-to-bottom editorial list at every viewport width.
   v2.0.7: Reworks the first two content sections from full-width image blocks into EduTower's
           editorial header plus paired image/narrative row pattern, alternating image sides.
   v2.0.6: Adds two approved, existing Buktika photographs to the People and support-build
           sections using a restrained inline-media frame shared by both sections.
   v2.0.5: Support-build list only. Replaces the pill/chip treatment with a quiet responsive
           three/two/one-column semantic list using understated markers and ordinary prose rhythm.
   v2.0.4: Support Story only. Replaces the numbered journey/process diagram with a compact,
           subordinate prose vignette using the standard inner-card radius and a quiet surface.
   v2.0.3: Hero composition only. Reduces the hero to one compact headline/supporting-line
           block and moves it from the bottom centre to the right-side landscape zone,
           following EduTower's centred-vertically, 30rem composition with a mobile fallback.
   v2.0.2: Below-hero geometry only. Replaces the edge-to-edge alternating
           story-block rhythm with the canonical Buktika floating-section
           geometry used by the EduTower/MamaDEX page family: 1200px container
           alignment, 1rem section radius, card shadow, 2rem cadence and no
           negative-margin bleed. Responsive section padding follows the
           EduTower pattern at <=768px and canonical cadence at <=680px.
   v2.0.1: Hero height only. Matches EduTower's current production vertical
           dimensions: var(--hero-min) (1000px) through desktop/tablet and
           480px at the <=480px mobile breakpoint. Support photography,
           crop, overlay, text placement and all below-hero sections unchanged.
   v2.0.0: Positive Storybook rewrite. Hero now carries the approved photograph
           (assets/images/support/support-hero.png/.webp) with a light readability overlay —
           the image itself stays visible rather than sitting behind an opaque gradient.
           Section rhythm changed from repeated .sdx-card-section boxes to flowing
           .sdx-story-block sections with gentle alternating tint, to read as one narrative
           rather than seven policy cards. .sdx-cta-band still intentionally omitted — no live
           action exists yet (Item 8 — security acceptance — has not occurred).
   v1.0.0: Initial page release. No hero photograph — deliberate calm gradient hero (no coin
           artwork, no Web3 imagery) rather than a placeholder/missing image. .sdx-cta-band
           intentionally omitted: this page has no live action to solicit a click for yet
           (Item 8 — security acceptance — has not occurred). Reintroduce it once a real,
           live contribution action exists.
   ====================================================================================================== */

/* 0) Header and dependency notes
   depends on:
   - /assets/css/global.css   (canonical tokens + shared components)
   - /assets/css/themes.css   ([data-theme] alias layer)
   - /assets/css/header.css   (header partial)
   - /assets/css/footer.css   (footer partial)

   Support page rules (Colour Map v2.9.0 Section 4):
   - MUST NOT assign any pillar brand token to --page-primary/secondary/accent.
   - Uses universal tokens only: --sdx-color-stone, --sdx-color-stem-olive, --sdx-color-mama-amber.
*/

/* ======================================================================================================
   1) Page variable binding
   ====================================================================================================== */

.page-support-buktika {
  --page-bg:            var(--sdx-color-shell-bg);
  --page-primary:       var(--sdx-color-stone);
  --page-secondary:     var(--sdx-color-moss);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-livingtower-dark-base);
  --page-dark-surface:  var(--sdx-color-livingtower-dark-surface);
}

/* ======================================================================================================
   2) Base page surfaces
   ====================================================================================================== */

.page-support-buktika {
  background: var(--page-bg);
  color: var(--sdx-color-slate);
}

/* ======================================================================================================
   3) Hero
   The approved photograph (support-hero.png/.webp) carries the hero. Only enough overlay to keep
   the headline and lead readable — the image itself stays visible, not buried behind a gradient.
   ====================================================================================================== */

.page-support-buktika .hero-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  min-height: var(--hero-min);
  display: flex;
  align-items: stretch;
}

.page-support-buktika .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.page-support-buktika .hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Contrast only, bottom-weighted so the upper photograph stays clear. */
  background: linear-gradient(180deg, rgba(20, 24, 18, 0.15) 0%, rgba(20, 24, 18, 0.55) 100%);
}

.page-support-buktika .hero {
  position: relative;
  z-index: 2;
  padding: 6rem clamp(1.5rem, 6vw, 5rem);
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--hero-min);
  width: 100%;
}

.page-support-buktika .hero-content {
  max-width: 30rem;
  margin: 0;
  text-align: left;
  color: #ffffff;
}

.page-support-buktika .headline {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  margin: 0 0 1rem;
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.page-support-buktika .hero-lead {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* ======================================================================================================
   4) Typography overrides
   ====================================================================================================== */

.page-support-buktika .sdx-story-block > h2 {
  margin-bottom: 1.25rem;
}

.page-support-buktika .sdx-prose p {
  color: var(--muted);
  line-height: 1.75;
}

.page-support-buktika .support-fine-print {
  font-size: var(--small);
  color: var(--muted);
}

/* ======================================================================================================
   5) Sections and alternation
   Canonical floating-section geometry: sections sit flush inside the shared 1200px container.
   The section edge is the boundary; no negative-margin bleed or alternating width treatment.
   ====================================================================================================== */

.page-support-buktika .sdx-story-block {
  background: var(--card);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 3.5rem 2.5rem;
}

.page-support-buktika .sdx-story-block h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* ======================================================================================================
   6) Cards and tiles
   ====================================================================================================== */

/* Editorial section opening — matches EduTower's left-axis kicker/title/intro rhythm. */
.support-section-body {
  text-align: left;
}

.support-section-kicker {
  display: block;
  margin: 0 0 2.25rem;
  color: var(--page-primary);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.support-section-body h2 {
  margin: 0 0 1rem;
  text-align: left;
}

.support-section-intro {
  max-width: none;
  margin: 0 0 1.25rem;
  color: var(--muted);
  line-height: 1.75;
  text-align: left;
}

/* Paired editorial row — equal image/copy columns, alternating only on desktop. */
.support-narrative-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "media copy";
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 2.25rem;
}

.support-narrative-row--reverse {
  grid-template-areas: "copy media";
}

.support-narrative-media {
  grid-area: media;
  min-width: 0;
  margin: 0;
}

.support-narrative-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.support-narrative-copy {
  grid-area: copy;
  min-width: 0;
}

.support-narrative-copy h3 {
  margin: 0 0 1rem;
  color: var(--fg);
}

.support-narrative-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.support-narrative-copy p + p {
  margin-top: 1rem;
}

/* What-support-helps-build list — ordinary institutional content, not tags or controls. */
.support-build-list {
  display: block;
  margin: 0;
  padding-left: 1.25rem;
}

.support-build-list li {
  padding-left: 0.25rem;
  color: var(--fg);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.45;
}

.support-build-list li + li {
  margin-top: 0.55rem;
}

.support-build-list li::marker {
  color: var(--page-accent);
  font-size: 0.7em;
}

/* Support Story — an unboxed editorial pair using EduTower's narrative-row rhythm. */
.support-story-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 2.25rem;
}

.support-story-narrative,
.support-story-principles {
  min-width: 0;
}

.support-story-narrative p,
.support-story-principles p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.support-story-narrative p {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
}

.support-story-narrative p:first-child {
  color: var(--fg);
  font-family: var(--headline-font);
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
}

.support-story-narrative p + p,
.support-story-principles p + p {
  margin-top: 1rem;
}

/* Contribution rails — stacked editorial chapters, never a comparison grid. */
.support-rail-grid {
  display: block;
  margin-top: 2.25rem;
}

.support-rail-card {
  position: relative;
  min-width: 0;
  max-width: 46rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.support-rail-card:last-child {
  margin-top: 3rem;
}

.support-rail-card--primary::before {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--page-accent);
}

.support-rail-asset {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
}

.support-rail-role {
  margin: 0.375rem 0 0;
  color: var(--page-primary);
  font-size: var(--small);
  font-weight: 600;
}

.support-rail-descriptor {
  margin: 1rem 0 0;
  color: var(--fg);
  font-size: var(--body);
  line-height: 1.65;
}

/* Non-interactive prelaunch state — ordinary muted prose. */
.support-rail-status {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.6;
}

.support-rail-note {
  margin-top: 2.5rem;
}

/* "Simply support" — ordinary editorial subsection, not a nested card. */
.support-simply-box {
  max-width: 46rem;
  margin-top: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-simply-box h3 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
}

.support-simply-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.support-simply-box p + p {
  margin-top: 0.75rem;
}

.support-closing-note {
  padding-bottom: 3.5rem;
}

/* Support Wallet live receiving-destination block (BKT 50130:2026 v0.1.3 §17, §18;
   §28 Step 5). Hidden by default via the [hidden] attribute — the consumer script
   reveals it only when the governed public projection supplies an eligible
   destination for that rail. Empty/pre-launch state renders none of this. */
.support-rail-live {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.support-rail-live-label {
  margin: 0 0 0.375rem;
  font-size: var(--small);
  font-weight: 600;
  color: var(--muted);
}

.support-rail-address {
  display: block;
  word-break: break-all;
  padding: 0.625rem 0.75rem;
  border-radius: calc(var(--radius) - 4px);
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid var(--border);
  font-size: var(--small);
  color: var(--fg);
}

[data-theme="dark"] .support-rail-address {
  background: rgba(255, 255, 255, 0.04);
}

.support-rail-copy-btn {
  margin-top: 0.625rem;
  padding: 0.5rem 0.875rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--page-accent);
  background: transparent;
  color: var(--page-accent);
  font-size: var(--small);
  font-weight: 600;
  cursor: pointer;
}

.support-rail-copy-feedback {
  margin: 0.5rem 0 0;
  font-size: var(--small);
  color: var(--muted);
  min-height: 1.2em;
}

.support-rail-authority-label {
  margin: 0.75rem 0 0;
  font-size: var(--small);
  color: var(--muted);
  font-style: italic;
}

/* ======================================================================================================
   7) Buttons and CTAs
   No .sdx-btn-primary usage on this page — no live action exists yet to solicit a click for.
   ====================================================================================================== */

/* none */

/* ======================================================================================================
   8) Page modules
   .sdx-cta-band intentionally omitted — see changelog note above.
   ====================================================================================================== */

/* none */

/* ======================================================================================================
   9) Media queries
   ====================================================================================================== */

@media (max-width: 968px) {
  .page-support-buktika .hero {
    padding: 4rem clamp(1.25rem, 5vw, 3rem);
  }

  .support-narrative-row,
  .support-narrative-row--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "copy";
    gap: 1.75rem;
  }

  .support-story-row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

@media (max-width: 768px) {
  .page-support-buktika .sdx-story-block {
    padding: 2rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .page-support-buktika .hero {
    justify-content: center;
    padding: 3.5rem 1.25rem;
  }

  .page-support-buktika .hero-content {
    max-width: 100%;
    text-align: center;
  }

}

@media (max-width: 680px) {
  .page-support-buktika .sdx-story-block {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 480px) {
  .page-support-buktika .hero-wrap,
  .page-support-buktika .hero {
    min-height: 480px;
  }

  .page-support-buktika .hero {
    padding: 3rem 1.25rem;
  }
}

/* ======================================================================================================
   10) Dark mode
   ====================================================================================================== */

[data-theme="dark"] .page-support-buktika {
  background-color: var(--page-dark-base);
  --card: var(--page-dark-surface);
}