/* BDCW Photo Gallery – frontend styles */
:root{
  --bdcw-gap: 16px;
  --bdcw-radius: 14px;
  --bdcw-shadow: 0 10px 30px rgba(0,0,0,.15);
  --bdcw-border: 1px solid rgba(0,0,0,.08);
  --bdcw-muted: #6b7280;
  --bdcw-tag-bg: rgba(0,0,0,.55);
  --bdcw-tag-color: #fff;
}

/* Grid */
.bdcw-gallery{
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--bdcw-gap);
  max-width: min(100%, var(--bdcw-maxw, 1200px));
  margin: 15px auto 0;
}
.bdcw-gallery[data-columns="1"]{ --cols:1; }
.bdcw-gallery[data-columns="2"]{ --cols:2; }
.bdcw-gallery[data-columns="3"]{ --cols:3; }
.bdcw-gallery[data-columns="4"]{ --cols:4; }

@media (max-width: 900px){
  .bdcw-gallery{ --cols: 1; }
}

/* Item */
.bdcw-gallery-item{
  background: #fff;
  border: var(--bdcw-border);
  border-radius: var(--bdcw-radius);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--bdcw-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  outline: none;
}
.bdcw-gallery-item:focus-visible{
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .35), var(--bdcw-shadow);
}
.bdcw-gallery-item:hover{ transform: translateY(-2px); }

/* Static 50/50 split preview */
.bdcw-thumb-split{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
}
.bdcw-thumb-split .bdcw-thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bdcw-thumb-split .bdcw-thumb.after{
  clip-path: inset(0 0 0 50%);
}
.bdcw-thumb-split .bdcw-split-divider{
  position: absolute;
  left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.bdcw-thumb-split .bdcw-split-labels{
  position: absolute; inset: 10px auto auto 10px; right:10px; display:flex; justify-content:space-between; pointer-events:none;
}
.bdcw-ba .bdcw-split-labels{
  position: absolute; inset: 10px auto auto 10px; right:10px; display:flex; justify-content:space-between; pointer-events:none;
}
.bdcw-tag{
  font: 500 12px/1.9 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .2px;
  background: var(--bdcw-tag-bg);
  color: var(--bdcw-tag-color);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
}
.bdcw-tag.after{ margin-right:0; }

/* Caption */
.bdcw-caption{
  padding: 10px 12px 12px;
}
.bdcw-cap-title{
  font: 600 16px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  margin: 0 0 4px;
}
.bdcw-cap-desc{
  color: var(--bdcw-muted);
  font: 400 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  margin: 0;
}

/* Lightbox */
.bdcw-lightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}
.bdcw-lightbox.is-open{ display: block; }
.bdcw-lightbox-backdrop{
  position: absolute; inset: 0; background: rgba(0,0,0,.7);
}
.bdcw-lightbox-wrap{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
}
.bdcw-lightbox-content{
  background: #fff;
  width: min(100%, 940px);
  max-width: 940px;
  border-radius: var(--bdcw-radius);
  box-shadow: var(--bdcw-shadow);
  overflow: hidden;
}
/* Before/After area inside lightbox */
.bdcw-ba{
  position: relative;
  width: 100%;
  max-width: 900px;
  height: auto;
  aspect-ratio: 16/10;
  margin: 0 auto;
  background: #f3f4f6;
  --pos: .5;
}
.bdcw-ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bdcw-ba .bdcw-ba-after{ clip-path: inset(0 0 0 calc(var(--pos) * 100%)); }
.bdcw-ba .bdcw-ba-handle{
  position: absolute; inset: 0;
  left: calc(var(--pos) * 100%);
  width: 2px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  cursor: ew-resize;
}
/* add grabber knob */
.bdcw-ba .bdcw-ba-handle::before{
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 999px; background: rgba(0,0,0,.5);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);
}

.bdcw-lightbox-close{
  position: absolute; top: 14px; right: 14px;
  background: transparent; color: #00a32a;
  border: 0; width: 40px; height: 40px; border-radius: 999px;
  cursor: pointer; font-size: 26px;
  display: grid; place-items: center; line-height: 1; text-align: center;
}
.bdcw-lightbox-meta{ padding: 12px 14px 16px; }
.bdcw-lightbox-title{
  font: 600 18px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0 0 6px;
}
.bdcw-lightbox-desc{
  color: var(--bdcw-muted); font: 400 14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0;
}

/* Helpers */
.bdcw-hidden{ display: none !important; }
.bdcw-noscroll{ overflow: hidden; }