/* IV Slider — standalone styles, scoped to the module. */
.ivslider {
  --iv-gap: 8px;
  --iv-visible: 4;
  position: relative;
  width: 100%;
  outline-offset: 4px;
  container-type: inline-size;
}

.ivslider *,
.ivslider *::before,
.ivslider *::after { box-sizing: border-box; }

.ivslider__stage { position: relative; }
.ivslider__viewport { overflow: hidden; width: 100%; }
.ivslider__track { display: flex; width: 100%; transition: transform 600ms ease; }
.ivslider__slide {
  display: none;
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.ivslider__slide:first-child,
.ivslider.is-ready .ivslider__slide { display: block; }
.ivslider__slide::before { display: none !important; }
.ivslider__slide img { display: block; width: 100%; height: auto; aspect-ratio: auto 16 / 9; }
.ivslider__slide a { display: block; }
.ivslider__slide figcaption a { display: inline; }

/* Fade only affects the full-size slider, never the multi-item carousel. */
.ivslider--fade.is-ready .ivslider__track { display: block; position: relative; transform: none !important; }
.ivslider--fade.is-ready .ivslider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms ease;
}
.ivslider--fade.is-ready .ivslider__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.ivslider__caption {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  padding: clamp(10px, 2.5%, 24px);
  color: #fff;
  background: rgb(0 0 0 / 48%);
  overflow-wrap: anywhere;
}
.ivslider__caption h3,
.ivslider__caption p { margin: 0; color: inherit; }
.ivslider__caption h3 { font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1.3; }
.ivslider__caption p { font-size: clamp(.875rem, 1.5vw, 1rem); margin-top: .3em; }

/* The supplied 104x52 sprite has both 52x52 directional arrow images. */
.ivslider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  transform: translateY(-50%);
  background-color: #fff;
  background-image: url('../images/bg_direction_nav.png');
  background-repeat: no-repeat;
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}
.ivslider__arrow--prev { left: 0; background-position: 0 0; }
.ivslider__arrow--next { right: 0; background-position: -52px 0; }
.ivslider:hover .ivslider__arrow,
.ivslider:focus-within .ivslider__arrow { opacity: .88; }
.ivslider .ivslider__arrow:hover,
.ivslider .ivslider__arrow:focus-visible { opacity: 1; }
.ivslider .ivslider__arrow:disabled { opacity: .25; cursor: default; }
.ivslider__arrow:focus-visible,
.ivslider__thumb:focus-visible,
.ivslider__dot:focus-visible { outline: 3px solid #1877b9; outline-offset: 2px; }

.ivslider__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 12px 0 0;
}
.ivslider__dot {
  display: block;
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #555;
  border-radius: 50%;
  cursor: pointer;
}
.ivslider__dot.is-active { background: #333; }

.ivslider__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 4px;
}
.ivslider__thumb {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: .65;
  cursor: pointer;
}
.ivslider__thumb img { display: block; width: 100%; height: auto; aspect-ratio: auto 16 / 9; }
.ivslider__thumb.is-active,
.ivslider__thumb:hover { opacity: 1; }
.ivslider__thumb.is-active { outline: 2px solid #333; outline-offset: -2px; }
.ivslider--slidernav .ivslider__thumbs {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.ivslider--slidernav .ivslider__thumb {
  flex: 0 0 calc((100% - 3 * var(--iv-gap)) / 4);
  scroll-snap-align: start;
}

/* Multi-item carousel mode: native overflow scrolling, no jQuery. */
.ivslider--carousel .ivslider__viewport { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.ivslider--carousel .ivslider__viewport::-webkit-scrollbar { display: none; }
.ivslider--carousel .ivslider__track { gap: var(--iv-gap); transition: none; }
.ivslider--carousel .ivslider__slide {
  flex: 0 0 calc((100% - (var(--iv-visible) - 1) * var(--iv-gap)) / var(--iv-visible));
  scroll-snap-align: start;
}

@container (max-width: 700px) {
  .ivslider--slidernav .ivslider__thumb { flex-basis: calc((100% - var(--iv-gap)) / 2); }
}
@container (max-width: 500px) {
  .ivslider__arrow { opacity: .85; }
  .ivslider__caption { padding: 8px 10px; }
  .ivslider--thumbnav .ivslider__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ivslider__track,
  .ivslider__slide,
  .ivslider__arrow { transition: none !important; scroll-behavior: auto !important; }
}