/*
 * slideshow — converted from src/components/ui/Slideshow.module.css
 * Declarations are unchanged; only class selectors were renamed.
 */
.np-slideshow__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.elementor-widget-nanoprep-slideshow .np-slideshow__slide {
  /* Elementor's generic image rule sets `height: auto`, which wins over the
   * single-class `.np-fill` utility. On narrow screens that leaves the lower
   * part of the fixed-height slideshow empty. This widget-specific selector
   * keeps every slide fitted to the carousel frame. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.elementor-widget-nanoprep-slideshow .np-slideshow__slide.np-slideshow__active {
  opacity: 1;
}

.np-slideshow__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.np-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.np-slideshow__arrow:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.6);
}

.np-slideshow__arrow-prev {
  left: 20px;
}

.np-slideshow__arrow-next {
  right: 20px;
}

.np-slideshow__arrow-compact {
  width: 30px;
  height: 30px;
  font-size: 17px;
}

.np-slideshow__arrow-compact.np-slideshow__arrow-prev {
  left: 12px;
}

.np-slideshow__arrow-compact.np-slideshow__arrow-next {
  right: 12px;
}

.np-slideshow__dots {
  position: absolute;
  left: 40px;
  bottom: 26px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 80px);
}

.np-slideshow__dots-compact {
  left: 16px;
  bottom: 14px;
  gap: 6px;
  max-width: calc(100% - 32px);
}

.np-slideshow__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.np-slideshow__dots-compact .np-slideshow__dot {
  width: 7px;
  height: 7px;
}

.np-slideshow__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.np-slideshow__dot-active {
  background: var(--orange);
  transform: scale(1.25);
}

@media (max-width: 640px) {
  .np-slideshow__arrow:not(.np-slideshow__arrow-compact) {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .np-slideshow__dots {
    display: none;
  }
}

/*
 * The wrapper Elementor puts around the widget.
 *
 * Every slide is `position: absolute`, so the wrapper has no content to give it
 * a height and collapses to zero. The dots are positioned from its bottom edge,
 * which then sits at the *top* of the image block — they rendered above the
 * photograph, overlapping the text, and were not clickable because the box they
 * belonged to had no area.
 *
 * The retired theme never hit this: its markup put the slides directly inside
 * the sized, `position: relative` block, with no wrapper in between. Stretching
 * the wrapper to fill that block restores the same geometry.
 *
 * Not `position: absolute; inset: 0`, which would make the widget invisible
 * wherever an editor drops it into a container that sizes itself to its
 * contents. Filling a sized parent degrades to today's behaviour instead of to
 * a blank space.
 *
 * `height`, not `flex-grow`: Elementor sets `flex-grow` on every widget inside
 * a container through `.e-con > .elementor-widget`, which outranks a single
 * class — so a `flex-grow` here works only while the kit's generated CSS
 * happens to be missing, which is exactly the kind of fix that passes once and
 * fails after the next cache rebuild.
 */
.e-con > .elementor-widget-nanoprep-slideshow,
.elementor-widget-nanoprep-slideshow {
  position: relative;
  height: 100%;
  align-self: stretch;
}