/* ==========================================================================
   Bimboo Photo — Gallery page redesign (mockup)
   Scope: body.single-galleries (all gallery pages)
   Look: uniform 4:3 tiles in a 3-column grid, punctuated by full-width
         4:3 feature photographs every 9 tiles.
   No template / DB changes. Layout is built client-side from the existing
   images that already sit inside .gallery_cols_content.
   ========================================================================== */

body.single-galleries{
  --ink:#111318;
  --paper:#fbfaf8;
  --line:#e6e2d9;
  --muted:#6f747c;
  --gold:#b8894a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  background:var(--paper) !important;
}
/* Keep the gallery header fully opaque so thumbnails never bleed through it. */
body.single-galleries .header_style_wrapper,
body.single-galleries .top_bar{
  background:#fbfaf8 !important;
  background-image:none !important;
}
body.single-galleries .top_bar{
  border-bottom:1px solid #ece7de !important;
}
body.single-galleries #menu_wrapper .nav > li > a{
  font-size:13.5px !important; letter-spacing:.015em !important;
  font-weight:600 !important; color:#3b4048 !important;
}

/* ---------- title block ---------- */
body.single-galleries #page_caption{
  height:auto !important; padding:64px 0 10px !important;
  background:transparent !important; border:0 !important; margin:0 !important;
}
body.single-galleries #page_caption .page_title_wrapper{ padding:0 !important; }
body.single-galleries #page_caption .page_title_inner{
  width:min(1240px, calc(100% - 56px)) !important;
  margin:0 auto !important; float:none !important;
}
body.single-galleries #page_caption:before{
  content:"GALLERY";
  display:block;
  width:min(1240px, calc(100% - 56px));
  margin:0 auto 18px;
  font-family:inherit; font-size:11.5px; font-weight:700;
  letter-spacing:.24em; color:var(--gold);
}
body.single-galleries #page_caption h1{
  font-family:var(--serif) !important;
  font-size:clamp(30px, 3.6vw, 46px) !important;
  line-height:1.16 !important; font-weight:400 !important;
  letter-spacing:-.015em !important; color:var(--ink) !important;
  margin:0 !important; text-transform:none !important;
}
body.single-galleries #page_caption .page_title_wrapper:after{
  content:""; display:block; width:64px; height:3px;
  background:var(--gold); margin:26px 0 0;
  border-radius:2px;
}

/* ---------- content shell ---------- */
body.single-galleries #page_content_wrapper{
  padding:34px 0 70px !important; background:transparent !important;
}
body.single-galleries .gallery_cols_content{
  width:min(1240px, calc(100% - 56px)) !important;
  max-width:none !important; margin:0 auto !important; padding:0 !important;
}

/* ---------- the rebuilt grid ---------- */
.gx-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  align-items:start;
}
.gx-cell{
  display:block; position:relative; overflow:hidden; margin:0;
  border-radius:16px; background:#efede8;
  box-shadow:0 18px 36px -30px rgba(17,19,24,.55);
  transition:box-shadow .35s ease, transform .35s ease;
}
.gx-cell img{
  display:block !important;
  width:100% !important; max-width:none !important;
  aspect-ratio:4 / 3; height:auto !important;
  object-fit:cover; object-position:center;
  margin:0 !important; padding:0 !important; border:0 !important;
  box-shadow:none !important; border-radius:0 !important;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.gx-cell:hover{ box-shadow:0 26px 46px -28px rgba(17,19,24,.6); }
.gx-cell:hover img{ transform:scale(1.045); }

/* full-width 4:3 feature photographs */
.gx-wide{ grid-column:1 / -1; border-radius:22px; margin:26px 0 4px; }
.gx-wide img{ aspect-ratio:4 / 3; }
.gx-cap{
  margin:14px 2px 0; font-family:var(--serif);
  font-size:16.5px; line-height:1.5; color:#6f747c; text-align:left;
}

/* prose / caption rows that used to sit between the photos */
.gx-note{
  grid-column:1 / -1;
  margin:34px auto 26px !important;
  max-width:820px;
  font-family:var(--serif) !important;
  font-size:20px !important; line-height:1.55 !important;
  color:#4a4f57 !important; text-align:center;
}
.gx-note:empty{ display:none; }

/* the original empty paragraphs / stray text inside the content area */
body.single-galleries .gallery_cols_content > p{ margin:0 !important; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .gx-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  body.single-galleries #page_caption{ padding:44px 0 8px !important; }
}
@media (max-width:600px){
  body.single-galleries #page_caption .page_title_inner,
  body.single-galleries #page_caption:before,
  body.single-galleries .gallery_cols_content{ width:calc(100% - 32px) !important; }
  .gx-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px; }
  .gx-cell{ border-radius:11px; }
  .gx-wide{ border-radius:14px; }
  .gx-note{ font-size:16.5px !important; }
  body.single-galleries #page_caption h1{ font-size:26px !important; }
}

/* ==============================  lightbox  ============================== */
.gx-lb{
  position:fixed; inset:0; z-index:99999;
  display:none; align-items:center; justify-content:center;
  padding:56px 64px;
  background:rgba(12,13,16,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.gx-lb.gx-lb-open{ display:flex; }
.gx-lb figure{
  margin:0; display:flex; flex-direction:column; align-items:center;
  max-width:100%; max-height:100%;
}
.gx-lb img{
  max-width:min(1400px, 92vw); max-height:78vh; width:auto; height:auto;
  object-fit:contain; border-radius:10px; background:#1b1d22;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.gx-lb figcaption{
  margin-top:16px; max-width:min(900px,86vw);
  font-family:var(--serif); font-size:16px; line-height:1.5;
  color:#d8d5cf; text-align:center;
}
.gx-lb figcaption:empty{ display:none; }
.gx-lb-count{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font-size:12px; letter-spacing:.16em; color:#8d8f95; text-transform:uppercase;
}
.gx-lb-btn{
  position:absolute; border:0; cursor:pointer;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#f2f0ec;
  font-size:26px; line-height:1;
  transition:background .18s, transform .18s;
}
.gx-lb-btn:hover{ background:rgba(255,255,255,.18); }
.gx-lb-close{ top:22px; right:22px; font-size:30px; }
.gx-lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.gx-lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.gx-lb-prev:hover{ transform:translateY(-50%) scale(1.06); }
.gx-lb-next:hover{ transform:translateY(-50%) scale(1.06); }

.gx-cell{ cursor:zoom-in; }
@media (max-width:700px){
  .gx-lb{ padding:52px 10px; }
  .gx-lb img{ max-width:96vw; max-height:74vh; }
  .gx-lb-prev{ left:6px; } .gx-lb-next{ right:6px; }
  .gx-lb-btn{ width:40px; height:40px; font-size:22px; }
}