/* Course "level path" picker — dual-handle complexity slider above the course
   filters (desktop sidebar + mobile filter drawer). Two overlaid native range
   inputs share one painted rail: the inputs themselves are invisible and
   click-through (pointer-events: none), only their thumbs react, so either
   handle can be grabbed wherever it sits. The brand segment between the
   handles is painted through the --picker-lo / --picker-hi custom properties
   the JS keeps in sync (defaults cover the full rail: everything selected). */

.course-picker {
  width: 100%;
  margin: 0 0 32px;
}

.course-picker__title {
  display: block;
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-align: left;
  font-weight: 600;
  color: #131313;
  margin-bottom: 16px;
}

.course-picker__track {
  --picker-lo: 0%;
  --picker-hi: 100%;
  position: relative;
  width: 100%;
  height: 24px;
  margin-top: 18px; /* room for the Start/Finish captions riding above the thumbs */
}

/* Start/Finish captions above the two thumbs. The corridor is inset by half a
   thumb (10px) per side so a caption's centre tracks its thumb's centre: the
   same --picker-lo/--picker-hi percentages resolve against the corridor width,
   which equals the thumbs' travel span. */
.course-picker__caps {
  position: absolute;
  left: 10px;
  right: 10px;
  top: -14px;
  height: 14px;
  pointer-events: none;
}

.course-picker__cap {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 600;
  color: #131313;
  white-space: nowrap;
}

.course-picker__cap--start {
  left: var(--picker-lo);
}

.course-picker__cap--finish {
  left: var(--picker-hi);
}

/* Both handles on one step: flank the captions around the shared dot instead
   of overprinting — Start ends left of the dot, Finish begins right of it. */
.course-picker--merged .course-picker__cap--start {
  transform: translateX(calc(-100% - 7px));
}

.course-picker--merged .course-picker__cap--finish {
  transform: translateX(7px);
}

/* At the scale's extremes there is no room on the outer side, so the pair
   flows inward from the rail's edge as a static row (order stays Start,
   Finish). These override the flank transforms above by source order. */
.course-picker--merged-min .course-picker__caps,
.course-picker--merged-max .course-picker__caps {
  display: flex;
  gap: 10px;
}

.course-picker--merged-min .course-picker__caps {
  justify-content: flex-start;
}

.course-picker--merged-max .course-picker__caps {
  justify-content: flex-end;
}

.course-picker--merged-min .course-picker__cap,
.course-picker--merged-max .course-picker__cap {
  position: static;
  transform: none;
}

/* The painted rail: neutral base with the brand segment between the handles. */
.course-picker__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #e8e8e8 0 var(--picker-lo),
    #e106a4 var(--picker-lo) var(--picker-hi),
    #e8e8e8 var(--picker-hi) 100%
  );
}

/* Level-stop notches across the rail — one per step of the scale. The layer
   repeats the caps' corridor inset (half a thumb per side) so each notch
   centre lands exactly on a thumb stop; the view spreads them with inline
   left percentages. Decorative only, and the markup keeps the notches before
   the range inputs so the thumbs always slide over them. Notches read grey on
   the neutral rail and take the rail's own brand colour on the brand segment
   so they melt into it — see --in-range. */
.course-picker__ticks {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 100%;
  pointer-events: none;
}

.course-picker__tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  background: #b9b9b9;
}

/* Inside the picked window the notch lands on the brand segment. The earlier
   light pink read brighter than the rail and stood out; paint it the rail's
   own brand colour instead so the notch disappears into the filled segment.
   The JS re-flags every notch on each handle move; the view ships the flag
   pre-set for the default full-span pick. */
.course-picker__tick.--in-range {
  background: #e106a4;
}

.course-picker__range {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  pointer-events: none;
}

.course-picker__range:focus {
  outline: none;
}

.course-picker__range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 24px;
  background: transparent;
  border: none;
}

.course-picker__range::-moz-range-track {
  height: 24px;
  background: transparent;
  border: none;
}

.course-picker__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e106a4;
  box-shadow: 0 1px 4px rgba(19, 19, 19, 0.24);
  cursor: grab;
}

.course-picker__range::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #e106a4;
  box-shadow: 0 1px 4px rgba(19, 19, 19, 0.24);
  cursor: grab;
}

.course-picker__range:active::-webkit-slider-thumb {
  cursor: grabbing;
  background: #fde6f6;
}

.course-picker__range:active::-moz-range-thumb {
  cursor: grabbing;
  background: #fde6f6;
}

.course-picker__range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid #e106a4;
  outline-offset: 2px;
}

.course-picker__range:focus-visible::-moz-range-thumb {
  outline: 2px solid #e106a4;
  outline-offset: 2px;
}

/* The four level names under the rail; edge labels hug the rail's ends. */
.course-picker__scale {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
}

.course-picker__step {
  flex: 1 1 0;
  font-size: 0.6875rem;
  line-height: 0.875rem;
  text-align: center;
  color: #131313;
}

.course-picker__step:first-child {
  text-align: left;
}

.course-picker__step:last-child {
  text-align: right;
}

/* Cards outside the picked range (and the idle empty message). !important
   outranks the card's own display rule. */
.course-picker-hide {
  display: none !important;
}

/* ── Mobile filter drawer ──────────────────────────────────────────────────
   Below 1025px the picker only ever renders inside the courses grid's filter
   drawer (the desktop sidebar copy is hidden), so this block is that drawer's
   presentation alone.

   The four level captions were the page's smallest type and hard to read at
   phone size. Enlarging them inside four EQUAL cells is what forces a wrap —
   the widest caption ("No Experience" / "Sin experiencia") needs more than a
   quarter of the rail. Let each caption take its natural width instead and let
   space-between distribute the slack: the row then fits a much bigger size at
   the same drawer width. Measured (Spanish is the widest set): at a 360px
   viewport the captions fit on one line up to 13px, at 320px up to 11px — the
   clamp below tracks the viewport between those, capped so wide phones don't
   run away with it. `nowrap` makes any future overflow visible rather than
   silently re-wrapping. */
@media (max-width: 1024px) {
  .course-picker__scale {
    /* Floor only: space-between owns the real spacing at every size the clamp
       produces; this just guarantees captions can never touch. */
    gap: 4px;
  }

  .course-picker__step {
    flex: 0 1 auto;
    white-space: nowrap;
    font-size: clamp(10px, 3.3vw, 13px);
    line-height: 1.2;
  }

  /* The scale sat 32px above the first facet ("Language"), a bigger gap than
     the facets keep between themselves — tighten it so the picker reads as
     part of the same filter stack. */
  .course-picker {
    margin-bottom: 16px;
  }
}