/* projects.css */
.projects-hero { text-align: left; }
.projects-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1000px; margin: 0 auto; align-items: center; position: relative; z-index: 1; }

/* dark btn system for label badge */
.projects-label-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--btn-dark); color: white;
  border-radius: 999px; padding: 9px 22px;
  font-size: 0.85rem; font-weight: 700; margin-bottom: 18px;
  box-shadow: 0 6px 0 var(--btn-light), 0 10px 22px rgba(86,204,242,0.18);
  transition: transform 0.12s, box-shadow 0.12s;
}
.projects-label-badge:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--btn-light); }
.label-divider { color: var(--btn-light); font-size: 1.1rem; font-weight: 900; }

.progress-bar-wrap {
  background: white; border-radius: var(--radius); padding: 22px 26px;
  box-shadow: 0 7px 0 var(--btn-light), 0 14px 28px rgba(86,204,242,0.12);
}
.progress-label { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; font-weight: 500; }
.progress-count { color: var(--btn-dark); font-weight: 700; font-family: var(--font-heading); font-size: 1rem; }
.progress-track { height: 14px; background: rgba(8,38,87,0.08); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--btn-dark), var(--btn-light));
  border-radius: 999px;
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
}

/* progress dots with fill line */
.progress-dots { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pdot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(8,38,87,0.1); transition: background 0.4s, box-shadow 0.4s;
  flex-shrink: 0;
}
.pdot.active {
  background: var(--btn-dark);
  box-shadow: 0 0 0 3px rgba(86,204,242,0.35);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 3px rgba(86,204,242,0.35)} 50%{box-shadow:0 0 0 5px rgba(86,204,242,0.15)} }

.projects-section { padding: var(--section-pad); }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }

.project-card {
  background: white; border-radius: var(--radius); padding: 24px;
  box-shadow: 0 7px 0 var(--shadow-charcoal), 0 14px 30px rgba(35,60,102,0.15);
  border: 1.5px solid rgba(35,60,102,0.1);
  transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden;
}
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--btn-fill), var(--btn-shadow)); }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 12px 0 var(--shadow-charcoal), 0 22px 44px rgba(35,60,102,0.22); }
.project-card.locked { opacity: 0.65; background: var(--bg); }
.project-card.done::before { background: linear-gradient(90deg, #1a7a3a, var(--btn-light)); }

.proj-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.proj-day { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.proj-status { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.done-badge { background: #e8fff0; color: #1a7a3a; }
.wip-badge { background: #fff8e1; color: #b8860b; }
.locked-badge { background: rgba(8,38,87,0.07); color: var(--muted); }

.project-card h3 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-dark); margin-bottom: 8px; }
.project-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.proj-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.proj-tags span { font-size: 0.72rem; background: rgba(8,38,87,0.06); color: var(--btn-dark); padding: 3px 10px; border-radius: 999px; font-weight: 600; border: 1px solid rgba(8,38,87,0.1); }
.proj-links { display: flex; gap: 12px; }
.proj-link { font-size: 0.82rem; color: var(--btn-dark); font-weight: 600; text-decoration: none; }
.proj-link:hover { text-decoration: underline; }
.proj-link.yt { color: #c00; }
.proj-link.muted { color: var(--muted); pointer-events: none; }

@media (max-width: 768px) {
  .projects-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .projects-hero .page-title { text-align: center !important; }
  .projects-hero .page-sub { text-align: center !important; margin: 0 auto !important; }
}