/*
V7-HEADER
Title:    Buktika - About Page Styles
File:     about.css
Path:     /assets/css/about/about.css
Version:  v8.7.0
Issued:   2026-03-13
Author:   Buktika Webdesk (Binka)
Purpose:  About page — Chapter 2 of the narrative spine. Story + why it holds + Trilogy Strip.

          Palette (Colour Map v3.0.0 Section 5.12):
          - page-primary    = --sdx-color-green-deep   #2e5d3a
          - page-secondary  = --sdx-color-mama-amber   #f5b014
          - page-accent     = --sdx-color-mama-amber   #f5b014
          - page-depth      = --sdx-color-stem-olive   #464820
          - Page background : #f5f3ef (exception permitted Section 5.12)
          - Hero vignette   : rgba(46,93,58,0.20) bottom-edge only

          Permanent exceptions:
          - #f5f3ef page-bg: no token, Section 5.12 permits
          - #ffffff hero text: confirmed global.css v3.3.0
          - #ffffff overlay text on trilogy strip: DOC-02 permanent exception

Colour Map:    v3.5.0 (normative)
Design System: v4.0.0
ChangeLog:
  - v8.7.0 (2026-03-13): BREADCRUMB MIGRATED TO global.css v3.15.0.
            Removed: all .page-about .sdx-spine-breadcrumb rules.
            Page CSS owns nothing for this component.
  - v8.6.0 (2026-03-13): TRILOGY STRIP MIGRATED TO global.css v3.14.0.
            Removed: .sdx-trilogy-strip, .trilogy-chapter, :hover/:focus, .active,
            .trilogy-thumb (base), .trilogy-caption, .trilogy-num, .trilogy-label,
            @media 768px/640px trilogy rules.
            Retained: .trilogy-thumb-[slug] backgrounds + .trilogy-doors: display:none.
            Fixed: active border was var(--page-secondary) — wrong. Now --sdx-color-mama-amber
            in global.css per DOC-02 §4.1. letter-spacing 0.06em→0.06rem (removed).
            UX fix: inactive panels full opacity (global.css).
  - v8.5.0 (2026-03-09): .trilogy-cta CSS removed (orphaned — buttons removed from HTML).
            .container padding-top: 0 added — global.css padding:3rem 2rem was creating
            gap between breadcrumb border and first section. Override top only.
  - v8.6.0 (2026-03-09): H2 MARGIN FIX. .sdx-card-section > h2 { margin-bottom: 2rem }
            added — global.css sets margin: 0 on h2, leaving no space between the
            amber underline and the content below. margin-bottom is not in the
            protected property list (DOC-02 §4.1). Scoped under .page-about.
  - v8.5.0 (2026-03-09): BREADCRUMB PADDING FIX. padding: 0.625rem 1.5rem added to
            .sdx-spine-breadcrumb — vertical breathing room for strip text. max-height
            removed — clips content rather than constraining gracefully. Orphaned
            .hero-actions rule removed (hero-actions div gone since v8.4.0 NV1).
  - v8.4.0 (2026-03-09): COMPLIANCE FIXES against www-F v1.0.0 + HTML validity.
            NV1: .btn-hero-primary/.hero-actions CSS removed — button gone from HTML (www-F §5.2 HR).
                 Hero-actions mobile rules removed (orphaned).
            NV2: .trilogy-cta is now a <span> — no CSS change needed, sdx-btn styling applies.
            NV3: .sdx-spine-breadcrumb CSS block added per www-F §6.4.
                 display:flex, min-height:2.5rem, max-height:3.5rem, background:var(--bg),
                 border-bottom:1px solid var(--border), no card surface, no border-radius,
                 all sizing in rem. Active item: font-weight:700, color:var(--fg),
                 cursor:default, pointer-events:none. Separator via ::after content:'/'.
                 Mobile: gap:1rem at max-width:600px.
            NV4: .story-content p font-size: 1.0625rem → var(--body).
            NV5: .story-closing font-size: 1.125rem → var(--body).
  - v8.3.0 (2026-03-09): CAPTION VISIBILITY FIX. z-index: 1 on .trilogy-thumb,
            z-index: 2 on .trilogy-caption — ensures caption renders above thumb in
            all browsers. Caption overlay rgba(0,0,0,0.52) → rgba(0,0,0,0.72) —
            inactive panels at opacity 0.55 were reducing overlay to near-invisible
            on light pastoral images. Increased overlay compensates for parent opacity.
  - v8.2.0 (2026-03-09): COMPLIANCE FIXES against BKT-DOC-www-E v2.2.0 audit.
            V5: Mobile stacking rule added at max-width: 768px — flex-direction: column,
                min-height: 120px (www-E v2.2.0 §11/S13).
            V7: .trilogy-label font-size: 0.9375rem → font-size: var(--body) (§13/ai.md).
            V8: Section 8 comment updated — old §9.4/§9.5 refs → §13/§14 (v2.2.0 numbering).
                Added .trilogy-cta positioning rules (margin-top: 0.5rem, align-self: flex-start,
                font-size: var(--small)) for inactive panel CTA (§13/S12).
                .trilogy-doors comment updated: "all three spine pages" not "Living Tower only".
  - v8.1.0 (2026-03-08): Section 2 'Built to Hold' added to HTML. No new CSS rules
            required — section uses existing .story-content and .sdx-card-section
            from global.css. Version bump only.
  - v8.0.0 (2026-03-08): STRIP AND REBUILD. Removed all CSS for What We Do cards,
            Living Tower section, pillar cards, foundation card, guild card, values
            grid, teams grid, and all associated button rules. Those sections were
            removed from about.html v4.0.0. Only story and Trilogy Strip remain.
            Trilogy Strip CSS added per BKT-DOC-www-E §9.4.
  - v7.1.0 (2026-03-08): Evaluation fixes. teams-photo border-radius px → var(--radius).
            Pillar button font-size 0.9375rem → 1rem.
*/

/* 0) depends on: global.css, themes.css, partials/header.css, partials/footer.css */

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

.page-about {
  --page-bg:            #f5f3ef;
  --page-primary:       var(--sdx-color-green-deep);
  --page-secondary:     var(--sdx-color-mama-amber);
  --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);
  --hero-image:         url('/assets/images/about/about-hero.webp');
  --hero-vignette-from: rgba(46, 93, 58, 0.20);
  --hero-vignette-to:   rgba(46, 93, 58, 0);

  background-color: var(--page-bg);
  color: var(--fg);
}

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

/* Container top padding zeroed — breadcrumb sits immediately above content.
   global.css gives .container { padding: 3rem 2rem }. Override top only. */
.page-about .container {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 0;
}

/* ======================================================================================================
   3) Hero
   ====================================================================================================== */

.page-about .hero-wrap {
  position: relative;
  background: var(--hero-image) center / cover no-repeat;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  min-height: var(--hero-min);
}

.page-about .hero-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--hero-vignette-from) 0%, var(--hero-vignette-to) 18%);
  z-index: 1;
  pointer-events: none;
}

.page-about .hero {
  position: relative;
  z-index: 2;
  padding: 5rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min);
}

.page-about .hero-content {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.page-about .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  margin: 0 0 1.5rem;
}

/* ======================================================================================================
   3b) Spine Breadcrumb Strip
   BKT-DOC-www-F §6.4. Migrated to global.css v3.15.0. Page CSS owns nothing.
   ====================================================================================================== */

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

/* Space between section h2 (with amber underline) and the content that follows.
   global.css sets margin: 0 on .sdx-card-section > h2. That rule is not overridden —
   margin-bottom is not in the protected property list (DOC-02 §4.1). */
.page-about .sdx-card-section > h2 {
  margin-bottom: 2rem;
}

/* ======================================================================================================
   5) Sections and alternation
   ====================================================================================================== */

/* none */

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

/* Story container */
.page-about .story-content {
  max-width: 900px;
  margin: 0 auto;
}

.page-about .story-content p {
  font-size: var(--body);
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.page-about .story-content p:last-child { margin-bottom: 0; }

/* Pull quote */
.page-about .story-pull-quote {
  font-family: var(--headline-font);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--page-primary);
  border-left: 4px solid var(--page-primary);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: rgba(46, 93, 58, 0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.4;
}

[data-theme="dark"] .page-about .story-pull-quote {
  background: rgba(245, 176, 20, 0.06);
  border-left-color: var(--page-secondary);
}

/* Closing line */
.page-about .story-closing {
  font-size: var(--body);
  font-weight: 600;
  color: var(--fg);
  font-style: italic;
  margin-bottom: 0;
}

/* Floated figure card — §8.15.9.1
   Image flush against card edges. Caption padded. Hover lift suppressed. */
.page-about .sdx-figure--right.card,
.page-about .sdx-figure--left.card {
  padding: 0;
}

.page-about .sdx-figure--right.card .sdx-figure-caption,
.page-about .sdx-figure--left.card .sdx-figure-caption {
  padding: 0.5rem 0.75rem 0.625rem;
}

.page-about .sdx-figure--right.card img,
.page-about .sdx-figure--left.card img {
  display: block;
  width: 100%;
  border-radius: calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px) 0 0;
}

.page-about .sdx-figure--right.card:hover,
.page-about .sdx-figure--left.card:hover {
  transform: none;
  box-shadow: var(--card-shadow);
}

/* ======================================================================================================
   7) Buttons and CTAs
   ====================================================================================================== */

/* .btn-hero-primary removed from About hero per www-F §5.2 HR.
   No hero button on About. Hero is headline-only. */

/* ======================================================================================================
   8) Page modules — Trilogy Strip
   BKT-DOC-www-E v2.2.0 §13. Geometry, behaviour, typography: global.css v3.14.0.
   This page owns thumbnail backgrounds and .trilogy-doors visibility only.
   ====================================================================================================== */

/* Thumbnail backgrounds — §14 normative image paths */
.page-about .trilogy-thumb-landing      { background-image: url('/assets/images/landing/index-hero.webp'); }
.page-about .trilogy-thumb-about        { background-image: url('/assets/images/about/about-hero.webp'); }
.page-about .trilogy-thumb-living-tower { background-image: url('/assets/images/living-tower/living-tower-hero.webp'); }

/* .trilogy-doors — required element per §12/§13. Hidden on About. */
.page-about .trilogy-doors { display: none; }

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

@media (min-width: 2560px)                         { .page-about .hero-wrap, .page-about .hero { min-height: 1150px; } }
@media (min-width: 1920px) and (max-width: 2559px) { .page-about .hero-wrap, .page-about .hero { min-height: 1000px; } }
@media (min-width: 1680px) and (max-width: 1919px) { .page-about .hero-wrap, .page-about .hero { min-height: 750px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .page-about .hero-wrap, .page-about .hero { min-height: 650px; } }
@media (min-width: 968px)  and (max-width: 1279px) { .page-about .hero-wrap, .page-about .hero { min-height: 580px; } }
@media (min-width: 768px)  and (max-width:  967px) { .page-about .hero-wrap, .page-about .hero { min-height: 520px; } }
@media (min-width: 641px)  and (max-width:  767px) { .page-about .hero-wrap, .page-about .hero { min-height: 500px; } }

@media (max-width: 640px) {
  .page-about .hero-wrap { min-height: 480px; }
  .page-about .hero      { min-height: 480px; padding: 3rem 1.5rem; }
}

/* Trilogy Strip mobile stacking — owned by global.css v3.14.0 */

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

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

/* .btn-hero-secondary dark mode — inherited from global.css */