/* The strip rides the shared scroll-track, so it keeps the page gutters
   and scrolls on a phone without its own rules. */
.course-highlights {
  /* 20 to the hero above it (her call): Hero Video ends on a flat 120,
     so the top takes that back down — recompute if that 120 changes. */
  margin-top: -100px;
  padding-bottom: var(--section-spacing);
}

.course-highlights .scroll-track {
  align-items: flex-start;

  gap: clamp(12px, calc(4.4324px + 1.08108vw), 20px);
  /* The track clips what leaves it, and the hover ring sits 5px outside
     the circle. The padding gives it room, the negative margin takes
     that room back out of the layout. */
  padding-block: 6px;
  margin-block: -6px;
}

.course-highlights__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: clamp(10px, calc(2.432px + 1.0811vw), 18px);
  width: clamp(92px, calc(49.08px + 6.1297vw), 138px);
  text-decoration: none;
  color: var(--color-text);
}

.course-highlights__media {
  display: block;
  width: clamp(76px, calc(39.68px + 5.8757vw), 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-cards-bg);
}
.course-highlights__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-highlights__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-card-m);
  line-height: 1.25;
  text-align: center;
}

/* Desktop: the eight circles share the row, 30 apart (her call), so the
   last one ends on the video's right edge. The size follows the width. */
@media (min-width: 989px) {
  .course-highlights .scroll-track { gap: 30px; }
  .course-highlights__item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .course-highlights__media { width: 100%; }
}

/* A phone must always slice a circle, or the strip reads as finished and
   nothing says it scrolls sideways: three whole and the fourth cut off
   at the edge (her call, 2026-10-12; 88 at 390 over the frame's 76, so
   4 circles and 3 gaps always overrun the width up to 513). The circle
   scales with the width to the widest phone, above which the frame's
   ramp runs. The cell is the circle's width, so the 10 between circles
   is her flat 10 (a wider cell added its slack to it); a long caption
   overflows the cell, centred, into the gap. Captions are her 13 (14
   touched the neighbour) and never wrap inside the cell: their lines are
   the <br>s. */
@media (max-width: 440px) {
  .course-highlights .scroll-track { gap: 10px; }
  .course-highlights__item,
  .course-highlights__media { width: calc(100vw / var(--zoom) * 88 / 390); }
  .course-highlights__title { font-size: 13px; white-space: nowrap; }
}

/* The ring the hover draws is the page background, so it reads as a gap
   rather than a stroke. */
@media (hover: hover) {
  .course-highlights__item:hover .course-highlights__media {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
  }
}