/**
 * KalviYogi Mobile Enhancement CSS
 * 2025 Mobile-First Optimizations
 * 
 * Improvements:
 * - Better touch targets (44px minimum)
 * - Safe area insets for notched devices
 * - Smoother scrolling
 * - Reduced motion for battery saving
 * - PWA/TWA optimizations
 */

/* =====================================================
   A) SAFE AREA INSETS (Notched devices, Dynamic Island)
   ===================================================== */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Adjust header for notch */
.top-header {
    padding-top: max(12px, var(--safe-top));
}

/* Adjust bottom nav for home indicator */
.bottom-nav {
    padding-bottom: max(8px, calc(var(--safe-bottom) + 4px));
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
}

/* Mini player above bottom nav */
.mini-player {
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
}

/* Full player safe areas */
.full-player {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

/* =====================================================
   B) TOUCH TARGET SIZES (44x44px minimum)
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Buttons minimum size */
    .btn,
    .nav-item a,
    .control-btn,
    .player-btn,
    button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Links in lists */
    .episode-card,
    .chapter-card,
    .section-card,
    .playlist-item {
        min-height: 56px;
    }
    
    /* Tab bar items */
    .tab-item,
    .filter-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
    
    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* Checkbox/Radio */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }
}

/* =====================================================
   C) SMOOTH SCROLLING & MOMENTUM
   ===================================================== */

/* Smooth scroll containers */
.scroll-row,
.horizontal-scroll,
.episodes-grid,
.chapters-list {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}

/* Hide scrollbars on mobile but keep functionality */
@media (max-width: 768px) {
    .scroll-row::-webkit-scrollbar,
    .horizontal-scroll::-webkit-scrollbar {
        display: none;
    }
    
    .scroll-row,
    .horizontal-scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Pull-to-refresh indicator */
.pull-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--gold);
    color: #000;
    padding: 8px 16px;
    border-radius: 0 0 12px 12px;
    font-size: 14px;
    z-index: 1000;
    transition: transform 0.3s ease;
}

.pull-indicator.visible {
    transform: translateX(-50%) translateY(0);
}

/* =====================================================
   D) MOBILE TYPOGRAPHY ADJUSTMENTS
   ===================================================== */
@media (max-width: 480px) {
    /* Prevent tiny text */
    body {
        font-size: 15px;
        line-height: 1.5;
    }
    
    /* Hero title sizing */
    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* Section titles */
    .section-title {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }
    
    /* Card titles */
    .episode-title,
    .chapter-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }
    
    /* Stat values */
    .stat-value {
        font-size: 1.25rem;
    }
}

/* =====================================================
   E) MOBILE LAYOUT FIXES
   ===================================================== */
@media (max-width: 480px) {
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }
    
    .page-container,
    .main-content,
    main {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Full-width cards on mobile */
    .feature-card,
    .audience-card {
        margin-inline: -8px;
        border-radius: 12px;
    }
    
    /* Hero section mobile fit */
    .hero-section {
        padding: 40px 16px 32px;
        min-height: auto;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }
    
    .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Stats row wrap */
    .hero-stats {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px;
    }
    
    .stat-item {
        flex: 1 1 28%;
        min-width: 80px;
    }
    
    /* Proof badges stack */
    .social-proof {
        flex-direction: column;
        align-items: center;
    }
}

/* =====================================================
   F) ANDROID TWA / PWA OPTIMIZATIONS
   ===================================================== */

/* Standalone mode detection */
@media (display-mode: standalone) {
    /* Hide install prompts */
    .install-prompt,
    .download-app-section {
        display: none !important;
    }
    
    /* Adjust for TWA status bar */
    .top-header {
        padding-top: max(16px, var(--safe-top));
    }
}

/* TWA specific (Android app) */
@media (display-mode: standalone) and (max-width: 768px) {
    /* Remove browser UI hints */
    .browser-install-hint {
        display: none;
    }
    
    /* Better edge swipe */
    body {
        overscroll-behavior: none;
    }
}

/* =====================================================
   G) GESTURE IMPROVEMENTS
   ===================================================== */

/* Disable pull-to-refresh on certain elements */
.modal,
.full-player,
.scroll-row {
    overscroll-behavior-y: contain;
}

/* Swipe-to-go-back friendly */
body {
    overscroll-behavior-x: auto;
}

/* Better tap highlighting */
@media (hover: none) {
    .btn:active,
    .card:active,
    .nav-item:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* =====================================================
   H) PERFORMANCE: REDUCE MOTION
   ===================================================== */
@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;
    }
}

/* Battery saver mode (reduced animations) */
@media (prefers-reduced-data: reduce) {
    img[loading="lazy"] {
        content-visibility: auto;
    }
    
    .hero-waveform-bg,
    .animated-bg {
        display: none;
    }
}

/* =====================================================
   I) DARK MODE OPTIMIZATIONS
   ===================================================== */
@media (prefers-color-scheme: dark) {
    /* Already dark, but ensure OLED-friendly blacks */
    :root {
        --bg-darkest: #000000;
        --bg-card: #0a0a0a;
    }
    
    /* Reduce white text brightness for eye comfort */
    body {
        color: #e0e0e0;
    }
}

/* =====================================================
   J) LANDSCAPE MODE FIXES
   ===================================================== */
@media (orientation: landscape) and (max-height: 500px) {
    /* Compact hero */
    .hero-section {
        min-height: auto;
        padding: 24px 16px;
    }
    
    .hero-stats {
        flex-wrap: nowrap;
    }
    
    /* Full player in landscape */
    .full-player {
        flex-direction: row;
    }
    
    .full-player .player-artwork {
        max-width: 40vh;
    }
}

/* =====================================================
   K) KEYBOARD HANDLING
   ===================================================== */

/* When keyboard is visible */
.keyboard-open .bottom-nav {
    display: none;
}

.keyboard-open .mini-player {
    bottom: 0;
}

/* Input focus scroll into view */
input:focus,
textarea:focus {
    scroll-margin-bottom: 100px;
}

/* =====================================================
   L) LOADING STATES (Skeleton screens)
   ===================================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-lighter) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 24px;
    width: 70%;
}

.skeleton-thumb {
    aspect-ratio: 1;
    width: 100%;
}

/* =====================================================
   M) NOTCH-SAFE MODALS
   ===================================================== */
.modal,
.full-player,
.install-modal {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.modal-content {
    max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 40px);
}

/* =====================================================
   N) ACCESSIBILITY: FOCUS STATES
   ===================================================== */
@media (hover: none) {
    /* Remove hover states on touch */
    .btn:hover,
    .card:hover {
        transform: none;
        box-shadow: inherit;
    }
}

/* Visible focus for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* =====================================================
   O) IMAGE LAZY LOADING OPTIMIZATION
   ===================================================== */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Placeholder while loading */
img:not([src]) {
    background: var(--bg-card);
}