/* =========================
   PIXEL UI — VISUAL LAYER
   Crisp pixel panels, buttons, badges, cards
   ========================= */

/* =========================
   1) BUTTONS
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.9rem 1.2rem;
  gap: 0.6rem;

  border: 3px solid var(--outline);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--shadow);

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition: transform 120ms linear, background 120ms linear, border-color 120ms linear, box-shadow 120ms linear;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255, 179, 92, 0.35),
    4px 4px 0 var(--shadow);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow);
}

/* Variants */
.btn--primary {
  background: rgba(255, 179, 92, 0.16);
  color: var(--text);
  border-color: rgba(255, 179, 92, 0.55);
}

.btn--primary:hover {
  background: rgba(255, 179, 92, 0.22);
  border-color: rgba(255, 179, 92, 0.75);
}

.btn--secondary {
  background: rgba(42, 53, 80, 0.25);
  color: var(--text);
  border-color: rgba(183, 194, 214, 0.28);
}

.btn--secondary:hover {
  background: rgba(42, 53, 80, 0.35);
  border-color: rgba(183, 194, 214, 0.40);
}

/* Smaller button for inline proof links */
.btn--small {
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
}

/* =========================
   2) NAV LINKS (minimal)
   ========================= */

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0;
}

/* =========================
   3) CARDS / PANELS
   ========================= */

.journey-card,
.highlight-card,
.skill-card,
.project-card {
  padding: 1.75rem;

  border: 3px solid rgba(183, 194, 214, 0.18);
  background: rgba(8, 16, 28, 0.55);

  border-radius: 0;
  box-shadow: 6px 6px 0 rgba(5, 8, 18, 0.85);

  transition: transform 140ms linear, border-color 140ms linear, background 140ms linear;
}

.journey-card:hover,
.highlight-card:hover,
.skill-card:hover,
.project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 179, 92, 0.28);
  background: rgba(8, 16, 28, 0.62);
}

/* =========================
   4) JOURNEY THUMBNAILS
   ========================= */

.journey-thumb {
  width: 160px;
  height: 120px;

  border: 3px solid rgba(183, 194, 214, 0.18);
  box-shadow: 4px 4px 0 rgba(5, 8, 18, 0.85);
  background: rgba(8, 16, 28, 0.65);

  overflow: hidden;
}

.journey-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  transition: transform 200ms ease, filter 200ms ease;
}

/* Placeholder if no image yet */
.journey-thumb--placeholder {
  background:
    linear-gradient(
      135deg,
      rgba(255, 179, 92, 0.12),
      rgba(8, 16, 28, 0.65)
    );
  opacity: 0.7;
}

/* Thumbnail reacts when card is hovered */
.journey-card:hover .journey-thumb {
  border-color: rgba(255, 179, 92, 0.45);
  box-shadow: 4px 4px 0 rgba(255, 179, 92, 0.18);
}

.journey-card:hover .journey-thumb-img {
  filter: brightness(1.05);
  transform: scale(1.03);
}

/* level label styling */
.journey-level {
  color: rgba(255, 179, 92, 0.95);
}

.journey-highlights li {
  color: var(--muted);
}

/* =========================
   4.5) JOURNEY PROGRESS (VISUALS, SCOPED)
   - Guard: ONLY show it inside Journey section
   - Layout/positioning stays in base.css
   ========================= */

/* Guard: if .journey-progress appears anywhere else, keep it hidden */
.journey-progress {
  display: none;
}

/* Enable only inside the Journey section */
.section--journey .journey-progress {
  display: block;
}

/* Track visuals */
.section--journey .journey-progress-track {
  border: 3px solid rgba(183, 194, 214, 0.18);
  background: rgba(8, 16, 28, 0.55);
  box-shadow: 4px 4px 0 rgba(5, 8, 18, 0.85);
}

/* Fill visuals */
.section--journey .journey-progress-fill {
  background: rgba(255, 179, 92, 0.55);
  box-shadow: inset 0 0 0 2px rgba(255, 204, 133, 0.25);
}

/* =========================
   5) HIGHLIGHT TAGS + PROOF LINKS
   ========================= */

.highlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.highlight-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Badge styling */
.badge {
  display: inline-flex;
  align-items: center;

  padding: 0.25rem 0.6rem;
  border: 2px solid rgba(183, 194, 214, 0.28);

  background: rgba(8, 16, 28, 0.35);
  color: var(--muted);

  border-radius: 0;
  font-size: 0.85rem;
}

/* =========================
   6) PIXEL DIVIDER
   ========================= */

.pixel-divider {
  height: 2px;
  width: 100%;
  margin: 1rem 0;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 179, 92, 0.35),
    transparent
  );

  opacity: 0.8;
}

/* =========================
   7) SKILLS ICON HEADER
   ========================= */

.skill-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.skill-icon {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 3px solid rgba(183, 194, 214, 0.18);
  background: rgba(42, 53, 80, 0.18);
  box-shadow: 4px 4px 0 rgba(5, 8, 18, 0.85);

  font-size: 1.1rem;
}

.skill-title {
  margin: 0;
}

/* =========================
   8) LINK INTERACTION
   ========================= */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: none;
}

a:focus-visible {
  text-decoration: underline;
}

/* =========================
   9) PROJECT THUMBNAILS (optional)
   ========================= */

.project-thumb {
  width: 160px;
  height: 120px;

  border: 3px solid rgba(183, 194, 214, 0.18);
  box-shadow: 4px 4px 0 rgba(5, 8, 18, 0.85);
  background: rgba(8, 16, 28, 0.65);

  overflow: hidden;
}

.project-thumb--placeholder {
  background:
    linear-gradient(
      135deg,
      rgba(255, 179, 92, 0.12),
      rgba(8, 16, 28, 0.65)
    );
  opacity: 0.7;
}

.project-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}