/* Native carousel dots for the customer stories (src/components/Testimonials.astro), in browsers that have them.
 *
 * Served as-is, outside the build: Lightning CSS doesn't know ::scroll-marker yet and would warn on every build.
 * So plain CSS only here: no nesting, no named media queries (64rem is --tablet in src/styles/media.css). The other
 * carousel styles, including the position dots for browsers without native ones, are in
 * src/styles/components/testimonials.css. */

@media (width < 64rem) {
  @supports selector(::scroll-marker) {
    .stories-carousel .stories__dots {
      display: none;
    }
    .stories {
      scroll-marker-group: after;
    }
    .stories::scroll-marker-group {
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      margin-top: var(--space-2);
    }
    .story::scroll-marker {
      content: '';
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: rgb(255 255 255 / 0.3);
      transition: background-color var(--duration-fast);
    }
    .story::scroll-marker:hover {
      background: rgb(255 255 255 / 0.6);
    }
    .story::scroll-marker:target-current {
      background: var(--color-sky);
    }
    .story::scroll-marker:focus-visible {
      outline: 2px solid var(--color-sky);
      outline-offset: 3px;
    }
  }
}