/* =========================================================================
   Responsive safety fixes (loaded after styles.css)

   Root cause of the mobile breakage:
   The page layout yields content into a bare flex ".row" (.bg-content > .row).
   Its direct children default to min-width:auto, so the homepage's top section
   (.trending-news) grew to the intrinsic width of its slick carousel track
   (~1.1M px) and the whole body could be panned sideways on phones.

   Fix: let ONLY those direct flex children shrink (min-width:0) so a wide
   carousel can't stretch the page, and clip the carousels themselves. We do
   NOT touch the carousel's internal float layout, so the slider keeps its
   normal width and rotating content on both desktop and mobile.
   ========================================================================= */

/* Global guard against horizontal scroll */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Allow the layout's top-level flex sections to shrink below their content */
.bg-content > .row {
    min-width: 0;
}

.bg-content > .row > * {
    min-width: 0;
    max-width: 100%;
}

/* Clip the slick carousels so an oversized track can't widen the page */
.card__post-carousel,
.trending-news-slider {
    max-width: 100%;
    overflow: hidden;
}

.slick-list {
    overflow: hidden !important;
}

/* Long poem text wraps instead of widening its container */
.card-content,
.poem-body,
.single-poem {
    overflow-wrap: break-word;
    word-wrap: break-word;
}