/* 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 {
  /* One type scale for every label in the picker. The Start/Finish captions
     above the rail and the level names below it are the same kind of text, so
     they must render identically — same size, same leading, same inherited
     weight. Keeping both on these two properties is what stops the pair from
     drifting apart again (the captions used to sit at a fixed 11px/600 while
     the level names grew and stayed at 400, which read as a different
     typeface). The leading doubles as the height of the caption corridor.

     13px, up from 11px (client, 2026-08-07: "здесь он шрифт обратно уменьшил мы
     уже это исправляли"). The 2026-07-27 round DID enlarge these captions — but
     only inside the mobile filter drawer, so the desktop sidebar was left at the
     old 11px and read as the smallest type on the page. The size is capped by
     the widest caption set, Spanish, in a rail that does NOT grow with the
     viewport: `.courses__side` is a fixed 340px column with 32px of right
     padding, i.e. 308px of caption room at every desktop width from 1025 up.
     Measured natural widths of "Sin experiencia / Principiante / Intermedio /
     Avanzado" plus the 4px gap floor below: 245px at 11px, 266 at 12, 288 at 13,
     309 at 14 — so 13px is the largest size that still fits one line, and 14px
     misses by 0.8px. (English needs 280px at 13px and would take 14, but the two
     storefronts share one rail and one scale.) */
  --picker-label-size: 13px;
  --picker-label-leading: calc(var(--picker-label-size) * 1.2);
  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;
  /* Collapses against the track's top margin (adjacent siblings in normal
     block flow), so the larger of the two wins and this value alone sets the
     heading-to-rail band. The track's margin is spent on the Start/Finish
     caption line riding above the rail, leaving the rest as clear air under
     the heading — keep this above one caption line plus 4px (the track's own
     margin) or the offset disappears entirely. */
  margin-bottom: 32px;
}

.course-picker__track {
  --picker-lo: 0%;
  --picker-hi: 100%;
  position: relative;
  width: 100%;
  height: 24px;
  /* Room for the Start/Finish captions riding above the thumbs: one caption
     line plus 4px of air. Tracks the shared leading so the corridor still fits
     when the labels scale up in the drawer. */
  margin-top: calc(var(--picker-label-leading) + 4px);
}

/* 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: calc(var(--picker-label-leading) * -1);
  height: var(--picker-label-leading);
  pointer-events: none;
}

.course-picker__cap {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--picker-label-size);
  line-height: var(--picker-label-leading);
  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;
  /* Floor only: space-between owns the real spacing at every rail width; this
     just guarantees two captions can never touch. */
  gap: 4px;
}

/* Each caption takes its natural width. FOUR EQUAL CELLS are what force a wrap
   — the widest caption ("No Experience" / "Sin experiencia") needs more than a
   quarter of the rail — so equal cells cap the type far below what the rail can
   actually carry; letting space-between distribute the slack instead is what
   buys the bigger size (see --picker-label-size above). `nowrap` makes any
   future overflow visible rather than silently re-wrapping. */
.course-picker__step {
  flex: 0 1 auto;
  white-space: nowrap;
  font-size: var(--picker-label-size);
  line-height: var(--picker-label-leading);
  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 natural-width scale is shared with the desktop rail now, so only the size
   is left here: unlike the sidebar's fixed 308px, the drawer is as wide as the
   phone. 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 tracks the
   viewport between those, capped at the same 13px the desktop rail carries so
   wide phones don't run away with it. */
@media (max-width: 1024px) {
  .course-picker {
    /* Both label rows shrink together — the Start/Finish captions are the same
       text as the level names, so a caption row left behind at the desktop
       size would read as a foreign, larger face right above them. */
    --picker-label-size: clamp(10px, 3.3vw, 13px);

    /* 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. */
    margin-bottom: 16px;
  }
}