/*
 * OctoComps Homepage Hero Carousel
 * Sandbox feature: admin-managed image/link boxes, Elite-style 3-panel carousel.
 * Full-bleed desktop carousel with controlled transform loop; drag/swipe support.
 */

/* Full-bleed: break out of .section-inner to the full viewport width. */
.octo-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(-30px, -2vw, -18px);
  margin-bottom: clamp(6px, 0.8vw, 12px);
}

/* CAROUSEL SHELL */
.octo-hero-carousel {
  position: relative;
  width: 100vw;
  overflow: hidden;
  --octo-slide: 45vw;
  --octo-gap: clamp(18px, 1.55vw, 24px);
  --octo-arrow-size: 50px;
}

/* Track is transform-driven, not native-scroll-driven. This avoids the visible
   edge bounce/rubber-band behaviour Carl saw in the scrollLeft version. */
.octo-hero-track {
  position: relative;
  display: flex;
  gap: var(--octo-gap);
  width: max-content;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.octo-hero-track--instant,
.octo-hero-track.is-dragging {
  transition: none !important;
}
.octo-hero-track.is-dragging {
  cursor: grabbing;
}

/* SLIDES */
.octo-hero-slide {
  flex: 0 0 var(--octo-slide);
  max-width: var(--octo-slide);
  position: relative;
  display: block;
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(139,62,240,0.22));
  background: var(--black3, #15001E);
  aspect-ratio: 1.4 / 1;
  opacity: 0.82;
  transition: opacity 0.28s ease, transform 0.18s ease;
  text-decoration: none;
  -webkit-user-drag: none;
}
.octo-hero-slide.is-active {
  opacity: 1;
}
.octo-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

a.octo-hero-slide {
  cursor: pointer;
}
a.octo-hero-slide:active {
  transform: scale(0.985);
  opacity: 0.92;
}
.octo-hero-slide--static {
  cursor: grab;
}
.octo-hero-track.is-dragging .octo-hero-slide,
.octo-hero-track.is-dragging .octo-hero-slide--static {
  cursor: grabbing;
}

/* ARROWS */
.octo-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: var(--octo-arrow-size);
  height: var(--octo-arrow-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(7,0,9,0.68);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background 0.18s ease, opacity 0.18s ease;
}
.octo-hero-arrow:hover,
.octo-hero-arrow:active {
  background: var(--purple, #7C3AED);
}
.octo-hero-arrow:active {
  transform: translateY(-50%);
  opacity: 1;
}
.octo-hero-arrow:focus-visible {
  outline: 2px solid var(--teal, #00E5CC);
  outline-offset: 2px;
}
.octo-hero-arrow svg {
  width: 26px;
  height: 26px;
  display: block;
  pointer-events: none;
}
/* Sit arrows in the gap beside the centre card: close to the card edge, but
   biased outward so the button lives between the centre and side images. */
.octo-hero-prev {
  left: calc((100vw - var(--octo-slide)) / 2 - (var(--octo-gap) / 2) - (var(--octo-arrow-size) / 2));
}
.octo-hero-next {
  right: calc((100vw - var(--octo-slide)) / 2 - (var(--octo-gap) / 2) - (var(--octo-arrow-size) / 2));
}

/* MOBILE: one dominant slide, small side peek, swipe/drag only */
@media (max-width: 768px) {
  .octo-hero {
    margin-top: 8px;
    margin-bottom: 12px;
  }
  .octo-hero-arrow {
    display: none;
  }
  .octo-hero-carousel {
    --octo-slide: 86vw;
    --octo-gap: 10px;
  }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .octo-hero-track,
  .octo-hero-slide,
  .octo-hero-arrow {
    transition: none !important;
  }
}