/* ============================================================
   PROJECT VIEWER + WEBSITE COLLECTION — shared styles
   Used by index.html and websites.html
   ============================================================ */

:root{
  --wc-business:#4f8dfc;
  --wc-business-2:#1e3a8a;
  --wc-food:#ff8a3d;
  --wc-food-2:#c2410c;
  --wc-store:#22c55e;
  --wc-store-2:#0f766e;
  --wc-personal:#c084fc;
  --wc-personal-2:#db2777;
}

/* ---------- Section header shared ---------- */
.wc-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.wc-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.25rem;
}
.wcard{
  position:relative;
  grid-column:span 12;
  border-radius:20px;
  border:1px solid var(--card-border);
  background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
@media(min-width:768px){
  .wcard{ grid-column:span 6; }
  .wcard[data-cat="business"]{ grid-column:span 7; }
  .wcard[data-cat="food"]{ grid-column:span 5; }
  .wcard[data-cat="store"]{ grid-column:span 5; }
  .wcard[data-cat="personal"]{ grid-column:span 7; }
}
.wcard:hover{
  transform:translateY(-5px);
  border-color:var(--c1);
  box-shadow:0 24px 60px -24px var(--c1a);
}
.wcard .wcard-glow{
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 60% at 100% 0%, var(--c1a), transparent 70%);
}
.wcard-body{
  position:relative; z-index:1;
  padding:1.75rem 1.75rem 1.5rem;
  display:flex; flex-direction:column; height:100%;
}
.wcard-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem;
}
.wcard-index{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem;
  color:var(--text-faint);
}
.wcard-icon{
  width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--c1), var(--c2));
  color:#04050a; font-size:1.05rem; flex-shrink:0;
}
.wcard-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; font-size:1.3rem; margin-bottom:.35rem; letter-spacing:-.01em;
}
.wcard-tagline{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c1); margin-bottom:.85rem;
}
.wcard-desc{
  font-size:.88rem; line-height:1.55; color:var(--text-muted); margin-bottom:1.3rem;
}

/* mini preview mockup, distinct per category */
.wcard-preview{
  border-radius:12px; border:1px solid var(--card-border);
  background:rgba(0,0,0,0.35);
  height:96px; margin-bottom:1.3rem; overflow:hidden; position:relative;
}
.wcard-preview .p-bar{
  height:18px; display:flex; align-items:center; gap:4px; padding:0 8px;
  background:rgba(255,255,255,0.04); border-bottom:1px solid var(--card-border);
}
.wcard-preview .p-dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.25); }
.wcard-preview .p-body{ padding:10px; display:flex; gap:8px; height:calc(100% - 18px); }

/* business: corporate columns */
.wcard[data-cat="business"] .p-body{ flex-direction:column; gap:5px; justify-content:center; }
.wcard[data-cat="business"] .p-body span{ display:block; height:6px; border-radius:3px; background:linear-gradient(90deg,var(--c1),transparent); }
.wcard[data-cat="business"] .p-body span:nth-child(1){ width:55%; }
.wcard[data-cat="business"] .p-body span:nth-child(2){ width:85%; background:rgba(255,255,255,0.12); }
.wcard[data-cat="business"] .p-body span:nth-child(3){ width:70%; background:rgba(255,255,255,0.12); }

/* food: big image blocks */
.wcard[data-cat="food"] .p-body{ align-items:center; }
.wcard[data-cat="food"] .p-body i{ flex:1; height:100%; border-radius:8px; background:linear-gradient(135deg,var(--c1),var(--c2)); opacity:.55; }

/* store: product grid dots */
.wcard[data-cat="store"] .p-body{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; align-content:center; }
.wcard[data-cat="store"] .p-body i{ aspect-ratio:1; border-radius:6px; background:linear-gradient(135deg,var(--c1),var(--c2)); opacity:.45; }

/* personal: asymmetric circle + lines */
.wcard[data-cat="personal"] .p-body{ align-items:center; }
.wcard[data-cat="personal"] .p-body .p-circle{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); flex-shrink:0; }
.wcard[data-cat="personal"] .p-body .p-lines{ flex:1; display:flex; flex-direction:column; gap:5px; justify-content:center; }
.wcard[data-cat="personal"] .p-body .p-lines span{ display:block; height:5px; border-radius:3px; background:rgba(255,255,255,0.12); }
.wcard[data-cat="personal"] .p-body .p-lines span:first-child{ width:60%; background:linear-gradient(90deg,var(--c1),transparent); }

.wcard-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.wcard-count{ font-family:'IBM Plex Mono', monospace; font-size:.7rem; color:var(--text-faint); }
.wcard-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.15rem; border-radius:999px; font-size:.82rem; font-weight:600;
  background:linear-gradient(135deg,var(--c1),var(--c2)); color:#04050a;
  border:none; cursor:pointer; transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
.wcard-btn:hover{ opacity:.9; transform:translateX(2px); }

/* ============================================================
   FILTER BAR (used in websites.html)
   ============================================================ */
.wc-filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.wc-filter-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:.76rem; letter-spacing:.03em;
  padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid var(--card-border); background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all .2s ease;
}
.wc-filter-btn:hover{ border-color:var(--card-border-hover); color:var(--text); }
.wc-filter-btn.active{ background:var(--text); color:#04050a; border-color:var(--text); }

/* ============================================================
   PROJECT VIEWER MODAL
   ============================================================ */
#pv-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(2,3,6,0.86);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:2.5vh 3vw;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
#pv-overlay.open{ opacity:1; pointer-events:auto; }

#pv-modal{
  width:100%; max-width:1180px; height:88vh;
  display:flex; flex-direction:column;
  background:#0b0d12; border:1px solid var(--card-border);
  border-radius:18px; overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.7);
  transform:translateY(16px) scale(.98); transition:transform .3s ease;
}
#pv-overlay.open #pv-modal{ transform:translateY(0) scale(1); }

#pv-overlay.pv-fullscreen{ padding:0; }
#pv-overlay.pv-fullscreen #pv-modal{ max-width:100%; height:100vh; border-radius:0; border:none; }

.pv-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.25rem; border-bottom:1px solid var(--card-border);
  background:rgba(255,255,255,0.02); flex-wrap:wrap;
}
.pv-back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; color:var(--text-muted); background:none; border:none; cursor:pointer;
}
.pv-back:hover{ color:var(--text); }
.pv-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; }
.pv-topbar-actions{ display:flex; gap:.5rem; }
.pv-icon-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; padding:.5rem .85rem; border-radius:8px;
  border:1px solid var(--card-border); background:rgba(255,255,255,0.03); color:var(--text);
  cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.pv-icon-btn:hover{ border-color:var(--card-border-hover); background:rgba(255,255,255,0.07); }

/* browser chrome */
.pv-browserbar{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem; background:#141822; border-bottom:1px solid var(--card-border);
}
.pv-dots{ display:flex; gap:6px; flex-shrink:0; }
.pv-dots span{ width:10px; height:10px; border-radius:50%; }
.pv-dots span:nth-child(1){ background:#ff5f57; }
.pv-dots span:nth-child(2){ background:#febc2e; }
.pv-dots span:nth-child(3){ background:#28c840; }
.pv-urlbar{
  flex:1; min-width:0;
  font-family:'IBM Plex Mono', monospace; font-size:.76rem; color:var(--text-muted);
  background:rgba(0,0,0,0.35); border:1px solid var(--card-border); border-radius:999px;
  padding:.4rem .9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:.5rem;
}
.pv-urlbar i{ font-size:.7rem; color:#28c840; }

.pv-body{ position:relative; flex:1; background:#000; }
.pv-iframe{ width:100%; height:100%; border:0; display:block; background:#fff; }

.pv-loading{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
  background:#0b0d12; color:var(--text-muted); font-size:.85rem;
}
.pv-spinner{
  width:34px; height:34px; border-radius:50%;
  border:2.5px solid var(--card-border); border-top-color:var(--accent);
  animation:pv-spin .8s linear infinite;
}
@keyframes pv-spin{ to{ transform:rotate(360deg); } }

.pv-blocked{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:#0b0d12; text-align:center; padding:2rem;
}
.pv-blocked.show{ display:flex; }
.pv-blocked p{ max-width:360px; color:var(--text-muted); font-size:.9rem; line-height:1.5; }
.pv-blocked-icon{ font-size:1.8rem; color:var(--text-faint); }

@media (prefers-reduced-motion: reduce){
  #pv-overlay, #pv-modal, .wcard{ transition:none !important; }
}