/* ==========================================================================
   EVENTS (Event detail page)
   - White panels, black text
   - Featured image: transparent container, centered, max-height capped
   - Gallery: horizontal scroll row, thumbs object-fit: contain (no crop)
   - Lightbox: modal with visible arrows + counter + centered caption
   - Gallery scrollbar: thicker + black (WebKit + Firefox)
   ========================================================================== */



/* ==========================================================================
   1) Panels / Typography
   ========================================================================== */

.bh-event-panel{
  background: #fff;                         /* white panel */
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Explicit solid modifier used in templates */
.bh-event-panel--solid{
  background: #fff;
}

/* Featured image panel: remove “white wrapper” look entirely */
.bh-event-panel--featured{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.bh-event-title{
  color: #000;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.bh-event-meta{
  color: rgba(0,0,0,0.65);
  font-size: 0.95rem;
}

.bh-event-summary{
  color: rgba(0,0,0,0.75);
  font-size: 1rem;
  line-height: 1.5;
}

/* Panel header line used in Gallery / Media sections */
.bh-panel-head{
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: relative;                      /* keep header above scroller */
  z-index: 2;
}

.bh-section-title{
  color: #000;
  font-weight: 650;
  margin: 0;
}

/* Richtext readability inside white panels */
.bh-richtext,
.bh-richtext *{
  color: rgba(0,0,0,0.85);
}

.bh-richtext a{
  color: #000;
  text-decoration: underline;
}


/* ==========================================================================
   2) Badges / Pills
   ========================================================================== */

.bh-pill{
  background: rgba(0,0,0,0.08);
  color: #000;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

.bh-badge{
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.12);
}

.bh-badge--upcoming{ background: rgb(15, 223, 60); color: #000; }
.bh-badge--ongoing{  background: rgb(187, 179, 20); color: #000; }
.bh-badge--eventended{ background: rgba(216, 15, 15, 0.776); color: #000; }


/* ==========================================================================
   3) Featured image (centered, max-height, no letterbox background)
   ========================================================================== */

.bh-featured-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: transparent;
}

/* Base image style (used by featured + other images) */
.bh-media-letterbox{
  max-width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

/* Featured image sizing */
.bh-media-letterbox--featured{
  max-height: 450px;                       /* cap the height */
  width: auto;                             /* natural width */
  height: auto;
  object-fit: contain;                     /* preserve aspect ratio */
}

@media (max-width: 768px){
  .bh-media-letterbox--featured{
    max-height: 320px;
  }
}


/* ==========================================================================
   4) Media cards / embeds
   ========================================================================== */

.bh-media-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.bh-media-title{
  color: #000;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
}

.bh-embed-letterbox{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
}

.bh-caption{
  color: rgba(0,0,0,0.65);
  font-size: 0.9rem;
}


/* ==========================================================================
   5) Gallery row (single source of truth)
   - Mobile swipe works
   - Edge-to-edge inside a padded panel
   - Center when not scrollable (JS toggles .is-scrollable)
   ========================================================================== */

/*
  Your panels have padding: 16px.
  To make the scroller reach the panel edges:
  - cancel the panel padding with negative margins
  - re-add it as internal scroll padding
*/
.bh-gallery-row{
  display: flex;
  gap: 14px;

  /* Real horizontal scroller */
  overflow-x: auto;
  overflow-y: hidden;

  /* Mobile / iOS */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;

  /* Nice snapping */
  scroll-snap-type: x mandatory;

  /* Edge-to-edge inside the panel */
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;

  padding-top: 6px;
  padding-bottom: 10px;

  position: relative;
  z-index: 1;                              /* below header */
}

/* JS adds this when it can scroll */
.bh-gallery-row.is-scrollable{
  justify-content: flex-start;
}

/* When not scrollable, center items so no “empty right gap” */
.bh-gallery-row:not(.is-scrollable){
  justify-content: center;
}

/* Each thumb is a <button> (remove default button artifacts) */
.bh-gallery-item{
  flex: 0 0 auto;
  scroll-snap-align: start;

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;

  cursor: pointer;

  /* Prevent stray characters rendering (fixes “>” issues) */
  font-size: 0;
  line-height: 0;
  color: transparent;
}

/* Thumbnails: CONTAIN (no crop) */
.bh-gallery-thumb{
  width: 320px;
  height: 220px;

  object-fit: contain;
  background: #fff;

  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);

  display: block;
}

@media (max-width: 768px){
  .bh-gallery-thumb{
    width: 260px;
    height: 200px;
  }
}


/* ==========================================================================
   5.1) Gallery scrollbar (thicker + black)
   ========================================================================== */

/* WebKit (Chrome/Edge/Safari/iOS Safari) */
.bh-gallery-row::-webkit-scrollbar{
  height: 14px;                            /* thickness */
}

.bh-gallery-row::-webkit-scrollbar-track{
  background: transparent;
}

.bh-gallery-row::-webkit-scrollbar-thumb{
  background-color: #000;                  /* black thumb */
  border-radius: 999px;
  border: 3px solid transparent;           /* gives “padding” effect */
  background-clip: padding-box;
}

.bh-gallery-row::-webkit-scrollbar-thumb:hover{
  background-color: #222;
}

/* Firefox */
.bh-gallery-row{
  scrollbar-width: thick;
  scrollbar-color: #000 transparent;
}


/* ==========================================================================
   6) Lightbox modal
   ========================================================================== */

.bh-lightbox{
  border-radius: 16px;
  overflow: hidden;
}

.bh-lightbox .modal-header{
  border-bottom: 1px solid rgba(0,0,0,0.10);
  align-items: center;
}

/* Center counter + caption */
.bh-lightbox-counter,
.bh-lightbox-caption{
  text-align: center;
  width: 100%;
}

.bh-lightbox-counter{
  font-size: 0.9rem;
  color: rgba(0,0,0,0.55);
  font-weight: 600;
}

.bh-lightbox-caption{
  font-size: 1rem;
  color: rgba(0,0,0,0.85);
}

/* Stage: centered image, room for arrows */
.bh-lightbox-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px 56px;
  min-height: 55vh;
}

.bh-lightbox-img{
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
}

/* Prev/Next buttons */
.bh-lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 52px;
  height: 52px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.92);
  color: #000;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 36px;
  line-height: 1;

  cursor: pointer;
  user-select: none;
}

.bh-lightbox-prev{ left: 14px; }
.bh-lightbox-next{ right: 14px; }

.bh-lightbox-nav:hover{
  background: #fff;
}

@media (max-width: 576px){
  .bh-lightbox-stage{ min-height: 50vh; }
  .bh-lightbox-img{ max-height: 60vh; }
}

/* ==========================================================================
   MEDIA ROW – horizontal scroll must work on mobile (iframes can block swipe)
   ========================================================================== */

/* The scroll container */
.bh-media-row{
  display: flex;
  gap: 14px;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;

  scroll-snap-type: x mandatory;

  /* Edge-to-edge inside .bh-event-panel (padding 16px) */
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;

  padding-top: 6px;
  padding-bottom: 10px;

  position: relative;
  z-index: 1;
}

/* Each media item must not shrink, otherwise it “sticks” and won’t scroll fully */
.bh-media-item{
  flex: 0 0 auto;              /* CRITICAL: prevents shrinking */
  scroll-snap-align: start;
  width: 320px;                /* matches thumbframe */
}

/* Frame matches gallery thumb sizing */
.bh-media-thumbframe{
  width: 100%;
  height: 220px;

  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);

  overflow: hidden;
  display: block;
}

/* Ensure embed fills the frame */
.bh-media-thumbframe .ratio{
  width: 100%;
  height: 100%;
}

/* IMPORTANT: on mobile, iframes can capture swipe -> disable pointer events so swipe scroll works */
@media (max-width: 768px){
  .bh-media-item{ width: 260px; }
  .bh-media-thumbframe{ height: 200px; }

  /* This is the key for mobile swipe */
  .bh-media-row iframe{
    pointer-events: none;
  }
}

/* If you want embeds to be interactive on desktop, keep pointer events enabled there */
@media (min-width: 769px){
  .bh-media-row iframe{
    pointer-events: auto;
  }
}

/* Optional: scrollbar styling to match gallery */
.bh-media-row::-webkit-scrollbar{ height: 14px; }
.bh-media-row::-webkit-scrollbar-track{ background: transparent; }
.bh-media-row::-webkit-scrollbar-thumb{
  background-color: #000;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.bh-media-row{
  scrollbar-width: thick;
  scrollbar-color: #000 transparent;
}