/* ============================================================
V7-HEADER
Title:    Buktika - Teams Portrait Slider Styles
File:     teams-slider.css
Path:     assets/css/teams/partials/teams-slider.css
Version:  v1.15.1
Issued:   2026-03-28
Author:   Buktika Webdesk (Binka)
Owner:    Buktika - Binka
Purpose:  Pillar-specific sizing and colour token overrides for the
          Teams portrait strips. Geometry lives in global.css
          .mamas-strip component block. This file overrides only
          what differs from global defaults.
          Four strips: management, axis, nova, iris.
Depends:  global.css v3.7.0 (.mamas-strip component block)
          assets/css/teams/teams.css (page token bindings)
          assets/js/partials/slider.js
          assets/js/teams/partials/teams-slider-builder.js
Token ref: BKT-PIL-11 §2, §6, §9.1
          --page-accent  = --sdx-color-stem-olive  = #464820
          --page-primary = --sdx-color-mama-amber  = #f5b014
ChangeLog:
  v1.15.1 (2026-04-04): Dark-mode Teams accent cleanup.
          Dark strip-line and slider-bar-tip chrome now use the warm Teams amber
          register instead of the olive/green register on dark surfaces.
  v1.15.0 (2026-03-28): Added .slider-bar-text positioning and .slider-bar-tip
          styles for the Teams slider heading tooltip triggers.
  v1.14.0 (2026-03-13): display: block → inline-block on .teams-block-cta.
          display:block on an <a> stretches to container width regardless of
          width:auto — still renders as a bar. inline-block shrinks to content.
          text-align: center added to .teams-block to centre the inline-block.
          Two .teams-block rules merged into one.
  v1.13.0 (2026-03-13): .teams-block-cta width: 100% → width: auto.
          Full width rendered the button as a bar spanning the entire panel.
          width: auto preserves intrinsic button size. margin: 1rem auto 0
          centres it below the strip.
  v1.12.0 (2026-03-13): Absolute positioning removed from .teams-block-cta
          on desktop. Button sits below .mamas-strip in natural DOM block flow
          at all viewports — no media query needed. Mobile-only flex column
          override (v1.11.0) also removed as redundant. Simplest correct solution.
  v1.11.0 (2026-03-13): Button positioning updated for HTML restructure
          (teams-slider.html v1.5.0). CTA is now .teams-block-cta, a direct
          child of .sdx-card-section. Desktop: absolutely positioned top-right
          via .teams-block rule (position:relative on section). Mobile ≤640px:
          .teams-block switches to flex column; flex order places slider-bar
          (1) → mamas-strip (2) → teams-block-cta (3). Button full width.
          Old .slider-bar .sdx-btn absolute rule removed.
  v1.10.0 (2026-03-13): Mobile button repositioning (superseded by v1.11.0).
  v1.9.0 (2026-03-13): .page-teams .slider-bar h2 rule removed entirely.
          teams-slider.html v1.3.0 adds class="section-title" to all four
          slider-bar h2s. global.css now owns font, weight, size, text-align,
          colour (var(--fg)), and border-bottom via .section-title. No page
          override permitted or needed (DOC-02 §4.1).
  v1.8.0 (2026-03-13): color: var(--page-secondary) removed from
          .page-teams .slider-bar h2. var(--page-secondary) = green-deep
          #2e5d3a is the hyperlinked text register (PIL-11 §7). No heading
          colour register exists in PIL-11. global.css owns color: var(--fg)
          on all h2s — that is the correct and only canonical colour.
          Override had no spec authority. Removing it unifies all h2 colours
          on the page.
  v1.7.0 (2026-03-11): font-size removed from .slider-bar h2 — no
          whitepaper authority (ai.md: silent = ask). Absolute
          positioning moved off .sdx-btn-primary onto .sdx-btn
          in .slider-bar context — DOC-www-B §B.1 geometry violation
          corrected.
  v1.6.0 (2026-03-11): h2 centred per system standard. font-family
          and font-weight overrides removed — owned by global.css.
          Button absolutely positioned top-right.
  v1.5.0 (2026-03-11): Slider bar typography added. h2 colour
          var(--page-secondary) green-deep per PIL-11 §7. Flex
          row layout: h2 left, button right.
  v1.4.0 (2026-03-10): Button block replaced with canonical
          .sdx-btn-primary gradient override per DOC-www-B §B.1.
          teams-slider.html CTA class corrected to sdx-btn sdx-btn-primary.
  v1.3.0 (2026-03-10): --strip-line corrected to stem-olive 18% tint
          per PIL-11 §6 card border register. Dark mode block added
          per PIL-11 §8. All token refs verified against PIL-11 §2.
  v1.2.0 (2026-03-10): Restored .mamas-strip panel visual.
  v1.1.0 (2026-03-10): Token overrides only — incorrect.
  v1.0.0 (2026-03-10): Initial build.
============================================================ */

/* ============================================================
   Teams pillar tokens applied to strips.
   --strip-line: stem-olive (#464820) at 18% — matches PIL-11 §6
   card border register (var(--page-accent)).
   --strip-gap MUST NOT be overridden — slider.js reads it from
   :root via getComputedStyle. (DOC-03 §11.2-HR1)
   ============================================================ */

.page-teams {
  --strip-thumb:      9.6875rem;
  --strip-item-w:    12.5rem;
  --strip-label-sz:   0.9375rem;
  --strip-line:       rgba(70, 72, 32, 0.18);   /* --page-accent stem-olive 18% */
  --strip-arrow-mask: rgba(255, 255, 255, 0.92); /* card surface near-white     */
}

/* ============================================================
   Strip wrapper — panel visual and centring context.
   slider.js v1.2.0 sets strip.style.width to the exact snapped
   panel width. margin: auto centres that width in the container.
   overflow: visible so box-shadow is not self-clipped after the
   inline width is narrowed by JS. Rail clipping is handled by
   .strip-clip overflow:hidden in global.css.
   ============================================================ */

.page-teams .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 — layout and typography.
   h2 carries class="section-title" — global.css owns all h2 properties.
   CTA button (.teams-block-cta) is a direct child of .sdx-card-section,
   last in DOM order, sitting below .mamas-strip in natural block flow at
   all viewports. No absolute positioning required.
   HARD RULE: font-family and font-weight MUST NOT be overridden —
   owned by global.css. Token references only (DOC-01 §2.5).
   ============================================================ */

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

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

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

.page-teams .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-teams .slider-bar-tip:hover,
.page-teams .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-teams .slider-bar-tip:focus-visible {
  outline: 0.125rem solid var(--page-accent);
  outline-offset: 0.125rem;
}

/* h2 carries class="section-title" (teams-slider.html v1.3.0).
   global.css owns all h2 properties via .section-title — font, weight, size,
   text-align: center, color: var(--fg), border-bottom. No override here. DOC-02 §4.1. */

/* CTA button — direct child of .sdx-card-section.teams-block (teams-slider.html v1.5.0).
   Sits below .mamas-strip in natural DOM order on all viewports.
   No absolute positioning — block flow is correct at all breakpoints.
   DOC-www-B §B.1: global.css owns .sdx-btn-* geometry. */
/* .teams-block: position context (not currently needed but reserved).
   text-align: center centres the inline-block .teams-block-cta button.
   Does not affect h2 (has own text-align via .section-title) or
   .mamas-strip (block element, unaffected by parent text-align). */
.page-teams .teams-block {
  position:   relative;
  text-align: center;
}

/* Button centred below strip. inline-block shrinks to content width —
   NOT a full-width bar. Parent text-align: center handles centering. */
.page-teams .teams-block-cta {
  display:    inline-block;
  margin-top: 1rem;
}

/* ============================================================
   Primary button gradient override — PIL-11 §5.1, DOC-03 §3.
   global.css owns .sdx-btn-* geometry. Page CSS owns gradient.
   Teams: amber → stem-olive. Text #ffffff — large text rule
   applies (amber start 1.89:1 with white). DOC-03 §5.1.
   ============================================================ */

.page-teams .sdx-btn-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-accent) 100%);
  color:      #ffffff;
}

/* ============================================================
   Dark mode — PIL-11 §8
   Mechanism: [data-theme="dark"] .page-teams
   HARD RULE: @media (prefers-color-scheme: dark) MUST NOT appear.
   ============================================================ */

[data-theme="dark"] .page-teams {
  --strip-line:       rgba(245, 176, 20, 0.24); /* Teams amber lift on dark surfaces */
  --strip-arrow-mask: rgba(54, 44, 34, 0.95);   /* var(--card) dark walnut surface            */
}

[data-theme="dark"] .page-teams .strip-rail .item {
  color: var(--muted);
}

[data-theme="dark"] .page-teams .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.08);
  color: var(--page-primary);
}

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

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

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

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

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