/*
 * Public carousel styling follows the reference carousel supplied by UiO/UB.
 * Keep this deliberately close to that page so embedded carousels look familiar
 * inside Vortex rather than like a separate application.
 */
html:has(body.uio-carousel-page) { background:#fff; }
body.uio-carousel-page { margin:0 !important; padding:0 !important; background:#fff !important; color:#202020; }
.uio-carousel-page *, .uio-carousel-page *::before, .uio-carousel-page *::after { box-sizing:border-box; }
.carousel-shell { display:block; width:100%; margin:0; padding:0; overflow-wrap:anywhere; }
.carousel-shell search-carousel { display:block; margin:0 auto; padding:0; }

/* Reference layout supplied with the original carousel. */
.carousel-shell .gallery-container { margin:0; padding:0; }
/* Keep the vendor component's own titleText/titleLink as the Oria heading.
 * It is intentionally rendered by Showcase only when the carousel itself renders. */
.carousel-shell .gallery-container h2 {
  text-align:center;
  margin-top:0;
  margin-bottom:10px;
  transform:scale(.7);
  transform-origin:center top;
}
.carousel-shell .gallery-container h2 a {
  color:#000 !important;
  text-decoration:none !important;
  text-underline-offset:3px;
}
.carousel-shell .gallery-container h2 a:hover,
.carousel-shell .gallery-container h2 a:focus-visible {
  color:#000 !important;
  text-decoration:underline !important;
}
.carousel-shell .swiper {
  margin-top:0 !important;
  transform:scaleY(.8) scaleX(.9) !important;
  transform-origin:center top;
}
.carousel-shell .swiper-pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:28px;
}
.carousel-shell .swiper-pagination-bullets { bottom:30px !important; }
.carousel-shell .swiper-pagination-bullet {
  transform:scale(1.5);
  background:#c9c9c9;
  opacity:1;
}
.carousel-shell .swiper-pagination-bullet-active { background:#000 !important; }
.carousel-shell .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  --swiper-pagination-bullet-horizontal-gap:var(--uio-pagination-gap, 20px);
  margin-left:var(--uio-pagination-gap, 20px) !important;
  margin-right:var(--uio-pagination-gap, 20px) !important;
}

/* Match the supplied arrow behaviour: grey normally, black on interaction. */
.carousel-shell :is(.swiper-button-prev,.swiper-button-next),
.carousel-shell :is(.swiper-button-prev,.swiper-button-next):is(:focus,:active) {
  color:#888 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}
@media (hover:hover) {
  .carousel-shell :is(.swiper-button-prev,.swiper-button-next):hover { color:#000 !important; }
}
.carousel-shell :is(.swiper-button-prev,.swiper-button-next):active,
.carousel-shell :is(.swiper-button-prev,.swiper-button-next):focus { color:#000 !important; }
.carousel-shell :is(.swiper-button-prev,.swiper-button-next)::after {
  color:inherit !important;
  background:transparent !important;
}
.carousel-shell :is(.swiper-button-prev,.swiper-button-next):focus-visible {
  outline:2px solid #000 !important;
  outline-offset:4px;
}
.carousel-shell .swiper-button-disabled { opacity:.25; cursor:default; }
.carousel-shell .swiper-button-lock { display:none !important; }

/* Status is available to assistive technology but should not consume carousel space. */
.carousel-shell .carousel-status.is-error,
.carousel-shell .carousel-status.is-empty {
  position:static !important;
  width:auto !important;
  height:auto !important;
  padding:12px !important;
  margin:0 auto 12px !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  max-width:700px;
  text-align:left;
}
.carousel-shell .carousel-status.is-error { border-left:4px solid #b00020; background:#fff4f4; color:#76172b; }
.carousel-shell .carousel-status.is-empty { border-left:4px solid #777; background:#f5f5f5; color:#202020; }
.carousel-shell .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:480px) {
  .carousel-shell .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    --swiper-pagination-bullet-horizontal-gap:var(--uio-pagination-gap, 10px);
    margin-left:var(--uio-pagination-gap, 10px) !important;
    margin-right:var(--uio-pagination-gap, 10px) !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .carousel-shell *, .carousel-shell *::before, .carousel-shell *::after { scroll-behavior:auto !important; animation:none !important; }
}

/* Keep navigation inside very narrow iframes; Vortex controls the iframe width. */
@media (max-width:480px) {
  .carousel-shell .gallery-container .swiper-button-prev { margin-left:0 !important; }
  .carousel-shell .gallery-container .swiper-button-next { margin-right:0 !important; }
}