/* ============================================================
   05e — PROJECTS SECTION
   Cards are rendered into #projects-list by
   js/modules/renderProjects.js from js/data/projects.js —
   there is no project markup written directly in index.html.
   ============================================================ */

.project-card{
  border-top:1px solid var(--line);
  padding: 52px 0;
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:48px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .25s ease-out;
}
.project-card:last-child{ border-bottom:1px solid var(--line); }

.project-domain{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  align-self:start;
  padding-top:6px;
}

.project-title{
  font-family:var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight:500;
  margin-bottom:6px;
  color:var(--ink);
}

.project-role{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-faint);
  margin-bottom:20px;
}

.project-points{ list-style:none; }
.project-points li{
  position:relative;
  padding-left:20px;
  color:var(--ink-dim);
  font-size:0.96rem;
  font-weight:300;
  margin-bottom:10px;
}
.project-points li::before{
  content:'';
  position:absolute; left:0; top:9px;
  width:6px; height:1px;
  background:var(--teal);
}

.project-stack{
  margin-top:20px;
  display:flex; flex-wrap:wrap; gap:8px;
}

/* ------------------------------------------------------------
   FUTURE — LIVE PROJECT DEMO STYLES (currently unused)
   Enable this alongside the matching JS block in
   js/modules/renderProjects.js → renderProjectMedia().
   Once a project has `deployedUrl` set in js/data/projects.js,
   its bullet-list description can be swapped for this embedded
   preview instead, without touching any other CSS.
   ------------------------------------------------------------

.project-demo-frame{
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--bg-soft);
}
.project-demo-frame iframe{
  width:100%; height:100%; border:0;
}
.project-demo-launch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--teal);
  border-bottom:1px solid rgba(79,209,197,0.35);
  padding-bottom:2px;
  transition: color .3s, border-color .3s;
}
.project-demo-launch:hover{ color:var(--ink); border-color:var(--ink); }

------------------------------------------------------------- */

@media (max-width: 760px){
  .project-card{ grid-template-columns: 1fr; gap:14px; }
}