/* BantuSocial v2.36.0 — trust stack / mobile cinema / reaction reliability */

/* =========================================================
   BANTUEXPLORE TRUST STACK
   Desktop: Connected grows, Contact stays compact, and the combined stack
   finishes on the same baseline as Ride There. Mobile remains natural stack.
   ========================================================= */
@media (min-width: 992px) {
  html body.bantusphere .bx-place-layout-v2 > main .bx-left-trust-grid,
  html body.bantusphere .bx-place-layout-v2 > main .bx-after-reviews-grid.bx-left-trust-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-content: stretch !important;
    align-items: stretch !important;
  }
  html body.bantusphere .bx-left-trust-grid > .bx-connected {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 14px !important;
  }
  html body.bantusphere .bx-left-trust-grid .bx-connected-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(92px, 1fr)) !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    min-height: 0 !important;
  }
  html body.bantusphere .bx-left-trust-grid .bx-connected-grid > * {
    min-height: 96px !important;
    height: 100% !important;
    padding: 12px 8px !important;
    border-radius: 14px !important;
    justify-content: center !important;
    gap: 9px !important;
  }
  html body.bantusphere .bx-left-trust-grid .bx-connected-grid i { font-size: 18px !important; }
  html body.bantusphere .bx-left-trust-grid .bx-connected-grid span { font-size: 9.5px !important; line-height: 1.2 !important; }

  html body.bantusphere .bx-left-trust-grid > .bx-contact-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    gap: 5px !important;
  }
  html body.bantusphere .bx-left-trust-grid .bx-contact-card .bx-card-eyebrow { margin-bottom: 0 !important; }
  html body.bantusphere .bx-left-trust-grid .bx-contact-card h3 { margin: 0 0 5px !important; }
  html body.bantusphere .bx-left-trust-grid .bx-contact-link {
    min-height: 34px !important;
    padding: 7px 9px !important;
    margin: 0 !important;
  }
  html body.bantusphere .bx-left-trust-grid .bx-contact-card .btn {
    margin: 3px 0 0 !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
  }
}

@media (max-width: 991.98px) {
  html body.bantusphere .bx-place-layout-v2 > main .bx-left-trust-grid,
  html body.bantusphere .bx-place-layout-v2 > main .bx-after-reviews-grid.bx-left-trust-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 10px !important;
  }
  html body.bantusphere .bx-left-trust-grid > .bx-connected,
  html body.bantusphere .bx-left-trust-grid > .bx-contact-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   REACTIONS — one deterministic interaction plane.
   The chooser is above Share/Comment, remains interactive until a choice,
   and the live summary visibly carries the chosen emoji beside its count.
   ========================================================= */
html body.bantusphere .reactions-wrapper.bs-reaction-open {
  position: relative !important;
  z-index: 2147483600 !important;
  overflow: visible !important;
}
html body.bantusphere .reactions-wrapper.bs-reaction-open > .reactions-container {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147483640 !important;
}
html body.bantusphere .reactions-wrapper.bs-reaction-open > .reactions-container .reactions_item,
html body.bantusphere .reactions-wrapper.bs-reaction-open > .reactions-container .emoji,
html body.bantusphere .reactions-wrapper.bs-reaction-open > .reactions-container img {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
html body.bantusphere .post-actions .bs-post-share-action,
html body.bantusphere .post-actions .js_comment,
html body.bantusphere .post-actions .bs-merit-post-action {
  position: relative !important;
  z-index: 1 !important;
}
html body.bantusphere .post-stats .reactions-stats {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  overflow: visible !important;
}
html body.bantusphere .post-stats .reactions-stats-item {
  display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  border-radius: 50% !important;
  background: rgba(53, 65, 86, .82) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow: visible !important;
}
html body.bantusphere .post-stats .reactions-stats-item .inline-emoji,
html body.bantusphere .post-stats .reactions-stats-item .emoji,
html body.bantusphere .post-stats .reactions-stats-item img {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
}

/* =========================================================
   ZIWAPHI FEATURED DJs — mobile uses a real translating track.
   Cards physically travel through the viewport instead of swapping states.
   Desktop keeps the established cinematic composition.
   ========================================================= */
@media (max-width: 700px) {
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema {
    overflow: hidden !important;
    padding: 12px 10px 13px !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .z19-scroll.bs2360-mobile-track {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    height: 236px !important;
    min-height: 236px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    touch-action: pan-y !important;
    will-change: transform !important;
    transition: transform .64s cubic-bezier(.18,.82,.22,1) !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .z19-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 72% !important;
    width: 72% !important;
    min-width: 72% !important;
    max-width: 290px !important;
    height: 204px !important;
    min-height: 204px !important;
    margin: 0 !important;
    opacity: .44 !important;
    pointer-events: auto !important;
    transform: scale(.84) !important;
    filter: saturate(.72) brightness(.72) !important;
    transition: transform .58s cubic-bezier(.18,.82,.22,1), opacity .46s ease, filter .46s ease !important;
    transform-origin: center center !important;
    will-change: transform, opacity !important;
    border-radius: 16px !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .z19-card.bs2360-current {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: none !important;
    z-index: 4 !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .z19-card.bs2360-near {
    opacity: .62 !important;
    transform: scale(.88) !important;
    filter: saturate(.82) brightness(.8) !important;
    z-index: 2 !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .z19-card.bs2360-far {
    opacity: .22 !important;
    transform: scale(.78) !important;
    z-index: 1 !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .bs235-lineup-dots { display: none !important; }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .bs2360-lineup-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .bs2360-lineup-dots button {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(151,166,204,.28) !important;
    transition: width .24s ease, background .24s ease !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema .bs2360-lineup-dots button.is-active {
    width: 24px !important;
    background: linear-gradient(90deg,#875cf6,#ed3c9d) !important;
  }
  html body.bantusphere .z19-lineup.bs2360-mobile-cinema.bs2360-dragging .z19-scroll.bs2360-mobile-track {
    transition: none !important;
  }
}