/*
V7-HEADER
File:     reporters.css
Path:     /assets/css/reporters/reporters.css
Version:  v4.3.0
Issued:   2026-04-03
Author:   Buktika Webdesk (Binka)
Purpose:  Reporters pillar page token consumer. PIL-04 v1.0.0 + DOC-02 + DOC-03 + ai.md HARD RULES.
          page-bg:#f7f4ed | page-primary:mama-amber #f5b014 | page-accent:reporters-orange #d94328
          page-depth:stem-olive #464820

ChangeLog:
  v4.2.3 (2026-04-03): Dark theme audience card tuning.
          Viridians audience card left frame edge strengthened in dark mode.
          Fix stays page-scoped: .reporters-audience-card is an Reporters-specific
          component, not the canonical shared .card owned by global.css.
  v4.2.2 (2026-04-03): Reporters dark token binding corrected to PIL-04 values.
          --page-dark-base: livingtower-dark-base → #0f0c08 exception.
          --page-dark-surface: livingtower-dark-surface → #1c160f exception.
          No storybook selectors changed.
  v4.2.1 (2026-03-19): .reporters-audience-cta:hover — add color: #ffffff. Global <a>:hover
          coral catchall was overriding button text colour on hover. Permanent fix: explicit
          white on hover cascades over global rule.
  v4.2.0 (2026-03-19): §8 extended — .reporters-audience-grid three-card routing section.
          Icons: 4.6875rem per contact.css canonical. Card hover: var(--card-shadow-hover)
          + translateY(-0.1875rem). Farmers CTA: gradient green-deep → stem-olive.
          Viridians border-left + CTA: purple-deep → teal-deep (navigational colour coding
          per _support-template §7). Dark mode: no per-card h3 override (inherits fg),
          no per-CTA dark override (gradients persist). Trilogy strip rules carried over.
  v1.1.0 (2026-03-18): DOC-03 §8-HR1 compliance + V7-HEADER added.
    V1 FIXED: .card::before gradient stripe removed per DOC-03 §8-HR1.
              Gradient fills are reserved exclusively for interactive button elements.
              Replaced with flat var(--page-primary) border-top: 3px solid — consistent
              with .process-item treatment already present on this page.
    V2 ADDED: V7-HEADER block — was absent. Required per session rules.
  v1.0.0 (2026-03-18): Initial build.
*/

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


.page-reporters {
  --page-bg:            #f7f4ed;                                    /* warm parchment — no token, exception permitted per rebuild §3.4 */
  --page-primary:       var(--sdx-color-mama-amber);               /* #f5b014 — golden hour             */
  --page-secondary:     var(--sdx-color-mama-amber);               /* #f5b014 — tagline colour. BKT-DOC-01 §4 HARD RULE: universal amber, no exceptions */
  --page-accent:        var(--sdx-color-reporters-orange);           /* #d94328 — vitality, sparingly     */
  --page-depth:         var(--sdx-color-stem-olive);               /* #464820 — dry grass, rock shadow  */
  --page-dark-base:     #0f0c08;                                    /* PIL-04 §2 EXCEPTION — Reporters savanna night */
  --page-dark-surface:  #1c160f;                                    /* PIL-04 §2 EXCEPTION — Reporters raised dark surface */

  --hero-image:         url("/assets/images/reporters/reporters-hero.webp");
  --hero-vignette-from: rgba(70, 72, 32, 0.18);  /* olive-dark, bottom only — golden light must dominate */
  --hero-vignette-to:   rgba(70, 72, 32, 0);
}

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


.page-reporters {
  background: var(--page-bg);
  color: var(--fg);  /* DOC-02 §2.6 HARD RULE: --sdx-color-slate is a static primitive */
}

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


.page-reporters .hero-wrap {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 45%;
  min-height: var(--hero-min);
}

/* DOC-02 §3.2 canonical pattern: page CSS MUST set flex centering on .hero.
   Both hero-wrap and .hero carry the same min-height. */
.page-reporters .hero {
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
}

.page-reporters .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.1: canonical pillar headline override. */
.page-reporters .headline {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

/* DOC-02 §3.3.4: .hero-content not in global.css — page CSS owns this. */
.page-reporters .hero-content {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

/* www-G §2.4-HR3 / P7: Reporters is a narrative page. No hero actions. Rule removed. */

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


.page-reporters .section-title,
.page-reporters .sdx-card-section > h2 {
  color: var(--sdx-color-green-deep);  /* #2e5d3a — body section headings. Direct token ref per BKT-DOC-01 §2.5.
                                          --page-secondary is amber (tagline). No invented token permitted. */
}

/* section-title colour only — global.css v3.12.0 owns the underline. No ::after here. */

/* ======================================================================================================
   5) Trust Bridge section
   ====================================================================================================== */


/* Pull quote treatment per DOC-www-E §5.4. Scoped under .page-reporters. */
.page-reporters .trust-pull-quote {
  border-left: 4px solid var(--page-primary);
  margin: 1.5rem 0;
  padding: 0.75rem 1.5rem;
  font-style: italic;
  color: var(--fg);
  background: rgba(245, 176, 20, 0.08);  /* amber 8% — no token, exception permitted */
  border-radius: 0 0.5rem 0.5rem 0;
}

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


.page-reporters .card {
  border-color: var(--page-primary);
}

.page-reporters .card h3 {
  color: var(--page-secondary);
}

.page-reporters .card::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--page-primary);  /* DOC-03 §8-HR1: gradient reserved for buttons. Flat amber token. */
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -2rem -2rem 1rem;
}

.page-reporters .badge,
.page-reporters .stat-number {
  color: var(--page-primary);
}

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


.page-reporters .sdx-btn-primary {
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-accent) 100%);
  color: #ffffff;  /* PIL-04 §5.1 MANDATORY: #d94328 red-earth is a dark stop. White text required.
                     Large text size rule applies at amber start — ≥1.166rem non-bold or ≥1rem bold. */
  box-shadow: 0 4px 16px rgba(245, 176, 20, 0.28);
}

.page-reporters .sdx-btn-primary:hover {
  box-shadow: 0 10px 40px rgba(245, 176, 20, 0.36), 0 5px 25px rgba(217, 67, 40, 0.20);
}

/* ======================================================================================================
   8) Page modules
   ====================================================================================================== */


/* Process grid */
.page-reporters .process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.page-reporters .process-item {
  padding: 1.5rem;
  background: var(--sdx-color-white);
  border-radius: var(--radius);
  border-top: 3px solid var(--page-primary);
}

.page-reporters .process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100px;  /* pill — exempt from mobile reduction per DOC-03 §8.7 */
  background: var(--page-primary);
  color: #111827;  /* rebuild §3.4 LOCKED: dark text on amber — permanent hex exception, no token */
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.page-reporters .process-item h3 {
  color: var(--page-secondary);
  margin-bottom: 0.5rem;
}

/* Reporters grid */
.page-reporters .reporters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

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


@media (max-width: 768px) {
  /* DOC-02 §3.2 HARD RULE: both values must match at every breakpoint. */
  .page-reporters .hero-wrap { min-height: 30rem; background-position: center 40%; }
  .page-reporters .hero      { min-height: 30rem; }
}

@media (max-width: 480px) {
  /* DOC-02 §3.3.6: floor 400px minimum. Both hero-wrap and .hero must match. */
  .page-reporters .hero-wrap,
  .page-reporters .hero      { min-height: 30rem; }
  .page-reporters .hero      { padding: 3rem 1.25rem; }

  .page-reporters .process-grid { grid-template-columns: 1fr; }
}

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


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

[data-theme="dark"] .page-reporters .section-title,
[data-theme="dark"] .page-reporters .sdx-card-section > h2 {
  color: var(--sdx-color-mama-amber);  /* amber reads as golden hour even on dark */
}

[data-theme="dark"] .page-reporters .card {
  border-color: rgba(245, 176, 20, 0.30);
  background: var(--card);
}

[data-theme="dark"] .page-reporters .card h3 {
  color: var(--sdx-color-mama-amber);
}

/* Trust Bridge pull quote — dark mode per ai.md callout pattern */
[data-theme="dark"] .page-reporters .trust-pull-quote {
  background: rgba(245, 176, 20, 0.07);  /* amber wash — dark mode callout pattern */
  border-color: rgba(245, 176, 20, 0.18);
}

[data-theme="dark"] .page-reporters .process-item {
  background: var(--card);
}

[data-theme="dark"] .page-reporters .process-item h3 {
  color: var(--sdx-color-mama-amber);
}

/* O5: explicit dark rule for badge/stat-number — amber confirmed on dark card surface */
[data-theme="dark"] .page-reporters .badge,
[data-theme="dark"] .page-reporters .stat-number {
  color: var(--sdx-color-mama-amber);
}



/* ------------------------------------------------------------------------------
   Audience routing cards — three-card section (#your-door).
   Mirrors contact.html .contact-card pattern precisely.
   Farmers (left) → Eco Guilds, Reporters (centre, featured) → roster,
   Buyers (right) → Viridians. Navigational colour coding per _support-template §7.
   ------------------------------------------------------------------------------ */

.page-reporters .reporters-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 48rem) {
  .page-reporters .reporters-audience-grid {
    grid-template-columns: 1fr;
  }
}

/* Card shell — mirrors .contact-card geometry */
.page-reporters .reporters-audience-card {
  background: var(--card);
  border-radius: var(--radius);
  border-left: 4px solid var(--page-primary);
  box-shadow: var(--card-shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.30s ease, box-shadow 0.30s ease;
}

.page-reporters .reporters-audience-card:hover {
  transform: translateY(-0.1875rem); /* rem equivalent of contact.css -3px */
  box-shadow: var(--card-shadow-hover);
}

/* Per-pillar border-left — navigational colour coding per _support-template §7 */
.page-reporters .reporters-audience-card-farmers   { border-left-color: var(--sdx-color-green-deep); }
.page-reporters .reporters-audience-card-reporters   { border-left-color: var(--page-primary); }
.page-reporters .reporters-audience-card-viridians { border-left-color: var(--sdx-color-purple-deep); }

/* Featured card (centre — Reporters) uses heavier border */
.page-reporters .reporters-audience-card-featured  { border-left-width: 5px; }

/* Icon + heading row */
.page-reporters .reporters-audience-card-top {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

/* Icon: 4.6875rem canonical per contact.css .contact-icon */
.page-reporters .reporters-audience-icon {
  width: 4.6875rem;
  height: 4.6875rem;
  flex-shrink: 0;
}

/* h3: var(--fg) per contact.css canonical — no page-secondary override */
.page-reporters .reporters-audience-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  line-height: 1.3;
}

/* Body text */
.page-reporters .reporters-audience-card p {
  font-size: var(--body);
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 1.5rem;
  flex: 1;
}

/* CTA link — bottom-pinned via flex column */
.page-reporters .reporters-audience-cta {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  color: #ffffff; /* EXCEPTION: permanent — all three CTAs use dark gradient stops */
  transition: filter 0.28s ease;
  align-self: flex-start;
}

.page-reporters .reporters-audience-cta:hover {
  filter: brightness(1.08);
}

/* Pillar-canonical gradients — navigational colour coding per _support-template §7 */
.page-reporters .reporters-audience-cta-farmers {
  background: linear-gradient(135deg, var(--sdx-color-green-deep) 0%, var(--sdx-color-stem-olive) 100%);
}

.page-reporters .reporters-audience-cta-reporters {
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-accent) 100%);
  box-shadow: 0 4px 14px rgba(245, 176, 20, 0.24);
}

.page-reporters .reporters-audience-cta-viridians {
  background: linear-gradient(145deg, var(--sdx-color-purple-deep) 0%, var(--sdx-color-teal-deep) 100%);
}

/* Dark mode — audience cards.
   No h3 colour override — inherits var(--sdx-color-ui-dark-text) via page dark rule.
   No per-CTA dark override — gradients persist unchanged. Per contact.css pattern. */
[data-theme="dark"] .page-reporters .reporters-audience-card {
  background: var(--card);
}

/* Dark mode — Viridians route card.
   Purple-deep is correct semantically but reads too softly against the warm dark
   Reporters card surface at 4px. Strengthen the LH frame without moving this
   Reporters-specific component into global.css ownership. */
[data-theme="dark"] .page-reporters .reporters-audience-card-viridians {
  border-left-width: 0.3125rem;
  box-shadow:
    inset 0.0625rem 0 0 rgba(from var(--sdx-color-purple-deep) r g b / 0.35),
    var(--card-shadow);
}

/* ======================================================================================================
   B) TRILOGY STRIP — thumbnail backgrounds only
   ====================================================================================================== */


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

.page-reporters .trilogy-thumb-about {
  background-image: url('/assets/images/about/about-hero.webp');
}

.page-reporters .trilogy-thumb-living-tower {
  background-image: url('/assets/images/living-tower/living-tower-hero.webp');
}

/* .trilogy-doors — required element per www-E §12/§13. Hidden on Reporters. */
.page-reporters .trilogy-doors {
  display: none;
}