/* ── Media that fits the screen it is on ─────────────────────────────────
 *
 * There was no rule anywhere in the tree constraining an <img>, <video>
 * or <iframe> to its container. A 1920-wide still or a 16:9 player on a
 * 390px phone therefore rendered at its intrinsic width and pushed the
 * whole document wider than the viewport -- which is why a video on a
 * phone ran off the right edge and the page scrolled sideways.
 *
 * max-width rather than width, so nothing is stretched UP to fill its
 * container; a 200px logo stays 200px. height:auto keeps the aspect
 * ratio once max-width kicks in -- without it a constrained image keeps
 * its original height and squashes.
 *
 * Deliberately NOT applied to:
 *   - anything inside a horizontal scroller, which is opting out on
 *     purpose (tables, carousels),
 *   - SVG icons, which are sized by their own width/height attributes
 *     and whose intrinsic size is often 24px -- max-width would not bite
 *     but height:auto can collapse one inside a flex row.
 *
 * Linked from partial.head.html for every templated page.
 */

img,
video,
iframe:not([data-fit-panel]) {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* An <img> with width/height attributes keeps its ratio when the width
   is capped, rather than letterboxing. */
img[width][height] {
  height: auto;
}

/* Inside a deliberate horizontal scroller, the content is meant to
   exceed the viewport -- that is the point of the scroller. */
.tbl-wrap img,
.tbl-wrap video,
[data-hscroll] img,
[data-hscroll] video {
  max-width: none;
}

/* Nothing should be able to widen the document itself. A single
   overflowing element turns every page into a sideways scroll, and on a
   phone that reads as the layout being broken. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}