/* Medium breakpoint styles (<992px) */
@media (max-width: 992px) {
    /* ---- Upload review: six columns do not fit a tablet, let alone a phone.
       Each row becomes a card and each cell is titled from its data-label, so
       nothing has to be read against a header row that is off screen. Only the
       review table: the progress view has four columns and reads fine as one.

       The selectors are child-combinator and !important on purpose. Bootstrap
       styles cells at .table > :not(caption) > * > * - specificity 0,1,3 - and
       sets padding, a bottom border, a background AND the stripe, which it paints
       as an inset box-shadow. A plain .review-table td is 0,1,1 and loses all four,
       which is how the first version of this rendered as a table anyway. */
    .review-table thead { display: none; }

    .review-table,
    .review-table > tbody,
    .review-table > tbody > tr,
    .review-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .review-table > tbody > tr {
        border-style: solid;
        border-width: 1px;
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 14px;
    }

    .review-table > tbody > tr > td {
        min-width: 0 !important;
        padding: 8px 0 !important;
        border: none !important;

        /* The card carries its own colour, on the row. Leaving these on the cells
           would stripe alternate cards and paint the problem row Bootstrap yellow,
           which is not a themed colour and reads badly on the dark surface. */
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .review-table > tbody > tr > td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* The one cell whose label would just repeat the value under it. */
    .review-table > tbody > tr > td[data-label="Song title"]::before { display: none; }

    .apply-all-field { min-width: 100%; }

    .mobile-app-install-banner {
        min-height: 60px;
        padding: 8px 16px;
        gap: 10px;
    }

    .mobile-app-install-icon {
        width: 40px;
        height: 40px;
    }

    .mobile-app-install-title {
        font-size: 15px;
    }

    .mobile-app-install-subtitle {
        font-size: 13px;
    }

    .mobile-app-install-store-badge {
        height: 38px;
    }

    .mobile-app-install-store-text {
        min-height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }
}

/* Medium breakpoint styles (<992px) */
@media (max-width: 992px) {
    /* AdminSongManagement container */
    #grid-container {
        width: 100%;
        height: calc(100vh - 8rem);
    }

    .song-text-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 15px;
    }

    /* Stream Count on Card */
    /* See the note in lg_app.css: dead colour and a fighting margin, both removed. */
    .card-stream-count {
        gap: 4px;
        font-size: 12px;
    }

    .stream-icon {
        width: 12px;
        height: 12px;
        fill: currentColor;
    }

    /* Featured Music Carousel - MD breakpoint: show ~3.2 cards */
    .featured-music-carousel {
        gap: 20px;
        padding-right: 20px;
    }

    .featured-music-carousel .music-card {
        /* 3.2 cards visible: 100vw / 3.2 ≈ 31.25vw per card */
        width: calc(100vw / 3.2 - 24px);
        min-width: 200px;
    }

    .home-container {
        padding: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Hero Section - MD Breakpoint */
    .hero-section {
        flex-direction: row;
        flex-wrap: nowrap;
        text-align: left;
        gap: 1.5rem;
        padding: 1.5rem 0;
    }

    .hero-content {
        min-width: 0;
        max-width: 28rem;
    }

    .hero-title {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 400px;
        margin-bottom: 1.5rem;
    }

    .hero-cta {
        justify-content: flex-start;
        gap: 0.875rem;
    }

    .hero-visual {
        margin-left: auto;
    }

    .cta-primary,
    .cta-secondary {
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    .cta-large {
        padding: 14px 36px;
        font-size: 1rem;
    }

    .hero-animation {
        width: 220px;
        height: 220px;
    }

    /* Features Section - MD Breakpoint */
    .features-section {
        padding: 2.5rem 0;
    }

    .features-section .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .features-grid {
        gap: 1.25rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    .feature-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 1rem;
    }

    .feature-icon svg {
        width: 36px;
        height: 36px;
    }

    .feature-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .feature-card p {
        font-size: 0.9rem;
        margin: 0;
    }

    /* User Playlists Section - MD Breakpoint */
    .user-playlists-section {
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .user-playlists-section .section-title {
        font-size: 1.75rem;
    }

    /* Featured Music Section - MD Breakpoint */
    .featured-music-section {
        padding: 1.5rem 0;
    }

    .featured-music-section .section-title {
        font-size: 1.75rem;
    }

    .featured-music-section .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    /* CTA Split Section - Stack vertically on medium screens */
    .cta-split-section {
        margin: 2rem 0;
    }

    .cta-split-container {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 1.5rem;
    }

    .cta-card {
        padding: 2.5rem 2rem;
        width: 100%;
    }

    .cta-icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 1.25rem;
    }

    .cta-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .cta-description {
        font-size: 1.0625rem;
        margin-bottom: 1.5rem;
    }

    .cta-benefits {
        margin-bottom: 1.5rem;
        max-width: 100%;
    }

    .cta-benefits li {
        font-size: 1rem;
        gap: 10px;
        margin-bottom: 0.875rem;
    }

    .cta-price-highlight {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .cta-price-highlight .price {
        font-size: 2rem;
    }

    .cta-auth-text {
        font-size: 1.125rem;
        margin-bottom: 1.25rem;
    }

    .cta-button {
        padding: 1rem 2rem;
        font-size: 1.0625rem;
        width: 100%;
    }

    .cta-button-group {
        flex-direction: row;
    }

    .cta-button-group .cta-button {
        width: auto;
        min-width: auto;
        flex: 1;
    }

}


@media (max-width: 992px) {
    /*
     * SONG PLAYER - "Marquee" sizing: tablet.
     * The hero stacks and centres, and the stage drops to a single column so the
     * lyrics panel keeps a readable measure instead of being squeezed beside the
     * artist card.
     */
    .song-player-container .song-header { min-height: 0; padding: 30px 36px 26px; }
    .song-player-container .song-hero-inner {
        grid-template-areas: "art" "text" "actions";
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: 16px;
    }
    .song-player-container .song-tag-row,
    .song-player-container .song-meta-row,
    .song-player-container .action-controls { justify-content: center; }
    .song-player-container .player-art-shell { width: 176px; height: 176px; }
    .song-player-container .song-title { font-size: 50px; letter-spacing: -.034em; line-height: 1; }
    .song-player-container .song-stage { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 36px 0; }
    .song-player-container .song-panel { height: auto; }
    .song-player-container .song-stage-panel { height: 320px; padding: 22px 28px; }
    .song-player-container .song-panel-body { height: 218px; }
    .song-player-container .song-stage-art { max-height: 218px; }
    .song-player-container .lyrics-scroller--player { font-size: 20px; }
    .song-player-container .song-artist-panel { padding: 22px; }
    .song-player-container .persona-identity { margin: 14px 0 12px; }
    .song-player-container .player-bar { margin: 20px 36px 20px; height: 72px; padding: 0 22px; gap: 16px; }
}


@media (max-width: 992px) {
    /*
     * PLAYLIST PLAYER - tablet. The hero stacks and centres, the stage drops to
     * one column, and the table SHEDS COLUMNS: artist, genre and streams are
     * hidden and their content moves into .track-sub under the title. Before
     * this the table kept all eight columns at every width and simply shrank
     * its type, reaching 8px on a phone.
     */
    .playlist-player-container .playlist-header { padding: 28px 36px 24px; }
    .playlist-player-container .playlist-hero-inner {
        grid-template-areas: "art" "text" "actions";
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: 16px;
    }
    .playlist-player-container .playlist-tag-row,
    .playlist-player-container .playlist-meta-row,
    .playlist-player-container .action-controls { justify-content: center; }
    .playlist-player-container .player-art-shell { width: 150px; height: 150px; }
    .playlist-player-container .song-title { font-size: 50px; letter-spacing: -.034em; line-height: 1; }
    .playlist-player-container .playlist-meta-row { gap: 14px; font-size: 13.5px; }

    .playlist-player-container .playlist-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 36px 0; }
    .playlist-player-container .playlist-side { flex-direction: row; align-items: stretch; gap: 16px; }
    .playlist-player-container .playlist-side > * { flex: 1; min-width: 0; }
    .playlist-player-container .playlist-stage-panel { height: 210px; }
    .playlist-player-container .playlist-stage-panel .playlist-panel-body { height: 128px; }
    .playlist-player-container .playlist-stage-art { max-height: 128px; }
    .playlist-player-container .lyrics-scroller--player { font-size: 16px; }
    .playlist-player-container .playlist-artist-panel,
    .playlist-player-container .playlist-about-panel { flex: 1; }

    .playlist-player-container .track-list th.track-artist,
    .playlist-player-container .track-list th.track-genre,
    .playlist-player-container .track-list th.track-streams,
    .playlist-player-container .track-row td.track-artist,
    .playlist-player-container .track-row td.track-genre,
    .playlist-player-container .track-row td.track-streams { display: none; }
    .playlist-player-container .track-sub { display: block; margin-top: 2px; font-size: 12.5px; }

    .playlist-player-container .player-bar { margin: 18px 36px 18px; height: 72px; padding: 0 22px; gap: 16px; }

/* Auth pages - the panel becomes a banner. A 620px rail plus a 400px column needs more
       width than this breakpoint has. */
    /* Stacked, an inner scroll area would trap the form under a banner the reader cannot
       scroll past, so the page grows and the whole thing scrolls normally. */
    .auth-page { flex-direction: column; height: auto; }
    .auth-form-col { overflow-y: visible; }
    .auth-panel { width: auto; height: 260px; padding: 30px 40px; }
    .auth-panel-logo { height: 34px; }
    .auth-panel-eyebrow { margin-bottom: 8px; }
    .auth-panel-title { font-size: 34px; line-height: 1.12; margin-bottom: 10px; }
    .auth-panel-body { font-size: 15px; line-height: 1.55; max-width: 540px; margin-bottom: 14px; }
    .auth-form-col { padding: 40px 32px; align-items: flex-start; }

/* Settings surfaces - the rail needs about 1030px beside a readable column, so it is
       dropped here rather than squeezed. */
    .settings-page { padding: 30px 32px 48px; gap: 0; }
    .settings-nav { display: none; }
    .settings-main { max-width: 700px; }
    .settings-column { gap: 20px; }
}