/* ======================================================================================================
   File:    reporters-reporter-roster.css
   Path:    /assets/css/reporters/reporters-reporter-roster.css
   Version: v1.14.0
   Issued:  2026-03-20
   Author:  Buktika Webdesk (Binka)
   Purpose: Reporters roster directory page. Grid of reporter cards with lightbox
            profiles. Scoped to .page-reporters-roster throughout.
            Modelled after teams/teams-council.css v1.4.0.
   Colour Map:    v3.5.0
   Design System: v4.0.0
   Umbrella:      v1.1.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-03-20): !important removed from CTA and channel link hover colour.
     Root cause fixed in global.css v3.17.0 — reporter-lightbox-cta and reporter-channel-link
     added to the :not() exclusion chain on the coral catchall rule. Page CSS no longer
     needs patches or overrides for colour compliance on these elements.
   v1.12.0 (2026-03-20): CORAL HOVER — !important required.
     Grouped selector approach (v1.11.0) failed. global.css coral rule accumulates
     specificity from multiple :not() pseudo-classes, outweighing a plain class selector.
     Fix: color: #ffffff !important on .reporter-lightbox-cta (all states) and
     .reporter-channel-link:hover. !important is the only reliable override here.
   v1.11.0 (2026-03-20): CORAL HOVER LEAK — CTA button text fix.
     .reporter-lightbox-cta color: #ffffff was declared only on the element rule and :hover.
     global.css a:not([class*="btn"])... coral rule fires because "btn" is not in
     .reporter-lightbox-cta class name — the :not() exclusion does not match it.
     Fix: grouped selector .reporter-lightbox-cta, :visited, :hover, :focus all declare
     color:#ffffff so the coral leak is blocked at every state.
   v1.10.0 (2026-03-20): TWO FIXES.
     .reporter-channel-link svg: added width/height 0.875rem. SVG carries no size attributes
       (§B.13.6-HR1) — CSS must own the size. Without this rule the SVG expanded to its
       natural 24×24 viewBox dimensions, breaking pill layout.
     .reporter-lightbox-portrait-img border: 3px amber → 2px rgba(211,196,170,0.65) warm neutral.
       Matches .reporter-card-thumb img border. Consistent register across card and lightbox.
   v1.9.0 (2026-03-20): THREE FIXES.
     Card hover name: var(--page-secondary) green-deep → var(--page-primary) amber.
       Green-deep is the structural/pillar primary colour — amber is the page accent/CTA signal.
       Hover should telegraph action, not re-apply structure. Consistent with PIL-04 token hierarchy.
     Card thumb border: none → 2px solid rgba(211,196,170,0.65) warm neutral.
       Lightbox portrait carries a 3px amber border; card thumb had no border at all.
       Warm neutral keeps the register quiet on the card while the amber border
       distinguishes the lightbox focal portrait — two different visual weights,
       both intentional, now consistent as a system.
     Social icons: CHANNEL_MAP with hardcoded SVG strings in JS is non-compliant per
       DOC-www-B §B.13-HR1/HR2 (v2.2.0). Fix is in reporters-reporter-roster.js — JS now
       fetches /assets/data/icons/social-icons.json at boot and builds icon map from that.
   v1.8.0 (2026-03-20): Lightbox z-index: 900 → 1001 (above header at 1000 — page content
     was bleeding through alongside lightbox panel). Channel pill padding: 0.3rem →
     0.25rem vertical — DOC-03 §8-HR3: badge padding MUST stay at or below 0.25rem vertical.
   v1.7.0 (2026-03-20): Card visual aligned to MamaDEX/Reporters pattern.
     Card border: 1.5px solid var(--page-secondary) → 1px solid rgba(211,196,170,0.55).
     Card name: var(--page-secondary) → var(--fg) at rest, var(--page-secondary) on hover.
     Card hover lift: translateY(-3px) + shadow strengthen. transition: 0.22s ease.
     CTA button: scoped to .sdx-cta-band to avoid affecting lightbox CTA.
     Dark card border: green rgba → amber rgba(245,176,20,0.12).
     Lightbox dark backdrop: rgba(0,0,0,0.80) → rgba(0,0,0,0.92) — DOC-03 §10.1-HR1 fix.
   v1.5.0 (2026-03-19): Filename corrected to reporters-reporter-roster.css (pillar prefix added).
     §8 lightbox redesigned — Option A teaser pattern (three vertical zones).
     Old two-column grid layout removed. New flex-column panel: Zone 1 identity
     (portrait 3:4 + name/role/slogan), Zone 2 bio_short (border-top), Zone 3
     channels + "Open full profile" CTA (border-top). All token refs corrected:
     hardcoded --sdx-color-green-deep → var(--page-secondary).
     Portrait border: --sdx-color-mama-amber → var(--page-primary).
     Backdrop rgba(0,0,0,0.92) retained — DOC-03 §10.1-HR1 HARD RULE.
     Tags dl removed — lives on full profile page not lightbox.
     §10 dark mode extended: new zone rules added, existing card rules preserved.
   v1.4.1 (2026-03-19): min-height: 640px → var(--hero-min) on both .hero-wrap and .hero.
   v1.4.0 (2026-03-19): Hero canonical rules added.
   v1.3.0 (2026-03-19): Card border colour changed per owner instruction.
   v1.2.0 (2026-03-19): PIL-04 §2–§8 + DOC-03 §10.1 compliance.
   v1.1.0 (2026-03-19): Minor refinements.
   v1.0.0 (2026-03-19): Initial build.
   ====================================================================================================== */

/* 0) depends on: global.css, themes.css, partials/footer.css, partials/header.css (via includes.js) */

/* ======================================================================================================
   1) Page variable binding
   Reporters: green-deep primary, mama-amber accent, stem-olive depth.
   DOC-www-A full 10-token contract required on every page.
   ====================================================================================================== */

.page-reporters-roster {
  --page-bg:            #f7f4ed;                                    /* PIL-04 §2 permitted exception — warm parchment */
  --page-primary:       var(--sdx-color-mama-amber);               /* PIL-04 §2: #f5b014 amber */
  --page-secondary:     var(--sdx-color-green-deep);               /* PIL-04 §2: #2e5d3a forest */
  --page-accent:        var(--sdx-color-reporters-orange);           /* PIL-04 §2: #d94328 vitality */
  --page-splash:        var(--sdx-color-reporters-orange);           /* PIL-04 §2: #d94328 vitality accents only */
  --page-depth:         var(--sdx-color-stem-olive);               /* PIL-04 §2: #464820 grounding */
  --page-dark-base:     #0f0c08;                                    /* PIL-04 §2 permitted exception */
  --page-dark-surface:  #1c160f;                                    /* PIL-04 §2 permitted exception */

  --hero-image:         url("/assets/images/reporters/reporters-roster-hero.webp"); /* C9: .webp only per DOC-www-A §3.2 */
  --hero-vignette-from: rgba(245, 176, 20, 0.20); /* C8: PIL-04 §3 amber vignette, opacity 0.20 < 0.25 max */
  --hero-vignette-to:   rgba(245, 176, 20, 0);

  background: var(--page-bg);
  color: var(--fg); /* C7: var(--fg) — static primitive --sdx-color-slate MUST NOT be used */
}

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

.page-reporters-roster main {
  padding-bottom: 3.5rem;
}

/* ======================================================================================================
   3) Hero
   Hero Vignette Principle: bottom vignette only. Opacity 0.18 < 0.25 max. Fade at 32% < 35% max.
   Support page hero: var(--hero-min) from global.css. No override needed.
   ====================================================================================================== */

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

.page-reporters-roster .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%
  );
}

@media (max-width: 48rem) {
  .page-reporters-roster .hero-wrap,
  .page-reporters-roster .hero { min-height: 400px; }
}

@media (max-width: 30rem) {
  .page-reporters-roster .hero-wrap,
  .page-reporters-roster .hero { min-height: 300px; }
  .page-reporters-roster .hero { padding: 3rem 1.25rem; }
}

/* DOC-02 §3.2 canonical pattern: flex centering + matched min-height. */
.page-reporters-roster .hero {
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
}

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

/* DOC-01 §4 HARD RULE: universal amber tagline. No per-pillar exceptions.
   var(--page-secondary) = green-deep on this page — MUST NOT resolve to tagline colour.
   Text-shadow required: green-deep fails against warm amber photography. */
.page-reporters-roster .tagline {
  color: var(--sdx-color-mama-amber);
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.90),
    0 2px 6px rgba(0, 0, 0, 0.70);
}

/* ======================================================================================================
   4) Typography overrides — none
   ====================================================================================================== */

/* ======================================================================================================
   5) Sections and alternation
   global.css .sdx-card-section handles section surfaces.
   ====================================================================================================== */

/* none */

/* ======================================================================================================
   6) Cards and tiles
   Canonical pattern mirrors teams-council.css v1.4.0 §6 exactly.
   Full border (not border-left). Rectangular thumb. No hover transform. No overflow:hidden.
   Name: var(--page-secondary) green-deep with brightness(0.85) on hover.
   Thumb: flex 0 0 30%, border-radius 0.875rem — no circle, no border.
   ====================================================================================================== */

.page-reporters-roster .reporter-list-header {
  text-align: left;
  margin: 0 0 1.375rem;
}

.page-reporters-roster .reporter-list-header h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
  margin: 0 0 0.25rem;
}

.page-reporters-roster .reporter-list-header .intro {
  margin: 0;
  font-size: var(--body);
  color: var(--muted);
}

/* Grid: 2-col desktop, 1-col mobile — mirrors teams member-grid */
.page-reporters-roster .reporter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.875rem;
}

@media (max-width: 640px) {
  .page-reporters-roster .reporter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card shell — mirrors teams .member-card exactly */
.page-reporters-roster .reporter-card {
  display: block;
  background: var(--card);
  border-radius: 1.25rem;
  padding: 1.125rem 1.125rem 1.25rem;
  border: 1px solid rgba(211, 196, 170, 0.55); /* warm neutral — matches mama-card border */
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.10),
    0 1px 2px rgba(15, 23, 42, 0.05);
  scroll-margin-top: 5rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.page-reporters-roster .reporter-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.14),
    0 2px 4px rgba(15, 23, 42, 0.08);
}

/* Card button — mirrors teams .member-card-main exactly */
.page-reporters-roster .reporter-card-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.125rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
  padding: 0;
}

.page-reporters-roster .reporter-card-main:focus-visible {
  outline: 2px solid var(--page-primary);
  outline-offset: 2px;
}

.page-reporters-roster .reporter-card-copy {
  flex: 1 1 auto;
}

/* Name: var(--fg) at rest — not a link, matches mama-card pattern */
.page-reporters-roster .reporter-card-name {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}

.page-reporters-roster .reporter-card-main:hover .reporter-card-name {
  color: var(--page-primary); /* amber — page accent/CTA signal, not structural green-deep */
}

.page-reporters-roster .reporter-card-role {
  margin: 0;
  line-height: 1.5;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Thumb — mirrors teams .member-card-thumb exactly.
   Rectangular crop, border-radius 0.875rem. Warm neutral border matches lightbox portrait tone. */
.page-reporters-roster .reporter-card-thumb {
  flex: 0 0 30%;
  max-width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-reporters-roster .reporter-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.875rem;
  border: 2px solid rgba(211, 196, 170, 0.65); /* warm neutral — matches card border register */
}

/* Mobile — column-reverse mirrors teams pattern at 800px */
@media (max-width: 800px) {
  .page-reporters-roster .reporter-card-main {
    flex-direction: column-reverse;
    gap: 0.875rem;
  }

  .page-reporters-roster .reporter-card-thumb {
    flex: 0 0 auto;
    max-width: 100%;
    justify-content: flex-start;
  }

  .page-reporters-roster .reporter-card {
    padding: 1rem 0.875rem 1.125rem;
  }
}

/* Error state */
.page-reporters-roster .reporter-roster-error {
  color: var(--muted);
  font-style: italic;
  padding: 2rem 0;
}

/* ======================================================================================================
   7) Buttons and CTAs
   Reporters page: green-deep to stem-olive gradient. Dark stops — #ffffff text required.
   EXCEPTION: #ffffff — permanent exception for dark gradient buttons per DOC-03 §8.3.
   ====================================================================================================== */

/* CTA band primary button — amber → red-earth per PIL-04 §5.1.
   Scoped to .sdx-cta-band to prevent bleeding into lightbox or other components.
   EXCEPTION: #ffffff — dark gradient stop, DOC-03 §8.3. */
.page-reporters-roster .sdx-cta-band .sdx-btn-primary {
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-splash) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* ======================================================================================================
   8) Lightbox — Option A teaser pattern.
   Three zones stacked vertically inside a flex-column panel:
     Zone 1: Identity — portrait (3:4) left, name + role + slogan right.
     Zone 2: bio_short — one sentence from roster JSON. No fetch. Border-top separator.
     Zone 3: Channel pills + "Open full profile" CTA. Border-top separator.
   Tags and biography HTML fragment live on reporters-reporter-profile.html, not here.
   Appended to <body> by reporters-reporter-roster.js. Scoped to .reporter-lightbox.
   Backdrop: rgba(0,0,0,0.92) — DOC-03 §10.1-HR1 HARD RULE: ≥0.92.
   aria-hidden toggle drives show/hide.
   ====================================================================================================== */

.reporter-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1001; /* above header (1000) — was 900, page content bled through */
  background: rgba(0, 0, 0, 0.92); /* DOC-03 §10.1-HR1 HARD RULE: ≥0.92 — isolation principle */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.reporter-lightbox[aria-hidden="true"] {
  display: none;
}

/* Panel — flex column, three zones */
.reporter-lightbox-inner {
  position: relative;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  max-width: 48rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0; /* zones self-manage spacing via padding-top + border-top */
}

/* Close button — bordered circle per uploaded v1.4.1 pattern */
.reporter-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.reporter-lightbox-close:hover {
  background: var(--surface-alt);
  border-color: var(--page-primary);
}

.reporter-lightbox-close:focus-visible {
  outline: 2px solid var(--page-primary);
  outline-offset: 2px;
}

/* ---- Zone 1: Identity header ---- */
.reporter-lightbox-identity {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding-right: 2.5rem; /* clear close button */
  padding-bottom: 1.25rem;
}

@media (max-width: 36rem) {
  .reporter-lightbox-identity {
    grid-template-columns: 1fr;
    padding-right: 0;
    text-align: center;
  }
}

.reporter-lightbox-portrait {
  align-self: start;
}

@media (max-width: 36rem) {
  .reporter-lightbox-portrait {
    width: 8rem;
    margin: 0 auto;
  }
}

/* Portrait — 3:4 crop. Warm neutral border matches card thumb register. */
.reporter-lightbox-portrait-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 0.75rem;
  display: block;
  border: 2px solid rgba(211, 196, 170, 0.65); /* warm neutral — matches .reporter-card-thumb img */
}

.reporter-lightbox-identity-copy {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.25rem;
}

.reporter-lightbox-name {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  line-height: 1.2;
}

.reporter-lightbox-role {
  font-size: var(--body);
  color: var(--muted);
  margin: 0;
}

/* Slogan — italic, left-bordered via page-primary */
.reporter-lightbox-slogan {
  font-style: italic;
  color: var(--page-secondary); /* green-deep in light mode per C13 */
  font-size: 0.9375rem;
  margin: 0.25rem 0 0;
  border-left: 3px solid var(--page-primary);
  padding-left: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 36rem) {
  .reporter-lightbox-slogan {
    border-left: none;
    padding-left: 0;
    border-top: 3px solid var(--page-primary);
    padding-top: 0.5rem;
  }
}

/* bio_short — sits in identity copy column below slogan */
.reporter-lightbox-bio {
  font-size: var(--body);
  line-height: 1.65;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.reporter-lightbox-bio p {
  margin: 0;
}

/* ---- Zone 2: Channels + CTA ---- */
.reporter-lightbox-footer {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Channel pills — icon + text */
.reporter-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reporter-channel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--page-secondary); /* C13: via page variable */
  text-decoration: none;
  padding: 0.25rem 0.75rem; /* DOC-03 §8-HR3: vertical ≤0.25rem — was 0.3rem, violation */
  border: 1px solid var(--page-secondary);
  border-radius: 2rem;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.reporter-channel-link svg {
  flex-shrink: 0;
  width: 0.875rem;   /* §B.13.6-HR1: size owned by CSS — no width/height on SVG element */
  height: 0.875rem;
}

.reporter-channel-link:hover {
  background: var(--page-secondary);
  color: #ffffff; /* white on dark green fill — DOC-03 §5.1. Excluded from coral catchall in global.css v3.17.0. */
}

.reporter-channel-link:focus-visible {
  outline: 2px solid var(--page-secondary);
  outline-offset: 2px;
}

/* "Open full profile" CTA — PIL-04 §5.1: amber → red-earth.
   Excluded from global.css coral catchall via :not([class*="reporter-lightbox-cta"]).
   color #ffffff on all states — dark gradient stop, DOC-03 §5.1. */
.reporter-lightbox-cta,
.reporter-lightbox-cta:visited,
.reporter-lightbox-cta:hover,
.reporter-lightbox-cta:focus {
  color: #ffffff;
}

.reporter-lightbox-cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 1.166rem; /* PIL-04 §5.1 WCAG large text minimum */
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-splash) 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: filter 0.2s ease;
}

.reporter-lightbox-cta:hover {
  filter: brightness(1.08);
}

.reporter-lightbox-cta:focus-visible {
  outline: 2px solid var(--page-primary);
  outline-offset: 3px;
}

/* Scroll lock */
body.reporter-lightbox-open {
  overflow: hidden;
}

/* ======================================================================================================
   9) Media queries — breakpoints declared inline above
   ====================================================================================================== */

/* ======================================================================================================
   10) Dark mode
   [data-theme="dark"] only. Never prefers-color-scheme. ai.md HARD RULE.
   ====================================================================================================== */

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

[data-theme="dark"] .page-reporters-roster .reporter-card {
  background: var(--card);
  border-color: rgba(245, 176, 20, 0.12); /* amber tint — matches mama-card dark border */
}

[data-theme="dark"] .reporter-lightbox {
  background: rgba(0, 0, 0, 0.92); /* DOC-03 §10.1-HR1 HARD RULE: ≥0.92 */
}

[data-theme="dark"] .reporter-lightbox-inner {
  background: var(--card);
}

/* Slogan — amber on dark; green-deep fails contrast on dark surface */
[data-theme="dark"] .reporter-lightbox-slogan {
  color: var(--page-primary); /* amber on dark per PIL-04 §8 register */
  border-color: var(--page-primary);
}

/* Channel pills */
[data-theme="dark"] .reporter-channel-link {
  color: var(--page-primary);
  border-color: var(--page-primary);
}

[data-theme="dark"] .reporter-channel-link:hover {
  background: var(--page-primary);
  color: #111827; /* EXCEPTION: amber bg always light — #111827 = 11.6:1 ✅. var(--fg) fails (1.78:1). */
}

/* CTA button — gradient holds on dark; no override needed */