/* ════════════════════════════════════════════════════
   sections.css  —  Projects · Skills · Certs · About · Contact
   Cohesion: portfolio content sections styling
════════════════════════════════════════════════════ */

/* ══ PROJECTS ══ */
.projects-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}

.project-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  transition: transform .3s, box-shadow .3s;
  backdrop-filter:blur(20px); position:relative;
}
.project-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,229,255,.05) 0%,transparent 60%);
  opacity:0; transition:opacity .3s;
}
.project-card:hover::before { opacity:1; }
.project-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(0,229,255,.1);
  border-color:rgba(0,229,255,.3);
}

.project-img {
  width:100%; height:200px; object-fit:cover; display:block;
  filter:saturate(.8) brightness(.9); transition:filter .3s;
}
.project-card:hover .project-img { filter:saturate(1) brightness(1); }

.project-body { padding:24px; }
.project-title { font-size:20px; font-weight:700; margin-bottom:8px; color:#fff; }
.project-desc  { color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:16px; }

.tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tag {
  padding:4px 12px; border-radius:100px;
  font-size:11px; font-weight:600; font-family:var(--font-mono);
  background:rgba(0,229,255,.08); color:var(--cyan);
  border:1px solid rgba(0,229,255,.15);
}

.project-links { display:flex; gap:12px; }
.project-link {
  padding:8px 20px; border-radius:6px; font-size:13px;
  font-weight:600; text-decoration:none; text-transform:uppercase;
  letter-spacing:1px; transition:all .2s;
}
.project-link.live { background:var(--cyan); color:#000; }
.project-link.live:hover { box-shadow:0 0 20px rgba(0,229,255,.5); }
.project-link.gh  { border:1px solid var(--border); color:var(--text); }
.project-link.gh:hover { border-color:var(--cyan); color:var(--cyan); }

/* ══ SKILLS ══ */
#skills { background:var(--bg2); }

.skills-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px;
}

.skill-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:12px; padding:24px 16px; text-align:center;
  transition:all .3s; position:relative; overflow:hidden;
}
.skill-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(to right,var(--cyan),var(--blue));
  transform:scaleX(0); transition:transform .3s;
}
.skill-card:hover::after { transform:scaleX(1); }
.skill-card:hover {
  border-color:rgba(0,229,255,.3); transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,229,255,.08);
}
.skill-icon  { font-size:28px; margin-bottom:10px; }
.skill-name  { font-size:13px; font-weight:600; color:var(--text); font-family:var(--font-mono); }

/* ══ CERTIFICATES ══ */
.certs-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.cert-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:24px;
  display:flex; gap:16px; align-items:flex-start;
  transition:all .3s; text-decoration:none;
  backdrop-filter:blur(10px);
}
.cert-card:hover {
  border-color:rgba(0,229,255,.4); transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,229,255,.08);
}
.cert-num  { font-family:var(--font-display); font-size:40px; line-height:1; color:rgba(0,229,255,.15); min-width:40px; }
.cert-info { flex:1; }
.cert-title{ font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; }
.cert-view {
  font-size:12px; color:var(--cyan); font-family:var(--font-mono);
  letter-spacing:1px; display:flex; align-items:center; gap:6px;
}

/* ══ ABOUT ══ */
#about { background:var(--bg2); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

.about-text p { color:var(--muted); font-size:16px; line-height:1.9; margin-bottom:16px; }
.about-accent  { color:var(--cyan) !important; font-weight:500; font-family:var(--font-mono); font-size:14px; margin-top:24px; }

.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.stat {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:12px; padding:24px;
}
.stat-num   { font-family:var(--font-display); font-size:48px; color:var(--cyan); line-height:1; }
.stat-label { font-size:13px; color:var(--muted); margin-top:6px; font-weight:500; }

/* ══ CONTACT ══ */
.contact-inner { max-width:640px; margin:0 auto; text-align:center; }
.contact-inner .section-title { margin-bottom:16px; }
.contact-desc { color:var(--muted); font-size:16px; line-height:1.8; margin-bottom:40px; }

.contact-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 48px; background:transparent;
  border:1px solid var(--cyan); color:var(--cyan);
  font-weight:700; font-size:14px; letter-spacing:2px;
  text-transform:uppercase; text-decoration:none; border-radius:4px;
  font-family:var(--font-mono); transition:all .3s;
}
.contact-btn:hover { background:var(--cyan); color:#000; box-shadow:0 0 40px rgba(0,229,255,.4); }

/* Responsive sections */
@media(max-width:900px){
  #about { grid-template-columns:1fr; gap:40px; }
}