/*
 * Structural + chrome styles for the parts the engine renders itself
 * (viewport, track/stage, arrows, dots). This file is imported by the
 * component source, so the bundler shadow-scopes it — it never needs to
 * reach slotted slide content, only the shell around it.
 */

/*
 * Every real slide is light DOM, projected through a native <slot> and then
 * (per Webflow) wrapped one level deeper still — so nothing in this file can
 * reach or size individual slides at all; that's the global animation
 * stylesheet's job (css-transitions.ts). Height auto-sizes to content: the
 * active (or entering) slide is the one genuinely in normal flow — see
 * css-transitions.ts's `[data-slide][data-slide-state="active"]` rule — so
 * its real height propagates up through this whole chain the ordinary way.
 * Nothing here needs a min-height fallback; a min-height *floor* would also
 * become a hard *ceiling*, since the other (position: absolute, out-of-flow)
 * slides have nothing of their own to size against and would just get
 * clipped by .mb-slider-viewport's overflow: hidden at whatever the floor
 * value was.
 *
 * `height: 100%` is kept throughout purely as an escape hatch: it's a no-op
 * (resolves to auto) unless the Webflow developer sets an actual height,
 * min-height, or aspect-ratio on the slider instance in the Designer, in
 * which case it cascades normally and that explicit height wins instead.
 */
.mb-slider {
  position: relative;
  display: block;
  height: 100%;
}

/*
 * Discrete scroll-driving's self-built pin: SliderRoot renders this wrapper
 * (and stamps data-scroll-pinned on .mb-slider below) only when
 * scrollMode="discrete" and scroll interaction is on — see SliderRoot.tsx's
 * selfContainedScroll. Height is set inline by SliderRoot.tsx (scaled by
 * slideCount, since touch now maps real scroll distance to slide position —
 * see useScroll.ts's discrete/touch effect), not here; --scroll-range-height
 * still overrides it per instance same as always, just read from the inline
 * style's fallback rather than a rule in this file.
 */

/*
 * Specificity (class + attribute) deliberately beats the plain .mb-slider
 * rule above so this doesn't depend on source order.
 *
 * height can't stay the inherited 100% here: that's a no-op escape hatch
 * everywhere else (see the comment above .mb-slider) *because* it normally
 * resolves against an auto-height ancestor. Once wrapped in
 * .mb-slider-scroll-range, though, the immediate ancestor has a genuine
 * explicit height (see SliderRoot.tsx — slideCount * 100vh by default) — so
 * 100% would resolve to that literal height too, making the sticky element
 * exactly as tall as the range it's meant to scroll through. Sticky only
 * visibly sticks when its parent has
 * slack beyond the child's own height; with both equal there's zero slack,
 * so it behaves like ordinary position: relative and scroll runs straight
 * through it — which is exactly the "still able to scroll past" symptom
 * this fixes. A fixed viewport-height pin also avoids the pinned height
 * jittering as content-height varies slide to slide (only the active/
 * entering slide is in normal flow, so unstyled height would chase it).
 */
.mb-slider[data-scroll-pinned] {
  position: sticky;
  top: var(--scroll-sticky-top, 0px);
  height: var(--scroll-pinned-height, 100vh);
}

.mb-slider-viewport {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.mb-slider-track,
.mb-slider-stage {
  position: relative;
  height: 100%;
  touch-action: pan-y;
}

.mb-slider-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.mb-slider-arrows {
  display: flex;
  gap: 0.5rem;
}

.mb-slider-arrow,
.mb-slider-play-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.mb-slider-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.mb-slider-pagination {
  display: flex;
  gap: 0.75rem;
  margin-inline-start: auto;
}

.mb-slider-dot {
  /* Size is the one pagination knob exposed as a CSS variable (rather than
     a fixed value) since it's a common ask and has no Properties-panel
     prop type suited to it. Color deliberately isn't a variable here — it
     already inherits via currentColor, see the README's pagination note. */
  width: var(--slider-dot-size, 0.5rem);
  height: var(--slider-dot-size, 0.5rem);
  border-radius: 50%;
  border: none;
  background: var(--code-component-slider--slider-pagination);
  cursor: pointer;
  padding: 0;
}

.mb-slider-dot.is-active {
  border-radius: 0%;
}

/*
 * Cursor-style arrows (Featured): no visible buttons, the viewport itself
 * is the click target. The real Prev/Next buttons still exist in the DOM
 * (SliderControls always renders them when arrows are enabled at all) —
 * they're just visually hidden here, and restored on keyboard focus, so
 * keyboard/AT users get a labeled control instead of relying on the cursor
 * affordance, which only means anything with a mouse.
 */
[data-arrow-style="cursor"] .mb-slider-arrows {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-arrow-style="cursor"] .mb-slider-arrows:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: inherit;
}

/*
 * Featured's cursor-nav runs in "next-only" mode (SliderRoot.tsx) — a
 * looping, small (typically 3-slide) set has no reason to expose reverse
 * from the cursor — so data-cursor-zone is always "next" here; there's no
 * "prev" cursor rule to pair with it.
 */
[data-arrow-style="cursor"] .mb-slider-viewport {
  cursor:
    url("data:image/svg+xml,%3Csvg width=%2740%27 height=%2740%27 viewBox=%270 0 40 40%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect width=%2740%27 height=%2740%27 rx=%2720%27 fill=%27%23D6EE40%27/%3E%3Cpath d=%27M27.7107 20.5298V20.5353H27.7051L20.9766 27.2639L20.0533 26.3406L25.8586 20.5353H12.0466V19.2302H25.8531L20.0437 13.4207L20.9669 12.4975L27.4317 18.9623L27.4372 18.9567L28.3604 19.88L27.7107 20.5298Z%27 fill=%27%23232220%27/%3E%3C/svg%3E")
      20 20,
    pointer;
}

.mb-slider-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * The peek/carousel knobs, all consumed by css-transitions.ts's
 * data-slide-media rules via ordinary CSS custom-property inheritance
 * (values, not selectors, do cross the shadow boundary into the slotted
 * slide content — see useSlottedSlides.ts for why selectors can't):
 *
 * --slide-inset        fixed-width right gutter on the slide root itself
 *                       (width: calc(100% - this))
 * --slide-basis        media width, as a % of the slide root's own width
 *                       (100% here means "fill the slide root exactly," not
 *                       "fill the viewport" — the peek gutter comes
 *                       entirely from --slide-inset, not from shrinking the
 *                       media inside its slide)
 * --slider-track-gap   additional space between active and peek/behind,
 *                       on top of --slide-inset
 * --carousel-peek-scale, --carousel-behind-scale, --carousel-hidden-scale
 *                       how much smaller than the active image (scale 1)
 *                       each other role sits at — peek at 1 means it's
 *                       full-scale, matching active, right up until it
 *                       slides into place
 * --carousel-behind-shift
 *                       how far left the outgoing active image swings
 *                       *while* becoming behind, before swinging back to
 *                       translateX(0) (same position as active, so it ends
 *                       up fully hidden underneath, not peeking) — see the
 *                       mb-slide-to-behind keyframes in css-transitions.ts.
 *                       Purely a mid-animation peak; doesn't affect the
 *                       resting position at all.
 * --slide-content-duration
 *                       how long data-slide-content's fade takes, each way —
 *                       independent of --slider-duration (which still
 *                       drives data-slide-media). The fade out and fade in
 *                       are sequential, not a crossfade (see
 *                       css-transitions.ts), so the full outgoing-gone to
 *                       incoming-fully-in cycle takes 2x this value.
 */
.mb-featured-slider [data-slider-track] {
  --slide-inset: 5rem;
  --slide-basis: 100%;
  --slider-track-gap: 2rem;
  --carousel-peek-scale: 1;
  --carousel-behind-scale: 0.9;
  --carousel-hidden-scale: 0.8;
  --carousel-behind-shift: -2rem;
  --slide-content-duration: 500ms;
}

/*
 * Overlay the controls on the slide itself, bottom-left, roughly level with
 * the image's bottom edge (the viewport's own height tracks the tallest
 * content in the row, which is normally the image) — rather than the
 * default below-the-slider flow row Editorial/Content use. Since arrows are
 * cursor-driven here (see arrowStyle="cursor"), this is effectively just
 * the pagination dots. z-index has to clear the active image's (3, see
 * css-transitions.ts) since both now live in the same stacking context.
 *
 * Because this floats over the slide, leave enough bottom padding in your
 * content column that it doesn't collide with long body copy or a CTA.
 */
.mb-featured-slider .mb-slider-controls {
  position: absolute;
  left: 0;
  bottom: -2rem;
  margin-top: 0;
  z-index: 4;
}

.mb-featured-slider .mb-slider-pagination {
  margin-inline-start: 0;
}

.mb-featured-slider .mb-slider-viewport {
  position: relative;
  overflow: visible;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .mb-featured-slider [data-slider-track] {
  --slide-inset: 9.3125rem;
  /* --slide-basis: 100%; */
  /* --slider-track-gap: 2rem;
  --carousel-peek-scale: 1;
  --carousel-behind-scale: 0.9;
  --carousel-hidden-scale: 0.8;
  --carousel-behind-shift: -2rem;
  --slide-content-duration: 500ms; */
}

.mb-featured-slider .mb-slider-controls {
  bottom: 0;
}

.mb-featured-slider .mb-slider-viewport {
  overflow: hidden;
}
}