/* Mobile table fixes.

   Context: layouts/_markup/render-table.html now wraps Markdown tables in
   .table-responsive and adds .table, so the theme's and table-borders-fix.css's
   `.table th/td` rules finally apply. This file handles what those don't:
   keeping wide tables (especially the A1 lesson tables with audio players)
   usable on a phone. */

/* Horizontal scroll for any table wider than the screen, so the table scrolls
   inside its own box instead of pushing the page body sideways. */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5em;
}

/* Bootstrap 3 sets .table { width: 100% }, which squeezes columns until words
   break mid-character on narrow screens. Let the table take its natural width
   and scroll instead. */
.table-responsive > .table {
  width: auto;
  min-width: 100%;
  margin-bottom: 0;
}

/* Audio players have a wide intrinsic min-width (~200px in Chrome, ~250px in
   Safari) — the main reason the 5-column lesson table overflowed. Cap them so
   a row stays reasonable. */
.table td audio,
.pronunciation-audio {
  width: 180px;
  max-width: 100%;
  height: 36px;
  vertical-align: middle;
}

/* Headers shouldn't break mid-phrase. Body cells are left alone — some tables
   (e.g. the tech posts) have prose in them that must be free to wrap. */
.table th {
  white-space: nowrap;
}

/* Give prose cells room so they wrap sensibly rather than one word per line. */
.table td {
  min-width: 5em;
}

@media (max-width: 767px) {
  /* Tighter cells claw back horizontal space on small screens. */
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 6px 8px;
    font-size: 0.9rem;
  }

  .table td audio,
  .pronunciation-audio {
    width: 150px;
    height: 32px;
  }

  /* Hint that there is more table to the right. */
  .table-responsive {
    border-right: 1px solid var(--color-border-light);
  }
}

/* Deliberately NOT setting `overflow-x: hidden` on html/body here: the theme
   uses position:fixed for the nav, and a body-level overflow rule can break
   fixed/sticky positioning and swallow genuine overflow bugs instead of
   surfacing them. The .table-responsive wrapper above contains the scroll at
   the element that actually overflows. */