/* Carousel. Shared component, see parts/components/carousel.php.
 *
 * Slides per view are set here with container queries against the carousel's
 * own width, per modifier. carousel.js reads --hlb-carousel-per-view back, so
 * breakpoints live in one place.
 *
 * Without JS: native scroller with snap points. With JS (.hlb-carousel--js):
 * paged, the track moves by transform.
 */

.hlb-carousel {
  container-type: inline-size;
}

.hlb-carousel__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hlb-carousel__inner {
  --hlb-carousel-per-view: 1;
  --hlb-carousel-gap:      20px;
  --hlb-carousel-index:    0;

  position: relative;
}

/* The padding gives focus rings room inside the clip. The gap is wider than
   the padding, so neighbors never peek through it. */
.hlb-carousel__viewport {
  margin: -6px;
  padding: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.hlb-carousel__track {
  display: flex;
  gap: var(--hlb-carousel-gap);
  margin: 0;
  padding: 0;
}

.hlb-carousel__slide {
  flex: 0 0 calc((100% - (var(--hlb-carousel-per-view) - 1) * var(--hlb-carousel-gap)) / var(--hlb-carousel-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.hlb-carousel--js .hlb-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.hlb-carousel--js .hlb-carousel__track {
  transform: translateX(calc(var(--hlb-carousel-index) * -1 * (100% + var(--hlb-carousel-gap)) / var(--hlb-carousel-per-view)));
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* Controls. Default is a centered row under the track. */
.hlb-carousel__controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.hlb-carousel__controls[hidden] {
  display: none;
}

/* 44px hit area, 37px circle per the 2022 file. Navy on the light section
   backgrounds is 12+:1, so the circle carries the 1.4.11 boundary. */
.hlb-carousel .hlb-carousel__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hlb-navy);
  cursor: pointer;
}

.hlb-carousel__btn::before {
  content: '';
  position: absolute;
  width: 37px;
  height: 37px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .18s ease;
}

.hlb-carousel__btn svg {
  position: relative;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hlb-carousel .hlb-carousel__btn:hover:not(:disabled) {
  color: var(--hlb-white);
}

.hlb-carousel__btn:hover:not(:disabled)::before {
  background-color: var(--hlb-navy);
  border-color: var(--hlb-navy);
}

.hlb-carousel__btn:focus-visible {
  outline: 2px solid var(--hlb-navy);
  outline-offset: 2px;
}

.hlb-carousel .hlb-carousel__btn:disabled {
  opacity: .35;
  cursor: default;
}

/* Professionals: 4 / 3 / 2 / 1 up. 19px gap gives 200px tiles at 856.
   2-up holds down to phone width. 1-up made each photo taller than the
   viewport's usable height and meant a swipe per person. */
.hlb-carousel--pros .hlb-carousel__inner {
  --hlb-carousel-per-view: 2;
  --hlb-carousel-gap:      16px;
}

@container (max-width: 279px) {
  .hlb-carousel--pros .hlb-carousel__inner {
    --hlb-carousel-per-view: 1;
  }
}

@container (max-width: 559px) {
  .hlb-carousel--pros .hlb-pro-card--md {
    --hlb-pro-name: 500 16px/21px var(--hlb-font-body);
    --hlb-pro-text-gap: 12px;
  }
}

@container (min-width: 560px) {
  .hlb-carousel--pros .hlb-carousel__inner {
    --hlb-carousel-per-view: 3;
    --hlb-carousel-gap:      19px;
  }
}

@container (min-width: 760px) {
  .hlb-carousel--pros .hlb-carousel__inner {
    --hlb-carousel-per-view: 4;
  }
}

/* Desktop: arrows outside the grid, centers 40px past each edge, level with
   62.8% of the photo height per the 2022 file. Photo is 1.25x slide width. */
@media (min-width: 1100px) {
  .hlb-carousel--pros .hlb-carousel__controls {
    position: absolute;
    top: calc((100cqi - (var(--hlb-carousel-per-view) - 1) * var(--hlb-carousel-gap)) / var(--hlb-carousel-per-view) * 0.785 - 22px);
    right: -62px;
    left: -62px;
    justify-content: space-between;
    margin: 0;
    pointer-events: none;
  }

  .hlb-carousel--pros .hlb-carousel__btn {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hlb-carousel--js .hlb-carousel__track,
  .hlb-carousel__btn::before {
    transition: none;
  }
}