/* ============================================
   PORTFOLIO HERO — intro text, project types, numbers
   ============================================ */

.pf-hero { border-bottom: 1px solid var(--c-line); margin-bottom: var(--section-pad); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.pf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }

.pf-lead { max-width: 38em; margin: 1.4rem 0 0; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.8; color: var(--c-text); }

.pf-cats { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-cats li { padding: 0.45rem 0.9rem; border: 1px solid var(--c-line); border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-dim); }

.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.pf-btn { display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 2rem; background: var(--c-text-strong); color: var(--c-bg); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; transition: background 0.3s; }
.pf-btn:hover { background: var(--c-accent); }
.pf-link { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pf-link:hover { color: var(--c-text-strong); }

.pf-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--c-text-strong); }
.pf-stats li { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.3rem 1rem 1.3rem 0; border-bottom: 1px solid var(--c-line); }
.pf-stats li:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--c-line); }
.pf-stats strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.pf-stats span { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-dim); }

#portfolio-projects { scroll-margin-top: 90px; }

@media (max-width: 900px) {
  .pf-hero-grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 480px) {
  .pf-actions { flex-direction: column; align-items: flex-start; }
}

/* Links from the list to each project page */
.project-hero-link { display: block; }
.project-title a { color: inherit; text-decoration: none; }
.project-title a:hover { color: var(--c-accent); }
.project-more { align-self: flex-end; white-space: nowrap; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.project-more:hover { color: var(--c-text-strong); }