/* ================================================
   RESUME PAGE — resume.css
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: #f0f4f8;
  color: #1e293b;
  line-height: 1.6;
}

.resume-wrapper { max-width: 860px; margin: 40px auto 60px; padding: 0 20px; }

.resume-actions {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: gap;
}
.resume-actions a.back-link {
  font-size: 0.88rem; color: #64748b; display: flex; align-items: center; gap: 6px;
  text-decoration: none; transition: color 0.2s;
}
.resume-actions a.back-link:hover { color: #00d4ff; }
.print-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #00d4ff, #0099bb);
  color: #fff; font-size: 0.875rem; font-weight: 600; transition: all 0.2s;
}
.print-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,212,255,0.3); }

/* Resume Card */
.resume-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* Header */
.resume-header {
  background: linear-gradient(135deg, #050c1a 0%, #0d1829 60%, #0a1628 100%);
  padding: 48px 48px 40px;
  position: relative; overflow: hidden;
}
.resume-header::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.resume-header::after {
  content: ''; position: absolute; top: -60px; right: -60px; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.08), transparent);
}
.rh-content { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; }
.rh-left { display: flex; align-items: flex-start; gap: 24px; }
.rh-avatar { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #00d4ff; overflow: hidden; flex-shrink: 0; background: #fff; box-shadow: 0 0 20px rgba(0,212,255,0.2); }
.rh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rh-info { display: flex; flex-direction: column; }
.rh-name { font-size: 2rem; font-weight: 800; color: #e2eaf5; margin-bottom: 4px; }
.rh-title { font-size: 1.05rem; color: #00d4ff; font-weight: 500; margin-bottom: 16px; }
.rh-summary { font-size: 0.88rem; color: #8899b0; max-width: 440px; line-height: 1.65; }

.rh-contact { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rc-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: #8899b0;
}
.rc-item svg { color: #00d4ff; flex-shrink: 0; }

/* Body */
.resume-body { padding: 40px 48px; display: grid; grid-template-columns: 1fr 200px; gap: 40px; }

/* Left side */
.resume-left {}

.r-section { margin-bottom: 36px; }
.r-section:last-child { margin-bottom: 0; }

.r-section-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: #00d4ff; border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.r-section-title::before { content: ''; width: 3px; height: 14px; background: #00d4ff; border-radius: 2px; display: inline-block; }

/* EXP */
.r-exp-item { margin-bottom: 22px; }
.r-exp-item:last-child { margin-bottom: 0; }
.r-exp-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }
.r-exp-title { font-size: 0.95rem; font-weight: 700; color: #1e293b; }
.r-exp-date { font-size: 0.78rem; color: #94a3b8; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.r-exp-company { font-size: 0.82rem; color: #00d4ff; font-weight: 500; margin-bottom: 8px; }
.r-exp-points { padding-left: 0; display: flex; flex-direction: column; gap: 4px; }
.r-exp-points li { font-size: 0.82rem; color: #475569; padding-left: 14px; position: relative; }
.r-exp-points li::before { content: '•'; position: absolute; left: 4px; color: #00d4ff; }

/* Right sidebar */
.resume-right {}
.r-skill-group { margin-bottom: 20px; }
.r-skill-group-name { font-size: 0.78rem; font-weight: 700; color: #334155; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.r-skill-list { display: flex; flex-wrap: wrap; gap: 5px; }
.r-skill-tag {
  font-size: 0.72rem; padding: 3px 9px; border-radius: 20px;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}

.r-lang-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.r-lang-name { font-size: 0.82rem; color: #334155; font-weight: 500; }
.r-lang-lvl { font-size: 0.72rem; color: #94a3b8; }

.r-cert-item { font-size: 0.82rem; color: #475569; padding: 6px 0; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 6px; }
.r-cert-item::before { content: '🎯'; font-size: 0.75rem; }

@media print {
  body { background: #fff; }
  .resume-actions { display: none; }
  .resume-wrapper { margin: 0; padding: 0; max-width: 100%; }
  .resume-card { box-shadow: none; border-radius: 0; }
}

@media (max-width: 700px) {
  .resume-header { padding: 32px 24px; }
  .rh-content { flex-direction: column; }
  .rh-contact { align-items: flex-start; }
  .resume-body { padding: 24px; grid-template-columns: 1fr; }
}