/* Side & Hobby Projects — /projects/
   Shares tokens + nav-strip language with css/site.css; this file only
   covers the trailhead page body below the nav.
   Background is Zion Canyon (assets/images/adventures/zion.jpg) — sandstone reds,
   sage green, blue sky — so the accent palette below swaps the site's
   cool blue/cream for warm terracotta/gold to sit on top of it instead
   of fighting it. */

body.projects-page{
  --z-rust:#c1653a; --z-rust-dark:#8a4425;
  --z-gold:#e0ab5c;
  --z-sage:#9caf88;
  --z-panel:rgba(20,15,12,0.72); --z-panel-dashed:rgba(20,15,12,0.5);
  --z-border:rgba(244,228,184,0.28);
  background:#171310;
}

/* Fixed photo + scrim, same construction as index.html's .mountain-bg so
   the two pages read as the same trail. Fixed (not scroll-with-content)
   keeps it steady if this grid ever grows tall enough to scroll. */
.zion-bg{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:0;pointer-events:none;
  background:#171310 url('../assets/images/adventures/zion.jpg') center 42%/cover no-repeat;
}
.zion-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,10,8,0.55) 0%,rgba(15,10,8,0.35) 35%,rgba(12,9,7,0.72) 100%);
}

.nav-strip .logo{text-decoration:none;cursor:pointer;}

.proj-main{
  position:relative;z-index:2;
  min-height:100vh;min-height:100dvh;
  padding:100px 60px 80px;box-sizing:border-box;
}
.proj-wrap{max-width:1180px;margin:0 auto;}

.proj-kicker{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--z-gold);margin-bottom:10px;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
}
.proj-main h1{
  font-family:'Caveat',cursive;font-weight:700;font-size:64px;color:var(--cream);
  margin:0 0 6px;transform:rotate(-1deg);text-shadow:3px 4px 0 rgba(0,0,0,0.5);
}
.proj-tag{
  font-family:'Patrick Hand',cursive;font-size:20px;color:var(--ink);
  max-width:640px;margin:0 0 36px;line-height:1.4;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}

/* Grid — featured tile spans the first two columns across both rows;
   the remaining five tiles auto-place into the leftover cells. */
.proj-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:auto;gap:22px;
}

.tile{
  text-decoration:none;position:relative;display:block;
  background:var(--z-panel);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1.5px solid var(--z-border);border-radius:6px;
  padding:16px 16px 18px;box-shadow:4px 6px 0 rgba(0,0,0,0.4);
  transition:transform .15s;
}
.tile:not(.dashed):not(.next-peak):hover{transform:translateY(-2px);}
.tile[aria-disabled="true"]{cursor:default;}

.tile-hit{position:absolute;inset:0;z-index:1;}

.tile.featured{
  grid-column:1/3;grid-row:1/3;
  border-color:var(--z-rust);padding:20px 22px 22px;transform:rotate(-0.6deg);
}
.tile.featured .thumb{height:220px;}
.tile.featured .ttl{font-size:34px;margin:14px 0 4px;}
.tile.featured .desc{font-size:16px;max-width:70%;margin:6px 0 12px;}

.tile.dashed{
  background:var(--z-panel-dashed);border-style:dashed;opacity:0.7;cursor:default;
}
.tile.next-peak{
  display:flex;align-items:center;justify-content:center;min-height:110px;
  border:1.5px dashed rgba(244,228,184,0.25);border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.05em;
  text-transform:uppercase;color:rgba(244,228,184,0.4);
}

.thumb{
  width:100%;height:80px;border-radius:3px;border:1px solid rgba(244,228,184,0.2);
  margin-top:8px;
  background:repeating-linear-gradient(45deg,rgba(244,228,184,0.06) 0 8px,transparent 8px 16px);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;
  color:rgba(244,228,184,0.4);
  overflow:hidden;
}
.thumb.thumb-img{background:#0e1517;}
.thumb-img img{width:100%;height:100%;object-fit:cover;object-position:center;}
.thumb.mahjong img {
  object-position: bottom;
  transform: scale(1.15); /* Zooms in by 15% */
  transform-origin: bottom; /* Ensures it zooms from the bottom up */
}
.tile.featured .thumb-img img{object-position:top;}

.ttl{font-family:'Caveat',cursive;font-weight:700;font-size:24px;color:var(--cream);margin:10px 0 4px;line-height:1;}
.tile .desc{font-family:'Patrick Hand',cursive;font-size:14px;color:var(--ink-dim);line-height:1.3;margin:4px 0 10px;}
.tile.dashed .ttl{color:#e6dfc8;}
.tile.dashed .desc{color:#b7c2a6;}

.tags{display:flex;gap:5px;flex-wrap:wrap;}
.tag{
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--z-gold);
  background:rgba(224,171,92,0.14);padding:2px 7px;border-radius:8px;
}
.tile.dashed .tag{background:rgba(224,171,92,0.1);}

.badge{
  position:absolute;top:-10px;left:16px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;padding:2px 8px;border-radius:8px;color:var(--cream);
}
.badge.live{background:var(--z-rust);}
.badge.prog{background:var(--z-sage);color:#1a2114;}
.badge.soon{background:#5a4a2b;}
.badge.arch{background:rgba(244,228,184,0.18);color:var(--ink-dim);}
.tile.featured .badge{top:-12px;box-shadow:0 2px 4px rgba(0,0,0,0.4);}

.gh{
  position:absolute;bottom:12px;right:14px;z-index:2;width:24px;height:24px;border-radius:50%;
  border:1.5px solid rgba(244,228,184,0.5);display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;color:var(--cream);
  background:rgba(0,0,0,0.3);text-decoration:none;transition:background .15s,transform .15s;
}
a.gh:hover{background:rgba(0,0,0,0.55);transform:scale(1.08);}
.tile.featured .gh{bottom:16px;right:18px;width:32px;height:32px;font-size:11px;}

@media (max-width:900px){
  .proj-grid{grid-template-columns:1fr 1fr;}
  .tile.featured{grid-column:1/3;grid-row:auto;}
}
@media (max-width:600px){
  .proj-main{padding:100px 24px 60px;}
  .proj-main h1{font-size:48px;}
  .proj-grid{grid-template-columns:1fr;}
  .tile.featured{grid-column:1/2;}
}