/* Carousel Blocks - Dynamically loaded */

/* Shared Container Fixes */
.nested-container, .grid-child { min-width: 0; max-width: 100%; }
.nested-container .swiper, .grid-child .swiper { width: 100% !important; max-width: 100%; overflow: hidden; }

/* Loop Carousel */
.loop-carousel-block,
.nested-container:has(.swiper),
.grid-child:has(.swiper) { width: 100%; min-width: 0; max-width: 100%; }

.loop-carousel-empty {
  width: 100%;
  height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9fafb;
  border-radius: 0.5rem;
}

.loop-carousel-content { width: 100%; height: 100%; }
.loop-carousel-slide { height: auto !important; display: flex; flex-direction: column; }

/* Media Carousel */
.media-carousel-block { width: 100%; min-width: 0; max-width: 100%; }

.media-carousel-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
}

.media-carousel-play-btn-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

.group:hover .media-carousel-play-btn-overlay { background-color: rgba(0, 0, 0, 0.4); }

.media-carousel-play-btn {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 9999px;
  padding: 1.5rem;
  transition: transform 0.2s;
}

.group:hover .media-carousel-play-btn { transform: scale(1.1); }
.media-carousel-play-icon { width: 4rem; height: 4rem; color: white; }

.media-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 1rem;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.media-carousel-caption-text { color: white; font-size: 0.875rem; font-weight: 500; }

/* Archive Carousel */
.archive-grid { --archive-gap: 24px; }
.archive-grid .grid { gap: var(--archive-gap); }
.archive-carousel { position: relative; width: 100%; min-width: 0; }
.archive-carousel > .container { position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.archive-swiper-wrapper { overflow: hidden; }
.archive-carousel .swiper { overflow: hidden; }
.archive-carousel .swiper-wrapper { align-items: stretch; margin-bottom: 16px; }
.archive-carousel .swiper-slide { height: auto; display: flex; flex-direction: column; }
.archive-carousel .swiper-slide > article { flex: 1; display: flex; flex-direction: column; }

/* Archive Navigation Buttons */
.archive-nav-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.archive-nav-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.archive-nav-btn:disabled, .archive-nav-btn.swiper-button-disabled { opacity: 0; pointer-events: none; }
.archive-nav-prev { left: -20px; }
.archive-nav-next { right: -20px; }

@media (min-width: 640px) and (max-width: 1023px) {
  .archive-nav-prev { left: -16px; }
  .archive-nav-next { right: -16px; }
}

@media (max-width: 639px) {
  .archive-nav-btn { width: 40px; height: 40px; top: 25%; }
  .archive-nav-prev { left: 12px; }
  .archive-nav-next { right: 12px; }
}

/* Archive Pagination */
.archive-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }

.archive-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  opacity: 1;
  border-radius: 9999px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.archive-pagination .swiper-pagination-bullet:hover { background: #94a3b8; }
.archive-pagination .swiper-pagination-bullet-active { background: hsl(var(--primary)); width: 24px; }

.archive-grid-container { width: 100%; }
.archive-empty { text-align: center; padding: 3rem 0; color: #6b7280; }
.archive-view-all { display: flex; justify-content: center; margin-top: 2.5rem; }
.archive-load-more { display: flex; justify-content: center; margin-top: 2.5rem; }
.archive-load-more button:disabled { opacity: 0.7; cursor: wait; }

/* =============================================================================
   Carousel Navigation Overrides (moved from overrides.css)
   ============================================================================= */

.loop-carousel-block .swiper-button-prev,
.loop-carousel-block .swiper-button-next,
.media-carousel-block .swiper-button-prev,
.media-carousel-block .swiper-button-next {
  transform: translateY(0);
  z-index: 10;
}

.loop-carousel-block .swiper-button-prev::before,
.loop-carousel-block .swiper-button-next::before,
.media-carousel-block .swiper-button-prev::before,
.media-carousel-block .swiper-button-next::before {
  content: '';
  position: absolute;
  inset: -15px;
}

.loop-carousel-block .swiper-button-prev::after,
.loop-carousel-block .swiper-button-next::after,
.media-carousel-block .swiper-button-prev::after,
.media-carousel-block .swiper-button-next::after {
  font-weight: bold;
}

.loop-carousel-block .swiper-button-prev,
.loop-carousel-block .swiper-button-next {
  width: 60px !important;
  height: 60px !important;
  margin-top: -30px !important;
}

.loop-carousel-block .swiper-button-prev::after,
.loop-carousel-block .swiper-button-next::after {
  font-size: 30px !important;
  color: #000;
}

.media-carousel-block .swiper-button-prev,
.media-carousel-block .swiper-button-next {
  width: 44px !important;
  height: 56px !important;
  margin-top: -28px !important;
}

.media-carousel-block .swiper-button-prev::after,
.media-carousel-block .swiper-button-next::after {
  font-size: 32px !important;
  color: #fff;
}