/* =========================================================
   Shared base
========================================================= */
.bbpg *, .bbprojg * { box-sizing: border-box; }
.bbpg, .bbprojg { width: 100%; }
.bbpg, .bbpg button, .bbpg img,
.bbprojg, .bbprojg button, .bbprojg img { border-radius: 0 !important; }

/* Focus ring – match site */
.bbpg button:focus-visible,
.bbprojg button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #015FCC;
  border-radius: var(--radius-s);
}

/* SR status */
.bbpg__sr-status,
.bbprojg__sr-status {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   MAIN
========================================================= */
.bbpg__main,
.bbprojg__main {
  position: relative;
  width: 100%;
  background: var(--bg-body);
  margin: 0;
}

.bbpg__main-btn,
.bbprojg__main-btn {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  background: transparent;
  cursor: zoom-in;
}

.bbpg__main-img,
.bbprojg__main-img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-body);
}

/* MAIN NAV */
.bbpg__nav,
.bbprojg__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(26px, 3.6vw, 36px);
  height: clamp(26px, 3.6vw, 36px);
  background: var(--light);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.bbpg__nav[aria-hidden="true"],
.bbprojg__nav[aria-hidden="true"] { display: none; }

.bbpg__nav--prev,
.bbprojg__nav--prev { left: 0; }

.bbpg__nav--next,
.bbprojg__nav--next { right: 0; }

.bbpg__nav::before,
.bbprojg__nav::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--dark);
  border-right: 2px solid var(--dark);
  display: block;
  transform-origin: 50% 50%;
}
.bbpg__nav--prev::before,
.bbprojg__nav--prev::before { transform: rotate(-135deg); } /* ← */
.bbpg__nav--next::before,
.bbprojg__nav--next::before { transform: rotate(45deg); }   /* → */

/* =========================================================
   THUMBS
========================================================= */
.bbpg__thumbs-wrap,
.bbprojg__thumbs-wrap {
  position: relative;
  margin-top: var(--space-2xs);
}

.bbpg__thumbs,
.bbprojg__thumbs {
  list-style: none;
  display: flex;
  gap: var(--space-4xs);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.bbpg__thumb-item,
.bbprojg__thumb-item {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.bbpg__thumb,
.bbprojg__thumb {
  flex: 0 0 auto;
  width: clamp(42px, 8.5vw, 64px);
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--bg-body);
  cursor: pointer;
  position: relative;
}

.bbpg__thumb img,
.bbprojg__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bbpg__thumb.is-active::after,
.bbprojg__thumb.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.18);
  pointer-events: none;
}

/* THUMB NAV */
.bbpg__thumb-nav,
.bbprojg__thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(24px, 3.2vw, 32px);
  height: clamp(24px, 3.2vw, 32px);
  background: var(--light);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}

.bbpg__thumb-nav[aria-hidden="true"],
.bbprojg__thumb-nav[aria-hidden="true"] { display: none; }

.bbpg__thumb-nav--prev,
.bbprojg__thumb-nav--prev { left: 0; }

.bbpg__thumb-nav--next,
.bbprojg__thumb-nav--next { right: 0; }

.bbpg__thumb-nav::before,
.bbprojg__thumb-nav::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--dark);
  border-right: 2px solid var(--dark);
  display: block;
  transform-origin: 50% 50%;
}
.bbpg__thumb-nav--prev::before,
.bbprojg__thumb-nav--prev::before { transform: rotate(-135deg); } /* ← */
.bbpg__thumb-nav--next::before,
.bbprojg__thumb-nav--next::before { transform: rotate(45deg); }   /* → */

/* =========================================================
   LIGHTBOX
========================================================= */
.bbpg__lightbox,
.bbprojg__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.bbpg__lightbox[aria-hidden="false"],
.bbprojg__lightbox[aria-hidden="false"] { display: block; }

.bbpg__lightbox-overlay,
.bbprojg__lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Desktop: 3 columns (prev | image | next) */
.bbpg__lightbox-inner,
.bbprojg__lightbox-inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-m);
  place-content: center;
  /* ensures grid physical left/right even on RTL sites */
  direction: ltr;
}

.bbpg__lightbox-figure,
.bbprojg__lightbox-figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  grid-column: 2;
  direction: rtl; /* harmless, keeps RTL-safe */
}

.bbpg__lightbox-img,
.bbprojg__lightbox-img {
  max-width: calc(100vw - (var(--space-m) * 2));
  max-height: calc(100vh - (var(--space-m) * 2));
  width: auto;
  height: auto;
  display: block;
}

.bbpg__lightbox-nav,
.bbprojg__lightbox-nav {
  width: clamp(26px, 3.6vw, 36px);
  height: clamp(26px, 3.6vw, 36px);
  background: var(--light);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.bbpg__lightbox-nav[aria-hidden="true"],
.bbprojg__lightbox-nav[aria-hidden="true"] { display: none; }

/* mask arrows */
.bbpg__lightbox-nav::before,
.bbprojg__lightbox-nav::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--dark);
  display: block;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* left arrow */
.bbpg__lightbox-nav[data-side="left"]::before,
.bbprojg__lightbox-nav[data-side="left"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.7 3.3a1 1 0 0 1 0 1.4L9.4 11l6.3 6.3a1 1 0 1 1-1.4 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 0 1 1.4 0z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.7 3.3a1 1 0 0 1 0 1.4L9.4 11l6.3 6.3a1 1 0 1 1-1.4 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 0 1 1.4 0z'/></svg>");
}

/* right arrow */
.bbpg__lightbox-nav[data-side="right"]::before,
.bbprojg__lightbox-nav[data-side="right"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8.3 20.7a1 1 0 0 1 0-1.4L14.6 13 8.3 6.7a1 1 0 1 1 1.4-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8.3 20.7a1 1 0 0 1 0-1.4L14.6 13 8.3 6.7a1 1 0 1 1 1.4-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0z'/></svg>");
}

/* force nav physical sides */
.bbpg__lightbox-nav--prev,
.bbprojg__lightbox-nav--prev {
  grid-column: 1 !important;
  justify-self: end !important;
}
.bbpg__lightbox-nav--next,
.bbprojg__lightbox-nav--next {
  grid-column: 3 !important;
  justify-self: start !important;
}

/* Close X */
.bbpg__lightbox-close,
.bbprojg__lightbox-close {
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  width: clamp(20px, 2.7vw, 26px);
  height: clamp(20px, 2.7vw, 26px);
  background: var(--light);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}
.bbpg__lightbox-close::before,
.bbpg__lightbox-close::after,
.bbprojg__lightbox-close::before,
.bbprojg__lightbox-close::after {
  content: "";
  width: 11px;
  height: 2px;
  background: var(--dark);
  position: absolute;
}
.bbpg__lightbox-close::before,
.bbprojg__lightbox-close::before { transform: rotate(45deg); }
.bbpg__lightbox-close::after,
.bbprojg__lightbox-close::after { transform: rotate(-45deg); }

/* Mobile: arrows under image */
@media (max-width: 768px) {
  .bbpg__lightbox-inner,
  .bbprojg__lightbox-inner {
    padding: var(--space-xs);
    gap: var(--space-2xs);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: center;
    place-content: center;
    min-height: 100vh;
  }

  .bbpg__lightbox-figure,
  .bbprojg__lightbox-figure {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
  }

  .bbpg__lightbox-img,
  .bbprojg__lightbox-img {
    max-width: calc(100vw - (var(--space-xs) * 2));
    max-height: calc(100vh - (var(--space-xs) * 2) - 56px);
    width: 100%;
    height: auto;
  }

  .bbpg__lightbox-nav,
  .bbprojg__lightbox-nav {
    grid-row: 2;
  }

  .bbpg__lightbox-nav--prev,
  .bbprojg__lightbox-nav--prev {
    grid-column: 1 !important;
    justify-self: end !important;
  }

  .bbpg__lightbox-nav--next,
  .bbprojg__lightbox-nav--next {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .bbpg__lightbox-close,
  .bbprojg__lightbox-close {
    top: var(--space-xs);
    right: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bbpg__thumbs, .bbprojg__thumbs { scroll-behavior: auto; }
}

/* =========================================================
   Optional: project-specific tweaks (you can edit/remove)
========================================================= */
.bbprojg__thumb {
  width: clamp(36px, 6vw, 56px);
}


/* =========================================================
   Project gallery: 16:9 wide format
========================================================= */

/* Main image container */
.bbprojg__main-img {
  aspect-ratio: 16 / 9;
}

/* Ensure the main wrapper doesn't force square height */
.bbprojg__main {
  background: transparent;
}

/* Optional: slightly reduce thumb height for cinematic feel */
.bbprojg__thumb {
  width: clamp(36px, 6vw, 56px);
}

/* Transparent images: don't force bg color behind PNG/WebP */
.bbpg__main,
.bbpg__main-img,
.bbpg__thumb {
  background: transparent;
}

.bbpg__main,
.bbprojg__main,
.bbpg__main-img,
.bbprojg__main-img,
.bbpg__thumb,
.bbprojg__thumb {
  background: transparent;
}