/* ============================================================================
   c3-responsive.css — mobile safety net.
   Loaded last (after the theme + bundle). It ONLY prevents horizontal overflow
   and makes media fluid on small screens — it does not change the theme's
   layout, colours, or spacing. The BS4 theme styles images per-component but has
   no global fluid-image rule, so stray images/embeds could force the page wider
   than the phone screen; these rules close that gap.
   ========================================================================== */

/* Fluid media — never let an image/video/embed be wider than its container. */
img, svg, video, canvas, audio, iframe, embed, object { max-width: 100%; }
img:not([width]):not([height]) { height: auto; }

/* Long words / URLs (emails in comments, long course titles) must wrap instead
   of pushing the layout wider than the viewport. */
.content-block p,
.content-block li,
.ttr-product-info,
.comment-list .comment-text,
.course-content,
.widget p,
.dz-title,
td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Optional helper for responsive 16:9 video embeds (YouTube/Vimeo).
   Wrap an <iframe> in <div class="c3-embed-responsive"> to use it. */
.c3-embed-responsive { position: relative; width: 100%; padding-top: 56.25%; }
.c3-embed-responsive > iframe,
.c3-embed-responsive > video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Belt-and-braces: stop accidental horizontal scrolling on phones. `clip`
   (unlike `hidden`) does not break position: sticky/fixed headers. */
@media (max-width: 575.98px) {
    html, body { overflow-x: clip; }
}