/* ======================================================================================================
   File:    eco-guilds.css
   Path:    /assets/css/eco-guilds/eco-guilds.css
   Version: v1.3.0
   Issued:  2026-06-06
   Author:  Buktika Webdesk (Binka)
   Purpose: Eco Guilds pillar page stylesheet — token consumer only.
            Farm-first restoration delivery. Deep forest structure with
            warm campfire confidence.
   Pillar:  BKT-PIL-02
   Colour Map:    v2.9.0 Section 5.2 (LOCKED)
   Design System: v4.0.0 (BKT-DOC-01/02/03 v2.0.0)
   License: © Buktika, 2026. All rights reserved.
   ISO Reference: ISO 27001, ISO 9241-110
   Source Naming Standard: Buktika v7.1 (ISO Aligned)

   Changelog:
   v1.2.0 (2026-03-09): SPACING AND GRID FIXES.
     - .section-title: margin-bottom:1.75rem added. global sets margin:0 so border-bottom
       had zero clearance below the bar line. margin-bottom is not on the DOC-02 §4.1
       prohibited override list — permitted.
     - .eco-rhythm-grid: repeat(2,1fr) forces 2×2 layout on rhythm section. Global
       auto-fit minmax(280px) was rendering 3+1 at mid-widths. Collapses to 1-col ≤480px.
   v1.1.0 (2026-03-09): eco-join-grid base rule removed.
     - Departs from eco-guilds.css v2.0.0 (old). All violations corrected.
     - FIXED: color: var(--sdx-color-slate) → var(--fg). DOC-01 §2.5 HARD RULE.
     - FIXED: .section-title::after pseudo-element removed. global.css owns border-bottom. DOC-02 §4.1.
     - FIXED: .hero-wrap missing position:relative. DOC-02 §3.1.
     - FIXED: .hero min-height added to match .hero-wrap. DOC-02 §3.2 HARD RULE.
     - FIXED: .sdx-btn-primary color: var(--sdx-color-slate-dark) → #ffffff. Large text rule.
               DOC-03 §5.2 / §8.3.1. Amber gradient start (1.89:1) — button font-size ≥1rem bold.
     - FIXED: .benefit-number circle badge retired → canonical gate-num. DOC-03 §13.
     - FIXED: .sdx-btn-primary in card context: no translateY. DOC-03 §5.3-HR1.
     - ADDED: Section-title divider override: var(--page-primary) not amber. Owner instruction.
     - ADDED: Card border-left: var(--page-primary). Owner instruction.
     - ADDED: Trust Bridge typography — matches www-E §5.4 / Viridians reference pattern.
     - ADDED: Asymmetric hero padding — text into clear sky zone. DOC-02 §3.2 owner override.
     - RETAINED: Boundary card orange border — signals "does not do" register.
     - RETAINED: .eco-join-grid 3-col layout at ≥640px.
   ====================================================================================================== */

/* 0) Dependencies
   global.css  — canonical tokens, components, .sdx-card-section, .cards, .card, .gate-num,
                  .container, section-title border-bottom (global owns; page overrides colour only)
   themes.css  — [data-theme] alias layer + pillar dark overrides
   header.css  — header partial
   footer.css  — footer partial
*/

/* ======================================================================================================
   1) Page variable binding — SDL-PIL-02 §1 (LOCKED)
   ====================================================================================================== */

.page-eco-guilds {
  --page-bg:            var(--sdx-color-eco-bg);             /* #f5f7f2 — forest breath           */
  --page-primary:       var(--sdx-color-green-deep);         /* #2e5d3a — deep forest             */
  --page-secondary:     var(--sdx-color-green-soft);         /* #3a6f54 — canopy                  */
  --page-accent:        var(--sdx-color-mama-amber);         /* #f5b014 — campfire amber          */
  --page-depth:         var(--sdx-color-stem-olive);         /* #464820 — bark, ground shadow     */
  --page-dark-base:     var(--sdx-color-eco-dark-base);      /* #0a0f0b — night forest            */
  --page-dark-surface:  var(--sdx-color-eco-dark-surface);   /* #111a13 — forest floor cards      */

  --hero-image:         url('/assets/images/eco-guilds/eco-guilds-hero.webp');
  --hero-vignette-from: color-mix(in srgb, var(--page-primary) 20%, transparent);
  --hero-vignette-to:   color-mix(in srgb, var(--page-primary) 0%, transparent);
}

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

.page-eco-guilds {
  background: var(--page-bg);
  color: var(--fg);  /* DOC-01 §2.5 HARD RULE: NEVER --sdx-color-slate on themed surface */
}

/* NOTE: .container is owned entirely by global.css. No page override. www-A §2.1. */

/* ======================================================================================================
   3) Hero
   Bottom vignette only. Max opacity 0.20. Fade at 32%. PIL-02 §3 / DOC-02 §3.
   ====================================================================================================== */

.page-eco-guilds .hero-wrap {
  position: relative;  /* Required: pseudo-element uses position:absolute. DOC-02 §3.1. */
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 40%;
  min-height: var(--hero-min);
}

.page-eco-guilds .hero {
  min-height: var(--hero-min);  /* DOC-02 §3.2 HARD RULE: must match hero-wrap at every breakpoint */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem 12rem;  /* Asymmetric: bottom weight lifts text into clear sky zone. DOC-02 §3.2 owner override. */
}

.page-eco-guilds .hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--hero-vignette-from) 0%,
    var(--hero-vignette-to)   32%
  );
}

/* DOC-02 §3.3.4 HARD RULE: page CSS must define hero-content — not in global.css */
.page-eco-guilds .hero-content {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

/* DOC-02 §3.3.1 — pillar headline size */
.page-eco-guilds .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

/* PIL-02 §4: tagline = universal amber. DOC-01 §13 HARD RULE. */
.page-eco-guilds .tagline {
  color: var(--page-accent);
}

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

/* none */

/* ======================================================================================================
   5) Sections and alternation
   Section-title divider: override global amber → page-primary at 55% opacity (light) / 35% (dark).
   Owner instruction: Eco Guilds structural colour is green-deep, not amber.
   Applies to ALL .section-title on this page. BKT-DOC-www-C Rule 8.
   DOC-02 §4.1: border-bottom-color only — text-align/font/weight not overridable.
   ====================================================================================================== */

.page-eco-guilds .section-title,
.page-eco-guilds .sdx-card-section > h2 {
  border-bottom-color: color-mix(in srgb, var(--page-primary) 55%, transparent);
  margin-bottom: 1.75rem;  /* global sets margin:0; this creates the gap below the bar line. */
}

[data-theme="dark"] .page-eco-guilds .section-title,
[data-theme="dark"] .page-eco-guilds .sdx-card-section > h2 {
  border-bottom-color: color-mix(in srgb, var(--page-primary) 35%, transparent);
}

/* ======================================================================================================
   6) Cards
   Override global .card border-left from amber to green-deep.
   Owner instruction. www-C Rule 8.
   Boundary cards retain orange — signals "does not do" register.
   ====================================================================================================== */

.page-eco-guilds .card {
  border-left-color: var(--page-primary);
}

[data-theme="dark"] .page-eco-guilds .card {
  border-left-color: color-mix(in srgb, var(--page-primary) 70%, transparent);
}

/* Boundary cards — orange signals constraint / limit / "not our role" */
.page-eco-guilds .eco-card-boundary {
  border-left-color: var(--sdx-color-reporters-orange);
}

.page-eco-guilds .eco-card-boundary h3 {
  color: var(--sdx-color-reporters-orange);
}

[data-theme="dark"] .page-eco-guilds .eco-card-boundary {
  border-left-color: color-mix(in srgb, var(--sdx-color-reporters-orange) 65%, transparent);
}

/* ======================================================================================================
   7) Buttons
   PIL-02 §5: gradient 145deg, amber (#f5b014) → stem-olive (#464820).
   DOC-03 §5.2 LARGE TEXT RULE: amber start = 1.89:1 against white.
   Text MUST be #ffffff. Button font-size MUST be ≥1rem bold to qualify as large text (≥3:1).
   DOC-03 §8.3.1: dark end stop → #ffffff mandatory. NEVER var(--fg) or var(--sdx-color-slate-dark).
   ====================================================================================================== */

.page-eco-guilds .sdx-btn-primary {
  background: linear-gradient(145deg, var(--page-accent) 0%, var(--page-depth) 100%);
  color: #ffffff;  /* DOC-03 §8.3.1 + §5.2: dark stop + large text rule. NEVER change. */
  font-size: 1rem;
  font-weight: 700;  /* Bold ≥1rem = large text threshold. WCAG 2.2 SC 1.4.3 ≥3:1 at amber start. */
  box-shadow: 0 4px 14px color-mix(in srgb, var(--page-depth) 28%, transparent);
}

.page-eco-guilds .sdx-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--page-depth) 36%, transparent),
              0 4px 16px color-mix(in srgb, var(--page-accent) 22%, transparent);
}

/* Button inside card: no lift. DOC-03 §5.3-HR1. */
.page-eco-guilds .card .sdx-btn-primary:hover {
  transform: none;
  filter: brightness(1.08);
}

/* ======================================================================================================
   8) Page modules — eco-* prefix
   ====================================================================================================== */

/* ── Trust Bridge — BKT-DOC-www-E §5.4 ──
   Section-title divider colour is handled by page-level rule in §5 above.
   No per-section override needed. */

.page-eco-guilds .eco-guilds-trust-bridge {
  position: relative;
}

/* Section intro: enlarged — reads as the emotional opening line it is */
.page-eco-guilds .eco-guilds-trust-bridge .section-intro {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--page-primary);
  text-align: center;
}

/* Body paragraphs: slightly larger than base, centred, tighter line length */
.page-eco-guilds .eco-guilds-trust-bridge p:not(.section-intro) {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  text-align: center;
  color: var(--muted);
  line-height: 1.75;
}

/* ── gate-num — DOC-03 §13 canonical watermark ──
   §13-HR2: colour = var(--page-primary). NEVER var(--page-accent) amber.
   opacity: 0.40 light / 0.26 dark. */
.page-eco-guilds .gate-num {
  font-family: var(--headline-font);
  font-size: clamp(2.25rem, 2.1vw, 2.75rem);
  font-weight: 800;
  color: var(--page-primary);
  opacity: 0.40;
  line-height: 1;
  margin-bottom: 0.625rem;
}

[data-theme="dark"] .page-eco-guilds .gate-num {
  opacity: 0.26;
}

/* ── Join grid — 3-col forced at ≥640px. Below that global auto-fit handles collapse. ── */

/* ── Rhythm grid — always 2×2. Four cards, even pairs. ──
   auto-fit minmax(280px) would render 3+1 at mid-widths. Force 2-col explicitly.
   Mobile (≤480px) collapses to 1-col — see §9. ── */
.page-eco-guilds .eco-rhythm-grid {
  grid-template-columns: repeat(2, 1fr);
}

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

@media (min-width: 640px) {
  .page-eco-guilds .eco-join-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  /* DOC-02 §3.3.6: hero-wrap and hero min-height must match at every breakpoint */
  .page-eco-guilds .hero-wrap,
  .page-eco-guilds .hero { min-height: 480px; }
  .page-eco-guilds .hero-wrap { background-position: center 35%; }
}

@media (max-width: 480px) {
  .page-eco-guilds .hero-wrap,
  .page-eco-guilds .hero { min-height: 400px; }
  .page-eco-guilds .hero { padding: 3rem 1.25rem; }  /* symmetric for short frame */
  .page-eco-guilds .eco-rhythm-grid { grid-template-columns: 1fr; }
}

/* ======================================================================================================
   10) Dark mode
   [data-theme="dark"] only. @media prefers-color-scheme MUST NOT appear. DOC-01 §3.2.
   Per-pillar --bg and --card overrides handled in themes.css.
   Page-specific dark adjustments only here.
   ====================================================================================================== */

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

/* Section-title divider dark — handled by page-level rule in §5 above */

/* Card h3 in dark: leaf-green for readability on dark forest surface */
[data-theme="dark"] .page-eco-guilds .card h3 {
  color: var(--sdx-color-leaf-green);
}

/* Trust Bridge intro in dark: leaf-green replaces page-primary */
[data-theme="dark"] .page-eco-guilds .eco-guilds-trust-bridge .section-intro {
  color: var(--sdx-color-leaf-green);
}

/* Boundary cards dark */
[data-theme="dark"] .page-eco-guilds .eco-card-boundary h3 {
  color: color-mix(in srgb, var(--sdx-color-reporters-orange) 80%, var(--sdx-color-mama-amber));
}
/* ======================================================================================================
   11) Page 2 shortcut — device-only convenience card, shown by eco-guilds.js v1.1.0
   ====================================================================================================== */

.eco-guilds-p2-shortcut {
  background: var(--card);
  border-top: 3px solid var(--page-primary);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 2rem;
}

.eco-guilds-p2-shortcut-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.eco-guilds-p2-shortcut-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.eco-guilds-p2-shortcut-text {
  margin: 0;
  color: var(--fg);
}

.eco-guilds-p2-shortcut-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.eco-guilds-p2-shortcut-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.eco-guilds-p2-shortcut-clear:hover {
  color: var(--fg);
}

[data-theme="dark"] .eco-guilds-p2-shortcut {
  background: var(--page-dark-surface);
  border-top-color: var(--sdx-color-leaf-green);
}