/* ============================================================
   PRINCE ALEX DIGITAL — PORTFOLIO PAGE  (portfolio.css)
   Relies on /assets/css/pad.css for the design system.
   ============================================================ */

/* ---------- PAGE ---------- */
.portfolio-list{padding-top:72px;}

/* ---------- EMPTY STATE (no published work in Firestore) ---------- */
.pf-empty{text-align:center;padding:64px 20px;}
.pf-empty-icon{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;font-size:1.9rem;color:var(--royal);
  background:rgba(30,58,138,0.08);border:1px solid rgba(30,58,138,0.22);margin-bottom:18px;
}
html[data-theme="dark"] .pf-empty-icon{
  color:var(--teal-bright);background:rgba(96,165,250,0.14);border-color:rgba(96,165,250,0.3);
}
.pf-empty h3{margin-bottom:10px;}
.pf-empty p{color:var(--muted);max-width:52ch;margin:0 auto 24px;}
.pf-empty-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.pf-empty[hidden]{display:none !important;}

/* ---------- PAGE HERO ---------- */
.page-hero h1{max-width:860px;}

/* ---------- LIVE PORTFOLIO (admin-driven) ---------- */
[hidden]{display:none !important;}
.portfolio-dynamic{padding-top:24px;}
.portfolio-status{
  font-family:var(--font-mono);font-size:0.82rem;color:var(--soft);
  padding:40px 0;text-align:center;
}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pf-card{display:flex;flex-direction:column;overflow:hidden;}
.pf-media{
  position:relative;aspect-ratio:16/10;flex:none;
  background:var(--surface-2);overflow:hidden;
  border-bottom:1px solid var(--line);
}
.pf-media-img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.pf-card:hover .pf-media-img{transform:scale(1.04);}
.pf-monogram{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:3rem;color:#fff;
  background:linear-gradient(135deg, var(--navy), var(--royal));
}
.pf-card:hover .pf-monogram{background:linear-gradient(135deg, var(--teal), var(--royal));}
.pf-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;}
.pf-title{font-size:1.15rem;margin-bottom:8px;}
.pf-desc{font-size:0.93rem;flex:1;}
.pf-link{display:inline-block;margin-top:auto;padding-top:18px;color:var(--royal);font-weight:600;font-size:0.9rem;}
.pf-link:hover{color:var(--teal);}

/* Swipe hint — shown on touch-sized screens only */
.portfolio-swipe-hint{display:none;}

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

/* Mobile: horizontal snap slider instead of a long stacked column */
@media (max-width:640px){
  .portfolio-swipe-hint{
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin:-6px 0 18px;
    font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--soft);
  }
  .portfolio-swipe-hint i{color:var(--teal);}

  /* Admin project cards */
  .portfolio-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:4px 4px 24px;
    scrollbar-width:none; /* Firefox */
  }
  .portfolio-grid::-webkit-scrollbar{display:none;} /* Chrome/Safari/Edge */
  .pf-card{
    flex:0 0 84%;               /* each card is a slide, next one peeks */
    scroll-snap-align:start;
    min-width:0;
  }
  .pf-card .pf-media{aspect-ratio:16/10;}

}