/* ==========================================================================
   work.css — concept build showcase (before / after sliders)
   Slider internals reuse the .ba classes already defined in styles.css.
   ========================================================================== */

.concept-note{max-width:1160px;margin:34px auto 0;padding:0 40px}
.concept-note .inner{
  border:1px solid var(--hairline);border-radius:12px;background:var(--panel);
  padding:18px 22px;display:flex;gap:14px;align-items:flex-start
}
.concept-note .tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);flex:0 0 auto;padding-top:3px
}
.concept-note p{color:var(--slate);font-size:14.5px;line-height:1.65;max-width:80ch}

.grid-work{
  max-width:1160px;margin:54px auto 0;padding:0 40px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:52px 34px
}

.wcard{display:flex;flex-direction:column}
.wcard .ba{box-shadow:0 18px 46px rgba(0,0,0,.36)}

.wmeta{padding-top:18px}
.wtrade{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal)
}
.wcard h3{
  font-family:var(--display);font-weight:600;font-size:19.5px;
  letter-spacing:-.015em;margin-top:9px
}
.wcard .wsolve{
  color:var(--slate);font-size:14.5px;line-height:1.62;margin-top:9px;max-width:54ch
}
.wcard .wsolve b{color:var(--paper);font-weight:500}

/* smaller knob + tags, since these sliders are half-width */
.grid-work .ba-knob{width:44px;height:44px;margin:-22px 0 0 -22px}
.grid-work .ba-tag{top:12px;font-size:10.5px;padding:6px 11px;letter-spacing:.13em}
.grid-work .ba-tag-before{left:12px}
.grid-work .ba-tag-after{right:12px}

@media(max-width:900px){
  .grid-work{grid-template-columns:1fr;gap:44px;padding:0 22px;margin-top:40px}
  .concept-note{padding:0 22px}
  .concept-note .inner{flex-direction:column;gap:8px}
  .grid-work .ba-knob{width:40px;height:40px;margin:-20px 0 0 -20px}
}

/* ---------- fullscreen button on each slider ---------- */
.ba-full{
  position:absolute;right:12px;bottom:12px;z-index:4;
  width:38px;height:38px;border-radius:9px;
  border:1px solid var(--hairline);background:rgba(7,12,22,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--sky);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,transform .15s
}
.ba-full:hover,.ba-full:focus-visible{
  background:rgba(77,159,255,.22);border-color:var(--signal);transform:scale(1.06)
}
.ba-full svg{display:block;pointer-events:none}

/* ---------- fullscreen viewer ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;flex-direction:column;
  padding:70px 28px 28px;
  background:rgba(4,8,15,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .26s ease
}
.lightbox.on{display:flex}
.lightbox.visible{opacity:1}

.lb-head{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 24px
}
.lb-trade{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal)
}
.lb-title{font-family:var(--display);font-weight:600;font-size:17px;margin-top:4px}
.lb-close{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--hairline);background:var(--ink);color:var(--slate);
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s
}
.lb-close:hover,.lb-close:focus-visible{color:var(--paper);border-color:var(--signal)}

#lb-stage{width:100%;max-width:1500px}
.lb-ba{
  width:100%;max-height:calc(100vh - 150px);
  border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.7)
}
.lb-hint{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#6B7A94;margin-top:16px;text-align:center
}
body.lb-open{overflow:hidden}

@media(max-width:900px){
  .lightbox{padding:64px 12px 20px}
  .lb-head{padding:14px 14px}
  .lb-close{width:38px;height:38px}
  .ba-full{right:10px;bottom:10px;width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){
  .lightbox,.ba-full{transition:none}
}