/* Custom styles for Image block Swiper */
.swiper-pagination-bullet-active {
  background: #ffffff !important;
}

/* Make the image container fill and ensure images cover */
.image-block {
  width: 100% !important;
  display: block !important;
}

.image-block .swiper {
  width: 100% !important;
  /* Full viewport minus top padding (pt-22) and bottom padding (pb-6).
     Uses CSS variables with sensible fallbacks so you can override in theme if needed. */
  height: calc(100vh - var(--pt-22, 5.5rem) - var(--pb-6, 1.5rem)) !important;
}

.image-block .swiper-wrapper,
.image-block .swiper-slide {
  width: 100% !important;
  height: calc(100vh - var(--pt-22, 5.5rem) - var(--pb-6, 1.5rem)) !important; /* default: viewport minus spacing */
}

.image-block img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Video: full width, 85vh height and cover */
.image-block .image-video {
  width: 100% !important;
  height: calc(100vh - var(--pt-22, 5.5rem) - var(--pb-6, 1.5rem)) !important;
  object-fit: cover !important;
  display: block !important;
}

/* Two-up items: 60vh on mobile, 90vh on md+ */
.image-two-up__item {
  height: 60vh;
}

@media (min-width: 768px) {
  .image-two-up__item {
    
  }
}

/* Two-up rotation styles */
.image-two-up__slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.image-two-up[data-rotate="true"] .image-two-up__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 1;
}

.image-two-up[data-rotate="true"] .image-two-up__item.hidden {
  opacity: 0;
  pointer-events: none;
}

.image-two-up[data-rotate="true"] .image-two-up__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}