/* =======================================
   PROJECTS — TEXT-ONLY (no images)
   ======================================= */

#projects .section{
  padding: clamp(48px, 6vw, 96px) 20px;
  color: var(--text-700);
}

.container{ width:min(var(--container),100%); margin-inline:auto; }

/* ---------- Intro ---------- */
.proj-hero h1{
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--text-900);
}
.proj-hero .lead{ max-width: 70ch; line-height: 1.75; }

/* ---------- Section bands ---------- */
.proj-block{ padding: clamp(34px, 4.8vw, 56px) 0; }
.proj-block + .proj-block{ margin-top: 10px; }

.soft-lavender{ background: rgba(125,91,166,.06); }
.soft-yellow  { background: rgba(251,192,45,.14); }
.soft-blue    { background: rgba(0,122,255,.08); }
.soft-green   { background: rgba(52,199,89,.10); }
.soft-orange  { background: rgba(255,149,0,.12); }

/* ---------- Grid: we collapse to single column since there is no art ---------- */
.proj-grid{
  display:grid;
  grid-template-columns: 1fr;       /* single column */
  align-items: start;
  gap: 0;
}

/* Hide the media placeholder completely */
.proj-art{ display:none !important; }

/* ---------- Project card (text) ---------- */
.proj-copy{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding: clamp(20px, 3.2vw, 28px);
  box-shadow: 0 22px 48px rgba(0,0,0,.08);
}

.proj-copy h2{
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  color: var(--text-900);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.blurb{
  margin: 8px 0 14px;
  color: var(--text-700);
  line-height: 1.8;
  font-weight: 500;
}

.stack{
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 8px 0 10px; padding:0;
}
.stack .pill{
  list-style:none; font-size:12px; font-weight:800;
  padding:6px 10px; border-radius:999px;
  color: var(--brand-purple);
  background: rgba(125,91,166,.12);
  border:1px solid rgba(125,91,166,.22);
}

.points{
  margin: 10px 0 0; padding-left:18px;
  line-height: 1.75; color: var(--text-700);
}
.points li{ margin: 4px 0; }

/* Sub-variants inside a project (e.g., Lite / Pro) */
.variant{ margin-top: 12px; }
.variant .v{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  margin: 10px 0 4px;
  color: var(--text-900);
}

/* Optional actions row (put a link inside .actions in your HTML when you have a demo) */
.actions{
  margin-top: 14px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.demo-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  background: var(--brand-purple);
  color:#fff;
  box-shadow: 0 10px 22px rgba(125,91,166,.22);
}
.demo-btn:hover{ filter:brightness(1.05); }
.demo-ghost{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  color: var(--brand-purple);
  border:2px solid var(--brand-purple);
}


.demo-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  /* add fallback + force text color */
  background: var(--brand-purple, #7D5BA6);
  color:#fff !important;
  box-shadow: 0 10px 22px rgba(125,91,166,.22);
}
.demo-btn:hover{ filter:brightness(1.05); }


/* ---------- CTA ---------- */
.proj-cta .cta-card{
  background:#fff; border:1px solid var(--border);
  border-radius:18px; padding: clamp(22px, 3.4vw, 32px);
  box-shadow: 0 24px 54px rgba(0,0,0,.12);
  text-align:center;
}
.proj-cta h2{
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900; color: var(--text-900); margin:0 0 6px;
}
.proj-cta .lead{ color: var(--text-700); margin:0 0 14px; }
.cta-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* Buttons matching theme */
.btn-primary{
  display:inline-block; padding:12px 18px; border-radius: var(--radius);
  background: var(--brand-purple); color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 10px 24px rgba(125,91,166,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{
  display:inline-block; padding:12px 18px; border-radius: var(--radius);
  text-decoration:none; font-weight:700;
  color: var(--brand-purple); border:2px solid var(--brand-purple);
}

/* Fix CTA button text visibility */
.proj-cta .btn-primary {
  background: var(--brand-purple, #7D5BA6);
  color: #fff !important;
  font-weight: 800;
}

.proj-cta .btn-ghost {
  color: var(--brand-purple, #7D5BA6);
  border: 2px solid var(--brand-purple, #7D5BA6);
  font-weight: 800;
}


/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .proj-copy h2{ font-size: 22px; }
  .stack .pill{ font-size:11px; padding:5px 9px; }
}