* {
  box-sizing: border-box;
}

body.projects-page {
  display: block;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 15% 5%, rgba(47, 129, 247, 0.05), transparent 28%),
    #0d1117;
  color: #e6edf3;
}

.projects-shell {
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0 38px;
}

.projects-brand {
  display: inline-block;
  margin-bottom: 16px;
  color: #e6edf3;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.projects-brand span { color: #3fb950; }

.projects-back {
  display: block;
  width: fit-content;
  margin-bottom: 22px;
  color: #58a6ff;
  font-size: 0.82rem;
  text-decoration: none;
}

.projects-intro { max-width: 930px; }

.projects-terminal {
  margin-bottom: 8px;
  color: #58a6ff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
}

.projects-intro h1 {
  margin: 0;
  color: #f0f6fc;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.projects-intro p {
  max-width: 900px;
  margin: 18px 0 0;
  color: #9aa4af;
  font-size: 1rem;
  line-height: 1.65;
}

.projects-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 20px;
}

.project-filter {
  appearance: none;
  border: 1px solid #30363d;
  border-radius: 999px;
  padding: 9px 15px;
  background: #111820;
  color: #c9d1d9;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: 0.18s ease;
}

.project-filter:hover {
  border-color: #58a6ff;
  color: #f0f6fc;
}

.project-filter.active {
  border-color: #58a6ff;
  background: #2f81f7;
  color: white;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.project-card {
  --project-accent: #58a6ff;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(180deg, #111820 0%, #0f151b 100%);
  border: 1px solid #30363d;
  border-top: 2px solid var(--project-accent);
  border-radius: 11px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: var(--project-accent);
}

.project-blue { --project-accent: #58a6ff; }
.project-green { --project-accent: #7dc448; }
.project-red { --project-accent: #f85149; }
.project-yellow { --project-accent: #e3b341; }
.project-cyan { --project-accent: #39c5cf; }
.project-purple { --project-accent: #a371f7; }

.project-media {
  position: relative;
  height: 132px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #10161d;
  border-bottom: 1px solid #242c35;
  background-size: cover;
  background-position: center;
}

.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 8, 12, 0.5));
  pointer-events: none;
}

.project-media-label,
.project-media-brand,
.terminal-preview {
  position: relative;
  z-index: 1;
}

.project-media-label {
  color: rgba(255, 255, 255, 0.88);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.project-media-homelab {
    background-image: url('/assets/projects/homelab-infrastructure.png');
    background-size: cover;
    background-position: center;
}

.project-media-runslinux {
  background:
    radial-gradient(circle at center, rgba(63, 185, 80, 0.09), transparent 55%),
    #0d1117;
}

.project-media-brand {
  color: #e6edf3;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.project-media-brand span { color: #3fb950; }

.project-media-minecraft {
    background-image: url('/assets/projects/minecraft-server.png');
    background-size: cover;
    background-position: center;
}

.project-media-pokemon {
  background:
    radial-gradient(circle at 25% 40%, rgba(248, 81, 73, 0.38), transparent 20%),
    radial-gradient(circle at 75% 55%, rgba(227, 179, 65, 0.25), transparent 22%),
    linear-gradient(135deg, #291414, #181b23);
}

.project-media-air {
  background:
    linear-gradient(180deg, rgba(88, 166, 255, 0.16), rgba(13, 17, 23, 0.22)),
    #122336;
}

.project-media-weather {
  background:
    radial-gradient(circle at 65% 25%, rgba(227, 179, 65, 0.25), transparent 18%),
    linear-gradient(180deg, #26384a, #17212b);
}

.project-media-ha { background: linear-gradient(135deg, #2f81f7, #1f6feb 55%, #164d8f); }

.project-media-printlab { background-image: url('/assets/printlab/printlab-hero.jpg'); }
.project-media-corvette { background-image: url('/assets/corvette/c5-burnout-poster.jpg'); }
.project-media-offroad { background-image: url('/assets/offroad/jeep-hero.jpg'); }
.project-media-arcade { background-image: url('/assets/arcade/star-wars-pinball.jpg'); }

.project-media-terminal {
    background-image: url('/assets/projects/terminal.png');
    background-size: cover;
    background-position: center;
}

.terminal-preview {
  width: calc(100% - 26px);
  padding: 18px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.65);
  color: #d2d7de;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.95rem;
}

.terminal-preview span { color: #3fb950; }

.project-media-qa {
  background:
    linear-gradient(135deg, rgba(88, 166, 255, 0.22), rgba(163, 113, 247, 0.16)),
    #111820;
}

.project-media-radio {
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(163, 113, 247, 0.07) 10px 11px),
    linear-gradient(135deg, #161126, #0d1117);
}

.project-body { padding: 14px; }

.project-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.project-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.project-icon {
  color: var(--project-accent);
  font-size: 1.25rem;
  flex: 0 0 auto;
}

.project-title h2 {
  margin: 0;
  color: #f0f6fc;
  font-size: 0.9rem;
  line-height: 1.25;
}

.project-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  padding: 4px 8px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.64rem;
}

.project-status.active {
  border-color: #238636;
  background: rgba(46, 160, 67, 0.1);
  color: #56d364;
}

.project-status.ongoing {
  border-color: #9e6a03;
  background: rgba(227, 179, 65, 0.09);
  color: #e3b341;
}

.project-status.complete {
  border-color: #6e40c9;
  background: rgba(163, 113, 247, 0.1);
  color: #d2a8ff;
}

.project-body > p {
  min-height: 4.6em;
  margin: 12px 0 12px;
  color: #a9b3bd;
  font-size: 0.76rem;
  line-height: 1.5;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-tags span {
  padding: 4px 8px;
  border: 1px solid #30363d;
  border-radius: 999px;
  background: #161d25;
  color: #9da7b1;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.6rem;
}

.project-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: #7d8590;
  font-size: 0.66rem;
}

.project-link-disabled {
  color: #58a6ff;
  opacity: 0.55;
  cursor: default;
}

.projects-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #21262d;
  color: #6e7681;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
}

.projects-footer .online { color: #3fb950; }

.project-card[hidden] { display: none; }

@media (max-width: 1180px) {
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .projects-shell {
    width: min(100% - 28px, 1380px);
    padding-top: 20px;
  }

  .projects-grid { grid-template-columns: 1fr; }
  .projects-intro h1 { font-size: 2.65rem; }
  .project-body > p { min-height: 0; }
}


/* Projects page with global site nav */
.projects-page .projects-shell {
  padding-top: 34px;
}

@media (max-width: 700px) {
  .projects-page .projects-shell {
    padding-top: 24px;
  }
}

/* =========================================================
   Projects page - Linux room visual refresh v1
   Page-specific only. Does not modify shared site CSS/effects.
   ========================================================= */

body.projects-page {
  background:
    linear-gradient(90deg, rgba(3, 8, 13, 0.12), rgba(3, 8, 13, 0.32) 56%, rgba(3, 8, 13, 0.50)),
    url('/assets/home-linux-room.webp') center top / cover fixed no-repeat;
  background-color: #071019;
}

/* Keep the approved server-room/Tux artwork visible on wide screens. */
@media (min-width: 1180px) {
  .projects-shell {
    width: min(1080px, calc(100vw - 500px));
    max-width: 1080px;
    margin-left: clamp(430px, 30vw, 590px);
    margin-right: 28px;
  }

  .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Open hero/title treatment like the refreshed homepage. */
.projects-intro {
  max-width: 920px;
  padding: 20px 0 8px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.82);
}

.projects-intro p {
  color: #c0cad4;
}

.projects-terminal {
  color: #79c0ff;
}

/* Filters stay compact but become translucent instead of solid blocks. */
.project-filter {
  background: rgba(7, 13, 19, 0.38);
  border-color: rgba(120, 145, 170, 0.25);
  color: #c3ccd5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px) saturate(1.04);
  -webkit-backdrop-filter: blur(4px) saturate(1.04);
}

.project-filter:hover {
  background: rgba(10, 18, 26, 0.54);
  border-color: rgba(88, 166, 255, 0.52);
}

.project-filter.active {
  background: rgba(31, 111, 235, 0.66);
  border-color: rgba(88, 166, 255, 0.82);
  color: #fff;
  box-shadow: 0 0 20px rgba(88, 166, 255, 0.12);
}

/* Match the homepage's lighter glass-card treatment. */
.project-card {
  background: rgba(7, 13, 19, 0.36);
  border-color: rgba(120, 145, 170, 0.20);
  border-top-color: var(--project-accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(4px) saturate(1.04);
  -webkit-backdrop-filter: blur(4px) saturate(1.04);
}

.project-card:hover {
  background: rgba(10, 18, 26, 0.52);
  border-color: var(--project-accent);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.21),
    0 0 22px rgba(88, 166, 255, 0.07);
}

.project-media {
  background-color: rgba(10, 16, 22, 0.62);
  border-bottom-color: rgba(120, 145, 170, 0.16);
}

.project-body > p {
  color: #b7c1cb;
}

.project-tags span {
  background: rgba(13, 21, 29, 0.46);
  border-color: rgba(120, 145, 170, 0.20);
  color: #adb7c1;
}

.projects-footer {
  background: transparent;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

/* On narrower screens, center the content and let the artwork become ambience. */
@media (max-width: 1179px) {
  body.projects-page {
    background-position: 42% top;
  }

  .projects-shell {
    width: min(1080px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 620px) {
  body.projects-page {
    background:
      linear-gradient(rgba(5, 10, 15, 0.58), rgba(5, 10, 15, 0.70)),
      url('/assets/home-linux-room.webp') 36% top / auto 100vh fixed no-repeat;
    background-color: #071019;
  }

  .projects-shell {
    width: min(100% - 28px, 1080px);
  }
}