/* Demo-only overrides for islamicaudio-new public theme.
 * Loaded AFTER style.css. Keep tiny — every rule here is a legacy parity fix,
 * not a redesign. Document the WHY for each block.
 */

/* --- Broadcast detail hero (.view-tp-banner) ---------------------------- */
/* Legacy bundles a global `.row{display:flex}` from a Bootstrap 4 helper that
 * we don't ship. Without it the row inside the flex container collapses to its
 * column widths instead of filling 1140px, and the col-md-5 / col-md-7 split
 * never engages. Force the flex layout that legacy expects.
 */
.view-tp-banner > .container > .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Bootstrap-3 column widths inside a flex parent need explicit `flex-basis`
 * so they don't shrink past their percent width. Mirrors legacy's resolved
 * computed style (475px / 665px on a 1140 row).
 */
.view-tp-banner .col-md-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.6667%;
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
}
.view-tp-banner .col-md-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.3333%;
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
}

@media (max-width: 991px) {
    .view-tp-banner .col-md-5,
    .view-tp-banner .col-md-7 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- Hero thumbnail framing -------------------------------------------- */
/* Centre the thumbnail in the left col without breaking the player below. */
.view-tp-banner .view__player > img.img-responsive {
    display: block;
    margin: 0 auto 15px;
}

/* --- Smart player wrapper (renamed from `audio__player` to avoid clash
 * with legacy fixed bottom-bar widget that hijacks position:fixed).
 * This wrapper is for the per-broadcast inline player.
 */
.smart-player {
    margin: 10px 0 15px;
}
.smart-player audio {
    width: 100%;
    display: block;
}
.smart-player .btn {
    margin-top: 5px;
}