/* Masyab Drive Portfolio 2.8.6 — sectioned row-flow grid + in-site lightbox */
/* Visual theme tuned to match masyab.com/about: Space Grotesk / Inter / JetBrains
   Mono, dark teal panels, cyan accent glow, sharp 2px corners. All layout,
   markup and behaviour below are unchanged — only colour, type and shadow
   values were touched. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

.masyab-portfolio {
  --masyab-gap: clamp(12px, 1.6vw, 26px);

  /* ---- about-page palette ---- */
  --masyab-bg-panel: rgba(12, 48, 48, .55);
  --masyab-bg-panel-2: rgba(6, 27, 27, .6);
  --masyab-ink: #031111;
  --masyab-text: #defff7;
  --masyab-muted: #91c4bd;
  --masyab-dim: #5d9995;
  --masyab-cyan: #00b3ff;
  --masyab-cyan-bright: #56d8ff;
  --masyab-border: rgba(0, 179, 255, .18);
  --masyab-border-bright: rgba(0, 179, 255, .48);

  /* customisable focus/underline accent (set inline from plugin settings) */
  --masyab-accent: #00b3ff;

  /* ---- about-page type stack ---- */
  --masyab-font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --masyab-font-body: "Inter", "Segoe UI", sans-serif;
  --masyab-font-mono: "JetBrains Mono", "Consolas", monospace;

  width: 100%;
  color: var(--masyab-text);
  font-family: var(--masyab-font-body);
  padding: 0 0 56px;

  /* Confines every positioned element inside the plugin (cards, badges,
     overlays, the masonry-absolute grid, etc.) to their own stacking
     context. Without this, a position:relative/absolute descendant with
     z-index:auto paints in the same "positioned" layer as the theme's
     nav bar — and that layer always renders above plain, non-positioned
     content regardless of DOM order, which is why thumbnails could end
     up visually on top of the site navigation. isolation: isolate stops
     that layer from leaking past the plugin's own root element. */
  isolation: isolate;
}

/* ---------- Fluid-width mode ----------
   The plugin itself does NOT perform a second viewport breakout.
   It simply fills its containing block. A page builder / custom HTML
   section can own the 100vw breakout once, which prevents unequal side
   margins and the classic double-breakout problem. */
.masyab-portfolio--fluid {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: clamp(0px, 1vw, 16px);
  padding-right: clamp(0px, 1vw, 16px);
}
.masyab-portfolio *,
.masyab-portfolio *::before,
.masyab-portfolio *::after { box-sizing: border-box; }

/* ---------- Sections ---------- */
.masyab-portfolio__section { margin-bottom: clamp(28px, 4vw, 52px); }
.masyab-portfolio__section:last-child { margin-bottom: 0; }

.masyab-portfolio__section-title {
  font-family: var(--masyab-font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--masyab-text);
  margin: 0 0 clamp(14px, 2vw, 24px);
  padding-bottom: 0;
}

.masyab-portfolio--hide-section-titles .masyab-portfolio__section-title {
  display: none !important;
}

.masyab-portfolio__section-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--masyab-cyan);
  box-shadow: 0 0 12px rgba(0, 179, 255, .45);
}

/* ---------- Grid ----------
   A row-flow grid, not CSS multi-column masonry: multi-column lays items
   out top-to-bottom per column (item 2 goes under item 1, not beside it),
   which is why rows never lined up and a short column could look like a
   gap next to a full one. Flexbox lays items out left-to-right in source
   order and only wraps once a row is genuinely full, and justify-content:
   center means a partial final row sits centered instead of stuck to the
   left with empty space beside it. Cards keep their own varied aspect
   ratio (align-items: flex-start keeps each card at its natural height
   instead of stretching it to match its row). */
.masyab-portfolio__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--masyab-gap);
}

.masyab-card {
  position: relative;
  flex: 0 0 calc((100% - var(--masyab-gap)) / 2);
  max-width: calc((100% - var(--masyab-gap)) / 2);
}
@media (min-width: 640px) {
  .masyab-card { flex-basis: calc((100% - 2 * var(--masyab-gap)) / 3); max-width: calc((100% - 2 * var(--masyab-gap)) / 3); }
}
@media (min-width: 980px) {
  .masyab-card { flex-basis: calc((100% - 3 * var(--masyab-gap)) / 4); max-width: calc((100% - 3 * var(--masyab-gap)) / 4); }
}
@media (min-width: 1400px) {
  .masyab-card { flex-basis: calc((100% - 4 * var(--masyab-gap)) / 5); max-width: calc((100% - 4 * var(--masyab-gap)) / 5); }
}

/* ---------- True Pinterest/brick masonry (JS-enhanced) ----------
   The flex rules above are the no-JS fallback: rows fill left-to-right and
   wrap, which is tidy but not a real masonry (every row's height is capped
   by the tallest card in it, and shorter cards leave gaps beside taller
   neighbours in the same row). Once portfolio.js measures the container it
   adds this class and switches every card to absolute positioning with a
   JS-computed left/top/width — cards are placed into whichever column is
   currently shortest, exactly like Pinterest, so rows are never forced to a
   uniform height and the columns stay visually balanced. Position:absolute
   removes the cards from the flex flow automatically, so no other flex
   rule above needs to be undone. */
.masyab-portfolio__grid--js {
  position: relative;
  display: block;
}
.masyab-portfolio__grid--js .masyab-card {
  position: absolute;
  max-width: none;
  margin: 0;
  will-change: left, top;
}
@media (prefers-reduced-motion: no-preference) {
  .masyab-portfolio__grid--js .masyab-card {
    transition: left .25s ease, top .25s ease, width .25s ease;
  }
}

.masyab-card__link {
  display: block; width: 100%; color: inherit; text-decoration: none; outline: none;
  background: none; border: 0; margin: 0; padding: 0; font: inherit; text-align: left; cursor: pointer;
}
.masyab-card__link:focus-visible .masyab-card__media {
  box-shadow: 0 0 0 2px var(--masyab-accent), 0 0 18px rgba(0, 179, 255, .35);
}

.masyab-card__media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--masyab-bg-panel), var(--masyab-bg-panel-2));
  border: 1px solid var(--masyab-border);
  border-radius: 2px;
  transition: border-color .25s ease;
  /* aspect-ratio is set inline per card so bricks vary in height like Pinterest */
}
.masyab-card:hover .masyab-card__media,
.masyab-card__link:focus-visible .masyab-card__media {
  border-color: var(--masyab-border-bright);
}

.masyab-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.masyab-card:hover .masyab-card__media img,
.masyab-card__link:focus-visible .masyab-card__media img { transform: scale(1.04); }

.masyab-card__placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--masyab-bg-panel), var(--masyab-bg-panel-2));
}
.masyab-card__placeholder span {
  font-family: var(--masyab-font-display);
  font-size: clamp(36px, 6vw, 90px); line-height: 1; font-weight: 600;
  letter-spacing: -.04em; color: var(--masyab-cyan); opacity: .22;
}

.masyab-card--more[hidden] { display: none; }

/* ---------- "View more" toggle beneath a capped section ---------- */
.masyab-view-more {
  display: flex; align-items: center; gap: 10px;
  margin: clamp(14px, 2vw, 22px) auto 0;
  min-height: 44px;
  padding: 12px 22px;
  background: rgba(0, 179, 255, .035);
  border: 1px solid var(--masyab-cyan);
  border-radius: 2px;
  color: var(--masyab-cyan);
  font-family: var(--masyab-font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.masyab-view-more:hover,
.masyab-view-more:focus-visible {
  background: var(--masyab-cyan);
  color: var(--masyab-ink);
  box-shadow: 0 0 10px rgba(0, 179, 255, .25), 0 0 30px rgba(0, 179, 255, .08);
  transform: translateY(-2px);
}
.masyab-view-more:focus-visible { outline: 2px solid var(--masyab-cyan-bright); outline-offset: 2px; }
.masyab-view-more__icon { flex: none; transition: transform .2s ease; }
.masyab-view-more.is-expanded .masyab-view-more__icon { transform: rotate(180deg); }

.masyab-card__badge {  position: absolute; top: 12px; left: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(3,17,17,.65); color: var(--masyab-cyan-bright);
  border: 1px solid var(--masyab-border-bright);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.masyab-card__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 14px; opacity: 0;
  background: linear-gradient(180deg, rgba(3,17,17,0) 45%, rgba(3,17,17,.55) 100%);
  transition: opacity .25s ease;
}
.masyab-card__open {
  color: var(--masyab-cyan-bright); font-family: var(--masyab-font-mono);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(3,17,17,.4);
  border: 1px solid rgba(0,179,255,.55); border-radius: 2px;
  padding: 7px 11px; backdrop-filter: blur(7px); white-space: nowrap;
}
.masyab-card:hover .masyab-card__overlay,
.masyab-card__link:focus-visible + .masyab-card__overlay,
.masyab-card__link:focus-visible .masyab-card__overlay { opacity: 1; }

.masyab-portfolio__empty {
  padding: 60px 0; text-align: center; font-size: 13px;
  font-family: var(--masyab-font-body); color: var(--masyab-muted); letter-spacing: .01em;
}
.masyab-portfolio-error {
  padding: 20px; border: 1px solid var(--masyab-border); background: rgba(9,37,37,.5);
  color: var(--masyab-muted); font-family: var(--masyab-font-body); font-size: 13px; border-radius: 2px;
}

/* ---------- Nav items injected into the site's real main menu ---------- */
.masyab-portfolio-nav-item > a { white-space: nowrap; }
.masyab-portfolio-nav-item.current-menu-item > a,
.masyab-portfolio-nav-item > a[aria-current="page"] { font-weight: 700; }

/* ---------- Manual fallback nav: [masyab_portfolio_nav] ---------- */
.masyab-portfolio-nav { width: 100%; }
.masyab-portfolio-nav__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2.4vw, 30px);
  list-style: none; margin: 0; padding: 14px 0;
}
.masyab-portfolio-nav__list a {
  color: var(--masyab-muted); text-decoration: none;
  font-family: var(--masyab-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
.masyab-portfolio-nav__list a:hover {
  color: var(--masyab-cyan-bright); border-color: rgba(0,179,255,.4);
  text-shadow: 0 0 10px rgba(0,179,255,.4);
}
.masyab-portfolio-nav-item.current-menu-item a,
.masyab-portfolio-nav__list a[aria-current="page"] {
  color: var(--masyab-cyan); font-weight: 500; border-color: var(--masyab-accent, var(--masyab-cyan));
}

/* ---------- Lightbox ---------- */
body.masyab-lightbox-open { overflow: hidden; }

.masyab-lightbox {
  position: fixed; inset: 0; z-index: 999999;
}
.masyab-lightbox[aria-hidden="true"] { display: none; }

.masyab-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(3,17,17,.95);
  backdrop-filter: blur(8px);
}

.masyab-lightbox__panel {
  position: relative; height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 76px;
}

/* Vertical stack (media + caption), sized to its own content rather than
   the full panel, so the close button (pinned to .masyab-lightbox__content
   below) tracks the actual image/video corner instead of the page corner. */
.masyab-lightbox__stage {
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
}

/* Shrink-wraps to the rendered media size and establishes the positioning
   context for the close button, so the button sits just above the
   top-right corner of the image/video itself — not the top-right corner
   of the browser viewport. */
.masyab-lightbox__content {
  position: relative;
  display: inline-flex;
  max-width: min(1500px, 92vw);
  max-height: 78vh;
}

.masyab-lightbox__media {
  max-width: min(1500px, 92vw);
  max-height: 78vh;
  display: flex; align-items: center; justify-content: center;
}
.masyab-lightbox__media img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: 2px; box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 60px rgba(0,179,255,.08);
  animation: masyab-fade .25s ease;
}
.masyab-lightbox__media iframe {
  width: min(1200px, 88vw); height: min(675px, 70vh);
  border: 0; background: var(--masyab-ink); border-radius: 2px;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 60px rgba(0,179,255,.08);
  animation: masyab-fade .25s ease;
}
@keyframes masyab-fade { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

.masyab-lightbox__close,
.masyab-lightbox__nav {
  background: rgba(0,179,255,.06);
  color: var(--masyab-cyan-bright);
  border: 1px solid var(--masyab-border-bright);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.masyab-lightbox__close:hover,
.masyab-lightbox__nav:hover { background: rgba(0,179,255,.16); }
.masyab-lightbox__close:focus-visible,
.masyab-lightbox__nav:focus-visible {
  outline: 2px solid var(--masyab-accent, var(--masyab-cyan-bright));
  outline-offset: 2px;
}

/* Anchored to .masyab-lightbox__content (the shrink-wrapped media box),
   not the panel/viewport — so it always sits just above the image's own
   top-right corner, wherever that corner happens to land on screen. */
.masyab-lightbox__close {
  position: absolute;
  top: -18px; right: -18px;
  z-index: 1;
  background: rgba(3,17,17,.85);
}
.masyab-lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%); font-size: 26px;
}
.masyab-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.masyab-lightbox__prev { left: 18px; }
.masyab-lightbox__next { right: 18px; }

.masyab-lightbox__caption {
  margin-top: 20px;
  display: flex; align-items: center; gap: 12px;
  color: var(--masyab-muted); font-family: var(--masyab-font-body); font-size: 13px; letter-spacing: .01em;
  max-width: 90vw; text-align: center;
}
.masyab-lightbox__title { font-family: var(--masyab-font-display); color: var(--masyab-text); font-weight: 500; }
.masyab-lightbox__meta { font-family: var(--masyab-font-mono); color: var(--masyab-muted); }
.masyab-lightbox__counter { font-family: var(--masyab-font-mono); color: var(--masyab-dim); font-variant-numeric: tabular-nums; }

@media (max-width: 680px) {
  .masyab-lightbox__panel { padding: 30px 14px; }
  .masyab-lightbox__nav { width: 38px; height: 38px; font-size: 22px; }
  .masyab-lightbox__prev { left: 6px; }
  .masyab-lightbox__next { right: 6px; }
  .masyab-lightbox__close { top: -14px; right: -14px; width: 38px; height: 38px; }
  .masyab-lightbox__media iframe { width: 94vw; height: 52vw; max-height: 60vh; }
}