/*
 * Responsive overrides for the old homepage, now served at /nieuws-overzicht
 * (index.php, the only page that sets $homepage). This stylesheet is linked
 * from header.php ONLY when $homepage is set and is loaded AFTER the legacy
 * 210225.css, so it overrides the fixed-pixel float layout without affecting
 * any other page that shares those legacy classes.
 *
 * The legacy desktop layout is:
 *   #wrapper.wrapper (1200px) > .container > .content (976px, float:right)
 *       > .fpleft (576px) + .fpright (376px); section bars .bnihead2 (581px).
 * Below ~1200px the 1200px wrapper overflows, so collapse the floats into a
 * single fluid column and keep media from spilling out of it.
 */
@media (max-width: 1200px) {
    .wrapper {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    .content {
        width: 100%;
        float: none;
        padding-right: 0;
        box-sizing: border-box;
    }

    .fpleft,
    .fpright {
        width: 100%;
        float: none;
        margin-right: 0;
        box-sizing: border-box;
    }

    .fpright {
        margin-top: 16px;
    }

    /* Section header bars are pinned to 581px in the legacy CSS */
    .bnihead2 {
        width: 100%;
        float: none;
        box-sizing: border-box;
    }

    /* Keep images/embeds inside the now-fluid column */
    .content img,
    .content iframe,
    .content video {
        max-width: 100%;
        height: auto;
    }

    /* Drimble TV grid wraps instead of overflowing */
    .content .video-list {
        flex-wrap: wrap;
    }
}