/* ════════════════════════════════════════════════════════════════════
   BP SCROLL — horizontal scroll utility + feature flags
   Companion JS: assets/js/bp-scroll.js (auto-wraps + builds custom bar)

   Public utility classes:
     .bp-scroll-x                           → scroll on all viewports
     .bp-scroll-x@desktop / @laptop / @tablet / @mobile → only at that breakpoint

   Feature flags (combine with any base):
     .bp-scroll-x--bar       → custom DOM scrollbar, LIGHT theme
                               (Midnight thumb, for white/light backgrounds)
     .bp-scroll-x--bar-dark  → custom DOM scrollbar, DARK theme
                               (white thumb, for dark backgrounds)

   Hide scrollbar entirely (no replacement):
     .bp-scroll-clean        → invisible scrollbar (still scrollable)

   Tunable via CSS custom properties (set on the .bp-scroll-x element):
     --bp-scroll-bar-margin-x  (default 20px)  → horizontal inset
     --bp-scroll-bar-gap       (default 12px)  → gap above the bar
     --bp-scroll-bar-height    (default 4px)
     --bp-scroll-bar-radius    (default 2px)
     --bp-scroll-track-bg      (default depends on variant)
     --bp-scroll-thumb-bg      (default depends on variant)
     --bp-scroll-thumb-bg-hover

   CLS-safe: the scroll element pre-reserves the bar's vertical
   space via `padding-bottom` (CSS-only, applies before JS), and
   the bar is `position: absolute` so it doesn't take layout space.
   Layout shift contribution from the JS-injected bar = 0.

   Why a custom DOM bar instead of native ::-webkit-scrollbar:
     The native scrollbar can't be inset/margined reliably across
     browsers, especially on mobile (overlay scrollbars are mostly
     un-styleable). Drawing our own bar gives us genuine 20px lateral
     margin via plain CSS `margin`, which works on ANY background
     (gradients, images, transparency) — overlay-color hacks couldn't.
   ════════════════════════════════════════════════════════════════════ */


/* ── Default tokens (overridable per-instance) ── */
.bp-scroll-x,
.bp-scroll-x\@desktop,
.bp-scroll-x\@laptop,
.bp-scroll-x\@tablet,
.bp-scroll-x\@mobile {
  --bp-scroll-thumb:        rgba(26, 16, 64, 0.25);
  --bp-scroll-thumb-hover:  rgba(26, 16, 64, 0.45);
  --bp-scroll-height:       10px;
}


/* ── Base scroll behavior (always-on) ── */
.bp-scroll-x {
  overflow-x: auto;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--bp-scroll-thumb) transparent;
}
.bp-scroll-x > * { flex-shrink: 0 !important; }

.bp-scroll-x::-webkit-scrollbar       { height: var(--bp-scroll-height); }
.bp-scroll-x::-webkit-scrollbar-track { background: transparent; }
.bp-scroll-x::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background-color var(--bp-dur-fast, 150ms) ease-in-out;
}
.bp-scroll-x:hover::-webkit-scrollbar-thumb,
.bp-scroll-x:focus-within::-webkit-scrollbar-thumb {
  background: var(--bp-scroll-thumb);
}
.bp-scroll-x::-webkit-scrollbar-thumb:hover {
  background: var(--bp-scroll-thumb-hover);
}


/* ── Hide scrollbar entirely ── */
.bp-scroll-clean { scrollbar-width: none; }
.bp-scroll-clean::-webkit-scrollbar { display: none; }


/* ════════════════════════════════════════════════════════════════════
   FEATURE: --snap (snap by cards)

   Opt-in card-by-card snap. Promotes the base `proximity` (soft, barely
   noticeable) to `mandatory` (strict, always pulls to nearest snap
   point) AND adds snap points on the children.

   Usage:
     <div class="bp-scroll-x bp-scroll-x--snap">
       <div class="card">…</div>
       <div class="card">…</div>
     </div>

   Pair with --bar / --bar-dark as usual:
     class="bp-scroll-x bp-scroll-x--bar bp-scroll-x--snap"

   Override snap alignment per cell (default = start):
     .my-comp .bp-scroll-x--snap > * { scroll-snap-align: center; }

   Want soft snap instead of mandatory? Override per component:
     .my-comp .bp-scroll-x--snap { scroll-snap-type: x proximity; }
   ════════════════════════════════════════════════════════════════════ */
.bp-scroll-x--snap {
  scroll-snap-type: x mandatory;
}
.bp-scroll-x--snap > * {
  scroll-snap-align: start;
}


/* ════════════════════════════════════════════════════════════════════
   FEATURE: --bar (custom DOM scrollbar)
   ════════════════════════════════════════════════════════════════════ */

/* Wrap injected by JS around any .bp-scroll-x* that uses --bar.
   `min-width: 0` is critical — without it the wrap inherits
   `min-width: auto` (= min-content of children). The bp-scroll-x
   inside has flex-wrap: nowrap + flex-shrink: 0 children, so its
   min-content is the sum of all children widths (huge on mobile).
   `min-width: 0` lets the wrap shrink so overflow stays clipped
   inside the bp-scroll-x via overflow-x: auto. */
.bp-scroll-x-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
}
.bp-scroll-x-wrap > .bp-scroll-x,
.bp-scroll-x-wrap > [class*="bp-scroll-x\@"] {
  min-width: 0;
  width: 100%;
}

/* When the JS sets up a custom bar, it tags the scroll element with
   .bp-scroll-x--has-bar so we hide the native scrollbar (we have our
   own DOM bar instead).

   `!important` is required because the @device variant rules below
   (e.g. `.bp-scroll-x@mobile::-webkit-scrollbar { height: 10px }`)
   come later in the cascade and have equal specificity. In Chrome
   mobile / iOS Safari, defining ANY property on `::-webkit-scrollbar`
   re-activates the native bar render even when `display: none` would
   normally hide it. `!important` guarantees `--has-bar` always wins.

   Triple coverage (scrollbar + track + thumb) so nothing leaks. */
.bp-scroll-x--has-bar                          { scrollbar-width: none !important; }
.bp-scroll-x--has-bar::-webkit-scrollbar       { display: none !important; width: 0 !important; height: 0 !important; }
.bp-scroll-x--has-bar::-webkit-scrollbar-track { display: none !important; background: transparent !important; }
.bp-scroll-x--has-bar::-webkit-scrollbar-thumb { display: none !important; background: transparent !important; }


/* ── CLS-safe space reservation ──
   Pre-reserve the bar's vertical space via padding-bottom on the
   scroll element BEFORE the JS runs. This way the page renders at
   its final height from the first paint. When the JS later wraps
   the element and inserts the bar (positioned absolutely below),
   nothing shifts. CLS contribution: 0.

   IMPORTANT: each rule is SCOPED to the breakpoint where its scroll
   variant is actually active. An element with only `bp-scroll-x@mobile`
   classes shouldn't reserve space at desktop (no scroll happens there).

   Reserved height = bar height (4px) + gap above the bar (12px).
   Recalculates automatically if you override --bp-scroll-bar-height
   or --bp-scroll-bar-gap. */

/* Base .bp-scroll-x scrolls at every viewport — always reserve. */
.bp-scroll-x.bp-scroll-x--bar,
.bp-scroll-x.bp-scroll-x--bar-dark {
  padding-bottom: calc(var(--bp-scroll-bar-height, 4px) + var(--bp-scroll-bar-gap, 12px));
}

/* @device variants reserve only at the matching breakpoint. */
@media screen and (max-width: 767px) {
  .bp-scroll-x\@mobile.bp-scroll-x--bar,
  .bp-scroll-x\@mobile.bp-scroll-x--bar-dark {
    padding-bottom: calc(var(--bp-scroll-bar-height, 4px) + var(--bp-scroll-bar-gap, 12px));
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .bp-scroll-x\@tablet.bp-scroll-x--bar,
  .bp-scroll-x\@tablet.bp-scroll-x--bar-dark {
    padding-bottom: calc(var(--bp-scroll-bar-height, 4px) + var(--bp-scroll-bar-gap, 12px));
  }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .bp-scroll-x\@laptop.bp-scroll-x--bar,
  .bp-scroll-x\@laptop.bp-scroll-x--bar-dark {
    padding-bottom: calc(var(--bp-scroll-bar-height, 4px) + var(--bp-scroll-bar-gap, 12px));
  }
}
@media screen and (min-width: 1367px) {
  .bp-scroll-x\@desktop.bp-scroll-x--bar,
  .bp-scroll-x\@desktop.bp-scroll-x--bar-dark {
    padding-bottom: calc(var(--bp-scroll-bar-height, 4px) + var(--bp-scroll-bar-gap, 12px));
  }
}

/* ── The custom bar (track) and thumb ──
   `position: absolute` so the bar overlays the reserved padding
   area without taking layout space. The horizontal inset IS the
   visual margin and works on any background.

   Margin tokens (cascade order — the more specific wins):
     1. --bp-scroll-bar-margin-left  / -right  (per-side override)
     2. --bp-scroll-bar-margin-x               (symmetric shorthand)
     3. fallback 20px

   Per-breakpoint defaults are below the bar styles. Override per
   component via Custom CSS targeting `.bp-scroll-x-bar` or any
   ancestor (CSS vars cascade). */
.bp-scroll-x-bar {
  position: absolute;
  bottom: 0;
  left:  var(--bp-scroll-bar-margin-left,  var(--bp-scroll-bar-margin-x, 20px));
  right: var(--bp-scroll-bar-margin-right, var(--bp-scroll-bar-margin-x, 20px));
  height: var(--bp-scroll-bar-height, 4px);
  border-radius: var(--bp-scroll-bar-radius, 2px);
  cursor: pointer;
  touch-action: none;          /* prevent page scroll while dragging */
  -webkit-user-select: none;
  user-select: none;
  background: var(--bp-scroll-track-bg, transparent);
  z-index: 5;
}

/* Per-breakpoint margin defaults — match the page's gutter system
   so the scrollbar visually aligns with the page margins.
     mobile (≤767):     20 / 20  (the default fallback)
     tablet (768-1024): 32 / 32
     laptop+ (≥1025):   0  / 0   (full width, no lateral inset) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .bp-scroll-x-bar {
    --bp-scroll-bar-margin-x: 32px;
  }
}
@media screen and (min-width: 1025px) {
  .bp-scroll-x-bar {
    --bp-scroll-bar-margin-x: 0;
  }
}

.bp-scroll-x-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--bp-scroll-bar-radius, 2px);
  background: var(--bp-scroll-thumb-bg, rgba(26, 16, 64, 0.45));
  cursor: grab;
  /* Width transitions smoothly on resize / layout changes; transform
     (the actual position) does NOT transition — we want immediate
     visual response to scroll input. */
  transition: width 150ms ease, background-color var(--bp-dur-fast, 150ms) ease;
  will-change: transform, width;
}
.bp-scroll-x-thumb:active { cursor: grabbing; }
.bp-scroll-x-thumb:hover {
  background: var(--bp-scroll-thumb-bg-hover, rgba(26, 16, 64, 0.65));
}


/* ── LIGHT variant (default) — for white/light backgrounds ── */
.bp-scroll-x-wrap.bp-scroll-x--bar {
  --bp-scroll-track-bg:        rgba(26, 16, 64, 0.10);  /* Midnight @ 10% */
  --bp-scroll-thumb-bg:        rgba(26, 16, 64, 0.45);  /* Midnight @ 45% */
  --bp-scroll-thumb-bg-hover:  rgba(26, 16, 64, 0.65);
}

/* ── DARK variant — for dark backgrounds (Midnight, gradients, etc.) ── */
.bp-scroll-x-wrap.bp-scroll-x--bar-dark {
  --bp-scroll-track-bg:        rgba(255, 255, 255, 0.20);
  --bp-scroll-thumb-bg:        rgba(255, 255, 255, 0.70);
  --bp-scroll-thumb-bg-hover:  rgba(255, 255, 255, 0.90);
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE VARIANTS — same scroll behavior, but only at the
   target breakpoint. Useful when you want the row to wrap on
   desktop and only scroll on smaller screens.
   ════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 1367px) {
  .bp-scroll-x\@desktop {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bp-scroll-thumb) transparent;
  }
  .bp-scroll-x\@desktop > * { flex-shrink: 0 !important; }
  .bp-scroll-x\@desktop::-webkit-scrollbar       { height: var(--bp-scroll-height); }
  .bp-scroll-x\@desktop::-webkit-scrollbar-track { background: transparent; }
  .bp-scroll-x\@desktop::-webkit-scrollbar-thumb {
    background: transparent; border-radius: 4px;
    transition: background-color var(--bp-dur-fast, 150ms) ease-in-out;
  }
  .bp-scroll-x\@desktop:hover::-webkit-scrollbar-thumb,
  .bp-scroll-x\@desktop:focus-within::-webkit-scrollbar-thumb {
    background: var(--bp-scroll-thumb);
  }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .bp-scroll-x\@laptop {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bp-scroll-thumb) transparent;
  }
  .bp-scroll-x\@laptop > * { flex-shrink: 0 !important; }
  .bp-scroll-x\@laptop::-webkit-scrollbar       { height: var(--bp-scroll-height); }
  .bp-scroll-x\@laptop::-webkit-scrollbar-track { background: transparent; }
  .bp-scroll-x\@laptop::-webkit-scrollbar-thumb {
    background: transparent; border-radius: 4px;
    transition: background-color var(--bp-dur-fast, 150ms) ease-in-out;
  }
  .bp-scroll-x\@laptop:hover::-webkit-scrollbar-thumb,
  .bp-scroll-x\@laptop:focus-within::-webkit-scrollbar-thumb {
    background: var(--bp-scroll-thumb);
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .bp-scroll-x\@tablet {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bp-scroll-thumb) transparent;
  }
  .bp-scroll-x\@tablet > * { flex-shrink: 0 !important; }
  .bp-scroll-x\@tablet::-webkit-scrollbar       { height: var(--bp-scroll-height); }
  .bp-scroll-x\@tablet::-webkit-scrollbar-track { background: transparent; }
  .bp-scroll-x\@tablet::-webkit-scrollbar-thumb {
    background: transparent; border-radius: 4px;
    transition: background-color var(--bp-dur-fast, 150ms) ease-in-out;
  }
  .bp-scroll-x\@tablet:hover::-webkit-scrollbar-thumb,
  .bp-scroll-x\@tablet:focus-within::-webkit-scrollbar-thumb {
    background: var(--bp-scroll-thumb);
  }
}

@media screen and (max-width: 767px) {
  .bp-scroll-x\@mobile {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bp-scroll-thumb) transparent;
  }
  .bp-scroll-x\@mobile > * { flex-shrink: 0 !important; }
  .bp-scroll-x\@mobile::-webkit-scrollbar       { height: var(--bp-scroll-height); }
  .bp-scroll-x\@mobile::-webkit-scrollbar-track { background: transparent; }
  .bp-scroll-x\@mobile::-webkit-scrollbar-thumb {
    background: transparent; border-radius: 4px;
    transition: background-color var(--bp-dur-fast, 150ms) ease-in-out;
  }
  .bp-scroll-x\@mobile:hover::-webkit-scrollbar-thumb,
  .bp-scroll-x\@mobile:focus-within::-webkit-scrollbar-thumb {
    background: var(--bp-scroll-thumb);
  }
}