/* ===== Carouselify — Gallery to Carousel (fixed arrows, hidden scrollbar) ===== */

/* TRACK (the scroller) — the only place we set display:flex */
.wp-block-gallery.is-carousel,
.is-carousel .wp-block-gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 1rem !important;
  padding: 0.5rem 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Hide scrollbar (Firefox + WebKit) */
.wp-block-gallery.is-carousel,
.is-carousel .wp-block-gallery { scrollbar-width: none; }
.wp-block-gallery.is-carousel::-webkit-scrollbar,
.is-carousel .wp-block-gallery::-webkit-scrollbar { display: none; }

/* Neutralize WP columns/grid widths */
.wp-block-gallery.is-carousel[class*="columns-"] > figure,
.is-carousel .wp-block-gallery[class*="columns-"] > figure {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

/* SLIDES (direct children figures/items) */
.wp-block-gallery.is-carousel > figure.wp-block-image,
.is-carousel .wp-block-gallery > figure.wp-block-image,
.wp-block-gallery.is-carousel > .gallery-item,
.is-carousel .wp-block-gallery > .gallery-item,
.wp-block-gallery.is-carousel > figure,
.is-carousel .wp-block-gallery > figure {
  flex: 0 0 auto !important;
  width: clamp(240px, 80vw, 520px) !important;
  margin: 0 !important;
  scroll-snap-align: center !important; /* use 'start' for left-align snap */
}

/* Images fill slides */
.wp-block-gallery.is-carousel img,
.is-carousel .wp-block-gallery img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Remove stray figure margins inside gallery */
.wp-block-gallery.is-carousel figure,
.is-carousel .wp-block-gallery figure {
  margin: 0 !important;
}

/* --- Overlay wrapper created by JS so arrows don’t scroll with track --- */
.cgl-wrap { position: relative !important; }

/* Arrow buttons */
.cgl-wrap .cgl-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  padding: .4rem .6rem !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.85) !important;
  color: #000 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  user-select: none !important;
}
.cgl-wrap .cgl-prev { left: .25rem !important; }
.cgl-wrap .cgl-next { right: .25rem !important; }
.cgl-wrap .cgl-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

/* Subtle hover treatment (desktop) */
@media (hover: hover) {
  .cgl-wrap .cgl-btn { opacity: .9; transition: opacity .2s ease; }
  .cgl-wrap:hover .cgl-btn { opacity: 1; }
}

/* Mobile: wider slides feel better */
@media (max-width: 600px) {
  .wp-block-gallery.is-carousel > figure.wp-block-image,
  .is-carousel .wp-block-gallery > figure.wp-block-image,
  .wp-block-gallery.is-carousel > figure,
  .is-carousel .wp-block-gallery > figure {
    width: 85vw !important;
  }
}