/* Content Slider — generic horizontal scroll carousel (InnerBlocks).

   The track holds user-authored Group blocks — one Group per slide — so this
   file styles the *mechanism* (full-bleed track, progress rail, arrows) and
   only the slide box (width, snap). It makes no assumptions about slide content.

   Full-bleed technique + arrow alignment mirror the case study carousel's
   full-width row: the track is alignfull, but padding-inline pushes the first
   slide to the content-container edge, so the slider starts at the container
   and bleeds right (overflow-x: auto — no overflow:hidden). The top progress
   rail is indicator-only: fill + dots reflect scroll position (dots are built
   in script.js since the slide count is dynamic). */

.content-slider {
  --csl-content: 1280px;  /* content-container width the first slide aligns to */
  --csl-gap: 2rem;        /* gap between slides */
  --csl-per-view: 3.2;    /* slides visible across the container */
  --csl-line: var(--wp--preset--color--light-gray, #eeeef2);
  --csl-accent: var(--wp--preset--color--blue, #1354de);

  /* Descendants read the block's own width via cqw units + @container below. */
  container: content-slider / inline-size;
  position: relative;
}

/* The container-edge offset can't be set on the container itself (an element
   can't read its own cqw), so it's declared on the descendants that need it. */
.content-slider__rail,
.content-slider__viewport,
.content-slider__arrows {
  --csl-edge: max(var(--csl-gap), calc((100cqw - var(--csl-content)) / 2));
}

/* ---------------------------------------------------------------- *
 * Progress rail (indicator only)
 * ---------------------------------------------------------------- */

.content-slider__rail {
  position: relative;
  height: 14px;
  margin-bottom: 2.5rem;
}
.no-progress .content-slider__rail {
  display: none;
}
/* Base line + growing fill share the same track geometry (container-aligned). */
.content-slider__rail::before,
.content-slider__rail-fill {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--csl-edge);
  height: 1px;
  transform: translateY(-50%);
}

.content-slider__rail::before {
  right: var(--csl-edge);
  background: var(--csl-line);
}

/* Width driven by --csl-progress (0–1), set on the element by script.js. */
.content-slider__rail-fill {
  width: calc((100% - var(--csl-edge) * 2) * var(--csl-progress, 0));
  background: var(--csl-accent);
  transition: width 0.25s ease;
}

.content-slider__rail-dots {
  position: absolute;
  top: 50%;
  left: var(--csl-edge);
  right: var(--csl-edge);
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-slider__rail-dot {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--white, #fff);
  border: 1.5px solid var(--csl-line);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.content-slider__rail-dot.is-filled {
  border-color: var(--csl-accent);
  background: var(--csl-accent);
}

/* ---------------------------------------------------------------- *
 * Track + slides (each direct child = one slide, whatever it contains)
 * ---------------------------------------------------------------- */

.content-slider__viewport {
  /* Slides are sized against the *usable* row — the block minus the two edge
     gutters — so they never overrun the container edge once 100cqw drops below
     --csl-content (below ~1280px --csl-edge collapses to the gap, and the old
     `min(100cqw, …)` counted that gutter as slide width). */
  --csl-slide-size:
    calc(
      (min(calc(100cqw - var(--csl-edge) * 2), var(--csl-content)) -
        var(--csl-gap) * (var(--csl-per-view) - 1)) /
        var(--csl-per-view)
    );
  display: flex;
  gap: var(--csl-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--csl-edge);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.content-slider__viewport::-webkit-scrollbar {
  display: none;
}

.content-slider__viewport::before,
.content-slider__viewport::after {
  content: "";
}

.content-slider__viewport::before {
  flex: 0 0 max(0px, calc(var(--csl-edge) - var(--csl-gap)));
}

.content-slider__viewport::after {
  flex: 0 0 max(0px, calc(100cqw - var(--csl-edge) - var(--csl-slide-size) - var(--csl-gap)));
}

.content-slider__viewport > * {
  scroll-snap-align: start;
  min-width: 0;
  margin-block: 0; /* strip the default block-gap margins on the slide root */
  flex: 0 0 var(--csl-slide-size);
}

/* script.js puts `.is-active` on the slide at the leading edge — the hook for
   styling the in-focus slide. Left unstyled deliberately: this file styles the
   mechanism, and what "active" should look like depends on the slide content.
   Front-end only; the editor renders every slide wrapped and inert. */

/* ---------------------------------------------------------------- *
 * Arrows — aligned to the content container, below the track.
 * ---------------------------------------------------------------- */

.content-slider__arrows {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-left: var(--csl-edge);
}

.content-slider__arrow {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--wp--preset--color--dark-blue, #11132b);
  cursor: pointer;
  box-shadow: none;
  font: inherit;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.content-slider__arrow:hover {
  color: var(--csl-accent);
}

.content-slider__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Space-aware: when the whole track already fits, JS adds this and we drop the
   nav + rail (nothing to progress through). */
.content-slider--static .content-slider__arrows,
.content-slider--static .content-slider__rail {
  display: none;
}
.wp-block-group.content-slider__slide.is-active .has-light-gray-color {
    color: var(--wp--preset--color--blue)!important;
}
/* ---------------------------------------------------------------- *
 * Responsive — keyed to the block's own inline size (@container).
 * ---------------------------------------------------------------- */

/* An element is never matched by its own container query, so these overrides
   go on the same descendants that carry --csl-edge — putting them on
   `.content-slider` (the query container) silently did nothing. */
@container content-slider (max-width: 900px) {
  .content-slider__rail,
  .content-slider__viewport,
  .content-slider__arrows {
    --csl-per-view: 1.6;
    --csl-gap: 1.5rem;
  }
}

/* Mobile: one full slide per view, no peek. --csl-edge collapses to the gap
   here, so the slide spans the row inset by one gutter each side; the track's
   leading/trailing flex gaps supply those gutters. */
@container content-slider (max-width: 600px) {
  .content-slider__rail,
  .content-slider__viewport,
  .content-slider__arrows {
    --csl-per-view: 1;
    --csl-gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-slider__viewport {
    scroll-behavior: auto;
  }

  .content-slider__rail-fill,
  .content-slider__rail-dot {
    transition: none;
  }
}

/* ---------------------------------------------------------------- *
 * Editor — make the track wrap so every slide is reachable while editing,
 * and drop the runtime chrome (rail/arrows are JS-driven, inert here).
 * ---------------------------------------------------------------- */

.wp-admin .content-slider__viewport {
  flex-wrap: wrap;
  overflow-x: visible;
}

.wp-admin .content-slider__rail,
.wp-admin .content-slider__arrows {
  display: none;
}