/* Styles for carousel.hbs — the about hero's photo strip.

   Sizes are the legacy's, measured on the live site: a full-width square below
   600px and a fixed 400x400 above it, 16px between slides, 12px corners, 8px
   dots on a 16px pitch in --gray-200 with #ffc800 for the current one. */

.about-carousel {
  position: relative;
  width: 100%;
}

/* A scroll-snapping strip rather than a slider: the swipe, the momentum and the
   keyboard scrolling are all the browser's, which is why the island can be as
   small as it is. `overscroll-behavior-x: contain` keeps a swipe that reaches
   the last slide from turning into a browser back-navigation. */
.about-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  border-radius: 12px;
  /* A mouse drag across photos would otherwise paint a selection over whatever
     sits either side of them. */
  user-select: none;
}

/* The global reset hides the scrollbar in Firefox and old Edge; WebKit needs
   its own pseudo-element, and only a scroll container ever needs it. */
.about-carousel-track::-webkit-scrollbar {
  display: none;
}

.about-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
}

/* The files are 800x800 and the box is at most 400 wide, so `cover` only ever
   downscales. The intrinsic size is declared on the tag so the square is
   reserved before the image arrives. */
.about-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* The dots hang below the track without being part of its box, which is what
   keeps the hero the height of the photo — the legacy does the same thing with
   an absolutely positioned Swiper pagination. Each button is 16px wide, so the
   dots sit on the legacy's 16px pitch, and 24px tall so there is something to
   hit; the 8px dot is centred in that, which is why the row starts 2px above
   the track's bottom edge to land 6px below it. */
.about-carousel-dots {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

/* Without the island the dots cannot move the strip, and a control that does
   nothing is worse than one that is not there. The strip itself still scrolls. */
html:not(.js) .about-carousel-dots {
  display: none;
}

.about-carousel-dot {
  display: grid;
  place-items: center;
  width: 16px;
  height: 24px;
  padding: 0;
}

.about-carousel-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gray-200);
  transition: background-color 0.2s ease;
}

/* #ffc800 — the same highlighter yellow the headline is marked with, and the
   legacy's own hex rather than a token, for the same reason. */
.about-carousel-dot.is-active::before {
  background-color: #ffc800;
}

@media (prefers-reduced-motion: reduce) {
  .about-carousel-dot::before {
    transition: none;
  }
}

@media (min-width: 600px) {
  .about-carousel {
    width: 400px;
  }
}