/* CQ gallery slideshow runtime layout */
.hero-media,
.job-showcase,
.featured-card.image-slot {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.hero-media > .cq-gallery-slide,
.job-showcase > .cq-job-slide,
.image-slot > .cq-gallery-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.image-slot > .cq-gallery-image {
  z-index: 0 !important;
}

.hero-media > .cq-gallery-slide,
.job-showcase > .cq-job-slide {
  z-index: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .65s ease, visibility 0s linear .65s !important;
}

.hero-media > .cq-gallery-slide.is-active,
.job-showcase > .cq-job-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .65s ease !important;
}

.image-slot.is-live > .media-fallback {
  display: none !important;
}

.hero-media::before,
.job-showcase::before,
.featured-card.image-slot::before {
  z-index: 2 !important;
}

.hero-media .hero-media-copy,
.job-showcase .job-showcase-copy,
.featured-card.image-slot figcaption {
  z-index: 4 !important;
}

.job-showcase {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 100% !important;
  min-height: clamp(390px, 48vw, 620px) !important;
  height: clamp(390px, 48vw, 620px) !important;
  margin: 0 auto !important;
}

.gallery-controls {
  position: absolute !important;
  z-index: 8 !important;
  top: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  max-width: calc(100% - 32px) !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(5,6,8,.66) !important;
  backdrop-filter: blur(8px) !important;
}

.gallery-controls > button,
.gallery-dots > button {
  appearance: none !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.gallery-controls > button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 31px !important;
  height: 31px !important;
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.gallery-controls > button:hover,
.gallery-controls > button:focus-visible {
  color: #1a0b02 !important;
  background: #ffad4a !important;
  outline: 0 !important;
}

.gallery-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.gallery-dots > button {
  flex: 0 0 auto !important;
  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.42) !important;
  transition: width .2s ease, background .2s ease !important;
}

.gallery-dots > button.is-active {
  width: 19px !important;
  background: #ffad4a !important;
}

@media (max-width: 720px) {
  .job-showcase {
    width: calc(100% - 32px) !important;
    min-height: 360px !important;
    height: 360px !important;
  }

  .gallery-controls {
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    gap: 6px !important;
    max-width: calc(100% - 24px) !important;
    padding: 6px !important;
  }

  .gallery-controls > button {
    width: 29px !important;
    height: 29px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media > .cq-gallery-slide,
  .job-showcase > .cq-job-slide {
    transition: none !important;
  }
}