/* ==========================================================================
   CV page. Same visual language as the homepage: Geist, cold Apple neutrals,
   one locked accent, glass panels over an ambient field. The print block at
   the bottom of this file still strips all of it back to black on white.
   ========================================================================== */

:root {
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  color-scheme: dark;

  /* One accent, locked page wide: Apple dark-mode system blue. --secondary and
     --success are kept as names because the markup and the print rules refer
     to them, but they resolve to the same accent so nothing competes. */
  --accent: #0A84FF;
  --accent-rgb: 10, 132, 255;
  --secondary: #0A84FF;
  --secondary-rgb: 10, 132, 255;
  --success: #0A84FF;
  --success-rgb: 10, 132, 255;
  --text-primary: #F5F5F7;
  --text-muted: #A1A1A6;
  --bg-fallback: #0B0B0F;

  --glass-bg: rgb(255 255 255 / 0.06);
  --glass-bg-hover: rgb(255 255 255 / 0.10);
  --glass-border: rgb(255 255 255 / 0.12);
  --glass-border-hover: rgb(255 255 255 / 0.24);
  --glass-blur: blur(24px) saturate(180%) contrast(1.03);

  /* No overshoot. The homepage never bounces; a spring here would read as a
     different site one click away. */
  --spring: cubic-bezier(0.16, 1, 0.30, 1);
  --container: 1000px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --accent: #0066CC;
    --accent-rgb: 0, 102, 204;
    --secondary: #0066CC;
    --secondary-rgb: 0, 102, 204;
    --success: #0066CC;
    --success-rgb: 0, 102, 204;
    --text-primary: #1D1D1F;
    --text-muted: #56565B;
    --bg-fallback: #F5F5F7;
    --glass-bg: rgb(255 255 255 / 0.72);
    --glass-bg-hover: rgb(255 255 255 / 0.86);
    --glass-border: rgb(0 0 0 / 0.08);
    --glass-border-hover: rgb(0 0 0 / 0.16);
  }
}

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

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-fallback);
  min-height: 100vh;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(70rem 46rem at 78% -8%,  rgb(10 132 255 / 0.16), transparent 62%),
    radial-gradient(52rem 40rem at 4%  34%,  rgb(120 140 175 / 0.10), transparent 62%),
    radial-gradient(60rem 44rem at 62% 104%, rgb(10 132 255 / 0.07), transparent 62%),
    linear-gradient(180deg, #0B0B0F 0%, #0B0B0F 100%);
}

@media (prefers-color-scheme: light) {
  body::before {
    background: 
      radial-gradient(70rem 46rem at 78% -8%,  rgb(0 102 204 / 0.11), transparent 62%),
      radial-gradient(52rem 40rem at 4%  34%,  rgb(120 140 175 / 0.14), transparent 62%),
      radial-gradient(60rem 44rem at 62% 104%, rgb(0 102 204 / 0.06), transparent 62%),
      linear-gradient(180deg, #F5F5F7 0%, #F5F5F7 100%);
  }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s var(--spring);
}

.container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

/* Actions Bar */
.cv-actions-bar {
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: 24px;
}

.actions-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(15, 15, 17, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: light) {
  .actions-container {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.06);
  }
}

.btn-back, .btn-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  transition: all 0.2s var(--spring);
}

.btn-back:hover, .btn-print:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.actions-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language toggle in CV */
.lang-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px;
  border-radius: 999px;
}

.lang-btn {
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
}

.lang-btn.active {
  background: var(--accent);
  color: #FFF;
}

/* CV Layout */
.cv-wrapper {
  margin-bottom: 60px;
}

.cv-card {
  padding: 48px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 60px rgba(0,0,0,0.2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.cv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 32px;
  margin-bottom: 32px;
}

.header-main h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  /* No gradient fill. The homepage sets the name in flat ink at a tight
     tracking; a gradient here was the one thing that read as a template. */
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.header-main h2 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 16px;
}

.summary-text {
  font-size: 0.98rem;
  max-width: 72ch;
  color: var(--text-muted);
}

.badge-glass {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* The status badge wrapped to two lines and the pill grew a ragged second
     row. It is four words; it stays on one. */
  white-space: nowrap;
}

.availability-badge {
  background: rgb(var(--accent-rgb) / 0.12);
  border-color: rgb(var(--accent-rgb) / 0.28);
  color: var(--success);
}

.availability-dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgb(var(--accent-rgb) / 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0); }
}

/* CV Grid split */
.cv-grid {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  gap: 40px;
}

.cv-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding-right: 24px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title-small {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
}

.contact-list li {
  display: flex;
  flex-direction: column;
}

.contact-list .label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.contact-list .val {
  font-weight: 500;
  word-break: break-all;
}

.contact-list a.val:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Skills CV Tags */
.skills-tags-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-glass {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

/* Four categories, one hue. Purple / sky / green / pink made twelve tags shout
   at the same volume in four directions. These are four steps down a single
   axis instead, so the row reads as a ranking: lead discipline first, support
   skills last. Print strips all of it to black on white anyway. */
.category-design {
  border-color: rgb(var(--accent-rgb) / 0.34);
  background: rgb(var(--accent-rgb) / 0.14);
  color: var(--accent);
  font-weight: 500;
}

.category-frontend {
  border-color: rgb(var(--accent-rgb) / 0.20);
  background: rgb(var(--accent-rgb) / 0.07);
  color: var(--text-primary);
}

.category-backend {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
}

.category-ai {
  border-color: var(--glass-border);
  background: transparent;
  color: var(--text-muted);
}

/* Education in sidebar */
.edu-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edu-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.edu-degree {
  font-size: 0.85rem;
  color: var(--accent);
}

.edu-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.edu-gpa {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Main CV column */
.cv-main {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cv-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title-medium {
  font-size: 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.cv-projects-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cv-project-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border-left: 3px solid var(--accent); /* border-left accent */
  transition: all 0.3s var(--spring);
}

.cv-project-card:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: var(--accent);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.project-time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
}

.project-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Core philosophies */
.philosophies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.philo-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.philo-item h4 {
  font-size: 0.98rem;
  color: var(--accent);
}

.philo-item p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Print Utilities & Overrides */
.no-print {
  display: block;
}

@media (max-width: 768px) {
  .cv-card {
    padding: 24px;
  }
  .cv-header {
    flex-direction: column;
    gap: 16px;
  }
  .cv-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cv-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-right: 0;
    padding-bottom: 32px;
  }
  .philosophies-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Three labelled controls do not fit a 350px pill: both buttons wrapped onto
     two lines and the bar grew lumpy. The back arrow drops its label and keeps
     an aria-label; the print label is the one that has to stay readable. */
  .btn-back span { display: none; }
  .btn-back { padding: 8px 10px; }
  .btn-print { padding: 8px 12px; white-space: nowrap; }
  .actions-container { padding: 8px 10px; }
  .actions-right { gap: 10px; }
  .cv-card { padding: 20px; }
  .header-main h1 { font-size: 1.9rem; }
}

/* PRINT MODE OVERRIDES: Keep pure black and white */
@media print {
  .no-print, .cv-actions-bar {
    display: none !important;
  }

  body {
    background: #FFF !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  body::before, body::after {
    display: none !important;
  }

  .container, .cv-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cv-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cv-header {
    border-bottom: 2px solid #000 !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
  }

  .header-main h1 {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: none !important;
    font-size: 24pt !important;
  }

  .header-main h2 {
    color: #333 !important;
    font-size: 14pt !important;
  }

  .summary-text {
    color: #333 !important;
  }

  .availability-badge, .availability-dot {
    display: none !important;
  }

  .cv-grid {
    grid-template-columns: 0.32fr 0.68fr !important;
    gap: 30px !important;
  }

  .cv-sidebar {
    border-right: 1px solid #CCC !important;
    padding-right: 15px !important;
  }

  .section-title-small {
    color: #000 !important;
    border-bottom: 1px solid #999 !important;
    font-weight: 700 !important;
  }

  .contact-list .label {
    color: #555 !important;
  }

  .contact-list .val {
    color: #000 !important;
  }

  .tag-glass {
    border: 1px solid #666 !important;
    background: transparent !important;
    color: #000 !important;
    padding: 2px 6px !important;
    font-size: 8pt !important;
  }

  .edu-degree {
    color: #333 !important;
  }

  .section-title-medium {
    color: #000 !important;
    border-bottom: 2px solid #000 !important;
    font-weight: 700 !important;
  }

  .cv-project-card {
    background: transparent !important;
    border: 1px solid #CCC !important;
    border-left: 4px solid #000 !important;
    padding: 10px !important;
    page-break-inside: avoid !important;
  }

  .project-time {
    color: #444 !important;
  }

  .project-desc {
    color: #333 !important;
  }

  .philo-item {
    background: transparent !important;
    border: 1px solid #CCC !important;
    padding: 10px !important;
  }

  .philo-item h4 {
    color: #000 !important;
  }

  .philo-item p {
    color: #333 !important;
  }
}