/* ==========================================================================
   segmented-filter.css — single-row segmented control with count badges
   Markup: <div class="segments">
            <button class="segment is-active">All <span class="count">240</span></button>
            <button class="segment">Yoga <span class="count">47</span></button>
            ...

   ── Component properties (override via inline style or scoped selector) ──
   --seg-track-bg          background of the outer track
   --seg-track-border      border color of the outer track
   --seg-track-pad         inner padding of the track around segments
   --seg-track-radius      radius of the outer track
   --seg-gap               gap between segments
   --seg-color             default segment label color
   --seg-color-hover       segment label color on hover
   --seg-active-bg         active segment background
   --seg-active-color      active segment label color
   --seg-radius            individual segment radius
   --seg-pad-y / --seg-pad-x  segment padding
   --seg-fs                segment label font size
   --seg-fw                segment label font weight
   --seg-count-bg          count badge bg (inactive)
   --seg-count-color       count badge text color (inactive)
   --seg-count-active-bg   count badge bg on active segment
   --seg-count-active-color count badge text color on active segment
   --seg-count-fs          count badge font size

   ── Reassign example ──
   <div class="segments" style="--seg-active-bg: var(--brand); --seg-fs: 13px;">
   ========================================================================== */

.segments {
  /* Defaults — every value above can be overridden per instance */
  --seg-track-bg:           rgba(var(--ink-pure-rgb), .03);
  --seg-track-border:       transparent;
  --seg-track-pad:          var(--space-4);
  --seg-track-radius:       var(--pill);
  --seg-gap:                var(--space-2);
  --seg-color:              var(--ink-2);
  --seg-color-hover:        var(--ink);
  --seg-active-bg:          var(--bg);
  --seg-active-color:       var(--ink);
  --seg-active-shadow:      var(--shadow-segment-active);
  --seg-radius:             var(--pill);
  --seg-pad-y:              var(--space-8);
  --seg-pad-x:              var(--space-14);
  --seg-fs:                 var(--fs-sm);
  --seg-fw:                 var(--fw-semibold);
  --seg-count-bg:           rgba(var(--slate-rgb), .08);
  --seg-count-color:        var(--muted);
  --seg-count-active-bg:    var(--bg-soft);
  --seg-count-active-color: var(--brand);
  --seg-count-fs:           var(--fs-label);

  position: relative;
  display: inline-flex;
  gap: var(--seg-gap);
  background: var(--seg-track-bg);
  border: 1px solid var(--seg-track-border);
  border-radius: var(--seg-track-radius);
  padding: var(--seg-track-pad);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 var(--space-28);
}
.segments::-webkit-scrollbar { display: none; }

/* Sliding indicator — JS positions it over the active segment */
.segment-indicator {
  position: absolute;
  top: var(--seg-track-pad);
  left: 0;
  height: calc(100% - var(--seg-track-pad) * 2);
  width: 0;
  background: var(--seg-active-bg);
  border-radius: var(--seg-radius);
  box-shadow: var(--seg-active-shadow);
  transform: translateX(0);
  transition:
    transform .42s cubic-bezier(.5, 0, .1, 1.1),
    width .42s cubic-bezier(.5, 0, .1, 1.1);
  pointer-events: none;
  z-index: 0;
}

.segment {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--seg-pad-y) var(--seg-pad-x);
  border: 0;
  background: transparent;
  color: var(--seg-color);
  font-size: var(--seg-fs);
  font-weight: var(--seg-fw);
  font-family: inherit;
  line-height: 1;
  border-radius: var(--seg-radius);
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
}
.segment:hover { color: var(--seg-color-hover); }

/* Default (no-JS / pre-init) — active segment paints its own pill */
.segment.is-active {
  color: var(--seg-active-color);
  background: var(--seg-active-bg);
  box-shadow: var(--seg-active-shadow);
}
/* When the JS slider is active, the indicator paints the pill instead */
.segments.has-indicator .segment.is-active {
  background: transparent;
  box-shadow: none;
}

/* Count badge — circle for short numbers, pill for long ones */
.segment .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--space-7);
  border-radius: var(--pill);
  background: var(--seg-count-bg);
  color: var(--seg-count-color);
  font-size: var(--seg-count-fs);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: background .18s ease, color .18s ease;
}
.segment.is-active .count {
  background: var(--seg-count-active-bg);
  color: var(--seg-count-active-color);
}

/* ── Variant: ghost — no track, segments float on page bg ─────────────── */
.segments[data-variant="ghost"] {
  --seg-track-bg: transparent;
  --seg-track-border: transparent;
  --seg-track-pad: 0;
  --seg-gap: var(--space-6);
}

/* ── Size: sm ─────────────────────────────────────────────────────────── */
.segments[data-size="sm"] {
  --seg-pad-y: var(--space-6);
  --seg-pad-x: var(--space-12);
  --seg-fs: var(--fs-footer-label);
  --seg-count-fs: var(--fs-count-sm);
}

/* ── Centered layout (the page often wants this) ──────────────────────── */
.segments-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-28);
}
.segments-wrap .segments { margin: 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .segments {
    --seg-pad-x: var(--space-12);
    --seg-fs: var(--fs-caption);
    /* Soft fade at right edge — overflowing segments collapse into a
       gradient hint instead of a hard cut. User can still scroll to reach
       them, but the visual stays clean. */
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
    padding-right: var(--space-20);
  }
  .segments-wrap { justify-content: flex-start; overflow-x: auto; }
  /* Indicator must inherit the mask so the active pill also fades at edge */
}