/*
 * Hero carousel — the styling antd's <Carousel> brought with it.
 *
 * The app got this from antd.css, which is not loaded here, so these rules have no
 * counterpart to copy: they reproduce the behaviour (one slide visible, crossfade,
 * dot indicators) using the same visual language as antd's defaults — 16×3px bars,
 * 30% opacity, full opacity when active.
 *
 * The slide styling itself (.carouselBody, its h1 and p) is the app's, in
 * home-hero.css. Nothing here touches it.
 */

/* All slides occupy one grid cell, so the container is as tall as the tallest and
   nothing shifts when they swap. A stack of absolutely-positioned slides would
   collapse the container to zero height and drop the hero's layout. */
.rc-carousel {
  display: grid;
}

.rc-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.rc-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* `visibility` rather than `display` keeps the grid cell sized by every slide, and
   also takes the inactive slides' links out of the tab order — a keyboard user
   should not tab into a CTA they cannot see. */

/* Pinned to the bottom edge of the hero, not left in flow. In flow the dots sat
   directly under the slide copy, which is roughly the vertical middle of an 80vh
   hero and moves with the length of whichever slide is showing. `.hero-container`
   is the positioned ancestor; `.hero-carousel` is deliberately left unpositioned
   so this resolves against the hero box itself. */
.rc-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  padding: 0 50px;
}

@media screen and (max-width: 768px) {
  .rc-carousel-dots {
    bottom: 28px;
    padding: 0 20px;
  }
}

.rc-carousel-dot {
  width: 16px;
  height: 3px;
  padding: 0;
  border: 0;
  background: #fff;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.rc-carousel-dot.is-active,
.rc-carousel-dot:hover {
  opacity: 1;
}

/* The dots are a 3px-tall target, which is far below any reasonable hit area.
   Widen it invisibly rather than making the bars bigger and changing the look. */
.rc-carousel-dot::before {
  content: "";
  position: absolute;
  margin: -12px -4px;
  width: 24px;
  height: 27px;
}

.rc-carousel-dot {
  position: relative;
}

.rc-carousel-dot:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .rc-slide {
    transition: none;
  }
}