/* Portfolio page + homepage teaser styles — extends css/style.css */

/* ===== Full Portfolio Page ===== */
.portfolio-body{ background: var(--bg-0); }
.pf-main{ padding-top: 90px; }

.pf-hero{ padding: 50px 0 20px; text-align: center; }
.pf-hero-inner{ max-width: 760px; margin: 0 auto; }
.pf-hero h1{ font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 16px; }
.pf-hero-sub{ color: var(--text-1); font-size: 1.05rem; }

.pf-section{ padding: 60px 0; }
.pf-section-head{ max-width: 720px; margin: 0 auto 40px; text-align: center; }

.portfolio-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.portfolio-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.portfolio-card:hover{ transform: translateY(-5px); border-color: rgba(94,234,212,0.3); }
.pf-card-icon{
  width: 46px; height: 46px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(94,234,212,0.15), rgba(129,140,248,0.15));
  color: var(--accent); font-size: 1.2rem; margin-bottom: 16px;
}
.portfolio-card h3{ font-size: 1.1rem; margin-bottom: 4px; }
.portfolio-card h3 a{ color: var(--text-0); }
.portfolio-card h3 a:hover{ color: var(--accent); }
.pf-badge{
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--accent-2); text-transform: uppercase; margin-bottom: 12px;
}
.portfolio-card p{ font-size: 0.9rem; color: var(--text-2); margin-bottom: 14px; }
.pf-card-link{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--accent);
}
.pf-card-link:hover{ text-decoration: underline; }

@media (max-width: 860px){ .portfolio-grid{ grid-template-columns: 1fr; } }

.pf-builder-section{ padding: 70px 0 100px; text-align: center; }
.pf-builder-card{
  max-width: 760px; margin: 0 auto;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
}
.pf-builder-card p{ color: var(--text-1); font-size: 1.02rem; margin-bottom: 26px; }
.pf-builder-actions{ display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 480px){ .pf-builder-actions{ flex-direction: column; } .pf-builder-actions .btn{ width: 100%; } }
.pf-footer{ padding: 30px 0; }
.pf-footer a{ color: var(--accent); }

/* ===== Homepage teaser section ===== */
.portfolio-teaser-section{ background: var(--bg-1); }
.pf-teaser-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px;
}
.pf-teaser-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.pf-teaser-card:hover{ transform: translateY(-4px); border-color: rgba(94,234,212,0.3); }
.pf-teaser-card i{ font-size: 1.4rem; color: var(--accent); margin-bottom: 12px; display:block; }
.pf-teaser-card h4{ font-size: 0.98rem; margin-bottom: 6px; }
.pf-teaser-card p{ font-size: 0.82rem; color: var(--text-2); margin: 0; }
.portfolio-teaser-cta{ text-align: center; }

@media (max-width: 980px){ .pf-teaser-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .pf-teaser-grid{ grid-template-columns: 1fr; } }