/* ============================================================
   BOSFOR & BAŁTYK — Gallery page (Claude-owned)
   Filterable masonry + lightweight lightbox. Brand colours.
   ============================================================ */
:root{
  --bb-royal:#0a4fba; --bb-royal-deep:#073a8a; --bb-cyan:#04bee9;
  --bb-amber:#ea910f; --bb-amber-deep:#985200; --bb-gold:#ffc30a; --bb-vanilla:#fef8e0;
  --bb-vanilla-warm:#fdf0c8; --bb-ink:#1a1b1c;
}
.ab-in{ opacity:1 !important; transform:none !important; }

/* ---------- HEAD ---------- */
.gl-head{ text-align:center; padding:clamp(48px,7vw,90px) 0 clamp(18px,3vw,30px); }
.gl-head__title{ font-family:'DM Serif Display',serif; color:var(--bb-royal);
  font-size:clamp(36px,6vw,64px); line-height:1.05; margin:6px 0 4px; }
.gl-head__lead{ font-family:'Montserrat',sans-serif; font-size:16px; line-height:1.7;
  color:rgba(26,27,28,.74); max-width:60ch; margin:14px auto 0; }

/* ---------- FILTER ---------- */
.gl-filter{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:8px auto clamp(28px,4vw,42px); }
.gl-filter__btn{ font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; letter-spacing:.03em;
  color:var(--bb-royal); background:rgba(10,79,186,.07); border:1px solid rgba(10,79,186,.2);
  border-radius:999px; padding:9px 20px; cursor:pointer; transition:.2s; }
.gl-filter__btn:hover{ background:rgba(10,79,186,.14); }
.gl-filter__btn.is-active{ background:linear-gradient(135deg,var(--bb-gold),var(--bb-amber));
  color:var(--bb-royal-deep); border-color:transparent; box-shadow:0 6px 16px rgba(234,145,15,.28); }

/* ---------- TRUE MASONRY (CSS columns) ----------
   Each image keeps its natural aspect ratio — heights vary, columns tile naturally.
*/
.gl-grid-sec{ padding:0 0 clamp(54px,8vw,100px); }
.gl-grid{ columns:4; column-gap:14px; max-width:1320px; margin:0 auto; padding:0 14px; }
@media(max-width:1200px){ .gl-grid{ columns:3; } }
@media(max-width:760px){ .gl-grid{ columns:2; column-gap:10px; padding:0 10px; } }
@media(max-width:420px){ .gl-grid{ columns:1; } }
.gl-item{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 14px; position:relative; border-radius:14px; overflow:hidden;
  cursor:zoom-in; box-shadow:0 6px 18px rgba(10,79,186,.10);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease, box-shadow .25s ease;
  display:block;
}
.gl-item:hover{ box-shadow:0 14px 32px rgba(10,79,186,.20); }
.gl-item.ab-in{ opacity:1; transform:none; }
.gl-item.is-hidden{ display:none; }
.gl-item img{
  width:100%; height:auto; display:block;
  transition:transform .5s ease;
  /* No object-fit / aspect-ratio — let each image flow at native dimensions */
}
.gl-item:hover img{ transform:scale(1.04); }
.gl-item__cap{ position:absolute; inset:auto 0 0 0; padding:30px 16px 14px;
  background:linear-gradient(0deg, rgba(7,58,138,.86), transparent);
  color:#fff; font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em;
  opacity:0; transform:translateY(8px); transition:.25s; }
.gl-item:hover .gl-item__cap{ opacity:1; transform:none; }
.gl-item__tag{ position:absolute; top:12px; left:12px; font-family:'Montserrat',sans-serif; font-size:10px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bb-royal-deep);
  background:linear-gradient(135deg,var(--bb-gold),var(--bb-amber)); padding:4px 10px; border-radius:999px;
  opacity:0; transition:.25s; }
.gl-item:hover .gl-item__tag{ opacity:1; }

/* ---------- LIGHTBOX ---------- */
.gl-lb{ position:fixed; inset:0; z-index:9999; background:rgba(7,14,26,.93);
  display:none; align-items:center; justify-content:center; padding:24px; }
.gl-lb.is-open{ display:flex; }
.gl-lb__img{ max-width:92vw; max-height:86vh; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.gl-lb__cap{ position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#fff;
  font-family:'Montserrat',sans-serif; font-size:14px; }
.gl-lb__btn{ position:absolute; background:rgba(254,248,224,.12); border:1px solid rgba(254,248,224,.3);
  color:#fff; width:48px; height:48px; border-radius:50%; font-size:22px; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center; }
.gl-lb__btn:hover{ background:var(--bb-gold); color:var(--bb-royal-deep); }
.gl-lb__close{ top:20px; right:20px; }
.gl-lb__prev{ left:20px; top:50%; transform:translateY(-50%); }
.gl-lb__next{ right:20px; top:50%; transform:translateY(-50%); }
@media(max-width:560px){ .gl-lb__prev{ left:8px; } .gl-lb__next{ right:8px; } }

/* CTA reuse */
.ab-cta{ padding:clamp(54px,8vw,96px) 0; text-align:center; background:linear-gradient(135deg,var(--bb-royal),var(--bb-royal-deep)); }
.ab-cta__inner p{ font-family:'Montserrat',sans-serif; color:rgba(254,248,224,.85); font-size:15px; margin:14px 0 26px; }
.ab-cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.bb-hdr__nav a.is-current{ color:var(--bb-amber-deep); }
.bb-hdr__nav a.is-current::after{ width:100% !important; }