/* ============================================================
   File:     reporters-slider.css
   Path:     assets/css/reporters/partials/reporters-slider.css
   Version:  v2.1.1
   Issued:   2026-04-03
   Owner:    Buktika Webdesk (Binka)
   Purpose:  Pillar-specific sizing and colour token overrides for the
             Reporters portrait strip. Geometry lives in global.css
             .mamas-strip component block. This file overrides only
             what differs from global defaults.
   Depends:  global.css v3.7.1 (.mamas-strip component block)
             assets/css/reporters/reporters.css (page token bindings)
             assets/js/partials/slider.js v1.3.0
             assets/js/reporters/partials/reporters-slider-builder.js v1.0.0
   Token ref: BKT-PIL-04 §2, §5.1, §9.1
             --page-primary = --sdx-color-mama-amber  = #f5b014
             --page-accent  = --sdx-color-reporters-orange = #d94328
   ChangeLog:
   v2.1.1 (2026-04-03): Dark theme .slider-bar-tip no longer uses page-accent red.
            Dark mode now uses page-primary amber for the help trigger border,
            fill, text, and focus ring.
   v2.1.0 (2026-03-28): Added .slider-bar-text positioning and .slider-bar-tip
            styles for the Reporters slider heading tooltip trigger.
     v2.0.0 (2026-03-17): Rebuilt to match teams-slider.css v1.14.0 pattern.
            .reporters-strip corrected to .mamas-strip — the global component
            class (.reporters-strip did not exist in global.css; no rules
            were applied). Added .reporters-block and .reporters-block-cta rules
            mirroring teams-slider.css. Button gradient per PIL-04 §5.1:
            amber → reporters-orange. Slider now lives below the storybook
            section on the page rather than inside the book.
     v1.0.0 (2026-03-01): Initial build — targeted .reporters-strip (incorrect).
   ============================================================ */

/* ============================================================
   Reporters pillar tokens applied to strip.
   --strip-line: reporters-orange (#d94328) at 18% — PIL-04 §6 card border.
   --strip-gap MUST NOT be overridden — slider.js reads it from
   :root via getComputedStyle. (DOC-03 §11.2-HR1)
   ============================================================ */

.page-reporters {
  --strip-thumb:      9.6875rem;               /* 155px — canonical portrait size */
  --strip-item-w:    12.5rem;                  /* 200px */
  --strip-label-sz:   0.9375rem;               /* 15px  */
  --strip-line:       rgba(217, 67, 40, 0.18); /* --page-accent reporters-orange 18% */
  --strip-arrow-mask: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   Strip wrapper — panel visual and centring context.
   Mirrors teams-slider.css .page-teams .mamas-strip.
   overflow: visible so box-shadow is not self-clipped after JS
   narrows the strip width. Rail clipping handled by .strip-clip.
   ============================================================ */

.page-reporters .mamas-strip {
  margin:        2rem auto;
  overflow:      visible;
  background:    var(--card);
  border:        0.125rem solid var(--strip-line);
  border-radius: 0.875rem;
  box-shadow:
    0 0.625rem 1.875rem rgba(0, 0, 0, 0.10),
    0 0.125rem 0.5rem   rgba(0, 0, 0, 0.06);
}

/* ============================================================
   Slider bar — heading and layout.
   h2 carries class="section-title" — global.css owns all h2
   properties via .section-title. No override here. DOC-02 §4.1.
   ============================================================ */

.page-reporters .slider-bar {
  padding:    1.5rem 1.5rem 0.75rem;
  text-align: center;
}

.page-reporters .slider-bar-content {
  display: block;
}

.page-reporters .slider-bar-text {
  position: relative;
}

.page-reporters .slider-bar-tip {
  position: absolute;
  top: 0.125rem;
  right: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.125rem solid rgba(from var(--page-accent) r g b / 0.32);
  border-radius: 50%;
  background: rgba(from var(--page-accent) r g b / 0.08);
  color: var(--page-accent);
  font-family: var(--text-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.page-reporters .slider-bar-tip:hover,
.page-reporters .slider-bar-tip:focus-visible {
  background: rgba(from var(--page-accent) r g b / 0.14);
  border-color: var(--page-accent);
  transform: translateY(-0.0625rem);
}

.page-reporters .slider-bar-tip:focus-visible {
  outline: 0.125rem solid var(--page-accent);
  outline-offset: 0.125rem;
}

/* Section wrapper — position context (reserved).
   text-align: center centres the inline-block CTA button. */
.page-reporters .reporters-block {
  position:   relative;
  text-align: center;
}

/* CTA button — sits below strip in natural block flow at all viewports.
   inline-block shrinks to content width — not a full-width bar.
   Parent text-align: center handles centering. DOC-www-B §B.1. */
.page-reporters .reporters-block-cta {
  display:    inline-block;
  margin-top: 1rem;
}

/* ============================================================
   Primary button gradient override — PIL-04 §5.1.
   global.css owns .sdx-btn-* geometry. Page CSS owns gradient.
   Reporters: amber → reporters-orange. Text #ffffff — PIL-04 §5.1
   HARD RULE: color: #ffffff MUST be explicitly set.
   ============================================================ */

.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 is a dark stop */
}

/* ============================================================
   Dark mode — PIL-04 §8
   Mechanism: [data-theme="dark"] .page-reporters
   ============================================================ */

[data-theme="dark"] .page-reporters {
  --strip-line:       rgba(217, 67, 40, 0.35);
  --strip-arrow-mask: rgba(28, 22, 15, 0.95);  /* --page-dark-surface */
}

[data-theme="dark"] .page-reporters .slider-bar-tip {
  border-color: rgba(from var(--page-primary) r g b / 0.36);
  background: rgba(from var(--page-primary) r g b / 0.10);
  color: var(--page-primary);
}

[data-theme="dark"] .page-reporters .slider-bar-tip:hover,
[data-theme="dark"] .page-reporters .slider-bar-tip:focus-visible {
  background: rgba(from var(--page-primary) r g b / 0.18);
  border-color: var(--page-primary);
}

[data-theme="dark"] .page-reporters .slider-bar-tip:focus-visible {
  outline-color: var(--page-primary);
}

/* ============================================================
   Mobile overrides
   ============================================================ */

@media (max-width: 30rem) {
  .page-reporters {
    --strip-thumb:  7.75rem;
    --strip-item-w: 10rem;
  }

  .page-reporters .slider-bar-tip {
    top: 0;
    right: 0.25rem;
  }
}