/* =============================================================
 * SynthRadio — Responsive Breakpoints
 * Mobile-first overrides for tablet & mobile.
 * ============================================================= */

/* ------- Large tablet / small desktop (<= 1024px) ------- */
@media (max-width: 1024px) {
    :root { --sr-sidebar-w: 220px; }

    .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--sr-space-8); }
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-sidebar { position: relative; top: 0; }

    .profile-layout { grid-template-columns: 1fr; }

    .live-shell { grid-template-columns: 260px 1fr; gap: var(--sr-space-6); padding: var(--sr-space-6); }
    .live-artwork-wrap { width: 260px; height: 260px; }

    .broadcast-card { grid-template-columns: 110px 1fr auto; gap: var(--sr-space-5); padding: var(--sr-space-5); }
    .broadcast-thumb { width: 110px; height: 110px; }
    .broadcast-song { font-size: var(--sr-fs-xl); }

    .cta-card { grid-template-columns: 1fr; gap: var(--sr-space-6); padding: var(--sr-space-6); }
    .cta-artwork { order: -1; max-width: 420px; margin: 0 auto; }
}

/* ------- Tablet / iPad landscape (<= 900px) ------- */
@media (max-width: 900px) {
    .nav-links {
        position: fixed;
        top: var(--sr-header-h);
        left: 0; right: 0;
        background: linear-gradient(180deg, rgba(5,7,10,0.98), rgba(8,11,16,0.98));
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--sr-border);
        flex-direction: column;
        align-items: stretch;
        padding: var(--sr-space-4);
        gap: var(--sr-space-2);
        transform: translateY(-150%);
        transition: transform var(--sr-transition);
        z-index: var(--sr-z-dropdown);
    }
    .nav-links a {
        padding: var(--sr-space-3) var(--sr-space-4);
        border-radius: var(--sr-radius);
        border: 1px solid var(--sr-border);
        background: var(--sr-panel-2);
        font-size: var(--sr-fs-base);
    }
    .nav-toggle { display: flex; margin-left: auto; margin-right: var(--sr-space-3); }
    .nav-cta { margin-left: 0; }

    #nav-toggle-check:checked ~ .site-header .nav-links {
        transform: translateY(0);
    }
    #nav-toggle-check:checked ~ .site-header .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #nav-toggle-check:checked ~ .site-header .nav-toggle span:nth-child(2) { opacity: 0; }
    #nav-toggle-check:checked ~ .site-header .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .hero-stats { grid-template-columns: 1fr 1fr; }
    .ecosystem-card, .mod-wrap { padding: var(--sr-space-6); }
}

/* ------- Mobile wide (<= 768px) ------- */
@media (max-width: 768px) {
    :root {
        --sr-header-h: 60px;
    }

    .container { padding: 0 var(--sr-space-4); }

    .hero { padding: var(--sr-space-8) 0 var(--sr-space-12); }
    .hero-cta-row .btn { flex: 1 1 auto; width: 100%; }

    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }

    .live-shell {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: var(--sr-space-5);
    }
    .live-artwork-wrap { width: min(280px, 75vw); height: auto; aspect-ratio: 1 / 1; }
    .live-nextprev { grid-template-columns: 1fr; }
    .live-header { flex-direction: column; align-items: flex-start; gap: var(--sr-space-3); }

    .broadcast-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--sr-space-4);
    }
    .broadcast-thumb { width: 130px; height: 130px; }
    .bc-times { flex-direction: column; align-items: center; }
    .broadcast-card > .btn { justify-self: stretch; }

    .history-row {
        grid-template-columns: 70px 48px 1fr;
        grid-template-rows: auto auto;
        padding: var(--sr-space-3);
    }
    .history-time { grid-column: 1 / -1; font-size: var(--sr-fs-xs); margin-bottom: -4px; }
    .history-duration { grid-column: 3; text-align: right; }

    .footer-grid { grid-template-columns: 1fr; gap: var(--sr-space-6); }
    .footer-bottom { flex-direction: column; text-align: center; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .page-head { flex-direction: column; align-items: flex-start; }
    .page-actions { width: 100%; flex-direction: column; }
    .page-actions .btn { width: 100%; }

    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table-wrap .table { min-width: 640px; }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar > * { width: 100%; }

    .mod-card {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
    }
    .mod-thumb { width: 64px; height: 64px; }
    .mod-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .mod-actions .btn { flex: 1 1 auto; }
}

/* ------- Mobile narrow (<= 480px) ------- */
@media (max-width: 480px) {
    .hero-stats { grid-template-columns: 1fr; }
    .auth-card { padding: var(--sr-space-6) var(--sr-space-4); border-radius: var(--sr-radius); }
    .stats-grid { grid-template-columns: 1fr; }
    .nav-cta .btn { padding: var(--sr-space-2) var(--sr-space-3); font-size: var(--sr-fs-xs); }
    .nav-brand .brand-product { font-size: var(--sr-fs-base); }
    .nav-brand .brand-parent { font-size: 10px; }
}

/* ------- Reduced motion preference ------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .live-dot, .btn-live { animation: none !important; }
    .live-artwork-ring { animation: none !important; filter: none !important; opacity: 0.6 !important; }
    .live-visualizer span { animation-play-state: paused !important; }
}

/* ------- Print (minimal) ------- */
@media print {
    .site-header, .site-footer, .nav-toggle, .nav-cta,
    .btn, .form-upload, .modal-backdrop, .live-status-pill, .hero-stats {
        display: none !important;
    }
    body { background: #fff; color: #000; }
    .glass-card { border: 1px solid #ccc; box-shadow: none; backdrop-filter: none; background: #fff; }
}