/* MB Spectrums — Gallery widget */
.gfilter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:38px}
.gfilter button{background:transparent;border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:9px 18px;border-radius:40px;cursor:pointer;transition:.2s}
.gfilter button:hover{border-color:var(--gold)}
.gfilter button.active{background:var(--green-800);color:var(--on-deep);border-color:var(--green-800)}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px}
.gitem{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--cream)}
/* items are <button> when they open the lightbox — strip the UA button styling */
button.gitem{padding:0;margin:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:block}
.gitem .gtex{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .5s ease}
.gitem:hover .gtex{transform:scale(1.05)}
.gitem .gcap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(12,33,24,.85));color:#FAF8F2;font-size:.82rem;font-weight:500;letter-spacing:.03em;opacity:0;transform:translateY(8px);transition:.25s}
.gitem:hover .gcap,.gitem:focus-visible .gcap{opacity:1;transform:none}
.gitem.tall{grid-row:span 2;aspect-ratio:auto}

/* video badge */
.gplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(12,33,24,.62);border:1px solid rgba(227,200,135,.35);color:#E3C887;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:.25s;pointer-events:none}
.gplay svg{width:22px;height:22px;margin-left:3px}
.gitem:hover .gplay{background:rgba(12,33,24,.8);transform:translate(-50%,-50%) scale(1.08)}

/* ============================================================
   Lightbox — one viewer for both images and videos.
   Markup is created on demand by frontend.js and appended to <body>.
   ============================================================ */
/* The lightbox lives on <body>, outside the scoped reset in base.css — so it
   normalises box-sizing/margins for itself. */
.sx-lb,.sx-lb *{box-sizing:border-box}
.sx-lb p{margin:0}
.sx-lb{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);background:rgba(8,20,14,.94);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.sx-lb.open{opacity:1;visibility:visible}
.sx-lb-stage{position:relative;max-width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.sx-lb-media{max-width:100%;max-height:78vh;display:flex;align-items:center;justify-content:center}
.sx-lb-media img,.sx-lb-media video{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.sx-lb-media iframe{width:min(90vw,1100px);aspect-ratio:16/9;height:auto;max-height:78vh;border:0;border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.55);background:#000}
.sx-lb-cap{color:rgba(246,243,236,.82);font-size:.9rem;letter-spacing:.03em;text-align:center;max-width:60ch}

/* The lightbox keeps a genuinely dark backdrop even in the light theme, so its
   controls opt out of the light-theme gold tokens and stay light. */
.sx-lb-btn{position:absolute;background:rgba(246,243,236,.08);border:1px solid rgba(227,200,135,.35);color:#E3C887;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;padding:0}
.sx-lb-btn:hover{background:rgba(201,162,75,.2)}
.sx-lb-btn::before{content:"";width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.sx-lb-prev{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
.sx-lb-prev::before{transform:rotate(-135deg);margin-left:4px}
.sx-lb-next{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
.sx-lb-next::before{transform:rotate(45deg);margin-right:4px}
.sx-lb-close{top:clamp(8px,2vw,22px);right:clamp(8px,2vw,22px)}
.sx-lb-close::before,.sx-lb-close::after{content:"";position:absolute;width:17px;height:2px;background:currentColor;border:0}
.sx-lb-close::before{transform:rotate(45deg)}
.sx-lb-close::after{transform:rotate(-45deg)}
.sx-lb-count{position:absolute;left:50%;bottom:clamp(8px,2vw,20px);transform:translateX(-50%);color:rgba(246,243,236,.6);font-size:.78rem;letter-spacing:.14em}
.sx-lb-lock{overflow:hidden}

@media(max-width:980px){
  .ggrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .ggrid{grid-template-columns:repeat(2,1fr)}
  .gitem.tall{grid-row:span 1;aspect-ratio:1/1}
  .gplay{width:44px;height:44px}
  .gplay svg{width:18px;height:18px}
  .sx-lb-btn{width:40px;height:40px}
  .sx-lb-media img,.sx-lb-media video{max-height:68vh}
}
@media(prefers-reduced-motion:reduce){
  .gitem:hover .gtex{transform:none}
  .sx-lb{transition:none}
}