/* Projects page design, aligned with logo.svg palette. */
:root {
  --projects-blue-900: #003bde;
  --projects-blue-700: #0268f4;
  --projects-blue-500: #0f94f6;
  --projects-cyan-400: #13d7f8;
  --projects-bg: #ffffff;
  --projects-surface: #f6f9ff;
  --projects-text: #111827;
  --projects-muted: #5b6675;
  --projects-line: rgba(0, 59, 222, 0.13);
  --projects-line-strong: rgba(0, 59, 222, 0.22);
  --projects-primary: var(--projects-blue-900);
  --projects-secondary: var(--projects-blue-500);
  --projects-status-soft: rgba(0, 59, 222, 0.08);
}

[data-bs-theme="dark"] {
  --projects-bg: #080d1b;
  --projects-surface: #0f1730;
  --projects-text: #f7faff;
  --projects-muted: #bdc9dd;
  --projects-line: rgba(19, 215, 248, 0.17);
  --projects-line-strong: rgba(19, 215, 248, 0.28);
  --projects-primary: #91b1f4;
  --projects-secondary: var(--projects-cyan-400);
  --projects-status-soft: rgba(19, 215, 248, 0.10);
}

body {
  padding: 0;
  background:
    radial-gradient(circle at 86% 0%, rgba(19, 215, 248, 0.15), transparent 24rem),
    linear-gradient(180deg, var(--projects-surface) 0, var(--projects-bg) 34rem);
  color: var(--projects-text);
}

.projects-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 118px 24px 84px;
}

.projects-hero {
  max-width: 820px;
  margin-bottom: 50px;
}


.projects-hero h1 {
  margin: 0;
  color: var(--projects-text);
  font-size: clamp(2.45rem, 4.6vw, 3.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.projects-section {
  margin: 58px 0;
}

.projects-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 0;
}

.projects-section h2 {
  margin: 0;
  color: var(--projects-text);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.project-list {
  display: grid;
  gap: 0;
}

.project-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.project-item + .project-item {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--projects-primary) 12%, transparent);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
}

.project-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.status-ongoing {
  background: color-mix(in srgb, var(--projects-secondary) 9%, transparent);
  color: var(--projects-primary);
}

.status-completed {
  background: color-mix(in srgb, var(--projects-muted) 8%, transparent);
  color: var(--projects-muted);
  box-shadow: none;
}

.project-duration {
  margin-left: auto;
  color: var(--projects-muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
}

.project-title {
  margin: 0;
  color: var(--projects-text);
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0;
}

.project-funding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin: 0;
  color: var(--projects-muted);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.5;
}

.project-funding strong {
  color: var(--projects-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-list-past .project-title {
  color: color-mix(in srgb, var(--projects-text) 88%, var(--projects-muted));
}

.site-footer {
  margin-top: 70px;
}

@media (max-width: 860px) {
  .projects-page {
    padding: 104px 18px 68px;
  }

  .projects-section {
    margin: 48px 0;
  }

  .project-item {
    padding: 0;
  }
}

@media (max-width: 560px) {
  .projects-hero h1 {
    font-size: clamp(2.25rem, 12vw, 3.15rem);
  }

  .project-item {
    padding: 0;
  }

  .project-list {
    gap: 0;
  }

  .project-meta {
    align-items: flex-start;
  }

  .project-duration {
    flex: 1 1 auto;
  }

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

  .project-duration,
  .project-funding {
    font-size: 0.92rem;
  }
}