/* ======================================================================================================
   File:    eco-guilds.css
   Path:    /assets/css/eco-guilds/eco-guilds.css
   Version: v1.13.0
   Issued:  2026-07-29
   Author:  Buktika Webdesk (Binka)
   Purpose: Eco Guilds pillar page stylesheet — token consumer only.
            Shared farmer-facing institution for Eco Conservation and
            Eco Restoration. 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.13.0 (2026-07-30): Reassigned the operational documentary images and
     restored the canonical shared EduTower lightbox trigger and caption
     treatment for all four operational photographs.
   v1.12.0 (2026-07-29): Removed the rejected abstract progression, arrow
     rhythm and numbered authority styles; selectively restored and modernised
     the concrete v1.5.7 image cards, member functions, joining steps, working
     rhythm and restrained boundary layout.
   v1.11.0 (2026-07-29): Added the approved operational recovery sections
     using the Eco Conservation heading, progression, image-and-prose, and
     restrained authority-boundary grammar.
   v1.10.7 (2026-07-29): Removed the retired framework-link strip styles after
     the channel cards were connected directly to the terminal map CTA.
   v1.10.6 (2026-07-29): Removed the rejected shared-role and next-step grids;
     retained only the quiet framework-link treatment beneath one concise
     shared explanation.
   v1.10.5 (2026-07-29): Removed all selectors owned only by the rejected
     duplicated channel-detail sections.
   v1.10.4 (2026-07-29): Restored the approved EduTower card hover/focus lift;
     the channel actions themselves remain motionless.
   v1.10.3 (2026-07-29): Rebuilt both channel cards on the approved neutral
     EduTower shell, removed side rails, and bound each channel to its governed
     heading, button-gradient, shadow, and focus tokens.
   v1.10.2 (2026-07-29): Reused the approved EduTower Record heading-body
     contract for the Eco Guild channel section's left-aligned heading axis.
   v1.10.1 (2026-07-29): Enforced the channel images' visible 4:3 crop with
     a ratio-reserving media row while preserving intrinsic image dimensions.
   v1.10.0 (2026-07-29): Adopted the canonical global section-header pattern
     and redesigned channel cards around full-width 4:3 imagery, concise copy,
     programme metadata, and filled primary actions.
   v1.9.0 (2026-07-29): Added equal square image treatment at the top of
     both primary ecological channel cards.
   v1.8.0 (2026-07-29): Made each place-based hero statement a block-level
     line while retaining natural sentence wrapping on narrow screens.
   v1.7.0 (2026-07-29): Removed the retired hero-eyebrow styling after the
     place-based hero correction.
   v1.6.0 (2026-07-28): Simplified the rejected deep-dive layout. Eco
     Conservation and Eco Restoration remain the only equal public choices;
     programme context is subordinate inside concise orientation panels.
   v1.5.0 (2026-07-28): Added equal two-channel orientation, bounded query-origin
     treatment, shared foundation mechanism, channel participation, public knowledge,
     keyboard focus, responsive stacking, and balanced light/dark channel accents.
   v1.4.4 (2026-07-16): Let Trust Bridge body copy use the full section width.
   v1.4.3 (2026-07-16): Added breathing room between the Guild Rhythm image and card grid.
   v1.4.2 (2026-07-15): Added scoped lightbox-trigger styling to the horizontal “What it is” cards.
   v1.4.1 (2026-07-15): Reworked the “What it is” image cards into stacked horizontal media cards
     on desktop, with 4:3 vertical stacking retained on mobile.
   v1.4.0 (2026-07-15): Added scoped documentary-image, image-card, and mechanism-strip treatments.
   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);
}

.page-eco-guilds .eco-guild-hero-intro span {
  display: block;
}

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

/* none */

/* ======================================================================================================
   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
   ====================================================================================================== */

.page-eco-guilds .eco-wide-figure {
  margin: 2.5rem auto 0;
}

.page-eco-guilds .eco-wide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.page-eco-guilds .eco-what-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.page-eco-guilds .eco-image-card {
  display: grid;
  grid-template-columns: minmax(18rem, 40%) minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.page-eco-guilds .eco-image-card-media {
  position: relative;
  min-width: 0;
  min-height: 16rem;
  overflow: hidden;
}

.page-eco-guilds .eco-image-card-media .eco-card-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.page-eco-guilds .eco-image-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.page-eco-guilds .eco-image-card-body h3 {
  margin-top: 0;
}

.page-eco-guilds .eco-rhythm-figure {
  margin-bottom: 2.5rem;
}

.page-eco-guilds .eco-image-card-media .media-thumb,
.page-eco-guilds .eco-rhythm-figure .media-thumb {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.page-eco-guilds .eco-rhythm-figure .media-thumb {
  height: auto;
}

.page-eco-guilds .media-thumb:focus-visible {
  outline: 3px solid var(--page-primary);
  outline-offset: -3px;
}

.page-eco-guilds .media-thumb::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.page-eco-guilds #media-lightbox .lightbox-caption {
  align-self: stretch;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

/* ── Shared front door: equal public channels ── */
.page-eco-guilds .eco-channel-orientation > .edutower-section-body {
  text-align: left;
}

.page-eco-guilds .eco-channel-orientation > .edutower-section-body > .eyebrow {
  margin-bottom: 2.25rem;
  color: var(--page-primary);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.15em;
}

.page-eco-guilds .eco-channel-orientation > .edutower-section-body > .section-title {
  margin: 0 0 1rem;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--h2);
  text-align: left;
}

.page-eco-guilds .eco-channel-orientation > .edutower-section-body > .section-intro {
  max-width: none;
  margin: 0 0 1.25rem;
  text-align: left;
}

.page-eco-guilds .eco-channel-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1.5rem;
}

.page-eco-guilds .eco-channel-card {
  --channel-heading: var(--page-primary);
  --channel-button-from: var(--page-primary);
  --channel-button-to: var(--page-depth);
  --channel-button-shadow: rgba(from var(--page-primary) r g b / 0.32);
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--card-shadow);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.page-eco-guilds .eco-channel-card:hover,
.page-eco-guilds .eco-channel-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.page-eco-guilds .eco-channel-card--conservation {
  --channel-heading: var(--sdx-color-teal-deep);
  --channel-button-from: var(--sdx-color-teal-deep);
  --channel-button-to: var(--sdx-color-mama-depth);
  --channel-button-shadow: rgba(from var(--sdx-color-teal-deep) r g b / 0.32);
}

.page-eco-guilds .eco-channel-card--restoration {
  --channel-heading: var(--sdx-color-green-deep);
  --channel-button-from: var(--sdx-color-mama-amber);
  --channel-button-to: var(--sdx-color-stem-olive);
  --channel-button-shadow: rgba(from var(--sdx-color-stem-olive) r g b / 0.32);
}

.page-eco-guilds .eco-channel-card-image {
  display: block;
  width: 100%;
  height: 75cqi;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--surface-alt);
}

.page-eco-guilds .eco-channel-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
}

.page-eco-guilds .eco-channel-card-body h3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  color: var(--channel-heading);
  font-family: var(--headline-font);
  font-size: 1.375rem;
  font-weight: 700;
}

.page-eco-guilds .eco-channel-lead {
  margin: 0;
  color: var(--fg);
  font-size: 1.05rem;
  font-weight: 650;
}

.page-eco-guilds .eco-channel-copy {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.page-eco-guilds .eco-channel-programme {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.page-eco-guilds .eco-channel-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.5rem;
  margin-top: 0.25rem;
  background: linear-gradient(145deg, var(--channel-button-from) 0%, var(--channel-button-to) 100%);
  box-shadow: 0 3px 12px var(--channel-button-shadow);
  color: #ffffff;
  text-align: center;
  transition: none;
}

.page-eco-guilds .eco-channel-action:hover,
.page-eco-guilds .eco-channel-action:focus-visible {
  transform: none;
  animation: none;
}

.page-eco-guilds .eco-channel-action:hover {
  box-shadow: 0 6px 18px var(--channel-button-shadow);
}

.page-eco-guilds .eco-channel-origin {
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--channel-heading);
  border-radius: 999px;
  color: var(--channel-heading);
  background: color-mix(in srgb, var(--channel-heading) 8%, var(--card));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
}

.page-eco-guilds .eco-channel-card--conservation .eco-channel-action:focus-visible {
  outline: 3px solid var(--sdx-color-teal-deep);
  outline-offset: 0.25rem;
}

.page-eco-guilds .eco-channel-card--restoration .eco-channel-action:focus-visible {
  outline: 3px solid var(--sdx-color-green-deep);
  outline-offset: 0.25rem;
}

/* ── Selective v1.5.7 operational body recovery ── */
.page-eco-guilds .eco-operational-heading {
  text-align: left;
}

.page-eco-guilds .eco-operational-heading .eyebrow {
  display: block;
  margin-bottom: 2.25rem;
  color: var(--page-primary);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.page-eco-guilds .eco-operational-heading .section-title {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  text-align: left;
}

.page-eco-guilds .eco-operational-heading .section-intro {
  max-width: none;
  margin: 0 0 2rem;
  text-align: left;
}

.page-eco-guilds .eco-operational-section .section-intro,
.page-eco-guilds .eco-operational-section .card p,
.page-eco-guilds .eco-operational-section .eco-image-card-body p {
  color: var(--muted);
  font-family: var(--text-font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.7;
}

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

.page-eco-guilds .eco-benefit-grid,
.page-eco-guilds .eco-join-grid,
.page-eco-guilds .eco-rhythm-grid,
.page-eco-guilds .eco-boundary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.page-eco-guilds .eco-join-grid,
.page-eco-guilds .eco-boundary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-eco-guilds .eco-benefit-grid .card,
.page-eco-guilds .eco-join-grid .card,
.page-eco-guilds .eco-rhythm-grid .card,
.page-eco-guilds .eco-boundary-grid .card {
  min-width: 0;
}

.page-eco-guilds .eco-benefit-grid h3,
.page-eco-guilds .eco-join-grid h3,
.page-eco-guilds .eco-rhythm-grid h3,
.page-eco-guilds .eco-boundary-grid h3 {
  margin-top: 0;
}

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

.page-eco-guilds .eco-boundary-section .eco-card-boundary h3 {
  color: var(--fg);
}

/* ── 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 {
  color: var(--sdx-color-leaf-green);
  opacity: 0.92;
}

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

@media (min-width: 768px) {
  .page-eco-guilds .eco-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .page-eco-guilds .eco-channel-programme {
    min-height: 3.2em;
    line-height: 1.6;
  }

  .page-eco-guilds .eco-join-grid,
  .page-eco-guilds .eco-boundary-grid {
    grid-template-columns: 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%; }

  .page-eco-guilds .eco-benefit-grid,
  .page-eco-guilds .eco-join-grid,
  .page-eco-guilds .eco-rhythm-grid,
  .page-eco-guilds .eco-boundary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-eco-guilds .eco-image-card {
    grid-template-columns: 1fr;
  }

  .page-eco-guilds .eco-image-card-media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .page-eco-guilds .eco-image-card-body {
    padding: 1.5rem;
  }
}

@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 */
}

/* ======================================================================================================
   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);
}

[data-theme="dark"] .page-eco-guilds .eco-channel-orientation > .edutower-section-body > .eyebrow {
  color: var(--sdx-color-mama-amber);
}

[data-theme="dark"] .page-eco-guilds .eco-operational-heading .eyebrow {
  color: var(--page-accent);
}

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

[data-theme="dark"] .page-eco-guilds .eco-channel-card--conservation h3,
[data-theme="dark"] .page-eco-guilds .eco-channel-card--conservation .eco-channel-origin {
  color: var(--sdx-color-mama-cyan);
}

[data-theme="dark"] .page-eco-guilds .eco-channel-card--restoration h3,
[data-theme="dark"] .page-eco-guilds .eco-channel-card--restoration .eco-channel-origin {
  color: var(--sdx-color-leaf-green);
}

/* ======================================================================================================
   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);
}