.vc-slideshow {
  background: var(--vc-paper-2);
}

.vc-slideshow--dark {
  background: var(--vc-navy-x);
}

.vc-slideshow--dark .vc-section__head .eyebrow {
  color: var(--vc-gold);
}

.vc-slideshow--dark .vc-section__head h2 {
  color: var(--vc-on-dark);
}

.vc-slideshow--dark .vc-section__head .lead {
  color: var(--vc-on-dark-muted);
}

.vc-slideshow__viewport {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  /* Side gutters reserved for the arrows (below) so they never sit on top
     of a card — the cards are slightly narrower as a result, on purpose. */
  padding-inline: clamp(40px, 6vw, 64px);
  overflow: hidden;
  /* Height is set inline by JS to match the active page exactly (see
     assets/js/slideshow.js) — pages don't all have the same number of
     rows once the grid drops to 2 or 1 column (last page can be shorter
     than a full group of 3), so a fixed/auto height here would either
     clip a taller page or leave dead space under a shorter one. */
  transition: height 0.6s var(--vc-ease-brand);
}

.vc-slideshow__track {
  display: flex;
  align-items: flex-start;
  /* Same gap as the cards inside a page (below): without it, the last card
     of a page and the first card of the next sit flush against each other
     during the slide transition, when both pages are briefly visible at
     once. */
  gap: clamp(16px, 2vw, 24px);
  transition: transform 0.6s var(--vc-ease-brand);
}

.vc-slideshow__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

.vc-slideshow__slide {
  display: block;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--vc-line);
  margin: 0;
  border-radius: var(--vc-radius-md);
  background: var(--vc-paper);
  color: var(--vc-ink);
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  /* box-shadow: 0 16px 44px rgba(10, 14, 46, 0.08); */
  transition: transform 280ms var(--vc-ease-brand), box-shadow 280ms var(--vc-ease-brand), border-color 280ms ease;
}

.vc-slideshow__slide:hover {
  transform: translateY(-5px);
  border-color: rgba(31, 42, 131, 0.28);
}

.vc-slideshow__slide:focus-visible {
  outline: 3px solid var(--vc-cyan);
  outline-offset: 3px;
}

.vc-slideshow--dark .vc-slideshow__slide {
  border-color: rgba(126, 232, 240, 0.18);
  background: var(--vc-navy-d);
  color: var(--vc-on-dark);
}

.vc-slideshow__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vc-media-bg, var(--vc-navy-x));
}

.vc-slideshow__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--vc-media-fit, cover);
  object-position: var(--vc-media-position, center center);
  transition: transform 700ms var(--vc-ease-brand);
}

.vc-slideshow__slide:hover .vc-slideshow__media img {
  transform: scale(1.035);
}

.vc-slideshow__caption {
  display: grid;
  gap: 4px;
  padding: 16px 18px 20px;
  text-align: left;
}

.vc-slideshow__caption strong {
  font-family: var(--vc-font-display);
  font-size: 1.02rem;
}

.vc-slideshow__caption span {
  color: var(--vc-muted);
  font-size: 0.9rem;
}

.vc-slideshow--dark .vc-slideshow__caption span {
  color: var(--vc-on-dark-muted);
}

/* Arrows sit in the side gutters reserved on .vc-slideshow__viewport
   (padding-inline above) — always clear of the cards, at each end of the
   slideshow, which reads more intuitively than next to the dots. */
.vc-slideshow__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--vc-line);
  border-radius: 50%;
  background: var(--vc-paper);
  color: var(--vc-navy);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(10, 14, 46, 0.1);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.vc-slideshow__arrow--prev {
  left: 0;
}

.vc-slideshow__arrow--next {
  right: 0;
}

.vc-slideshow__arrow svg {
  width: 18px;
  height: 18px;
}

.vc-slideshow__arrow:hover {
  background: var(--vc-cyan);
  border-color: var(--vc-cyan);
  color: var(--vc-navy-x);
}

.vc-slideshow__arrow:focus-visible {
  outline: 3px solid var(--vc-cyan);
  outline-offset: 3px;
}

.vc-slideshow--dark .vc-slideshow__arrow {
  background: var(--vc-navy-d);
  border-color: rgba(126, 232, 240, 0.18);
  color: var(--vc-on-dark);
}

.vc-slideshow--dark .vc-slideshow__arrow:hover {
  background: var(--vc-cyan);
  border-color: var(--vc-cyan);
  color: var(--vc-navy-x);
}

.vc-slideshow__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.vc-slideshow__dot {
  appearance: none;
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vc-line);
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
}

.vc-slideshow--dark .vc-slideshow__dot {
  background: rgba(247, 249, 252, 0.32);
}

.vc-slideshow__dot.is-active {
  background: var(--vc-cyan);
}

@media (max-width: 980px) {
  .vc-slideshow__page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .vc-slideshow__page {
    grid-template-columns: 1fr;
  }
}


/* Lightbox — lighter version of .vc-panneaux-led-modal (no spec sheet, one CTA). */

.vc-slideshow-modal {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  max-height: min(680px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--vc-radius-lg);
  background: var(--vc-paper);
  color: var(--vc-ink);
  box-shadow: 0 32px 100px rgba(3, 6, 24, 0.42);
}

.vc-slideshow-modal::backdrop {
  background: rgba(5, 8, 31, 0.78);
  backdrop-filter: blur(8px);
}

.vc-slideshow-modal:not([open]) {
  display: none;
}

.vc-slideshow-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  /* Same value as .vc-slideshow-modal's max-height — the panel must never be
     taller than the dialog itself, or the excess gets clipped mid-image by
     the dialog's overflow:hidden. A definite height also makes the media
     column's height:100% (and the image's max-height:100%) resolve
     correctly, instead of drifting from an independent viewport calc. */
  height: min(680px, calc(100dvh - 32px));
}

.vc-slideshow-modal__media {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(16px, 3vw, 32px);
  background: var(--vc-navy-x);
}

.vc-slideshow-modal__media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--vc-radius-sm);
}

.vc-slideshow-modal__body {
  align-self: center;
  padding: clamp(28px, 4vw, 48px);
}

.vc-slideshow-modal__body h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.vc-slideshow-modal__body h3:empty {
  display: none;
}

.vc-slideshow-modal__body p {
  margin-top: 14px;
  color: var(--vc-muted);
}

.vc-slideshow-modal__body p:empty {
  display: none;
}

.vc-slideshow-modal__body .vc-btn {
  margin-top: 24px;
}

.vc-slideshow-modal__body .vc-btn[hidden] {
  display: none;
}

.vc-slideshow-modal__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(247, 249, 252, 0.28);
  border-radius: 50%;
  background: rgba(10, 14, 46, 0.62);
  color: var(--vc-on-dark);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s, border-color 0.3s;
}

.vc-slideshow-modal__arrow svg {
  width: 20px;
  height: 20px;
}

.vc-slideshow-modal__arrow:hover {
  background: rgba(10, 14, 46, 0.82);
  border-color: var(--vc-cyan);
}

.vc-slideshow-modal__arrow:focus-visible {
  outline: 3px solid var(--vc-cyan);
  outline-offset: 3px;
}

.vc-slideshow-modal__arrow--prev { left: 12px; }
.vc-slideshow-modal__arrow--next { right: 12px; }

.vc-slideshow-modal__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--vc-radius-pill);
  background: rgba(10, 14, 46, 0.82);
  color: var(--vc-on-dark);
  font: 400 2rem/1 var(--vc-font-body);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.vc-slideshow-modal__close:focus-visible {
  outline: 3px solid var(--vc-cyan);
  outline-offset: 3px;
}

body.vc-slideshow-modal-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .vc-slideshow-modal {
    overflow-y: auto;
  }

  .vc-slideshow-modal__panel {
    grid-template-columns: 1fr;
    height: auto;
  }

  .vc-slideshow-modal__media {
    height: auto;
    min-height: min(52vh, 480px);
  }

  .vc-slideshow-modal__media img {
    max-height: min(46vh, 420px);
  }
}

@media (max-width: 560px) {
  .vc-slideshow-modal__arrow {
    width: 40px;
    height: 40px;
  }
  .vc-slideshow-modal__arrow--prev { left: 10px; }
  .vc-slideshow-modal__arrow--next { right: 10px; }

  .vc-slideshow-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: var(--vc-radius-md);
  }

  .vc-slideshow-modal__media {
    min-height: 44vh;
    padding: 12px;
  }

  .vc-slideshow-modal__body {
    padding: 26px 20px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vc-slideshow__viewport,
  .vc-slideshow__track,
  .vc-slideshow__slide,
  .vc-slideshow__arrow,
  .vc-slideshow-modal__arrow {
    transition: none;
  }
}