/* DMX Services Carousel */

.svc-carousel {
  --svc-text: #e8f1f2;
  --svc-muted: rgba(232, 241, 242, 0.55);
  --svc-accent: #2fd4c6;
  --svc-card-bg: #0d1b22;
  --svc-card-w: 260px;
  --svc-card-h: 340px;
  --svc-gap: 22px;
  --svc-active-scale: 1.12;
  /* how much wider the active card is vs an inactive one (flex-grow ratio) */
  --svc-active-grow: 2.6;
  /* extra media height on the active card so the wider photo isn't cropped flat */
  --svc-active-media-boost: 150px;
  --svc-speed: 0.55s;

  color: var(--svc-text);
  padding: 10px 0 40px;
  position: relative;
}

/* header row: heading left, arrows right */
.svc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 42px;
}

.svc-heading {
  margin: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  color: inherit;
}

.svc-heading span {
  color: var(--svc-accent);
}

.svc-nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.svc-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--svc-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.15s ease;
}

.svc-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--svc-accent);
}

.svc-arrow:active {
  transform: scale(0.92);
}

.svc-arrow:focus-visible {
  outline: 2px solid var(--svc-accent);
  outline-offset: 3px;
}

.svc-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* track — cards flex to fill the full container width */
.svc-viewport {
  /* room for the card box-shadow to breathe (no horizontal overflow now) */
  padding: 20px 0 34px;
  /* Lock the row to the tallest a card ever gets (the active card, with its
     media boost) so switching which card is active never changes the
     viewport's own height. Without this, .svc-track's height tracks its
     tallest child via align-items: center, and that child changes every time
     the active card changes — shrinking/growing the whole section and
     shifting anything below it on the page. */
  height: calc(var(--svc-card-h) + var(--svc-active-media-boost) + 54px);
}

.svc-track {
  display: flex;
  align-items: center;
  gap: var(--svc-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-card {
  /* every card shares the row; grow:1 fills the container evenly. Size is the
     only signal for "active" now — cards stay at full opacity throughout. */
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  transition: flex-grow var(--svc-speed) cubic-bezier(0.33, 1, 0.24, 1);
  margin: 0;
}

.svc-card.is-active {
  /* active card claims more of the width, others shrink to compensate */
  flex-grow: var(--svc-active-grow);
  cursor: default;
  z-index: 2;
}

.svc-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--svc-card-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transition: box-shadow var(--svc-speed) ease;
}

.svc-card.is-active .svc-link {
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55);
}

.svc-media {
  height: calc(var(--svc-card-h) - 86px);
  overflow: hidden;
  transition: height var(--svc-speed) cubic-bezier(0.33, 1, 0.24, 1);
}

/* active card is wide, so give the media extra height to keep a natural,
   photo-friendly aspect ratio instead of a heavily-cropped letterbox */
.svc-card.is-active .svc-media {
  height: calc(var(--svc-card-h) - 86px + var(--svc-active-media-boost));
}

.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.svc-card.is-active .svc-media img,
.svc-link:hover .svc-media img {
  transform: scale(1.06);
}

.svc-info {
  padding: 16px 14px 18px;
  text-align: center;
}

.svc-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: inherit;
}

.svc-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 2px;
  background: var(--svc-accent);
}

.svc-cta {
  display: block;
  margin-top: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--svc-accent);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.svc-card.is-active .svc-cta {
  opacity: 1;
  transform: translateY(0);
}

/* navigation dots */
.svc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.svc-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.svc-dot:hover {
  background: rgba(255, 255, 255, 0.45);
}

.svc-dot:focus-visible {
  outline: 2px solid var(--svc-accent);
  outline-offset: 3px;
}

.svc-dot.is-active {
  width: 26px;
  background: var(--svc-accent);
  cursor: default;
}

/* mobile — cards keep their normal size and the row scrolls instead of squeezing.
   Everything about the card itself (height, type, dimming, CTA) stays as-is;
   only the layout model changes from "share the row" to "swipe through". */
@media (max-width: 767px) {
  .svc-carousel {
    --svc-gap: 12px;
    --svc-card-h: 290px;
    /* under 100% on purpose: the next card is left hanging off the edge as a
       cut-off peek, which is what signals "there's more, swipe me" */
    --svc-mobile-card-w: 72%;
    /* Distance from the screen edge to the carousel's own edge — i.e. the page
       gutter. Measured and set by services-carousel.js, because CSS can't get
       at it here: calc(50vw - 50%) works on .svc-viewport, whose containing
       block is the carousel, but collapses to zero on .svc-track, which the
       bleed has already stretched to the full screen width. */
    --svc-gutter: 0px;
  }

  .svc-head {
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 26px;
  }

  .svc-viewport {
    /* vertical padding keeps the card shadow inside the scroll box */
    padding: 12px 0 24px;
    /* mobile never boosts the active card's media (see .svc-card.is-active
       .svc-media below), so there's nothing to reserve height for — let it
       size to content instead of the desktop calc above. */
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* snap cards to the gutter, not to the bled-out screen edge */
    scroll-padding-inline: var(--svc-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* Break out of the container's gutters so the peek card is cut by the screen
       edge. Trimmed short of the edge it reads as a layout mistake rather than
       "there's more". */
    margin-inline: calc(-1 * var(--svc-gutter));
  }

  .svc-viewport::-webkit-scrollbar {
    display: none;
  }

  .svc-track {
    align-items: stretch;
    /* put the first card back on the page gutter inside the bled-out viewport,
       so it lines up with the heading and the button below */
    padding-inline-start: var(--svc-gutter);
  }

  /* Matching gutter after the last card, so scrolling to the end leaves it level
     with the page instead of jammed against the screen. This is a spacer rather
     than padding-inline-end on the track: browsers drop a flex container's
     trailing padding once its children overflow, which is why the right side
     went missing while the left held. */
  .svc-track::after {
    content: "";
    flex: 0 0 var(--svc-gutter);
  }

  /* one card up front, the next cut off at the edge, the rest a swipe away */
  .svc-card {
    flex: 0 0 var(--svc-mobile-card-w);
    scroll-snap-align: start;
  }

  /* the leading card brightens, but nothing grows — growing would break the
     two-up rhythm and fight the scroll position */
  .svc-card.is-active {
    flex-grow: 0;
  }

  .svc-card.is-active .svc-media {
    height: calc(var(--svc-card-h) - 86px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-link,
  .svc-media img,
  .svc-cta,
  .svc-dot {
    transition: none !important;
  }
}