/* ============================================================
   Global responsive safety layer — Kinetic Digital Publishers
   Loaded AFTER all other stylesheets (see includes/head.php).

   Purpose: fill common cross-device responsive gaps WITHOUT
   overriding intentional design. Rules are additive and low
   specificity, so any existing, more-specific design rule wins.
   ============================================================ */

/* 1. Media scales with its container and preserves aspect ratio.
      style.css already sets `img { max-width: 100% }` but NOT
      `height: auto`, so shrunk images could distort. It also does
      not constrain embedded media. */
img {
  height: auto;
}
video,
iframe,
embed,
object,
svg {
  max-width: 100%;
}

/* 1b. Embedded video players (YouTube/Vimeo) keep a 16:9 ratio and scale
       down cleanly on small screens instead of distorting from a fixed
       height. Desktop is unchanged: a 640x360 embed still resolves to
       360px tall, but on narrow viewports the height follows the width. */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"],
iframe[src*="player.vimeo"] {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* 2. Long words, URLs and unbroken strings must not force the page
      to scroll sideways on small screens. */
@media (max-width: 767px) {
  p,
  li,
  a,
  span,
  td,
  th,
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* 3. Wide tables never blow out the layout on phones — they scroll
      within their own box instead. */
@media (max-width: 767px) {
  table {
    max-width: 100%;
  }
}

/* 4. Keep comfortable gutters on very small screens so content never
      touches the viewport edge. */
@media (max-width: 480px) {
  .container,
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
}