/* ===================================
   projects.css — Projects & Terminal
   =================================== */

/* Page Hero (shared, copied for path independence) */
.page-hero {
  padding-block: var(--space-16) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg) 100%);
}
.page-hero__inner { max-width: 680px; }

/* Project card links */
.card__links {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Project image placeholders */
.proj-img {
  position: relative;
  overflow: hidden;
}
.proj-emoji {
  font-size: 4rem;
  display: block;
  transition: transform var(--transition-spring);
}
.card:hover .proj-emoji { transform: scale(1.15) rotate(-5deg); }

.proj-img--arcade {
  background: linear-gradient(135deg, #fff0f0 0%, #ffe4e4 40%, #ffd0d0 100%);
}
.proj-img--cloud {
  background: linear-gradient(135deg, #f0f8ff 0%, #e0f0ff 40%, #c8e8ff 100%);
}
.proj-img--chernobyl {
  background: linear-gradient(135deg, #f0fff4 0%, #dcffe8 40%, #c8f5d8 100%);
}

/* ── Terminal ─────────────────────────── */
.terminal-section { background: var(--color-bg-secondary); }

.terminal {
  max-width: 800px;
  margin-inline: auto;
  background: #0d1117;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.05);
  font-family: var(--font-mono);
  transition: box-shadow var(--transition-base);
}
.terminal:hover {
  box-shadow: var(--shadow-xl), 0 0 30px rgba(0,113,227,0.15);
}

/* Title bar */
.terminal__titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #161b22;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.terminal__dots { display: flex; gap: var(--space-2); }
.terminal__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.terminal__dot--red    { background: #ff5f57; }
.terminal__dot--yellow { background: #ffbd2e; }
.terminal__dot--green  { background: #28ca41; }

.terminal__title {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  letter-spacing: var(--tracking-wide);
}

/* Output */
.terminal__output {
  min-height: 280px;
  max-height: 380px;
  overflow-y: auto;
  padding: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: #c9d1d9;
  scroll-behavior: smooth;
}
.terminal__output::-webkit-scrollbar { width: 6px; }
.terminal__output::-webkit-scrollbar-track { background: transparent; }
.terminal__output::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Output lines */
.t-line { margin-bottom: var(--space-1); white-space: pre-wrap; word-break: break-word; }
.t-line--system { color: #58a6ff; font-style: italic; }
.t-line--input  { color: #79c0ff; }
.t-line--response { color: #c9d1d9; }
.t-line--error  { color: #ff7b72; }

/* Inline styling */
.t-prompt { color: #3fb950; font-weight: var(--font-semibold); }
.t-user-cmd { color: #ffffff; }
.t-cmd  { color: #58a6ff; font-weight: var(--font-semibold); }
.t-key  { color: #79c0ff; font-weight: var(--font-semibold); }
.t-err  { color: #ff7b72; }

/* Input row */
.terminal__input-row {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #0d1117;
  gap: 0;
}
.terminal__prompt-label {
  color: #3fb950;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: default;
}
.terminal__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  caret-color: #58a6ff;
}
.terminal__input::placeholder { color: rgba(255,255,255,0.25); }

/* Responsive */
@media (max-width: 768px) {
  .terminal__output { min-height: 220px; max-height: 300px; }
}