/* ============================================================
   b3LAB.io — Redesign v0.1 · Lightbox variant (Direction C-b)
   Loads ON TOP of redesign.css. Tiles are buttons that open a
   fullscreen overlay instead of expanding inline.
   ============================================================ */

/* tile-as-button */
.b3-tile-btn { display: flex; flex-direction: column; cursor: pointer; position: relative; }
.b3-tile-btn > template { display: none; }
.b3-tile-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.b3-tile-btn .b3-tile-label { padding: var(--space-3) var(--space-4); }
.b3-tile-btn .b3-tile-more { top: var(--space-2); right: var(--space-3); }

/* overlay */
.b3-lb[hidden] { display: none; }
.b3-lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: clamp(var(--space-4), 4vw, var(--space-16)); }
.b3-lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }

.b3-lb-card { position: relative; margin: 0; max-width: 900px; width: 100%;
  background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: 0 40px 120px -40px rgba(0,0,0,.9);
  animation: b3lb-in 220ms cubic-bezier(.16,1,.3,1); max-height: 92vh; overflow-y: auto; }
@keyframes b3lb-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.b3-lb-loop { border: 0; border-radius: 0; border-bottom: 1px solid var(--color-border); }
.b3-lb-close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.b3-lb-close:hover { border-color: var(--color-accent); color: var(--color-accent); }

.b3-lb-body { padding: var(--space-6); }
.b3-lb-title { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .03em;
  margin-bottom: var(--space-3); color: var(--color-text); }
.b3-lb-lead { color: var(--color-text); line-height: 1.6; margin-bottom: var(--space-3); }
.b3-lb-lead em { color: var(--color-accent); font-style: normal; }
.b3-lb-for { font-size: .9375rem; color: var(--color-text-muted); }
.b3-lb-for strong { color: var(--color-accent); font-weight: 600; }

body.b3-lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .b3-lb-card { animation: none; } }