/* BICB Swiper — clip horizontal overscroll; keep vertical page scroll */
.wp-block-bicb-carousel,
.wp-block-bicb-carousel .bicbCarousel,
.wp-block-bicb-carousel .swiper,
.bicbCarousel.swiper {
  max-width: 100%;
  overflow-x: hidden;
  /* hidden makes overflow-y auto; that transient scrollbar narrows the host while Swiper measures it. */
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
.wp-block-bicb-carousel .swiper-wrapper,
.bicbCarousel .swiper-wrapper {
  overscroll-behavior-x: none;
}
/* Effects that open overflow and show empty sides */
.wp-block-bicb-carousel .swiper-cube,
.wp-block-bicb-carousel .swiper-flip,
.wp-block-bicb-carousel .swiper-cards {
  overflow: hidden !important;
}

/*
 * Pre-Swiper reserve. Hold until .swiper exists (not until <img>): SSR first-row
 * images must not drop the height, or the box collapses while they decode.
 * Without an explicit height the host follows the SSR row, which Swiper sizes the same way.
 */
.wp-block-bicb-carousel.iwz-bicb-reserve:not(:has(.swiper)) {
  box-sizing: border-box;
  width: 100%;
  --iwz-bicb-cols: var(--iwz-bicb-columns-desktop, 3);
  --iwz-bicb-explicit-height: var(--iwz-bicb-height-desktop);
  height: var(--iwz-bicb-explicit-height, auto);
}

@media only screen and (max-width: 1024px) {
  .wp-block-bicb-carousel.iwz-bicb-reserve:not(:has(.swiper)) {
    --iwz-bicb-explicit-height: var(--iwz-bicb-height-tablet, var(--iwz-bicb-height-desktop));
  }
}

@media only screen and (max-width: 640px) {
  .wp-block-bicb-carousel.iwz-bicb-reserve:not(:has(.swiper)) {
    --iwz-bicb-explicit-height: var(--iwz-bicb-height-mobile, var(--iwz-bicb-height-tablet, var(--iwz-bicb-height-desktop)));
  }
}

/* Columns follow Swiper's breakpoints (768 / 576), not the plugin's CSS ones. */
@media (max-width: 767.98px) {
  .wp-block-bicb-carousel.iwz-bicb-reserve:not(:has(.swiper)) {
    --iwz-bicb-cols: var(--iwz-bicb-columns-tablet, 2);
  }
}

@media (max-width: 575.98px) {
  .wp-block-bicb-carousel.iwz-bicb-reserve:not(:has(.swiper)) {
    --iwz-bicb-cols: var(--iwz-bicb-columns-mobile, 1);
  }
}

/*
 * First-row SSR: same box as the reserved host; React replaces on mount.
 * Additional CSS paints a frosted host ::before at z-index 0 and lifts only
 * .swiper above it, so the SSR row has to sit on the same layer.
 */
.wp-block-bicb-carousel .iwz-bicb-ssr {
  box-sizing: border-box;
  display: flex;
  gap: var(--iwz-bicb-gap, 30px);
  height: 100%;
  overflow: hidden;
  padding: var(--iwz-bicb-padding-y, 20px) var(--iwz-bicb-padding-x, 0);
  position: relative;
  width: 100%;
  z-index: 1;
}
.wp-block-bicb-carousel .iwz-bicb-ssr__slide {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 calc(
    (
      100%
      - (var(--iwz-bicb-cols, 3) - 1) * var(--iwz-bicb-gap, 30px)
    ) / var(--iwz-bicb-cols, 3)
  );
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
/* Swiper divides the host's whole-pixel clientWidth; match it so the swap does not nudge slides. */
@supports (width: round(1px, 1px)) {
  .wp-block-bicb-carousel .iwz-bicb-ssr__slide {
    flex-basis: calc(
      (
        round(100%, 1px)
        - (var(--iwz-bicb-cols, 3) - 1) * var(--iwz-bicb-gap, 30px)
      ) / var(--iwz-bicb-cols, 3)
    );
  }
}
/*
 * Each image keeps its own ratio from its width/height attributes, as Swiper's do, and
 * stretches to an explicit host height. Slide 1's ratio covers an image without them.
 */
.wp-block-bicb-carousel .iwz-bicb-ssr__slide img {
  aspect-ratio: auto 1 / var(--iwz-bicb-image-ratio);
  display: block;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  object-fit: cover;
  width: 100%;
}
/*
 * The plugin's inline-flex link and inline img sit on a text baseline. Without a set
 * height its descender space makes Swiper stretch every slide taller than the SSR row.
 */
.wp-block-bicb-carousel .bicbCarousel .carouselItem {
  vertical-align: top;
}
.wp-block-bicb-carousel .carouselItem .image img {
  display: block;
}
/*
 * Swiper's next arrow before mount. swiper-icons loads on first use, so drawing it here
 * keeps the mounted arrow from painting the fallback word "next" and shrinking to the glyph.
 */
.wp-block-bicb-carousel[style*="--iwz-bicb-nav-size"]:not(:has(.swiper))::after {
  align-items: center;
  color: var(--iwz-bicb-nav-color);
  content: "next";
  display: flex;
  font: 700 var(--iwz-bicb-nav-size) / 1 swiper-icons;
  height: var(--swiper-navigation-size, 44px);
  justify-content: center;
  letter-spacing: 0;
  margin-top: calc(0px - var(--swiper-navigation-size, 44px) / 2);
  pointer-events: none;
  position: absolute;
  right: var(--swiper-navigation-sides-offset, 10px);
  text-transform: none;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size, 44px) / 44 * 27);
  z-index: 2;
}
/* Swiper adds this up to 10 slides (slide/fade only); its per-slide layers re-render captions unlike the SSR row. */
.wp-block-bicb-carousel .swiper-backface-hidden .swiper-slide {
  backface-visibility: visible;
  transform: none;
}
/* view.js's caption rules, from the same attributes (BlockDelivery::bicbPaintStyle). */
.wp-block-bicb-carousel .iwz-bicb-ssr__caption {
  display: flex;
  flex: 0 0 auto;
}
.wp-block-bicb-carousel .iwz-bicb-ssr__caption p {
  background: var(--iwz-bicb-cap-bg, transparent);
  box-sizing: border-box;
  color: var(--iwz-bicb-cap-color, inherit);
  font-family: var(--iwz-bicb-cap-family, inherit);
  font-size: var(--iwz-bicb-cap-size-desktop, 15px);
  font-style: var(--iwz-bicb-cap-style, normal);
  font-weight: var(--iwz-bicb-cap-weight, 400);
  margin: 0;
  padding: var(--iwz-bicb-cap-padding, 5px 8px);
  text-align: var(--iwz-bicb-cap-align, left);
  text-transform: var(--iwz-bicb-cap-transform, none);
  width: 100%;
}
/* view.css's .caption.onImage box, with the overlay and alignment view.js adds per block. */
.wp-block-bicb-carousel .iwz-bicb-ssr__caption--on-image {
  align-items: var(--iwz-bicb-cap-valign, flex-end);
  background: var(--iwz-bicb-cap-overlay, none);
  box-sizing: border-box;
  inset: 0;
  justify-content: var(--iwz-bicb-cap-justify, flex-start);
  padding: 15px;
  position: absolute;
}
.wp-block-bicb-carousel .iwz-bicb-ssr__caption--on-image p {
  width: auto;
}

@media only screen and (max-width: 1024px) {
  .wp-block-bicb-carousel .iwz-bicb-ssr__caption p {
    font-size: var(--iwz-bicb-cap-size-tablet, 15px);
  }
}

@media only screen and (max-width: 640px) {
  .wp-block-bicb-carousel .iwz-bicb-ssr__caption p {
    font-size: var(--iwz-bicb-cap-size-mobile, 15px);
  }
}