/* ==========================================================================
   CAROUSEL
   Sizing is exposed as CSS custom properties on .carousel so carousel.js
   can read them (getComputedStyle) instead of hardcoding vw math in JS —
   change breakpoints here and the JS math stays correct automatically.
   ========================================================================== */

.carousel-section {
  display: flex;
  align-items: center;
  background: var(--color-white);
  padding: var(--sp-6) 0;
}

.carousel-section--image {
  color: var(--color-white);
}

.carousel-section--image .carousel-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.carousel-section--image .carousel-section__bg img {
  width: 100%; height: 100%; object-fit: cover;
}

.carousel-section--image .carousel-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6,6,8,0.5);
}

.carousel-section__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.carousel-section__heading {
  text-align: center;
  margin: 0 auto var(--sp-6);
  max-width: 46ch;
}

.carousel-section__heading h2 { font-size: var(--fs-h1); }
.carousel-section__heading p  { margin-top: var(--sp-2); }
.carousel-section--image .carousel-section__heading p { color: rgba(255,255,255,0.8); }
.carousel-section:not(.carousel-section--image) .carousel-section__heading p { color: var(--color-ink-soft); }

.carousel {
  --carousel-center-w: 45vw;
  --carousel-side-w:   22vw;
  --carousel-center-h: 58vh;
  --carousel-side-h:   44vh;
  --carousel-gap:      1.6vw;

  position: relative;
  width: 100%;
  height: var(--carousel-center-h);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel__card {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-ink);
  cursor: pointer;
  transform: translate(-50%, -50%) translateX(var(--x, 0)) scale(var(--s, 1));
  width: var(--w, var(--carousel-side-w));
  height: var(--h, var(--carousel-side-h));
  opacity: var(--o, 0);
  z-index: var(--z, 1);
  transition:
    transform var(--dur-slow) var(--ease-in-out),
    width var(--dur-slow) var(--ease-in-out),
    height var(--dur-slow) var(--ease-in-out),
    opacity var(--dur-slow) var(--ease-in-out);
}

.carousel__card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-soft);
}

.carousel__card:hover img { transform: scale(1.06); }

/* Only the centered card is actually clickable-to-read-more (side cards
   just recenter on click) — the hint only makes sense there. */
.carousel__card.is-center::after {
  content: "Tap to read more →";
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  font-size: var(--fs-small);
  font-weight: var(--fw-subheading);
  color: var(--color-white);
  background: rgba(0, 127, 126, 0.88);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
  pointer-events: none;
}

.carousel__card.is-center:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.carousel__card-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(6,6,8,0.88) 0%, rgba(6,6,8,0.55) 55%, rgba(6,6,8,0) 100%);
}

.carousel__card-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-4);
  color: var(--color-white);
  text-align: left;
}

.carousel__card-text .eyebrow { color: var(--color-accent-soft); }

.carousel__card-text h3 {
  font-size: var(--fs-h2);
  margin-top: var(--sp-1);
}

.carousel__card-text p {
  margin-top: var(--sp-2);
  max-width: 32ch;
  color: rgba(255,255,255,0.85);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--dur-med) ease;
}

.carousel__card.is-center .carousel__card-text p {
  opacity: 1;
  max-height: 6em;
}

.carousel__card:not(.is-center) .carousel__card-text h3,
.carousel__card:not(.is-center) .carousel__card-text .eyebrow {
  opacity: 0.65;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  color: var(--color-white);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
}

.carousel-section:not(.carousel-section--image) .carousel__arrow {
  background: rgba(18,20,26,0.08);
  border-color: rgba(18,20,26,0.14);
  color: var(--color-ink);
}

.carousel__arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); transform: translateY(-50%) scale(1.06); }

.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow--prev svg { animation: arrowNudgeLeft 2.4s ease-in-out infinite; }
.carousel__arrow--next svg { animation: arrowNudgeRight 2.4s ease-in-out infinite; }

.carousel-progress {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-6);
}

.carousel-progress__track {
  position: relative;
  width: 64px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(18,20,26,0.12);
  overflow: hidden;
}

.carousel-section--image .carousel-progress__track { background: rgba(255,255,255,0.25); }

.carousel-progress__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-in-out), background var(--dur-fast) ease;
}

.carousel-progress__track.is-active .carousel-progress__fill { width: 100%; }
.carousel-progress__track.is-done .carousel-progress__fill { width: 100%; background: rgba(0,127,126,0.4); }

@media (max-width: 860px) {
  .carousel {
    --carousel-center-w: 82vw;
    --carousel-side-w:   9vw;
    --carousel-center-h: 56vh;
    --carousel-side-h:   40vh;
    --carousel-gap:      2.5vw;
  }

  .carousel__arrow { display: none; }

  .carousel-section__mobile-nav {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }

  .carousel-section__mobile-nav .carousel__arrow {
    display: flex;
    position: static;
    transform: none;
  }

  .carousel-section__mobile-nav .carousel__arrow:hover { transform: scale(1.06); }
}

@media (min-width: 861px) {
  .carousel-section__mobile-nav { display: none; }
}