/* =========================================================
   Wabu Games — Shared Mobile Patch (applies to ALL pages)
   Add to every page:
   - index:    <link rel="stylesheet" href="assets/site.css?v=1">
   - projects: <link rel="stylesheet" href="../assets/site.css?v=1">
   ========================================================= */

:root{
  --m-pad: 16px;
}

/* ---------- Mobile polish ---------- */
@media (max-width: 720px){

  /* Reduce general spacing */
  section{padding:28px var(--m-pad)}
  .wrap{padding:28px var(--m-pad) 64px}

  /* HERO sizing (works for both index + case study pages) */
  header.hero{padding:64px var(--m-pad) 30px}
  .hero h1{font-size:34px}
  .hero p{font-size:16px}

  /* Sticky nav should not feel cramped */
  nav{height:auto}
  .navbar, .navwrap{
    height:auto;
    padding:12px var(--m-pad);
    align-items:flex-start;
    gap:10px;
    flex-direction:column;
  }

  /* Brand line wraps cleanly */
  .brand{
    flex-wrap:wrap;
    gap:10px;
    line-height:1.2;
  }

  /* Links become “pills” and wrap */
  .navlinks{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:10px;
  }
  .navlinks a{
    padding:8px 10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
  }

  /* Index carousel arrows: hide on touch */
  .arrow{display:none}

  /* Card media a bit shorter */
  .card-media{height:170px}

  /* Case study layouts: sidebar + main should stack */
  .grid{grid-template-columns:1fr !important}
  .toc{display:none} /* remove sidebar TOC on mobile (huge win) */

  /* Case study typography */
  h1{font-size:34px}
  .deck{font-size:16px}
  .lead{font-size:16px}

  /* Media grids become 1 column */
  .media-grid{grid-template-columns:1fr !important}
  .media-grid img, .media-grid video{height:220px}

  /* Feature rows become 1 column */
  .feature{grid-template-columns:1fr !important}
  .card-grid{grid-template-columns:1fr !important}
}

/* Small phones */
@media (max-width: 420px){
  h1{font-size:30px}
  .hero h1{font-size:30px}
}

/* =========================
   Mobile nav (shared)
   Centers brand above links
   ========================= */
@media (max-width: 720px){
  nav{
    height:auto !important;
  }

  /* Works for index (wrap/navbar) + case studies (navwrap) */
  .navwrap,
  .wrap.navbar{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    padding:12px 14px !important;
    height:auto !important;
  }

  /* Brand layout */
  .brand{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:6px !important;
  }

  /* Hide the pipe on mobile so it doesn't look awkward */
  .brand .pipe{
    display:none !important;
  }

  /* Make the subtitle sit nicely under the name */
  .brand .sub{
    font-size:12px !important;
    letter-spacing:.14em !important;
    line-height:1.2 !important;
  }

  /* Nav links centered */
  .navlinks{
    width:100% !important;
    justify-content:center !important;
    gap:10px !important;
  }

  /* Links look like compact pills */
  .navlinks a{
    padding:10px 14px !important;
    border-radius:999px !important;
    background:rgba(15,15,18,.55) !important;
    border:1px solid rgba(255,255,255,.10) !important;
  }
}

/* Optional: stop project page H1s from feeling huge on phone */
@media (max-width: 720px){
  h1{
    font-size:38px !important;
    line-height:1.06 !important;
  }
}

/* =========================
   Index carousel: 1 centered card per swipe on mobile
   ========================= */
@media (max-width: 720px){
  .carousel{
    grid-auto-columns: 100% !important;
    scroll-padding: 0 var(--m-pad);
    padding-left: var(--m-pad);
    padding-right: var(--m-pad);
  }
  .carousel .card{
    scroll-snap-align: center;
  }
}
/* ===== Shared media lightbox ===== */
.media-grid img,
.media-grid video{
  cursor: zoom-in;
  transition: transform .2s ease, filter .2s ease;
}

.media-grid img:hover,
.media-grid video:hover{
  transform: scale(1.03);
  filter: brightness(1.04);
}

.media-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.92);
  padding:32px 18px;
}

.media-lightbox.open{
  display:flex;
  align-items:center;
  justify-content:center;
}

.media-lightbox-content{
  max-width:min(92vw, 1400px);
  max-height:86vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 30px 60px rgba(0,0,0,.7);
  background:#050508;
}

#sharedLightboxImage,
#sharedLightboxVideo{
  display:none;
}

.media-lightbox-close{
  position:absolute;
  top:18px;
  right:24px;
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,15,18,.7);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.media-lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,15,18,.7);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  z-index:10000;
}

.media-lightbox-prev{ left:24px; }
.media-lightbox-next{ right:24px; }

.media-lightbox-close:hover,
.media-lightbox-nav:hover{
  background:rgba(255,127,50,.12);
  color:var(--brand);
  border-color:rgba(255,127,50,.35);
}

.media-lightbox-caption{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  max-width:min(92vw, 900px);
  text-align:center;
  color:#e8e8ee;
  font-size:14px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(15,15,18,.7);
  border:1px solid rgba(255,255,255,.10);
}

@media (max-width:720px){
  .media-lightbox{
    padding:20px 12px 72px;
  }

  .media-lightbox-content{
    max-width:94vw;
    max-height:78vh;
    border-radius:12px;
  }

  .media-lightbox-close{
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    font-size:26px;
  }

  .media-lightbox-nav{
    width:42px;
    height:42px;
    font-size:28px;
  }

  .media-lightbox-prev{ left:12px; }
  .media-lightbox-next{ right:12px; }

  .media-lightbox-caption{
    width:calc(100% - 24px);
    bottom:12px;
    font-size:13px;
  }
}