/* ============================================================
   PORTFOLIO PAGE — COMPONENT STYLES
   Built on the shared RoyalCraft design tokens (styles/main.css).
   No token overrides — the gallery, banner, stats, testimonials,
   and CTA all reuse the homepage classes so this page is a
   seamless continuation of Home, About & Services.
   ============================================================ */

/* ----- Banner: keep the shared .page-banner, swap the image only ----- */
.page-banner .banner-bg{
  background-image: url('https://images.unsplash.com/photo-1616137148982-3c1c30134777?q=80&w=1800&auto=format&fit=crop');
}

/* ----- Intro featured image (mirrors .about-media, image on the right) ----- */
.pf-intro-media{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 4/5;
}
.pf-intro-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease);
}
.pf-intro-media:hover img{ transform: scale(1); }
.pf-intro-badge{
  position:absolute; bottom:24px; left:24px;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 18px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight:700;
  display:flex; flex-direction:column; line-height:1.2;
}
.pf-intro-badge .big{ font-size:1.9rem; }
.pf-intro-badge .small{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-family:var(--font-body); font-weight:600;
}

/* ----- Gallery overlay: add a location line under the title ----- */
.masonry-overlay .pf-loc{
  display:flex; align-items:center; gap:6px;
  margin-top:6px;
  font-size:.82rem; letter-spacing:.02em;
  color: rgba(244,241,234,.72);
}
.masonry-overlay .pf-loc svg{
  width:14px; height:14px; flex-shrink:0; stroke: var(--gold-soft);
}

/* ----- "Why clients choose us": force a clean 4-across row on desktop ----- */
@media(min-width:1024px){
  .why-grid.pf-reasons{ grid-template-columns: repeat(4,1fr); }
}

/* ----- Featured project meta list ----- */
.pf-meta{
  margin: 26px 0 30px;
  border-top: 1px solid var(--border-soft);
}
.pf-meta div{
  display:flex; justify-content:space-between; gap:20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.pf-meta dt{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--text-muted); font-weight:600;
}
.pf-meta dd{
  font-family: var(--font-display);
  font-size:1rem; color: var(--text-main); text-align:right;
}