/* ─────────────────────────────────────────────────────────────
   bbs-mobile.css — mobile-responsive layout overrides
   ───────────────────────────────────────────────────────────── */

/* center bg owned by bbs-light-center.css (white, original adonis design) */

/* ────────────────────────────────────────────────────────────
   HOME PAGE HERO
   ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .bbs-hero { height: 400px !important; }
}
@media (max-width: 767px) {
    .bbs-hero { height: 320px !important; }
    .bbs-hero-cover {
        width:  100px !important;
        height: 100px !important;
    }
}
@media (max-width: 575px) {
    .bbs-hero { height: 240px !important; }
    .bbs-hero-cover {
        width:  76px !important;
        height: 76px !important;
    }
    /* hero play buttons: stack on very small screens */
    .bbs-hero .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 8px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   ALBUM HERO COVER
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .bbs-album-hero-img {
        width:  150px !important;
        height: 150px !important;
    }
}
@media (max-width: 575px) {
    .bbs-album-hero-img {
        width:  110px !important;
        height: 110px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   ARTIST HERO AVATAR
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .bbs-artist-hero-img {
        width:  100px !important;
        height: 100px !important;
    }
}
@media (max-width: 575px) {
    .bbs-artist-hero-img {
        width:  80px !important;
        height: 80px !important;
    }
}

/* ────────────────────────────────────────────────────────────
   TRACK LIST — expand title when genre/duration are hidden
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .adonis-album-list > li .item-title {
        width:     auto  !important;
        max-width: none  !important;
        flex:      1 1 auto;
    }
    .adonis-album-list > li .item-tools {
        width:     44px !important;
        min-width: 44px !important;
    }
    /* header row: hide extra column headers too */
    .adonis-album-list > li:first-child .item-genre,
    .adonis-album-list > li:first-child .item-duration {
        display: none !important;
    }
}

/* ────────────────────────────────────────────────────────────
   PLAYER BAR
   ─────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .adonis-player-wrap .jp-time { font-size: .7rem; }
    .jp-progress { flex: 1 !important; }
    /* Tighten player row padding on phones */
    .adonis-player { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* ────────────────────────────────────────────────────────────
   NAVIGATION
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .bbs-center-nav .m-item,
    .bbs-center-nav .nav-link {
        padding-top:    10px !important;
        padding-bottom: 10px !important;
        padding-left:   10px !important;
        padding-right:  10px !important;
        font-size: .88rem !important;
    }
    .bbs-center-nav .border-hr { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
   GRID CARDS — ensure 2-column on xs (already col-6 in blade)
   ─────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    /* Artist circles: 3 per row instead of 2 */
    .bbs-artist-grid-item {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}

/* ────────────────────────────────────────────────────────────
   FOOTER
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #site-footer footer { padding-top: 2.5rem !important; }
    /* app store buttons: allow wrapping */
    #site-footer .d-flex.flex-wrap { gap: 8px !important; }
}

/* ────────────────────────────────────────────────────────────
   MISC — page section padding on tiny screens
   ─────────────────────────────────────────────────────────── */
@media (max-width: 399px) {
    .pl-e-15 { padding-left:  10px !important; }
    .pr-e-15 { padding-right: 10px !important; }
}