/* ==========================================================================
   AE Creative — Portfolio page components
   Introduced for pages/portfolio.html: the filter tabs, the premium
   project-card grid, and the featured-project meta line. Everything here
   is built from existing design tokens (colors, radii, shadows, ease,
   fonts) — no new colors, no new framework. Section padding uses the
   same var(--space-section-y*) tokens as every other section in
   spacing.css/layout.css. Pairs with assets/js/portfolio-filter.js.
   ========================================================================== */

/* ---- Filter tabs ---- */
.portfolio-filter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:44px;
}
.portfolio-filter__btn{
  padding:11px 22px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface-tint);color:var(--text-2);font-family:var(--ff-ar);
  font-weight:600;font-size:14px;cursor:pointer;
  transition:all .25s var(--ease);
}
.portfolio-filter__btn:hover,.portfolio-filter__btn:focus-visible{
  border-color:var(--brand-line);color:var(--text);background:var(--brand-soft);
}
.portfolio-filter__btn.is-active{
  background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--e-glow);
}

/* ---- Premium portfolio grid ---- */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.portfolio-card{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;display:flex;flex-direction:column;
  transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .3s var(--ease);
}
.portfolio-card:hover,.portfolio-card:focus-within{border-color:var(--brand-line)}
/* JS-toggled state for instant, client-side filtering — see portfolio-filter.js.
   Kept as a class (not [hidden]) so the fade can be transitioned before the
   element is removed from flow. */
.portfolio-card--out{opacity:0;transform:scale(.94);pointer-events:none}

.portfolio-card__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.portfolio-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.portfolio-card__img.is-broken{opacity:0}
.portfolio-card:hover .portfolio-card__img,.portfolio-card:focus-within .portfolio-card__img{transform:scale(1.04)}
.portfolio-card__scrim{
  position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(9,9,12,.85));
}
.portfolio-card__badge{
  position:absolute;top:14px;inset-inline-start:14px;padding:6px 13px;border-radius:99px;
  background:rgba(9,9,12,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:#fff;
}
/* Video-ready play overlay — shown only on cards with data-video="true".
   data-youtube-id stays empty until real YouTube IDs are provided; the
   lightbox/popup itself is intentionally not implemented yet. */
.portfolio-card__play{
  position:absolute;top:14px;inset-inline-end:14px;width:44px;height:44px;border-radius:99px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.portfolio-card__play:hover,.portfolio-card__play:focus-visible{background:var(--grad);transform:scale(1.08)}

.portfolio-card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.portfolio-card__title{font-family:var(--ff-display);font-weight:600;font-size:17px;margin:0 0 8px}
.portfolio-card__desc{margin:0 0 18px;font-size:13.5px;line-height:1.7;color:var(--text-3);flex:1}
.portfolio-card__footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid var(--line);
}
.portfolio-card__client{font-family:var(--ff-mono);font-size:11.5px;color:var(--text-3)}
.portfolio-card__view{
  background:none;border:none;padding:0;color:var(--brand);font-family:var(--ff-ar);
  font-weight:600;font-size:13.5px;cursor:pointer;transition:color .2s var(--ease);
}
.portfolio-card__view:hover,.portfolio-card__view:focus-visible{color:var(--text)}

/* ---- Portfolio-section wrapper (filter + grid) ---- */
.portfolio-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg)}
.portfolio-section__head{text-align:center;margin-bottom:46px;max-width:640px;margin-inline:auto}