/* ============================================================
   ALIFY — portfolio-archive.css · /portfolio filterable grid
   ============================================================ */

.pf-hero { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); }
.pf-hero__grid { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1024px) {
  .pf-hero__grid { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .pf-hero__lead { grid-column: 1 / 8; }
  .pf-hero__aside { grid-column: 9 / 13; justify-self: end; }
}

/* filter bar */
.filterbar { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.filterbar__btn {
  font-family: var(--ff-mono);
  font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  padding: .65em 1.3em;
  transition: color .3s, border-color .3s, background .3s;
}
.filterbar__btn:hover { color: var(--off); border-color: var(--teal-2); }
.filterbar__btn.is-active { color: var(--ink); background: var(--green); border-color: var(--green); }
.filterbar__count { margin-left: auto; font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .12em; color: var(--faint); }

/* grid — compact 4:3 cards, capped so they never sprawl */
.pf-grid { display: grid; gap: 2rem 1.75rem; margin: 3rem auto 0; max-width: 1080px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pf-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } }

.pf-card { text-decoration: none; display: block; position: relative; }
.pf-card__frame { position: relative; }
.pf-card__frame::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--green);
  border-radius: var(--r);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.pf-card:hover .pf-card__frame::after { opacity: 1; }
.pf-card__badge { position: absolute; z-index: 2; bottom: .9rem; left: .9rem; }
.pf-card__meta { display: grid; gap: .35rem; margin-top: 1.1rem; }
.pf-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pf-card__title { font-family: var(--ff-display); font-weight: 600; font-size: 1.35rem; color: var(--off); transition: color .3s; }
.pf-card:hover .pf-card__title { color: var(--green); }
.pf-card__cat { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-2); white-space: nowrap; }
.pf-card__line { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--muted); }
.pf-card__result { font-family: var(--ff-mono); font-size: .76rem; color: var(--teal-2); }
.pf-card__soon { color: var(--faint); font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.pf-empty { margin-top: 3rem; padding: 3rem; border: 1px dashed var(--line-2); border-radius: var(--r); text-align: center; color: var(--muted); }