/* Portfolio page. Loaded AFTER /styles.css (provides vars, header, footer,
   drawer, buttons). */

.pf-page-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}
@media (max-width: 980px) {
  .pf-page-main { padding: 96px 20px 56px; }
}

.breadcrumbs {
  font-size: 0.85rem;
  color: #6b7178;
  margin-bottom: 28px;
}
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--navy-800, #313f4a); }
.breadcrumbs span[aria-current] { color: var(--navy-800, #313f4a); }

.pf-page-head { margin-bottom: 40px; }
.pf-page-head h1 {
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 500;
  color: var(--navy-800, #313f4a);
  letter-spacing: 0.01em;
}
.pf-page-head p {
  margin-top: 12px;
  color: #57626b;
  max-width: 60ch;
}

.pf-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.pf-tile {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius, 2px);
  overflow: hidden;
  background: var(--cream-100, #f6f0e9);
}
.pf-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pf-tile:hover img { transform: scale(1.05); }

.pf-cta {
  margin-top: 48px;
  text-align: center;
}