/**
 * CG Creative — Project Navigation
 * Self-contained tokens so this works on top of any theme.
 */
:root {
  --cgc-navy: #123456;
  --cgc-terracotta: #C4492D;
  --cgc-tag-bg: #EFE7DD;
  --cgc-ink: #1C1A19;
  --cgc-gray: #757575;
  --cgc-font-serif: Georgia, "Times New Roman", Times, serif;
  --cgc-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cgc-project-nav {
  border-top: 2px solid var(--cgc-navy);
  padding: 28px 0 56px;
  margin-top: 48px;
}

.cgc-project-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.cgc-nav-item {
  flex: 1;
  min-width: 0;
}

.cgc-nav-next {
  text-align: right;
}

.cgc-nav-item a {
  text-decoration: none;
  display: block;
}

.cgc-nav-label {
  display: block;
  font-family: var(--cgc-font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cgc-gray);
  margin-bottom: 8px;
}

.cgc-nav-title {
  display: block;
  font-family: var(--cgc-font-serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--cgc-navy);
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cgc-nav-item a:hover .cgc-nav-title {
  color: var(--cgc-terracotta);
}

@media (max-width: 640px) {
  .cgc-project-nav-inner {
    flex-direction: column;
    gap: 24px;
  }

  .cgc-nav-next {
    text-align: left;
  }
}