/* ─────────────────────────────────────────────────────────────
   Mobile polish — shared by all case studies.
   Loaded after each page's own styles; only applies on phones
   and small tablets, so desktop layouts are untouched.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Hero ── */
  .hero-title { line-height: 1.04; }
  .hero-title .outline { margin-top: 2px; }
  .hero-back { min-height: 44px; display: inline-flex; align-items: center; padding-right: 10px; }
  .hero-meta-cell .label { font-size: 11px; }

  /* ── Floating nav: readable labels ── */
  .nav-link { font-size: 12px; padding: 6px 9px; }
  .nav-cta { font-size: 12.5px; }

  /* ── Screenshots use the full width ── */
  .media-slot { width: 100% !important; max-width: 100% !important; flex: none !important; }
  .media-slot img[style*="max-width:85%"],
  .media-slot img[style*="width:80%"] { width: 100% !important; max-width: 100% !important; }
  section img[style*="max-width:60%"] { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* ── Result metrics: one per row, number beside its label ── */
  .results-grid,
  .results-grid.four { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 28px; }
  .result-stat { display: grid; grid-template-columns: 124px 1fr; align-items: center; column-gap: 14px; padding: 16px 18px !important; border-radius: 14px; }
  .result-num { font-size: 24px !important; margin-bottom: 0 !important; line-height: 1.1; }
  .result-label { font-size: 13.5px !important; line-height: 1.45 !important; }

  /* ── Small controls ── */
  .wz-live { min-height: 44px; display: inline-flex; align-items: center; }
  .chosen-badge { font-size: 10.5px !important; }

  /* ── Previous / next project cards ── */
  .nav-direction { font-size: 11px; }
  .nav-project-cat { font-size: 12px; }

  /* ── Tap-to-zoom affordance ── */
  img.mz-zoomable { cursor: zoom-in; }
  .mz-badge { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%;
    background: rgba(12,11,10,0.62); color: #fff; display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 2; backdrop-filter: blur(4px); }
  .mz-badge svg { width: 15px; height: 15px; }
}

@media (max-width: 400px) {
  .nav-link { font-size: 11.5px; padding: 6px 7px; }
  .result-stat { grid-template-columns: 112px 1fr; }
  .result-num { font-size: 22px !important; }
}

/* Zoom badges only show at phone widths (e.g. after rotating a tablet). */
.mz-badge { display: none; }
@media (max-width: 768px) { .mz-badge { display: flex; } }

/* ── Full-screen image viewer (phones) ── */
.mz-overlay { position: fixed; inset: 0; z-index: 10000; background: #0c0b0a; display: none; flex-direction: column; }
.mz-overlay.open { display: flex; }
.mz-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; color: rgba(255,255,255,0.78); font: 500 13px/1.3 'Poppins', sans-serif; }
.mz-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mz-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; }
.mz-scroll img { margin: auto; display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; touch-action: manipulation; }
.mz-scroll.zoomed img { width: 260%; max-width: none; margin: 0; border-radius: 0; }