/* ============================================
   Portfolio Showcase — Front CSS v4 FINAL
   ============================================ */
:root {
  --psc-accent:      #0073aa;
  --psc-accent-dark: #005177;
  --psc-text:        #1a1a2e;
  --psc-muted:       #6b7280;
  --psc-border:      #e2e8f0;
  --psc-bg:          #f8fafc;
  --psc-shadow:      0 4px 24px rgba(0,0,0,.09);
  --psc-shadow-h:    0 12px 48px rgba(0,0,0,.16);
}

/* ══ Grid ══ */
.psc-grid { display:grid; gap:40px; margin:0 0 2.5em; }
.psc-cols-1 { grid-template-columns:1fr; }
.psc-cols-2 { grid-template-columns:repeat(auto-fill,minmax(460px,1fr)); }
.psc-cols-3 { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
@media(max-width:640px){
  .psc-cols-1,.psc-cols-2,.psc-cols-3 { grid-template-columns:1fr; }
}

/* ══ Card ══ */
.psc-card {
  background:#fff;
  border:1px solid var(--psc-border);
  border-radius:16px;
  box-shadow:var(--psc-shadow);
  overflow:hidden;
  transition:box-shadow .3s,transform .3s;
}
.psc-card:hover { box-shadow:var(--psc-shadow-h); transform:translateY(-4px); }

/* ══════════════════
   LAPTOP MOCKUP
══════════════════ */
.psc-laptop-wrap {
  padding:28px 28px 0;
  background:linear-gradient(160deg,#f1f5f9,#e2e8f0);
  border-bottom:1px solid var(--psc-border);
}
.psc-laptop {
  max-width:640px;
  margin:0 auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.2));
}

/* Lid */
.psc-lid {
  background:linear-gradient(180deg,#e8eaed,#d1d5db);
  border-radius:10px 10px 0 0;
  padding:10px 10px 0;
  border:1.5px solid #c8cbd0;
  border-bottom:none;
}
.psc-lid-camera {
  width:7px; height:7px;
  border-radius:50%;
  background:#9ca3af;
  margin:0 auto 7px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.psc-screen-bezel {
  background:#111;
  border-radius:4px 4px 0 0;
  padding:3px 3px 0;
}

/* ── THE SCREEN ── */
.psc-screen {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#0f172a;
  overflow:hidden;
  border-radius:2px 2px 0 0;
}

/* Thumbnail image */
.psc-screen-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
}

/* Preview iframe (scaled-down) */
.psc-screen-preview {
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.psc-screen-preview iframe {
  width:1366px; height:768px;
  border:none; display:block;
  transform-origin:top left;
}

/* Placeholder */
.psc-screen-placeholder {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; color:rgba(255,255,255,.3);
  font-family:sans-serif; font-size:.8rem;
}

/* ── LIVE iframe — Desktop width, scaled down ── */
.psc-screen-live-wrap {
  display:none;
  position:absolute; inset:0;
  overflow:hidden;
  z-index:10;
  background:#fff;
}
.psc-screen.psc-is-live .psc-screen-live-wrap {
  display:block;
}
.psc-screen-live {
  /* Fixed desktop width — scaled down by JS like the preview iframe */
  width:1280px;
  height:720px;
  border:none;
  display:block;
  transform-origin:top left;
  /* JS will set: transform: scale(containerWidth / 1280) */
}

/* Spinner — shown while loading */
.psc-screen-spinner {
  display:none;
  position:absolute; inset:0;
  align-items:center; justify-content:center;
  flex-direction:column; gap:10px;
  background:rgba(15,23,42,.9);
  z-index:11;
}
.psc-screen.psc-is-loading .psc-screen-spinner {
  display:flex;
}
.psc-spinner-ring {
  width:34px; height:34px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--psc-accent);
  border-radius:50%;
  animation:psc-spin .7s linear infinite;
}
.psc-screen-spinner span {
  color:rgba(255,255,255,.6);
  font-size:.78rem; font-family:sans-serif;
}
@keyframes psc-spin{ to{ transform:rotate(360deg); } }

/* Close button — top-right of screen */
.psc-screen-close {
  display:none;
  position:absolute; top:8px; right:8px;
  z-index:12;
  background:rgba(0,0,0,.55);
  color:#fff; border:none;
  border-radius:50%;
  width:28px; height:28px;
  font-size:14px; cursor:pointer;
  align-items:center; justify-content:center;
  transition:background .2s;
}
.psc-screen.psc-is-live .psc-screen-close { display:flex; }
.psc-screen-close:hover { background:rgba(200,0,0,.8); }

/* Hinge */
.psc-hinge {
  height:5px;
  background:linear-gradient(90deg,#888,#bbb,#888);
}

/* Base */
.psc-base {
  background:linear-gradient(180deg,#d1d5db,#b8bbc0);
  border-radius:0 0 8px 8px;
  border:1.5px solid #c0c4c9; border-top:none;
  padding:6px 14px 10px;
  display:flex; align-items:center; justify-content:center;
}
.psc-keyboard { display:flex; flex-direction:column; gap:3px; width:75%; }
.psc-key-row  { display:flex; gap:2px; justify-content:center; }
.psc-key {
  flex:1; max-width:22px; height:7px;
  background:rgba(0,0,0,.13); border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.3);
}
.psc-key-space { max-width:110px; flex:3; }
.psc-touchpad {
  width:50px; height:14px;
  background:rgba(0,0,0,.1); border-radius:4px;
  margin:3px auto 0;
}

/* ══ Card Body ══ */
.psc-card-body {
  padding:16px 22px 20px;
  display:flex; align-items:center;
  justify-content:space-between; gap:14px;
  flex-wrap:wrap;
}
.psc-card-info { flex:1; min-width:0; }
.psc-card-title {
  font-size:1rem; font-weight:700;
  color:var(--psc-text); margin:0 0 4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.psc-card-desc {
  font-size:.82rem; color:var(--psc-muted);
  margin:0 0 8px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.psc-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.psc-tag {
  background:var(--psc-bg); border:1px solid var(--psc-border);
  border-radius:100px; font-size:.7rem; padding:2px 9px; color:var(--psc-muted);
}

/* CTA Button */
.psc-show-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 22px;
  background:var(--psc-accent); color:#fff;
  border:none; border-radius:10px;
  font-size:.875rem; font-weight:700;
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  box-shadow:0 3px 12px rgba(0,115,170,.3);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.psc-show-btn:hover {
  background:var(--psc-accent-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,115,170,.4);
}
@media(max-width:640px){
  .psc-card-body { flex-direction:column; }
  .psc-show-btn  { width:100%; justify-content:center; }
}
.psc-empty { color:var(--psc-muted); padding:2em; text-align:center; }