/**
 * assets/css/portfolio.css
 * Styles for the Portfolio listing (archive) page: hero, filter bar,
 * grid cards, pagination. Enqueued ONLY on the portfolio archive via
 * aretesoft_portfolio_assets() in functions-portfolio.php.
 *
 * Uses the same design tokens as the rest of the site. If your theme's
 * global stylesheet doesn't already define these CSS custom properties,
 * uncomment the :root block below.
 */

/*
:root{
  --navy:#0D1117;--navy-2:#141B24;--ink:#0A0E13;--lime:#E9FC58;
  --paper:#F7F8F4;--line:rgba(233,252,88,.14);--line-soft:rgba(255,255,255,.08);
  --line-dk:rgba(13,17,23,.1);--mute:#8C97A5;--mute-2:#5E6975;--ink-mute:#5A6470;--r:14px;
}
*/

/* ---- Fix: don't rely on a scroll-reveal script that may not exist on
   this page. Content is visible by default; IF you already run an
   IntersectionObserver script sitewide that adds ".reveal.active", it
   will still animate normally since that rule is more specific. ---- */
.reveal{ opacity:1; transform:none; }
.reveal.active{ opacity:1; transform:none; }

/* ---- Portfolio grid ---- */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:40px;
}
.case.lg{ grid-column:span 2; }

.case{
  background:#fff;
  border-radius:var(--r,14px);
  overflow:hidden;
  border:1px solid var(--line-dk,rgba(13,17,23,.1));
  box-shadow:0 1px 2px rgba(13,17,23,.04);
  transition:transform .3s ease,box-shadow .3s ease;
}
.case:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -18px rgba(13,17,23,.18);
}

/* Fake browser "chrome" bar above each screenshot */
.case .chrome{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:#EEF0EA;
  border-bottom:1px solid var(--line-dk,rgba(13,17,23,.1));
}
.case .chrome .dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
}
.case .chrome .url{
  margin-left:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--ink-mute,#5A6470);
  background:#fff;
  border:1px solid var(--line-dk,rgba(13,17,23,.1));
  border-radius:6px;
  padding:3px 10px;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Screenshot / gradient area + hover overlay */
.case .screen{
  position:relative;
  overflow:hidden;
}
.case .screen .bg{
  transition:transform .6s ease;
}
.case:hover .screen .bg{
  transform:scale(1.05);
}

.case .reveal-ov{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  padding:20px;
  background:linear-gradient(180deg,rgba(13,17,23,0) 40%,rgba(13,17,23,.88) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.case:hover .reveal-ov{ opacity:1; }

.case .reveal-ov .result{
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:14.5px;
  line-height:1.35;
}
.case .reveal-ov .view{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--lime,#E9FC58);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:13.5px;
}
.case .reveal-ov .view svg{ transition:transform .2s ease; }
.case:hover .reveal-ov .view svg{ transform:translate(3px,-3px); }

/* Card info block below the screenshot */
.case .info{ padding:20px 22px 22px; }
.case .info .tag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:#11161D;
  background:var(--lime,#E9FC58);
  padding:5px 10px;
  border-radius:6px;
  margin-bottom:12px;
}
.case .info h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:19px;
  font-weight:600;
  margin:0 0 6px;
}
.case .info h3 a{ color:#11161D; text-decoration:none; }
.case .info h3 a:hover{ color:var(--ink-mute,#5A6470); }
.case .info .meta{
  font-size:13.5px;
  color:var(--ink-mute,#5A6470);
}

.pf-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--ink-mute,#5A6470);
  font-size:15px;
}

/* ---- Responsive ---- */
@media (max-width:960px){
  .pf-grid{ grid-template-columns:1fr; }
  .case.lg{ grid-column:span 1; }
}