/* ============================================================
   VYNL  responsive.css  -  Mobile-First Layout System  v172
   Loads AFTER style.css . Pure layout overrides, no design changes
   ============================================================ */

/* -- 0. GLOBAL SAFETY RESETS (all screens) ------------------- */
html {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
}
body {
    overflow-x: hidden !important;
    min-height: 100dvh !important;
    min-height: -webkit-fill-available !important;
}
.deck-wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* -- COLLAPSE BUTTON: hidden by default ---------------------- */
#crateCollapseBtn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(198, 138, 76, 0.12);
    border: 1px solid rgba(198, 138, 76, 0.35);
    color: var(--accent, #c68a4c);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    text-transform: uppercase;
    transition: background 0.18s ease;
    flex-shrink: 0;
}
#crateCollapseBtn:hover { background: rgba(198, 138, 76, 0.24); }

/* -- TABLET DRAWER BUTTON + OVERLAY: hidden by default ------- */
#tabletQueueDrawerBtn { display: none; font-family: inherit; }
.tablet-drawer-overlay { display: none; }
.tablet-drawer-overlay.active {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 99989 !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}


/* ============================================================
   1.  MOBILE  (<= 767 px)
   ============================================================ */
@media (max-width: 767px) {

    body {
        padding-top:    max(0px, env(safe-area-inset-top,    0px)) !important;
        padding-left:   max(0px, env(safe-area-inset-left,   0px)) !important;
        padding-right:  max(0px, env(safe-area-inset-right,  0px)) !important;
        padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
        align-items: stretch !important;
    }

    /* --- HEADER: sticky, 2-row, tiny logo ------------------- */
    .app-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 99998 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 0 8px !important;
        row-gap: 5px !important;
        padding: 6px 12px !important;
        background: rgba(245, 242, 235, 0.97) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                    opacity  0.28s ease !important;
    }
    .app-header.header-hidden {
        transform: translateY(-112%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Logo: Row 1 left, very small */
    .logo-area {
        order: 1 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
    }
    .logo-main-title {
        font-size: 1.15rem !important;
        line-height: 1 !important;
        letter-spacing: 1.5px !important;
    }
    /* Hide "STUDIO PLAYER" subtitle on mobile */
    .logo-text > span { display: none !important; }

    /* Header-controls: Row 1 right + Row 2 secondary */
    .header-controls {
        order: 2 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 3px !important;
    }
    .hdr-actions-primary {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .hdr-actions-secondary {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }

    /* Auth: icon only */
    #btn-header-auth > span#headerAuthBtnText { display: none !important; }
    #btn-header-auth { padding: 4px 8px !important; min-width: 30px !important; justify-content: center !important; }

    /* Sync: icon only */
    #openSyncHubBtn > span { display: none !important; }
    #openSyncHubBtn { padding: 4px 8px !important; justify-content: center !important; }

    /* PWA install: keep hidden */
    #btn-pwa-install-header { display: none !important; }

    /* Secondary: very small + muted */
    #navBlogBtn, #openA11yBtn { font-size: 0.62rem !important; padding: 2px 5px !important; opacity: 0.7 !important; gap: 2px !important; }
    #infoBtn { font-size: 0.62rem !important; padding: 2px 5px !important; opacity: 0.7 !important; }
    .hq-switch-container { transform: scale(0.78) !important; transform-origin: right center !important; }

    /* Search: full-width Row 2 */
    #headerSearchContainer { order: 3 !important; flex: 1 1 100% !important; }

    /* --- APP CONTAINER --------------------------------------- */
    .app-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 10px calc(138px + env(safe-area-inset-bottom, 0px)) 10px !important;
        gap: 14px !important;
    }

    /* --- MAIN LAYOUT: single-column flex -------------------- */
    .main-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        gap: 14px !important;
        align-items: stretch !important;
    }
    .main-layout > * {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Order: Crate -> Player -> Queue */
    #coverFlowDrawer, .inline-crate-section {
        order: 1 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px 10px 16px 10px !important;
        background: var(--panel-bg) !important;
        border: 1px solid var(--panel-border) !important;
        border-radius: 8px !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 20 !important;
    }
    .player-column {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .details-column {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .inline-crate-section .carousel-section {
        min-height: 290px !important;
        height: 290px !important;
        overflow: hidden !important;
    }

    /* --- CRATE COLLAPSE ------------------------------------- */
    #crateCollapseBtn { display: flex !important; }
    #coverFlowDrawer.crate-collapsed .carousel-section,
    #coverFlowDrawer.crate-collapsed #coverFlowCarousel,
    #coverFlowDrawer.crate-collapsed #alphabet-nav,
    #coverFlowDrawer.crate-collapsed #crateArtistNavigator {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #coverFlowDrawer.crate-collapsed { min-height: 0 !important; }

    /* --- TURNTABLE SCALE ------------------------------------ */
    :root {
        --deck-scale: min(0.75, calc((100vw - 24px) / 540)) !important;
        --crate-card-size: 220px !important;
    }

    /* --- FIXED BOTTOM PLAYER BAR --------------------------- */
    .player-unified-studio-deck {
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        z-index: 99999 !important;
        border-radius: 14px 14px 0 0 !important;
        border-top: 1px solid rgba(198,138,76,0.45) !important;
        border-left: none !important; border-right: none !important; border-bottom: none !important;
        background: rgba(10,11,16,0.98) !important;
        backdrop-filter: blur(26px) !important;
        -webkit-backdrop-filter: blur(26px) !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.92) !important;
        padding-top: 10px !important;
        padding-left:   max(14px, env(safe-area-inset-left,   0px)) !important;
        padding-right:  max(14px, env(safe-area-inset-right,  0px)) !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }
    .player-unified-studio-deck .deck-dsp-toggle-row { display: none !important; }
    .player-unified-studio-deck #turntableAudioDspPanel { display: none !important; }
    .player-unified-studio-deck .volume-slider-container { display: none !important; }
    .player-unified-studio-deck .control-btn.primary { width: 46px !important; height: 46px !important; }
    .player-unified-studio-deck .control-btn.secondary { width: 36px !important; height: 36px !important; }
    .player-unified-studio-deck .track-details h2 { font-size: 0.9rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .player-unified-studio-deck .track-cover-thumbnail { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; }

    #tabletQueueDrawerBtn { display: none !important; }
}


/* ============================================================
   2.  TABLET  (768 - 1023 px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    body { padding: 0 !important; align-items: stretch !important; }

    /* Header: 1-row compact */
    .app-header { flex-wrap: nowrap !important; padding: 8px 16px !important; }
    #openSyncHubBtn > span { display: none !important; }
    #openSyncHubBtn { padding: 5px 10px !important; justify-content: center !important; }

    /* App container */
    .app-container {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        padding: 12px 14px calc(128px + env(safe-area-inset-bottom, 0px)) 14px !important;
        gap: 16px !important;
    }

    /* Main layout: 2-column grid */
    .main-layout {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 16px !important;
        align-items: start !important;
        width: 100% !important;
    }
    .main-layout > * { min-width: 0 !important; max-width: 100% !important; grid-column: auto !important; grid-row: auto !important; }

    /* Plattenkiste: col 1 */
    #coverFlowDrawer, .inline-crate-section {
        grid-column: 1 / 2 !important; grid-row: 1 !important; order: 1 !important;
        min-height: 460px !important; height: auto !important;
        padding: 14px !important;
        background: var(--panel-bg) !important; border: 1px solid var(--panel-border) !important;
        border-radius: 8px !important; overflow: visible !important; position: relative !important; z-index: 20 !important;
    }
    /* Turntable: col 2 */
    .player-column {
        grid-column: 2 / 3 !important; grid-row: 1 !important; order: 2 !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
    }
    .inline-crate-section .carousel-section { min-height: 310px !important; height: 310px !important; overflow: hidden !important; }

    /* Details column: slide-in drawer */
    .details-column {
        position: fixed !important;
        top: 0 !important; right: -105% !important; bottom: 0 !important;
        width: min(420px, 92vw) !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        z-index: 99990 !important;
        display: flex !important; flex-direction: column !important; gap: 16px !important;
        padding: 20px 14px !important;
        background: var(--panel-bg) !important;
        border-left: 1px solid rgba(198,138,76,0.3) !important;
        box-shadow: -10px 0 50px rgba(0,0,0,0.4) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        transition: right 0.32s cubic-bezier(0.4,0,0.2,1) !important;
        grid-column: auto !important; grid-row: auto !important;
    }
    .details-column.drawer-open { right: 0 !important; }

    /* Tablet drawer button */
    #tabletQueueDrawerBtn {
        display: flex !important;
        position: fixed !important;
        bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        z-index: 9998 !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 11px 18px !important;
        background: linear-gradient(135deg, #c68a4c 0%, #e8a55a 100%) !important;
        color: #fff !important;
        font-weight: 800 !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.6px !important;
        border: none !important;
        border-radius: 28px !important;
        box-shadow: 0 6px 24px rgba(198,138,76,0.55), 0 2px 8px rgba(0,0,0,0.35) !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        touch-action: manipulation !important;
        -webkit-user-select: none !important; user-select: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    #tabletQueueDrawerBtn:active { transform: scale(0.96) !important; }

    /* Turntable scale for tablet */
    :root {
        --deck-scale: min(0.94, calc((100vw - 50px) / 1080)) !important;
        --crate-card-size: clamp(200px, 28vw, 280px) !important;
    }

    /* Fixed bottom player bar */
    .player-unified-studio-deck {
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        z-index: 99999 !important;
        border-radius: 14px 14px 0 0 !important;
        border-top: 1px solid rgba(198,138,76,0.45) !important;
        border-left: none !important; border-right: none !important; border-bottom: none !important;
        background: rgba(10,11,16,0.97) !important;
        backdrop-filter: blur(26px) !important; -webkit-backdrop-filter: blur(26px) !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.88) !important;
        padding: 12px 24px max(12px, env(safe-area-inset-bottom, 0px)) 24px !important;
        gap: 10px !important; box-sizing: border-box !important;
    }
    .player-unified-studio-deck .deck-dsp-toggle-row { display: none !important; }
    .player-unified-studio-deck .volume-slider-container { display: none !important; }

    /* Crate collapse */
    #crateCollapseBtn { display: flex !important; }
    #coverFlowDrawer.crate-collapsed .carousel-section,
    #coverFlowDrawer.crate-collapsed #coverFlowCarousel,
    #coverFlowDrawer.crate-collapsed #alphabet-nav,
    #coverFlowDrawer.crate-collapsed #crateArtistNavigator {
        display: none !important; height: 0 !important; min-height: 0 !important;
        overflow: hidden !important; margin: 0 !important; padding: 0 !important;
    }
    #coverFlowDrawer.crate-collapsed { min-height: 0 !important; }
}


/* ============================================================
   3.  NOTEBOOK  (1024 - 1279 px)
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {

    body { padding: 20px 12px !important; }
    .app-header { flex-wrap: nowrap !important; padding: 8px 0 10px 0 !important; }
    .app-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; gap: 14px !important; }

    /* 3-column compact grid */
    .main-layout {
        display: grid !important;
        grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.2fr) minmax(220px, 0.9fr) !important;
        gap: 14px !important;
        align-items: start !important;
        width: 100% !important;
    }
    .main-layout > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }

    #coverFlowDrawer, .inline-crate-section {
        grid-column: 1 / 2 !important; grid-row: 1 !important; order: unset !important;
        min-height: 580px !important; height: auto !important;
        padding: 16px !important;
        background: var(--panel-bg) !important; border: 1px solid var(--panel-border) !important;
        border-radius: 8px !important; overflow: visible !important; position: relative !important; z-index: 20 !important;
    }
    .player-column {
        grid-column: 2 / 3 !important; grid-row: 1 !important; order: unset !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
    }
    .details-column {
        grid-column: 3 / 4 !important; grid-row: 1 !important; order: unset !important;
        position: static !important;
        right: auto !important; bottom: auto !important;
        width: 100% !important; height: auto !important; max-height: none !important;
        overflow-y: visible !important;
        border-left: none !important; box-shadow: none !important;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        transition: none !important;
        background: transparent !important; padding: 0 !important;
        display: flex !important; flex-direction: column !important; gap: 14px !important;
    }
    .inline-crate-section .carousel-section { min-height: 300px !important; height: 300px !important; overflow: hidden !important; }

    :root {
        --deck-scale: min(0.96, calc(0.4 * (100vw - 60px) / 540)) !important;
        --crate-card-size: clamp(200px, 17vw, 280px) !important;
    }

    /* Player: static */
    .player-unified-studio-deck {
        position: static !important;
        width: 100% !important; max-width: 540px !important; margin: 14px auto 0 auto !important;
        border-radius: 8px !important; border: 1px solid var(--panel-border) !important;
        box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    }
    .player-unified-studio-deck .deck-dsp-toggle-row { display: flex !important; }
    .player-unified-studio-deck .volume-slider-container { display: flex !important; }

    #tabletQueueDrawerBtn { display: none !important; }
    .tablet-drawer-overlay { display: none !important; }

    #crateCollapseBtn { display: flex !important; }
    #coverFlowDrawer.crate-collapsed .carousel-section,
    #coverFlowDrawer.crate-collapsed #coverFlowCarousel,
    #coverFlowDrawer.crate-collapsed #alphabet-nav,
    #coverFlowDrawer.crate-collapsed #crateArtistNavigator {
        display: none !important; height: 0 !important; min-height: 0 !important;
    }
    #coverFlowDrawer.crate-collapsed { min-height: 0 !important; }
}


/* ============================================================
   4.  DESKTOP / WIDESCREEN  (>= 1280 px)
   ============================================================ */
@media (min-width: 1280px) {

    body { padding: 40px 20px !important; padding-top: max(40px, env(safe-area-inset-top, 0px)) !important; }
    .app-container { width: 98% !important; max-width: 100% !important; padding: 0 16px 40px 16px !important; gap: 16px !important; }

    .main-layout {
        display: grid !important;
        grid-template-columns: minmax(280px, 1fr) minmax(460px, 1.3fr) minmax(280px, 1fr) !important;
        gap: 20px !important;
        align-items: start !important;
        width: 100% !important;
    }
    .main-layout > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }

    #coverFlowDrawer, .inline-crate-section {
        grid-column: 1 / 2 !important; grid-row: 1 !important; order: unset !important;
        min-height: 640px !important; padding: 18px !important;
        background: var(--panel-bg) !important; border: 1px solid var(--panel-border) !important;
        border-radius: 8px !important; overflow: visible !important; position: relative !important; z-index: 20 !important;
    }
    .player-column {
        grid-column: 2 / 3 !important; grid-row: 1 !important; order: unset !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
    }
    .details-column {
        grid-column: 3 / 4 !important; grid-row: 1 !important; order: unset !important;
        position: static !important; right: auto !important; bottom: auto !important;
        width: 100% !important; height: auto !important; overflow-y: visible !important;
        border-left: none !important; box-shadow: none !important;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        transition: none !important; background: transparent !important; padding: 0 !important;
        display: flex !important; flex-direction: column !important; gap: 16px !important;
    }
    .inline-crate-section .carousel-section { min-height: 340px !important; height: 340px !important; overflow: hidden !important; }

    :root {
        --deck-scale: min(1.15, calc(0.394 * (100vw - 72px) / 540)) !important;
        --crate-card-size: clamp(240px, 20vw, 340px) !important;
    }

    .player-unified-studio-deck {
        position: static !important;
        width: 100% !important; max-width: 540px !important; margin: 16px auto 0 auto !important;
    }
    .player-unified-studio-deck .deck-dsp-toggle-row { display: flex !important; }
    .player-unified-studio-deck .volume-slider-container { display: flex !important; }

    #tabletQueueDrawerBtn { display: none !important; }
    .tablet-drawer-overlay { display: none !important; }
    #crateCollapseBtn { display: none !important; }
}