/* Mobile first — overrides for larger screens */

/* Tab bar — hidden on desktop, shown in mobile media query */
.tab-bar,
.tab-bar-more-menu {
    display: none;
}

/* Small screens (default) */
@media (max-width: 767px) {
    :root {
        --header-height: 56px;
        --player-height: 64px;
        --tab-bar-height: 56px;
    }

    body {
        background-color: var(--color-primary);
    }

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

    #app-content > * {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .hero > *,
    .section > * {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Header */
    .main-nav {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-primary);
        flex-direction: column;
        padding: var(--space-md);
        box-shadow: var(--shadow-lg);
        gap: 0;
    }

    .main-nav--open {
        display: flex;
    }

    .nav-link {
        padding: var(--space-md);
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-menu-toggle {
        display: none !important;
    }

    .main-nav {
        display: none !important;
    }

    .pwa-install-label {
        display: none;
    }

    .pwa-install-btn {
        padding: var(--space-xs) var(--space-sm);
    }

    /* ========== Bottom Tab Bar ========== */
    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 160;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: var(--tab-bar-height);
        background: var(--color-primary);
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.15);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tab-bar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 2px;
        padding: var(--space-xs) 0;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        border: none;
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--transition-fast);
    }

    .tab-bar__item.active {
        color: var(--color-accent);
    }

    .tab-bar__icon {
        font-size: 20px;
        width: 24px;
        text-align: center;
    }

    .tab-bar__label {
        font-family: var(--font-heading);
        font-size: 10px;
        font-weight: var(--weight-medium);
        line-height: 1;
    }

    /* More menu popup */
    .tab-bar-more-menu {
        display: block;
        position: fixed;
        bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-xs));
        right: var(--space-sm);
        background: var(--color-surface);
        border-radius: var(--radius-md);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        padding: var(--space-xs);
        z-index: 170;
        min-width: 160px;
    }

    .tab-bar-more-menu[hidden] {
        display: none;
    }

    .tab-bar-more-menu__item {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        width: 100%;
        padding: var(--space-sm) var(--space-md);
        border: none;
        background: none;
        color: var(--color-text);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        text-decoration: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background var(--transition-fast);
    }

    .tab-bar-more-menu__item:hover,
    .tab-bar-more-menu__item:active {
        background: var(--color-bg-alt);
    }

    /* ========== Player above tab bar ========== */
    .player-bar {
        bottom: var(--tab-bar-height);
    }

    /* Body spacing for tab bar */
    body {
        padding-bottom: var(--tab-bar-height);
    }

    body.has-player {
        padding-bottom: calc(var(--tab-bar-height) + var(--player-height));
    }

    .site-footer {
        display: none;
    }

    /* Hero */
    .hero {
        padding: var(--space-2xl) 0;
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .hero-subtitle {
        font-size: var(--text-base);
    }

    /* Podcast grid */
    .podcast-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-md);
    }

    /* ========== Mini Player (collapsed) ========== */
    .player-mini-progress {
        display: block;
    }

    .player-inner {
        gap: var(--space-sm);
        padding: 0 var(--space-sm);
    }

    .player-info {
        flex: 1;
        min-width: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

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

    .player-meta {
        display: block;
    }

    .player-author {
        display: none;
    }

    .player-chapter-subtitle {
        display: block;
    }

    .player-controls {
        flex-shrink: 0;
    }

    #player-prev,
    #player-next {
        display: none;
    }

    .player-btn--play {
        width: 48px;
        height: 48px;
        background: var(--color-accent);
        border-radius: 50%;
        color: white;
        box-shadow: 0 2px 8px rgba(232, 99, 74, 0.3);
    }

    .player-progress {
        display: none;
    }

    .player-volume {
        display: none;
    }

    .player-speed-btn {
        display: none;
    }

    /* Hide site header when expanded player is active */
    body.player-expanded-active .site-header {
        display: none;
    }

    /* ========== Expanded View (full-screen) ========== */
    .player-expanded {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 200;
        background: var(--color-primary);
        color: var(--color-text-inverse);
        transform: translateY(100%);
        transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
        overflow: hidden;
    }

    .player-expanded-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        filter: blur(30px);
        transform: scale(1.2);
        z-index: 0;
    }

    .player-expanded-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .player-expanded-pages,
    .player-expanded-dots {
        position: relative;
        z-index: 1;
    }

    .player-bar--expanded .player-mini {
        display: none;
    }

    .player-bar--expanded .player-expanded {
        display: block;
        transform: translateY(0);
    }

    .player-bar--expanded {
        height: 100vh;
        height: 100dvh;
        background: transparent;
        box-shadow: none;
    }

    .player-expanded-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: var(--space-md) var(--space-xl);
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
        gap: var(--space-md);
        height: 100%;
        justify-content: center;
        overflow: hidden;
    }

    /* Header — fixed */
    .player-expanded-header {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        flex-shrink: 0;
    }

    .player-expanded-collapse {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: none;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        padding: 0;
        border-radius: var(--radius-full);
        -webkit-tap-highlight-color: transparent;
    }

    .player-expanded-collapse:hover {
        color: white;
        background: rgba(255, 255, 255, 0.1);
    }

    .player-expanded-label {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .player-expanded-header-spacer {
        width: 44px;
        flex-shrink: 0;
    }

    .player-expanded-header-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.4);
    }

    /* Cover art — flexible element */
    .player-expanded-cover-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 1 0;
        min-height: 0;
        max-height: 280px;
    }

    .player-expanded-cover {
        height: 100%;
        max-width: min(60vw, 280px);
        width: auto;
        aspect-ratio: 1;
        border-radius: var(--radius-lg);
        object-fit: cover;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    }

    /* Meta — fixed */
    .player-expanded-meta {
        text-align: center;
        width: 100%;
        max-width: 320px;
        flex-shrink: 0;
    }

    .player-expanded-title {
        display: block;
        font-family: var(--font-heading);
        font-size: var(--text-lg);
        font-weight: var(--weight-bold);
        line-height: var(--leading-tight);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .player-expanded-author {
        display: block;
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.6);
        margin-top: var(--space-xs);
    }

    /* Seek bar — fixed */
    .player-expanded-seek {
        width: 100%;
        max-width: 320px;
        flex-shrink: 0;
    }

    .player-expanded-progress-bar {
        position: relative;
        width: 100%;
        height: 6px;
        background: transparent;
        border-radius: var(--radius-full);
        cursor: pointer;
        outline: none;
        padding: 12px 0;
    }

    .player-expanded-progress-bar::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 0;
        right: 0;
        height: 6px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: var(--radius-full);
    }

    .player-expanded-progress-filled {
        position: absolute;
        top: 12px;
        left: 0;
        height: 6px;
        background: var(--color-accent);
        border-radius: var(--radius-full);
        width: 0%;
        pointer-events: none;
    }

    .player-expanded-progress-thumb {
        position: absolute;
        top: 7px;
        left: 0%;
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity var(--transition-fast);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        pointer-events: none;
    }

    .player-expanded-progress-bar.is-dragging .player-expanded-progress-thumb {
        opacity: 1;
    }

    .player-expanded-times {
        display: flex;
        justify-content: space-between;
        margin-top: var(--space-xs);
    }

    .player-expanded-time {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: rgba(255, 255, 255, 0.5);
    }

    /* Controls — fixed */
    .player-expanded-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-md);
        background: rgba(255, 255, 255, 0.06);
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-lg);
        width: 100%;
        max-width: 380px;
        flex-shrink: 0;
    }

    .player-expanded-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        padding: 0;
        border-radius: var(--radius-full);
        transition: all var(--transition-fast);
        -webkit-tap-highlight-color: transparent;
    }

    .player-expanded-btn:active {
        transform: scale(0.92);
    }

    /* Rewind / Forward buttons */
    #player-expanded-prev,
    #player-expanded-next {
        width: 56px;
        height: 56px;
    }

    #player-expanded-prev svg,
    #player-expanded-next svg {
        width: 36px;
        height: 36px;
    }

    /* Chapter prev / next buttons */
    .player-expanded-btn--ch {
        width: 48px;
        height: 48px;
    }

    .player-expanded-btn--ch svg {
        width: 28px;
        height: 28px;
    }

    .player-expanded-btn--play {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--color-accent);
        color: white;
        box-shadow: 0 4px 20px rgba(232, 99, 74, 0.4);
    }

    .player-expanded-btn--play svg {
        width: 36px;
        height: 36px;
    }

    .player-expanded-btn--play:active {
        transform: scale(0.92);
    }

    /* Volume — hidden on mobile, use hardware buttons */
    .player-expanded-volume {
        display: none;
    }

    /* Speed menu — centered overlay on mobile */
    .player-speed-menu {
        bottom: auto;
        right: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 160px;
    }

    /* Speed button */
    .player-expanded-speed-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.8);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        padding: var(--space-xs) var(--space-md);
        border-radius: var(--radius-full);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        letter-spacing: 0.02em;
        transition: all var(--transition-fast);
    }

    .player-expanded-speed-btn:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.2);
    }

    /* Bottom row: speed + sleep side-by-side — fixed */
    .player-expanded-bottom-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-md);
        flex-shrink: 0;
    }

    /* Sleep timer button */
    .player-expanded-sleep-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        border: none;
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.8);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        padding: var(--space-xs) var(--space-md);
        border-radius: var(--radius-full);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        letter-spacing: 0.02em;
        transition: all var(--transition-fast);
    }

    .player-expanded-sleep-btn:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.2);
    }

    .player-expanded-sleep-btn.active {
        background: rgba(232, 99, 74, 0.25);
        color: var(--color-accent);
    }

    /* Sleep menu — centered overlay on mobile */
    .player-sleep-menu {
        bottom: auto;
        right: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 180px;
    }

    /* Pages container (horizontal swipe) — width set dynamically by JS */
    .player-expanded-pages {
        display: flex;
        width: 200%;
        height: 100%;
    }

    .player-expanded-page {
        width: 50%;
        height: 100%;
        flex-shrink: 0;
        overflow: hidden;
    }

    .player-expanded-page--player {
        overflow: hidden;
    }

    /* Chapters page in expanded player */
    .player-expanded-page--chapters {
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .player-expanded-page--chapters[hidden] {
        display: none;
    }

    .player-expanded-chapters-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: var(--space-lg) var(--space-xl);
        padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
    }

    .player-chapters-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: var(--space-md);
    }

    .player-expanded-info-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: var(--space-lg) var(--space-xl);
        padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
    }

    /* Expanded chapter label + title */
    .player-expanded-chapter-label {
        display: block;
    }

    .player-expanded-chapter-title {
        display: block;
    }

    .player-expanded-info-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: var(--space-md);
    }

    .player-expanded-dots {
        display: flex;
        justify-content: center;
        gap: var(--space-sm);
        position: absolute;
        bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        pointer-events: none;
    }

    /* Admin — sidebar collapses to horizontal scroll */
    .admin-page {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        grid-column: 1;
        position: static;
    }

    .admin-sidebar-back {
        display: none;
    }

    .admin-header-back {
        display: inline-flex;
    }

    .admin-nav {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-xs);
        background: var(--color-bg-alt);
        border-radius: var(--radius-md);
        gap: var(--space-xs);
    }

    .admin-nav-group {
        display: contents;
        margin: 0;
        padding: 0;
        border: none;
    }

    .admin-nav-label {
        display: none;
    }

    .admin-nav-link {
        white-space: nowrap;
        padding: var(--space-sm) var(--space-md);
    }

    .admin-nav-link--active {
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
    }

    .admin-content {
        grid-column: 1;
        padding: var(--space-md);
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }

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

    .form-grid {
        grid-template-columns: 1fr;
    }

    .table {
        font-size: var(--text-xs);
    }

    .table th,
    .table td {
        padding: var(--space-xs);
    }

    .actions-cell {
        flex-direction: column;
    }

    /* Flash */
    .flash-container {
        left: var(--space-md);
        right: var(--space-md);
        max-width: none;
    }

    /* Auth */
    .auth-page {
        padding: var(--space-lg) var(--space-md);
        margin-top: calc(-1 * var(--space-2xl));
    }

    .auth-card {
        padding: var(--space-xl) var(--space-lg);
        max-width: none;
    }

    /* Touch targets */
    .chapter-item__play-icon {
        width: 44px;
        height: 44px;
    }

    .category-filter-pill {
        padding: var(--space-sm) var(--space-md);
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Hero sections — eat the app-content padding */
    .hero {
        margin-left: calc(-1 * var(--space-md));
        margin-right: calc(-1 * var(--space-md));
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Short viewport fallback (e.g. iPhone SE) */
    @media (max-height: 680px) {
        .player-expanded-inner {
            gap: var(--space-sm);
            padding-top: var(--space-sm);
            padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
        }

        .player-expanded-title {
            -webkit-line-clamp: 1;
        }

        .player-expanded-controls {
            padding: var(--space-sm) var(--space-md);
        }

        .player-expanded-cover-wrap {
            max-height: 200px;
        }
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .podcast-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .admin-page {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }

    .player-volume-bar {
        width: 60px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .hero-title {
        font-size: var(--text-4xl);
    }
}

/* Very small screens */
@media (max-width: 374px) {
    .podcast-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}