/**
 * Card marquee + Smash Balloon Instagram Feed (#sb_instagram)
 *
 * 0) [instagram-feed] uses .card-marquee-scroll (see social_feed.php) — native
 *    horizontal scroll; Marquee3k is not used (its transform blocks swipe/drag).
 * 1) Plugin sets #sbi_images { width:100% } + flex/grid — tiles were flex-shrinking
 *    to fit the viewport (tiny dots on mobile). Use inline-flex + flex-shrink:0.
 * 2) imgLiquid padding box — fill tile with object-fit (below).
 * 3) 4:5 portrait tiles; wider breakpoints on small screens so posts stay readable.
 */

/* ── Horizontal scroll strip (Instagram shortcode only) ── */
.card-marquee .card-marquee-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  padding-bottom: 12px;
  outline: none;
  scroll-snap-type: x proximity;
}

.card-marquee .card-marquee-scroll:focus-visible {
  outline: 2px solid rgba(4, 19, 45, 0.35);
  outline-offset: 4px;
}

.card-marquee .card-marquee-scroll::-webkit-scrollbar {
  height: 10px;
}

.card-marquee .card-marquee-scroll::-webkit-scrollbar-thumb {
  background: rgba(4, 19, 45, 0.28);
  border-radius: 999px;
}

.card-marquee .card-marquee-scroll::-webkit-scrollbar-track {
  background: rgba(4, 19, 45, 0.06);
  border-radius: 999px;
}

.card-marquee .card-marquee-scroll__strip {
  display: inline-block;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  vertical-align: top;
}

.card-marquee .card-marquee-scroll__strip #sb_instagram {
  width: auto !important;
  max-width: none !important;
  display: inline-block !important;
  vertical-align: top;
}

.card-marquee .card-marquee-scroll #sb_instagram #sbi_images .sbi_item {
  scroll-snap-align: start;
}

.card-marquee #sb_instagram #sbi_images {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  padding: 0 !important;
}

.card-marquee #sb_instagram #sbi_images .sbi_item {
  box-sizing: border-box;
  height: auto !important;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 318px;
  margin-right: 24px !important;
}

@media (max-width: 1200px) {
  .card-marquee #sb_instagram #sbi_images .sbi_item {
    width: 280px;
  }
}

@media (max-width: 991.98px) {
  .card-marquee #sb_instagram #sbi_images .sbi_item {
    width: 260px;
  }
}

@media (max-width: 767.98px) {
  .card-marquee #sb_instagram #sbi_images .sbi_item {
    width: 280px;
  }
}

@media (max-width: 479.98px) {
  .card-marquee #sb_instagram #sbi_images .sbi_item {
    width: min(90vw, 320px);
  }
}

.card-marquee #sb_instagram .sbi_photo_wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.card-marquee #sb_instagram .sbi_photo,
.card-marquee #sb_instagram .sbi_photo.sbi_imgLiquid_ready {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.card-marquee #sb_instagram .sbi_photo img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
}

.card-marquee #sb_instagram .sbi_photo.sbi_imgLiquid_bgSize img {
  display: none !important;
}

.card-marquee #sb_instagram .sbi_photo.sbi_imgLiquid_bgSize {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.card-marquee #sb_instagram .sbi_photo .svg-inline--fa,
.card-marquee #sb_instagram .sbi_photo .fa,
.card-marquee #sb_instagram .sbi_photo [class*="fa-"] {
  position: relative;
  z-index: 2;
}