/* Small breakpoint styles (<768px) */
@media (max-width: 768px) {
    .mobile-app-install-banner {
        min-height: 58px;
        padding: 8px 12px;
        gap: 8px;
    }

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

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

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

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

    .mobile-app-install-store-text {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }
}

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

    /* SongPlayer mobile adjustments */
    .song-title {
        font-size: 36px;
    }
    .controls-wrapper { gap: 2px; margin-bottom: 4px; }
    .player-controls { gap: 4px; }
    .player-controls-row { gap: 2px; }
    .volume-bar-container { width: 60px; }
    .volume-controls { gap: 4px; }
    .control-button { width: 28px; height: 28px; }
    .control-icon { width: 14px; height: 14px; }
    .play-button-small { width: 28px; height: 28px; }
    .play-icon-small { width: 14px; height: 14px; }
    .progress-container { gap: 4px; }
    .time-display { min-width: 28px; font-size: 10px; }
    .action-controls { flex-wrap: wrap; gap: 16px; }
    .cart-button-large { padding: 10px 20px; font-size: 13px; }
    .cart-icon-large { width: 18px; height: 18px; }

    /* MusicLibrary small adjustments */
    .music-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }

    /* Featured Music Carousel - SM breakpoint: show ~2.2 cards */
    .featured-music-carousel {
        gap: 16px;
        padding-right: 16px;
    }

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

    .music-card { padding: 12px; }
    .card-song-title { font-size: 13px; }
    .card-volume-bar-container { width: 40px; }

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

    .song-text-details .song-title {
        margin: 0;
    }

    .song-title {
        font-size: 50px;
        font-weight: 700;
        line-height: 1;
        margin: 0 10px 0 10px;
        padding: 0;
    }

    /* 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: 11px;
    }

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

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

    /* Hero Section - phones should stack content first, then animation */
    .hero-section {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        text-align: left;
        gap: 1.25rem;
        padding: 1.5rem 0;
    }

    .hero-content {
        min-width: 0;
        max-width: 100%;
    }

    .hero-title {
        font-size: 2.75rem;
        margin-bottom: 0.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 100%;
        margin-bottom: 1.25rem;
    }

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

    .hero-visual {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

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

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

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

/* Landscape Mobile Optimization - for devices with limited viewport height */
@media (max-width: 1200px) and (max-height: 600px) and (orientation: landscape) {

    /* MusicLibrary - Reduce grid gaps and card spacing in landscape */
    .music-cards-grid {
        gap: 12px;
    }

    .music-card {
        padding: 8px;
    }

    /* Reduce album art size to fit more content vertically */
    /* The margins that used to be here (art 8px, title 6px, actions 6px) stacked on top of the
       card's own flex gap. The gap owns spacing now. */
    .card-song-title {
        font-size: 12px;
    }

    .card-actions-with-likes {
        gap: 4px;
    }

    /* Reduce action button sizes */
    .action-button {
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .action-button .e-btn-icon {
        font-size: 16px !important;
    }

    /* Compact like/dislike buttons */
    .like-button,
    .dislike-button,
    .like-display,
    .dislike-display {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 6px !important;
    }

    .action-icon,
    .display-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .count-text {
        font-size: 0.75rem !important;
    }

    /* Keep the card AI-badge row's like/dislike buttons compact - the rules above
       use !important and would otherwise scale them back up to 32px */
    .card-ai-actions-row .like-button,
    .card-ai-actions-row .dislike-button {
        min-width: 22px !important;
        min-height: 22px !important;
        padding: 3px !important;
    }

    .card-ai-actions-row .action-icon {
        width: 11px !important;
        height: 11px !important;
    }

    .card-ai-actions-row .count-text {
        font-size: 0.7rem !important;
    }

    /* Compact mini player controls */
    .card-mini-player {
        gap: 6px;
    }

    .card-mini-controls-row {
        gap: 6px;
    }

    .card-mini-controls {
        gap: 3px;
    }

    .card-volume-controls {
        gap: 2px;
    }

    .card-volume-bar-container {
        width: 50px;
    }

    .card-progress-container {
        gap: 4px;
    }

    .card-time-display {
        font-size: 10px;
    }

    .app-logo {
        height: 32px;
    }

    .maintenance-warning-label {
        font-size: 0.75rem;
    }

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

    /* Hero Section - landscape should stay side-by-side to avoid the stacked mobile layout */
    .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: 2.75rem;
        margin-bottom: 0.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        max-width: 28rem;
        margin-bottom: 1.25rem;
    }

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

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

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

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

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


    /* Dashboard responsive */
    .dashboard-controls {
        flex-direction: column;
    }

    .dashboard-control-group {
        width: 100%;
    }

    .dashboard-filters {
        width: 100%;
    }
}

@media (max-width: 992px) and (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        text-align: left;
        gap: 1.25rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-subtitle {
        max-width: 100%;
    }

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

    .hero-visual {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

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

/* Lyric timing dialog: a phone keyboard takes most of the screen, so the
   textarea shrinks rather than pushing the buttons out of reach. */
.lyrics-dialog-textarea textarea { min-height: 160px; }
.lyrics-dialog-footer { flex-wrap: wrap; }


@media (max-width: 768px) {
    /* SONG PLAYER - "Marquee" sizing: small tablet / large phone */
    .song-player-container .song-header { padding: 24px 24px 20px; }
    .song-player-container .player-art-shell { width: 140px; height: 140px; border-radius: 12px; }
    .song-player-container .song-title { font-size: 38px; letter-spacing: -.03em; line-height: 1.04; }
    .song-player-container .song-meta-row { gap: 14px; font-size: 13.5px; }
    .song-player-container .song-stage { gap: 16px; padding: 16px 24px 0; }
    .song-player-container .song-stage-panel { height: 300px; padding: 20px 22px; }
    .song-player-container .song-panel-body { height: 202px; }
    .song-player-container .song-stage-art { max-height: 202px; }
    .song-player-container .lyrics-scroller--player { font-size: 19px; }
    .song-player-container .play-button-large { width: 58px; height: 58px; }
    .song-player-container .play-button-large .play-icon { width: 26px; height: 26px; }
    .song-player-container .player-bar { margin: 16px 24px 16px; height: 68px; padding: 0 18px; gap: 12px; }
    .song-player-container .volume-bar-container { width: 68px; }
    .song-player-container .progress-container { gap: 10px; }
}


@media (max-width: 768px) {
    /* PLAYLIST PLAYER - small tablet / large phone */
    .playlist-player-container .playlist-header { padding: 22px 24px 20px; }
    .playlist-player-container .player-art-shell { width: 128px; height: 128px; border-radius: 12px; }
    .playlist-player-container .song-title { font-size: 38px; letter-spacing: -.03em; line-height: 1.04; }
    .playlist-player-container .playlist-stage { gap: 14px; padding: 16px 24px 0; }
    .playlist-player-container .playlist-side { flex-direction: column; }
    .playlist-player-container .playlist-panel { padding: 18px 18px; }
    .playlist-player-container .playlist-stage-panel { height: 200px; }
    .playlist-player-container .playlist-stage-panel .playlist-panel-body { height: 122px; }
    .playlist-player-container .playlist-stage-art { max-height: 122px; }
    .playlist-player-container .play-button-large { width: 58px; height: 58px; }
    .playlist-player-container .play-button-large .play-icon { width: 26px; height: 26px; }
    .playlist-player-container .player-bar { margin: 16px 24px 16px; height: 68px; padding: 0 18px; gap: 12px; }
    .playlist-player-container .volume-bar-container { width: 68px; }
    .playlist-player-container .progress-container { gap: 10px; }
}


@media (max-width: 768px) {
    /* CARDS — small tablet / large phone. The grid track, the gaps and the carousel widths
       are already set higher up in this file; the only change needed here is the touch
       target: the play and view buttons were 36px, under the 44px floor. */
    .music-card { padding: 10px; }
    .card-song-title { font-size: 13.5px; }
    .action-button { height: 44px; }
}


/*
 * HOME AT <=768px, PORTRAIT INCLUDED.
 *
 * These rules used to sit inside the
 *   @media (max-width:1200px) and (max-height:600px) and (orientation: landscape)
 * block above, despite their own comments calling them "SM Breakpoint". So they only ever
 * fired on a SHORT LANDSCAPE viewport, and a portrait phone fell through to md_app.css.
 *
 * The most visible symptom was .cta-button-group keeping flex-direction:row in portrait, so
 * the signup and subscribe buttons squeezed side by side instead of stacking.
 *
 * What stayed behind in the landscape block is the part that genuinely is landscape-specific:
 * the card/library vertical compaction, and the hero deliberately staying side-by-side.
 */
@media (max-width: 768px) {
    /* Features Section - SM Breakpoint */
    .features-section {
        padding: 2rem 0;
    }

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

    .features-grid {
        gap: 1rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .cta-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
    }

    .cta-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

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

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

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

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

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

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

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

    .cta-button-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cta-button-group .cta-button {
        width: 100%;
        min-width: auto;
    }
}