/* ============================================================
   PORTFOLIO — the /portfolio/ page: a header that clears the
   fixed masthead, then a grid of project cards with a screenshot,
   the problem in a paragraph, and a link to the product page.
   ============================================================ */

.folio-hero { padding-top: 9rem; }

.folio-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .folio-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .folio-grid { grid-template-columns: repeat(3, 1fr); } }

.folio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 320ms ease, box-shadow 320ms ease, background-color 320ms ease;
}
.folio-card:hover {
  background: var(--panel-2);
  border-color: var(--slab-edge);
  box-shadow: 0 26px 50px -30px rgba(0,0,0,0.55);
}

/* screenshots are a mix of tall phone captures and wide desktop ones;
   a fixed frame cropped from the top keeps the grid even */
.folio-shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.folio-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.folio-card:hover .folio-shot img { transform: scale(1.03); }

.folio-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
}
.folio-body p { margin: 0; color: var(--ink-2); font-size: 0.965rem; }
/* cards are narrower than the home page's work grid, so the sector sits
   under the name rather than beside it */
.folio-body .case-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

.folio-tags {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.folio-tags li {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.26rem 0.6rem;
}

.folio-foot {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.folio-status { color: var(--ink-3); white-space: nowrap; }
.folio-status b { color: var(--accent); font-weight: 600; }

/* the whole card is the link target; the visible link stretches over it */
.folio-link {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.folio-link::after { content: ""; position: absolute; inset: 0; }
.folio-card:hover .folio-link { color: var(--accent); }

.folio-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.folio-cta h2 { font-size: var(--t-h2); }