/* ==========================================================================
   Asymmetric Carousel — Core Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* --- Container --- */
.ac-carousel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 2rem auto;
  font-family: 'Inter', sans-serif;
}

.ac-track {
  position: relative;
  width: 100%;
  /* Height = center image height. Center is 60% of width and square, so aspect-ratio ~5/3 */
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: #0e0e10;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.ac-carousel.ac-dragging .ac-track {
  cursor: grabbing;
}

/* --- Slide (base) --- */
.ac-slide {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.ac-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* --- Transition class (added by JS when animating) --- */
.ac-slide.ac-animate {
  transition:
    left    0.95s cubic-bezier(0.4, 0, 0.15, 1),
    top     0.95s cubic-bezier(0.4, 0, 0.15, 1),
    width   0.95s cubic-bezier(0.4, 0, 0.15, 1),
    height  0.95s cubic-bezier(0.4, 0, 0.15, 1),
    opacity 0.65s cubic-bezier(0.4, 0, 0.15, 1),
    box-shadow 0.95s ease;
}

/* ==========================================================================
   State positions  (applied via inline styles by JS, values documented here)
   --------------------------------------------------------------------------
   hidden-left  : { left: -16%, top: 56%, width: 11%, height: 44%, opacity: 0 }
   prev         : { left:  1%, top: 50%, width: 13%, height: 50%, opacity: 1 }
   active       : { left: 20%, top:  0%, width: 60%, height:100%, opacity: 1 }
   next         : { left: 86%, top:  0%, width: 13%, height: 50%, opacity: 1 }
   hidden-right : { left:103%, top: -6%, width: 11%, height: 44%, opacity: 0 }
   ========================================================================== */

/* Active slide gets a stronger shadow & higher z-index */
.ac-slide[data-state="active"] {
  z-index: 3;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.ac-slide[data-state="prev"],
.ac-slide[data-state="next"] {
  z-index: 2;
}

.ac-slide[data-state="hidden-left"],
.ac-slide[data-state="hidden-right"] {
  z-index: 1;
}

/* --- Progress dots --- */
.ac-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0;
}

.ac-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(14, 14, 16, 0.22);
  cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.ac-dot:hover {
  background: rgba(14, 14, 16, 0.45);
}

.ac-dot:focus-visible {
  outline: 2px solid #0e0e10;
  outline-offset: 3px;
}

.ac-dot.ac-active,
.ac-dot[aria-current="true"] {
  background: #0e0e10;
  transform: scale(1.35);
  box-shadow: 0 0 0 1px rgba(14, 14, 16, 0.12);
}

/* ==========================================================================
   Mobile — single image, simple fade
   ========================================================================== */
@media (max-width: 640px) {
  .ac-track {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
  }

  .ac-slide {
    border-radius: 8px;
  }

  /* On mobile, JS switches to a simpler fade mode.
     All slides are full-size, stacked, and we just fade opacity. */
  .ac-carousel.ac-mobile .ac-slide {
    left: 2% !important;
    top: 2% !important;
    width: 96% !important;
    height: 96% !important;
    border-radius: 10px;
    transition: opacity 0.7s ease !important;
  }

  .ac-carousel.ac-mobile .ac-slide[data-state="active"] {
    opacity: 1 !important;
    z-index: 3;
  }

  .ac-carousel.ac-mobile .ac-slide[data-state="prev"],
  .ac-carousel.ac-mobile .ac-slide[data-state="next"],
  .ac-carousel.ac-mobile .ac-slide[data-state="hidden-left"],
  .ac-carousel.ac-mobile .ac-slide[data-state="hidden-right"] {
    opacity: 0 !important;
    z-index: 1;
  }
}