/* ============================================================
   IMPACT Learning Hub — portfolio page
   Depends on style.css, layout.css, home.css (photo-slot)
   ============================================================ */

.portfolio-hero{ padding-block: 48px 8px; }
.portfolio-hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.portfolio-hero p{ color: var(--ink-soft); font-size: var(--step-1); margin-top: 12px; max-width: 55ch; }

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.portfolio-card{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.portfolio-card .photo-slot{ aspect-ratio: 4/3; border-radius: 0; border-width: 0 0 1.5px 0; }
.portfolio-body{ padding: 16px; }
.portfolio-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: 8px;
}
.portfolio-tag i{ width: 8px; height: 8px; border-radius: 50%; }
.portfolio-card h3{ font-size: var(--step-1); margin-bottom: 6px; }
.portfolio-card p{ color: var(--ink-soft); font-size: var(--step--1); margin: 0; }

.sample-note{
  background: #FBE7C6;
  color: #7A4A00;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: var(--step--1);
  margin-bottom: 24px;
}

@media (max-width: 900px){
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .portfolio-grid{ grid-template-columns: 1fr; }
}