/* ============================================================================
   work.css — the only CSS work.html adds on top of Mokko.

   HISTORY: this file used to be a BRIDGE. The first Work page put Mokko's
   portfolio rules (extracted verbatim into work-mokko.css) inside the PIXY
   skin, so it had to supply the custom properties and the type those rules
   resolved against. The site is now on the Mokko skin itself — Mokko's own
   style.css is loaded by the shell — so all of that is gone:

     – token block (--color-*, --space-*, --ease-*)  → Mokko's :root supplies them
     – Outfit type mapping on tiles + filter pills   → the skin font is Neue Montreal
     – restated pill colours (#353639 for Pixy ink)  → Mokko's own pills stand
     – filter-bar left-align override                → not needed: Mokko's own
       `.ms-portfolio-filter-area.project .button-group` is `max-width:max-content`
       and only centres under `.style-1`; our bar is `.style-2`, so it already
       sits left
     – `.wk-count` / `.wk-n` per-filter counts       → the bar carries the real
       section names, no counts

   `bto-css/work-mokko.css` is NOT loaded any more either — it was Mokko's
   portfolio rules re-scoped for a Pixy page, and loading it now would just
   duplicate style.css. The file is left on disk as the record of that pass.

   What remains is only what Mokko genuinely does not provide. Everything is
   scoped under `.wk-page` (body class) so this file cannot reach another page.
   ========================================================================== */

/* --- 1. BRAND LOCKUP -------------------------------------------------------
   Mokko ships a native text logo — `.ms-logo__default h3`, 24px/800
   (style.css:6957) — and inverts it for the light layer via
   `.logo-light .ms-logo__default h3 { color: var(--color-white) }`. The
   header markup uses that pattern as-is; only the second line ("Vision in
   motion") has no Mokko slot, so it is defined here.

   ⚠ SCOPE NOTE said this belonged in shared chrome rather than here. IT NOW IS
   — and the rules that were here have been REMOVED, not moved.

   They styled `.bto-brand` / `.bto-brand-tag` / `.bto-brand--light`, the lockup
   the carved shell used to carry. work.html and services.html shipped that one
   while index.html shipped a different one (`.bto-logo` / `.bto-logo__tag`),
   which is why the tagline measured 10px here and 9px on services with neither
   matching the homepage. The shell now carries the `.bto-logo` lockup for all
   three pages, so every selector in this block matched nothing — dead rules
   that still read as live. Brand styling comes from bto-css/sections.css now.
   Nothing page-specific about the brand remains. */

/* --- 2. LEGIBILITY VEIL ----------------------------------------------------
   ⚠ OURS, NOT MOKKO'S — the one visual addition on this page.

   Mokko's `figure::after` is a real element it already fades 0 → 1 on hover
   (style.css:9299 / 9316), but with a TRANSPARENT background: its demo photos
   are all dark at the bottom, so the white caption reads unaided. Our posters
   are not — Surfexcel is a white kurta in daylight, The Burger Company a bright
   yellow banner. Unfixed, the hover title is unreadable on roughly half the
   grid.

   This gives Mokko's OWN existing element a background. No new structure, no
   changed choreography, no new transition. Delete this one rule to see the
   template's literal behaviour. */
.wk-page .portfolio_wrap .portfolio-feed .fadein .item--inner figure::after {
  background: linear-gradient(to top,
              rgba(10, 12, 11, .82) 0%,
              rgba(10, 12, 11, .35) 38%,
              rgba(10, 12, 11, 0) 68%);
}

/* --- 3. LIGHTBOX -----------------------------------------------------------
   Mokko's grid has no lightbox: every tile is `<a href="project-single.html">`.
   Its `fslightbox.js` is a mislabelled copy of Magnific Popup v1.1.0 —
   `window.fsLightbox` does not exist anywhere in the template — and Magnific
   itself is only wired to `.popup-youtube, .popup-video` for hosted embeds
   (`type: 'iframe'`, and `disableOn: 700` skips phones entirely). Ours is the
   vanilla one in bto-js/work.js; this is its skin. */
.wk-lb {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(8, 10, 9, .92);
  backdrop-filter: blur(8px);
}

.wk-lb.is-open { display: grid; }

.wk-lb-inner {
  position: relative;
  width: min(100%, 1100px);
  max-height: 86vh;
  display: grid;
  place-items: center;
}

.wk-lb video {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  background: #000;
}

.wk-lb-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.wk-lb-cap {
  margin-top: 14px;
  margin-bottom: 0;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
}

/* --- 4. ONE COLUMN ON PHONES ----------------------------------------------
   Mokko's tiles are `col-md-4`, which Bootstrap collapses to full width below
   768px — that part needs nothing. This only tightens the gutter, which Mokko
   sets to 1.5rem a side explicitly for `.project` (style.css:10034). */
@media (max-width: 576px) {
  .wk-page .ms-portfolio-filter-area.project .portfolio_wrap .portfolio-feed .grid-item-p {
    padding-left: 0;
    padding-right: 0;
  }
}