/* ============================================
   Sonify — Responsive Styles
   Mobile & tablet breakpoints
   ============================================ */

/* ── Tablet (≤ 1024px) ────────────────────── */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }

    .main-content {
        padding: 20px 24px;
        padding-bottom: calc(var(--player-height) + 32px);
    }

    .album-detail-header {
        gap: 24px;
        padding: 24px;
    }

    .album-detail-cover {
        width: 180px;
        height: 180px;
    }

    .album-detail-title {
        font-size: 2rem;
    }

    .section-greeting {
        font-size: 1.7rem;
    }
}

/* ── Mobile (≤ 768px) ─────────────────────── */
@media (max-width: 768px) {

    /* Show mobile menu button */
    .mobile-menu-btn {
        display: flex !important;
    }

    /* Hide sidebar off-screen */
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: none;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
    }

    /* Main content full width */
    .main-content {
        margin-left: 0;
        padding: 64px 16px 120px;
    }

    /* Greeting */
    .section-greeting {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.2rem;
    }

    /* Song grid: 2 columns on mobile */
    .songs-grid, .albums-grid {
        --bs-columns: 2 !important;
    }

    /* Album detail */
    .album-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }

    .album-detail-cover {
        width: 160px;
        height: 160px;
    }

    .album-detail-title {
        font-size: 1.5rem;
    }

    .album-detail-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Bottom Player - compact */
    .bottom-player {
        height: 72px;
        padding: 0 12px;
        gap: 10px;
    }

    .player-song-info {
        min-width: 120px;
        max-width: 160px;
    }

    .player-cover {
        width: 44px;
        height: 44px;
    }

    .player-title {
        font-size: 0.78rem;
    }

    .player-artist {
        font-size: 0.68rem;
    }

    .player-controls-center {
        max-width: 180px;
    }

    .player-buttons {
        gap: 10px;
    }

    .player-progress-wrapper {
        display: none;
    }

    .player-volume {
        display: none;
    }

    #spotifyPlayer {
        height: 64px !important;
    }

    /* Search bar */
    .search-bar-wrapper {
        max-width: 100%;
    }

    /* Toast position */
    .toast-container {
        top: auto;
        bottom: 80px;
        right: 12px;
        left: 12px;
    }

    .sonify-toast {
        min-width: auto;
        max-width: 100%;
    }

    /* Decorative arcs smaller */
    .bg-arc-1 {
        width: 400px;
        height: 400px;
    }

    .bg-arc-2 {
        width: 600px;
        height: 600px;
    }

    .bg-arc-3 {
        display: none;
    }
}

/* ── Small Mobile (≤ 480px) ───────────────── */
@media (max-width: 480px) {

    .main-content {
        padding: 60px 12px 120px;
    }

    .section-greeting {
        font-size: 1.3rem;
    }

    .section-title {
        font-size: 1.05rem;
        margin-top: 28px;
    }

    .album-detail-cover {
        width: 130px;
        height: 130px;
    }

    .album-detail-title {
        font-size: 1.3rem;
    }

    .player-song-info {
        min-width: 100px;
        max-width: 130px;
    }

    .player-cover {
        width: 38px;
        height: 38px;
    }

    .player-btn-play {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .album-song-row {
        padding: 8px 10px;
        gap: 10px;
    }

    .album-song-cover {
        width: 34px;
        height: 34px;
    }
}
/* Responsive refinements for the editorial home and embedded player. */
@media(max-width:1100px) and (min-width:769px) { .main-content { padding-left:24px; padding-right:24px; }.hero-copy { padding:32px 25px; }.hero-copy h2 { font-size:43px; }.hero-art { transform:scale(.8); transform-origin:right center; width:48%; }.hero-actions { gap:12px; }.hero-explore { font-size:10px; }.mood-card { padding:15px; }.mood-card strong { font-size:12px; }.collection-note { display:none; } }
@media(max-width:768px) { .main-content { padding:72px 20px 180px; }.sonify-hero { min-height:355px; }.hero-copy { padding:32px 25px; width:64%; }.hero-copy h2 { font-size:46px; }.hero-art { width:43%; transform:scale(.78); transform-origin:right center; right:-8px; }.collection-note { display:none; }.mood-grid { gap:10px; }.mood-card { padding:14px; }.mood-card strong { font-size:12px; }.mood-card>i { display:none; }.search-bar-wrapper { max-width:none; }.bottom-player { height:100px; }.player-progress-wrapper { display:flex; }.player-controls-center { max-width:none; }.bottom-player.spotify-mode { height:155px; flex-wrap:wrap; padding:12px; gap:6px; }.spotify-mode .player-song-info { flex-basis:100%; max-width:none; }.spotify-mode .player-cover { width:28px; height:28px; }.spotify-mode .player-controls-center { flex-basis:100%; }.spotify-mode #spotifyPlayer { height:80px!important; }.sidebar-foot { padding-bottom:120px; }.toast-container { bottom:165px; }.mobile-menu-btn { top:15px; border-radius:10px; }.sidebar { z-index:1040; } }
@media(max-width:520px) { .main-content { padding-left:16px; padding-right:16px; }.sonify-hero { min-height:540px; }.hero-copy { width:100%; padding:30px 24px; }.hero-copy h2 { font-size:46px; letter-spacing:-2px; }.hero-copy p { font-size:11px; }.hero-caption { display:none; }.hero-art { top:280px; right:10px; height:245px; width:95%; transform:scale(.72); transform-origin:center top; }.sleeve-main { top:16px; left:28px; }.vinyl { top:0; left:145px; }.sleeve-small { bottom:-65px; right:0; }.sound-tag { bottom:-50px; left:15px; }.art-star { right:0; top:0; }.mood-grid { grid-template-columns:1fr; gap:9px; }.mood-card { min-height:85px; padding:17px; }.mood-card>i { display:block; }.mood-card strong { font-size:14px; }.collection-heading h2,.section-title { font-size:18px; }.songs-grid { --bs-gutter-x:16px; --bs-gutter-y:20px; }.player-song-info { min-width:100px; max-width:140px; }.player-progress-wrapper { gap:5px; }.player-time { font-size:9px; }.hero-actions { gap:15px; }.sidebar-note { margin-top:12px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }.fade-in-up { opacity:1; } }
@media(max-width:768px) { .bottom-player.spotify-mode { height:185px; }.spotify-navigation { width:100%; justify-content:center; height:22px; }.main-content { padding-bottom:215px; }.toast-container { bottom:190px; } }
@media(max-width:520px) { .sonify-hero { min-height:630px; }.hero-art { top:365px; } }