/* 
CSS File Last Update : 29 April 2026
Project: bwhospitlity.com (BW Hospitality)
Website Designed & Coded by: Aditama (pandavamedia.net)
Main colors:
- Grey: #dbdee0; rgba(219,222,224, 1);
- Gold: #d0b157; rgba(208,177,87, 1);
- Black: #333333;
Left-right margin from screen 5%
Desktop max width: 94%; max: 1360px;
Mobile max width: 92%;
*/
/* ══════════════════════════════════════════════════════════════════════
   GALLERY COMPONENT
   ──────────────────────────────────────────────────────────────────────
   HTML data attributes on .gallery:

   data-offside   "both|left|right|none"
                  Controls background bleed past container edges.
                  Pure CSS — no JS.

   data-anim      "fade|slide"   Default: "fade"
                  fade  — single preview crossfades between photos
                  slide — Apple-style: all images in a horizontal strip,
                          slides with peek of prev/next on each side

   data-nav       "thumbs|dots"  Default: "thumbs"
                  thumbs — thumbnail strip below preview (existing)
                  dots   — dot navigation bar, sticky while section is
                           in viewport, unsticks at section bottom,
                           autoplay enabled

   Examples:
     <div class="gallery" data-offside="both" data-anim="fade"  data-nav="thumbs">
     <div class="gallery" data-offside="none"  data-anim="slide" data-nav="dots"  data-autoplay="5000">
══════════════════════════════════════════════════════════════════════ */

/*.gallery{margin-bottom:5rem;position:relative;}*/

/* ── Section label ── */
.gallery { position:relative; }
.gallery-section-label{
  padding:0 3rem 1.2rem;max-width:1360px;
  display:flex;align-items:center;gap:1rem;
}
.gallery-section-label h2{font-size:1.5rem;font-weight:600;}
.gallery-section-label .gl-count{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding-left:1rem;border-left:1px solid rgba(255,255,255,.12);}
.gl-badge{margin-left:auto;font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,168,76,.3);padding:.2rem .7rem;}

/* ══ FADE MODE (data-anim="fade") ════════════════════════════════════
   Single large preview image. goTo() crossfades opacity.
═══════════════════════════════════════════════════════════════════════ */
.gallery-preview-wrap{position:relative;border-radius:10px;overflow:hidden;}
.gallery-preview-stage{position:relative;}

/* Offside: background image bleeds past container */
.gallery[data-offside="both"]  .gallery-preview-stage{margin-left:-12vw;width:calc(100% + 24vw);}
.gallery[data-offside="left"]  .gallery-preview-stage{margin-left:-18vw;width:calc(100% + 18vw);}
.gallery[data-offside="right"] .gallery-preview-stage{width:calc(100% + 18vw);}
.gallery[data-offside="none"]  .gallery-preview-stage{margin-left:0;width:100%;}

.gallery-preview-img{
  width:100%;height:72vh;min-height:400px;object-fit:cover;display:block;
  transition:opacity .45s ease;cursor:zoom-in;
}
.gallery-preview-stage::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(to top,rgba(14,13,11,.88) 0%,transparent 100%);
  pointer-events:none;
}
.gallery-caption{
  position:absolute;bottom:0;left:0;right:0;padding:2.5rem 3rem;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;
}
.gallery-caption-label{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pdv-gold) !important;margin-bottom:.4rem;}
.gallery-caption-title{font-size:clamp(1.3rem,1.6rem,2rem);font-weight:600;color:var(--white);line-height:1.2;}
.gallery-caption-counter{font-size:.72rem;letter-spacing:.12em;color:rgba(255,255,255,.4);text-align:right;flex-shrink:0;}
.gallery-counter-current{font-size:1.6rem;font-weight:300;color:var(--white);display:block;line-height:1;}

/* Arrows on fade preview */
.gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);
  color:var(--white);font-size:2.2rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  backdrop-filter:blur(4px);transition:background .2s,border-color .2s,color .2s;user-select:none;
}
.gallery-arrow:hover{background:var(--pdv-gold);border-color:var(--pdv-gold);}
.gallery-arrow:disabled{opacity:.2;pointer-events:none;}
.gallery-arrow--prev{left:1.5rem;}
.gallery-arrow--next{right:1.5rem;}

/* ══ SLIDE MODE (data-anim="slide") ══════════════════════════════════
   Apple-style: all images in a horizontal strip.
   Peek of previous/next slide visible on each side.
   The clip region is narrower than the strip so edges bleed.
═══════════════════════════════════════════════════════════════════════ */
.gallery-slide-outer{
  /*
   * overflow:hidden clips the track so only current slide + peek shows.
   * padding is set by JS based on data-peek-side (both|left|right|none)
   * so the correct peek area is exposed on the right side(s).
   *
   * data-peek-side="both"   peek on left AND right  (default)
   * data-peek-side="left"   peek on left only (see previous slide)
   * data-peek-side="right"  peek on right only (see next slide)
   * data-peek-side="none"   no peek, full-width slide
   */
  overflow:hidden;
  position:relative;
  background:var(--dark);
  /* padding is set via JS — do NOT set here */
}
.gallery-slide-track{
  display:flex;
  gap:var(--slide-gap, 16px);
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  /* no will-change — avoids stacking context / pointer-events issues */
}
.gallery-slide{
  /*
   * flex-basis and width are set entirely by JS in applySlide().
   * Removing the CSS calc() here prevents the double-subtraction
   * bug where 100% resolved to the content box (already minus padding)
   * causing the slide to be too narrow and the translation to grow
   * incrementally with each step.
   *
   * Math (see applySlide in JS):
   *   peekL = peek if data-peek-side is "both" or "left", else 0
   *   peekR = peek if data-peek-side is "both" or "right", else 0
   *   slideW = outerOffsetWidth - peekL - peekR - gap
   *   At this width, exactly peekR of the next slide shows on the right
   *   and exactly peekL of the previous slide shows on the left.
   *   Translation per step = slideW + gap = outerOffsetWidth - peekL - peekR
   */
  flex:0 0 auto;  /* width set by JS */
  height:72vh;min-height:600px;
  position:relative;overflow:hidden;
  border-radius:12px;
  cursor:zoom-in;
}
.gallery-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
  pointer-events:none;
}
.gallery-slide:hover img{transform:scale(1.03);}

/* Caption inside each slide */
.gallery-slide-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:2rem 2rem 1.8rem;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%);
  z-index:2;
}
.gallery-slide-caption .gallery-caption-label{font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pdv-gold);margin-bottom:.3rem;}
.gallery-slide-caption .gallery-caption-title{font-size:clamp(1.1rem,1.6vw,1.6rem);font-weight:600;color:var(--white);}

/* Side-dimming for non-active slides */
.gallery-slide::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(14,13,11,.55);
  transition:opacity .5s ease;
  border-radius:12px;
  pointer-events:none;
}
.gallery-slide.is-active::before{opacity:0;}

/* Slide arrows — outside the clip, absolutely positioned on gallery */
.gallery-slide-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:44px;height:44px;
  background:rgba(14,13,11,.7);border:1px solid rgba(255,255,255,.18);
  color:var(--white);font-size:1.5rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,color .2s;user-select:none;
}
.gallery-slide-arrow:hover{background:var(--pdv-gold);border-color:var(--pdv-gold);color:var(--ink);}
.gallery-slide-arrow:disabled{opacity:.2;pointer-events:none;}
/* Arrow positions are set by JS to match the computed peek inset */
.gallery-slide-arrow--prev{left:8px;}
.gallery-slide-arrow--next{right:8px;}

/* ══ THUMBNAIL NAV (data-nav="thumbs") ═══════════════════════════════ */
.gallery-thumb-section{position:relative;padding:.8rem 0;}
.gallery-thumb-clip{overflow:hidden;margin:0 3rem;}
.gallery-thumb-track{display:flex;gap:6px;transition:transform .4s cubic-bezier(.4,0,.2,1);}
.gallery-thumb{
  flex:0 0 120px;height:72px;cursor:pointer;overflow:hidden;
  border:2px solid transparent;opacity:.45;padding:0;
  transition:border-color .2s,opacity .25s;
}
.gallery-thumb.active{border-color:var(--pdv-gold);opacity:1;}
.gallery-thumb:hover{opacity:.8;}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.gallery-thumb:hover img{transform:scale(1.06);}
.gallery-thumb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;
  background:rgba(14,13,11,.8);border:1px solid rgba(255,255,255,.12);
  color:var(--white);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,opacity .2s;
}
.gallery-thumb-arrow:hover{background:var(--pdv-gold);color:var(--ink);}
.gallery-thumb-arrow[disabled]{opacity:.15;pointer-events:none;}
.gallery-thumb-arrow--prev{left:.3rem;}
.gallery-thumb-arrow--next{right:.3rem;}

/* ══ DOT NAV BAR (data-nav="dots") ══════════════════════════════════
   Sticky pill bar that appears when gallery section enters viewport.
   Stays fixed at bottom of viewport while section is in view.
   When section bottom reaches viewport bottom, the bar unsticks and
   scrolls away naturally with the page.

   Implementation:
     .gallery-dot-anchor  — zero-height element at bottom of gallery.
                            When this scrolls above the viewport bottom,
                            the bar stops being sticky (JS toggles class).
     .gallery-dot-bar     — the visible pill. position:sticky bottom:2rem.
                            opacity:0 until section enters viewport.
═══════════════════════════════════════════════════════════════════════ */
.gallery-dot-bar-wrap{
  /* Sits at the bottom of the gallery block.
     position:sticky makes the bar stick to the viewport bottom while
     the gallery section is taller than the viewport.                  */
  position:sticky;
  bottom:2rem;
  z-index:50;
  display:flex;justify-content:center;
  padding:1.2rem 0;
  pointer-events:none;     /* wrap is invisible; only bar intercepts */
}
.gallery-dot-bar{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(20,18,14,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:.55rem 1.1rem;
  pointer-events:auto;
  /* hidden until section enters viewport */
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s ease,transform .4s ease;
}
.gallery-dot-bar.visible{
  opacity:1;transform:translateY(0);
}
/* Dot */
.gallery-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.8);border:none;cursor:pointer;padding:0;
  transition:background .3s,width .35s,border-radius .35s;
  pointer-events:auto;
}
.gallery-dot.active{
  background:var(--pdv-gold);
  width:24px;border-radius:4px;
}
/* Autoplay progress ring around the active dot (SVG injected by JS) */
.gallery-dot-progress{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.dot-bar-prev,.dot-bar-next{
  width:26px;height:26px;border-radius:50%;
  background:none;border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.65);font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.dot-bar-prev:hover,.dot-bar-next:hover{background:var(--pdv-gold);color:var(--black);border-color:var(--pdv-gold);}
.dot-bar-sep{width:1px;height:16px;background:rgba(255,255,255,.12);flex-shrink:0;}
/* Autoplay pause/play indicator inside bar */
.dot-bar-play{
  width:26px;height:26px;border-radius:50%;
  background:none;border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.65);font-size:.75rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.dot-bar-play:hover{background:rgba(255,255,255,.08);}

/* ══ LIGHTBOX ═════════════════════════════════════════════════════ */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.95);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox-img{max-width:92vw;max-height:90vh;object-fit:contain;display:block;}
.lightbox-close{
  position:absolute;top:1.2rem;right:1.2rem;
  width:38px;height:38px;border:1px solid rgba(255,255,255,.22);
  background:none;color:var(--white);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.lightbox-close:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:1px solid rgba(255,255,255,.18);
  background:none;color:var(--white);font-size:1.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.lightbox-arrow:hover{background:rgba(255,255,255,.08);}
.lightbox-arrow:disabled{opacity:.2;pointer-events:none;}
.lightbox-arrow--prev{left:1rem;}
.lightbox-arrow--next{right:1rem;}
.lightbox-caption{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  font-size:.78rem;color:rgba(255,255,255,.45);letter-spacing:.1em;
  text-align:center;white-space:nowrap;
}

@media(max-width:768px){
  #site-header{padding:0 1.2rem;}
  .header-nav{display:none;}
  .gallery-caption{padding:1.2rem 1.5rem;}
  .gallery-thumb{flex:0 0 80px;height:52px;}
  .gallery-thumb-clip{margin:0 2.2rem;}
  .gallery[data-offside="both"]  .gallery-preview-stage{margin-left:-6vw;width:calc(100% + 12vw);}
  .gallery[data-offside="left"]  .gallery-preview-stage{margin-left:-8vw;width:calc(100% + 8vw);}
  .gallery[data-offside="right"] .gallery-preview-stage{width:calc(100% + 8vw);}
  .gallery-slide-outer{padding:0 32px;}
  .gallery-slide{flex:0 0 calc(100% - 64px - var(--slide-gap,16px));height:50vh;min-height:260px;}
  .gallery-slide-arrow--prev{left:0;}
  .gallery-slide-arrow--next{right:0;}
}