/* Responsive layer shared by every page.
   Pages are built with inline styles, so these rules use !important to adapt them on smaller
   screens. Desktop and tablet (≥ 761px) are untouched unless a rule says otherwise.
   Some rules match inline styles as the browser writes them (e.g. "margin: 0px auto"). */

/* Safety net: never scroll sideways. `clip` (unlike `hidden`) keeps the sticky nav working. */
html { overflow-x: clip; }

@media (max-width: 760px) {
  /* Page containers: tighter side padding and a shorter top gap on phones. */
  [style*="margin: 0px auto"][style*="padding: 56px 32px"],
  [style*="margin: 0px auto"][style*="padding: 64px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 40px !important;
  }

  /* Multi-column cards and image pairs in case studies stack into one column. */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Big page titles scale down a touch. */
  h1[style*="font-size: 40px"], h1[style*="font-size: 36px"] { font-size: 32px !important; }
}

/* ── Homepage (index.html) ─────────────────────────────────────────── */
.nav-break { display: none; }

@media (max-width: 760px) {
  /* Nav: row 1 = name + Ask AI, row 2 = section links spread across, never wrapping mid-label. */
  .nav-inner { flex-wrap: wrap; row-gap: 12px; padding: 12px 20px !important; }
  .nav-links { display: contents !important; }
  .nav-brand { order: 1; }
  .nav-inner .ask-ai-btn { order: 2; }
  .nav-break { display: block; order: 3; flex-basis: 100%; height: 0; }
  .nav-link { order: 4; white-space: nowrap; }

  /* Sections: phone-sized spacing. */
  #section-hero { padding: 72px 20px 64px !important; }
  #section-work, #section-process, #section-ai, #section-about { padding: 64px 20px !important; }
  [style*="max-width: 1120px"][style*="padding: 0px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="border-top: 1px solid"][style*="padding: 40px 32px"] { padding: 32px 20px !important; }

  /* Selected work: image above text. */
  .work-feature { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .work-feature-img { order: -1; aspect-ratio: 16 / 10; height: auto !important; }
  .work-feature-text { padding: 24px !important; }
  .work-stops { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Alternate work layouts (unused by default) also collapse to one column. */
  [style*="minmax(320px, 1fr)"], [style*="minmax(460px, 1fr)"] { grid-template-columns: 1fr !important; }

  /* AI Lab / other projects: media above text. */
  .lab-card { grid-template-columns: 1fr !important; gap: 24px !important; padding: 20px !important; }
  .lab-card > :last-child { order: -1; }

  /* About: photo above the paragraphs. */
  .about-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

@media (max-width: 360px) {
  .nav-link { font-size: 12px !important; letter-spacing: 0 !important; }
}

/* ── Case study search (search-case-studies-tool.html) ──────────────────────────── */
.cs-filters-btn, .cs-filters-done { display: none; }

@media (max-width: 760px) {
  /* The panel fills the screen: search bar on top, results scroll on their own underneath. */
  .cs-panel { height: calc(100svh - 24px) !important; max-height: none !important; min-height: 480px !important; }
  .cs-head { padding: 14px !important; gap: 12px !important; }

  /* Search bar with the Filters button to its right; "I'm hiring for" below, then the quick-filter
     chips in a sideways-scrolling row. */
  .cs-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 12px !important; }
  .cs-search { grid-column: 1; grid-row: 1; }
  .cs-quick { display: contents !important; }
  .cs-filters-btn { display: inline-flex; grid-column: 2; grid-row: 1; align-self: stretch; border-radius: 12px !important; padding: 0 14px !important; }
  .cs-quick-label { grid-column: 1 / -1; grid-row: 2; }
  .cs-chips { display: flex !important; grid-column: 1 / -1; grid-row: 3; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
              scrollbar-width: none; margin: -4px -14px 0; padding: 2px 14px 4px; }
  .cs-chips::-webkit-scrollbar { display: none; }
  .cs-chips > * { flex: none; white-space: nowrap; }

  /* Results take the rest of the panel; the full filter list is hidden until "Filters" is tapped,
     then it takes the results' place until "Show N results". */
  .cs-body { flex-direction: column; }
  .cs-results { flex: 1 1 auto !important; min-height: 0; padding: 16px !important; }
  .cs-filters { display: none !important; flex: 1 1 auto !important; min-width: 0 !important; border-right: none !important; padding: 16px !important; }
  .cs-body[data-filters-open="true"] .cs-filters { display: flex !important; }
  .cs-body[data-filters-open="true"] .cs-results { display: none !important; }
  .cs-filters-done { display: block; position: sticky; bottom: 0; margin-top: auto; box-shadow: 0 -8px 16px -8px rgba(43,38,33,0.25); }
}

/* ── More work (archive.html) ──────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Image above text, like the homepage project cards. */
  .archive-card { flex-direction: column; gap: 16px !important; padding: 16px !important; }
  .archive-thumb { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; }
}

/* ── Cube Runner (cube-runner.html) ─────────────────────────────────────── */
@media (max-width: 560px) {
  /* The game has mobile controls; a taller frame fits its whole menu (it gets taller as screens narrow). */
  .game-embed { aspect-ratio: auto !important; height: 580px; }
}

/* Selected work on phones: all projects listed in order instead of the featured card + switcher. */
.work-mobile-list { display: none; }
@media (max-width: 760px) {
  .work-desktop { display: none; }
  .work-mobile-list { display: flex; flex-direction: column; gap: 16px; }
}

/* ── About (about.html) ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* "Outside of work" cards stack. */
  .outside-grid { grid-template-columns: 1fr !important; }
}