/* =========================================================
   PORTFOLIO.HTML — page-specific styles (prefix: portfolio_)
   ========================================================= */

.portfolio_filters{ display:flex; flex-wrap:wrap; gap:10px; }
.portfolio_filter-btn{
 font-size:18px; color:var(--text-2);
  background:transparent; border:1px solid var(--border-strong); border-radius:99px;
  padding:9px 20px; transition:all .25s;
}
.portfolio_filter-btn.is-active,
.portfolio_filter-btn:hover{ background:var(--grad-main); border-color:transparent; color:#fff; }

.portfolio_card{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border);
  transition:transform .4s var(--ease); height:100%;
  background-size:cover; background-position:top center; background-color:var(--surface-2);
  display:flex; flex-direction:column; justify-content:space-between; min-height:540px;
}
.portfolio_card:hover{ transform:translateY(-6px); }
.portfolio_tag{
  display:inline-block; margin:20px 0 0 20px;
  font-size:16px; color:#fff;
  background:rgba(255,255,255,.16); padding:5px 14px; border-radius:99px; backdrop-filter:blur(4px);
}
.portfolio_card-body{ padding:60px 22px 26px; }
.portfolio_card-body h4{ font-size:22px; margin-bottom:8px; color:#fff; }
.portfolio_card-body p{ font-size:18px; color:rgba(255,255,255,.72); margin-bottom:16px; }
.portfolio_card-body a{ font-size:18px; color:#fff; display:inline-flex; align-items:center; gap:6px; }
.portfolio_card-body a:hover{ color:var(--blue); }

.portfolio_note{ font-size:13px; color:var(--text-3); }
.portfolio_note code{ color:var(--violet); }