/* ============================================================
   Gallery Page — Split Slider & Lightbox
   ============================================================ */

/* ── Full-page BA Slider ── */
.gallery-ba {
  background: var(--charcoal);
  padding: 80px 0;
}
.gallery-ba__title {
  color: var(--white);
  margin-bottom: 12px;
}
.gallery-ba__sub {
  color: rgba(255,255,255,.6);
  margin-bottom: 40px;
}
.gallery-ba__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 768px) {
  .gallery-ba__grid { grid-template-columns: 1fr; }
}
.gallery-ba-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: var(--shadow-lg);
}
.gallery-ba-card .ba-wrapper { border-radius: 0; box-shadow: none; }
.gallery-ba-card .ba-info {
  background: #1e1e1e;
  border-top: 1px solid rgba(255,255,255,.08);
}
.gallery-ba-card .ba-info__label { color: rgba(255,255,255,.35); }
.gallery-ba-card .ba-info__value { color: var(--white); }
.gallery-ba-card .ba-info__title { color: var(--white); border-color: rgba(255,255,255,.1); }

/* ── Lightbox ── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.92);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox__inner {
  position: relative;
  max-width: 900px;
  width: 100%;
  background: var(--charcoal);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.lightbox__img {
  width: 100%;
  aspect-ratio: 16/9;
  background: #2a2a2a;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.3);
  font-size: 1.2rem;
}
.lightbox__body {
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}
.lightbox__title { color: var(--white); font-size: 1.3rem; margin-bottom: 6px; }
.lightbox__meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: .85rem;
}
.lightbox__meta-item { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.55); }
.lightbox__meta-item svg { width: 14px; height: 14px; color: var(--green); }
.lightbox__close {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.lightbox__close:hover { background: rgba(255,255,255,.2); }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  display: flex; gap: 0;
  justify-content: space-between;
  width: 100%; padding: 0 12px;
  pointer-events: none;
}
.lightbox__nav-btn {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--transition);
}
.lightbox__nav-btn:hover { background: rgba(255,255,255,.3); }
.lightbox__nav-btn svg { width: 20px; height: 20px; }

/* ── Before / After Slider ── */
.ba-wrapper{
  position:relative;
  overflow:hidden;
  cursor:col-resize;
  user-select:none;
  -webkit-user-select:none;
}
.ba-before{
  width:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.ba-after{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  clip-path:inset(0 50% 0 0);
  transition:clip-path 0s;
}
.ba-handle{
  position:absolute;
  top:0;bottom:0;
  left:50%;
  width:4px;
  background:rgba(255,255,255,.9);
  transform:translateX(-50%);
  cursor:col-resize;
  z-index:10;
}
.ba-handle__circle{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:40px;height:40px;
  background:var(--white);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.ba-handle__circle svg{width:20px;height:20px;color:var(--charcoal)}
.ba-label{
  position:absolute;
  bottom:12px;
  padding:4px 10px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;
  color:var(--white);background:rgba(0,0,0,.45);
}
.ba-label--before{left:12px}
.ba-label--after{right:12px}
.ba-info{padding:20px 24px}
.ba-info__title{
  font-size:.95rem;font-weight:700;
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ba-info__item{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;font-size:.82rem;
}
.ba-info__label{min-width:80px}
.ba-img-placeholder{
  display:flex;align-items:center;justify-content:center;
}

/* ── Gallery card image placeholders ── */
.wc-1{background:#8fa898 url('../images/housing-renovation.jpg') center/cover}
.wc-2{background:#b4a888 url('../images/painting-exterior.jpg') center/cover}
.wc-3{background:#9aacb8 url('../images/construction-site.jpg') center/cover}
.wc-4{background:#a8b8a4 url('../images/kitchen-interior.jpg') center/cover}
.wc-5{background:#c0a888 url('../images/building-exterior.jpg') center/cover}
.wc-6{background:#a0b0a8 url('../images/architect-interior.jpg') center/cover}

/* ── Masonry-style layout for gallery ── */
@media (min-width: 1024px) {
  .gallery-grid--masonry {
    columns: 3;
    column-gap: 24px;
  }
  .gallery-grid--masonry .gallery-card {
    break-inside: avoid;
    margin-bottom: 24px;
  }
  .gallery-grid--masonry .gallery-card:nth-child(3n+2) .gallery-card__img { height: 260px; }
  .gallery-grid--masonry .gallery-card:nth-child(3n+3) .gallery-card__img { height: 220px; }
}