/*
 * FoundContext v4 Mobile Optimizations
 * Theater-mode specific styles and mobile enhancements
 */

/* Mobile-First Base Styles */
@media screen and (max-width: 767px) {
  
  /* Typography Scaling */
  :root {
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
  }
  
  /* Touch Targets */
  .mobile-touch-target {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  /* Mobile Navigation */
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1020; /* Below nav-menu (1030) but above normal content */
    opacity: 0;
    visibility: hidden;
    transition: all var(--animation-duration-normal) var(--animation-easing);
  }
  
  .mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: none; /* Allow clicks to pass through to menu */
  }
  
  /* Mobile Card Viewer */
  .card-viewer-container {
    padding: var(--space-sm);
  }
  
  .playing-card-container {
    padding: var(--space-md) var(--space-sm);
    min-height: calc(100vh - var(--header-height) - 100px);
  }
  
  .playing-card {
    width: 100%;
    max-width: none;
    min-height: 70vh;
  }
  
  .card-header {
    padding: var(--space-md);
  }
  
  .card-content {
    padding: var(--space-md);
    font-size: var(--font-size-base);
  }
  
  .card-reference {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
  }
  
  /* Mobile Navigation Buttons */
  .card-navigation {
    position: fixed;
    bottom: var(--space-lg);
    left: var(--space-md);
    right: var(--space-md);
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    z-index: var(--z-sticky);
  }
  
  .nav-button {
    flex: 1;
    max-width: 120px;
    padding: var(--space-md);
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
  }
  
  .nav-button:not(.disabled):active {
    transform: scale(0.95);
    background: var(--primary-color);
    color: var(--text-inverse);
  }
  
  /* Mobile Answer Sections */
  .answer-section {
    margin-bottom: var(--space-lg);
  }
  
  .answer-toggle {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-base);
  }
  
  .short-answer {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
  }
  
  /* Mobile Search */
  .search-container {
    padding: var(--space-md);
  }
  
  .search-input-group {
    flex-direction: column;
  }
  
  .search-input {
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-sm);
  }
  
  .search-button {
    border-radius: var(--radius-lg);
    border: 2px solid var(--primary-color);
  }
  
  /* Mobile Deck Grid */
  .deck-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-md);
  }
  
  .deck-card {
    min-height: 200px;
  }
  
  /* Mobile Footer */
  .footer-content {
    padding: var(--space-lg) var(--space-md);
    text-align: center;
  }
  
  .footer-section {
    margin-bottom: var(--space-lg);
  }
  
  /* Mobile Scrolling */
  .mobile-scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Mobile Swipe Indicators */
  .swipe-indicator {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--animation-duration-fast) var(--animation-easing);
    z-index: var(--z-tooltip);
  }
  
  .swipe-indicator.left {
    left: var(--space-md);
  }
  
  .swipe-indicator.right {
    right: var(--space-md);
  }
  
  .swipe-indicator.show {
    opacity: 0.8;
  }
}

/* Theater Mode Enhancements */
.theater-mode {
  /* Dim interface elements */
  --background-color: #0a0a0a;
  --background-secondary: #1a1a1a;
  --text-color: #e0e0e0;
  --text-secondary: #b0b0b0;
  --border-color: #333333;
}

.theater-mode .playing-card {
  background: #111111;
  border-color: #333333;
}

.theater-mode .card-reference {
  color: #ffffff;
}

/* Brightness Control */
.brightness-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, var(--brightness-overlay, 0));
  pointer-events: none;
  z-index: var(--z-modal);
  transition: background var(--animation-duration-normal) var(--animation-easing);
}

/* One-Handed Use Optimizations */
.one-handed-mode .card-navigation {
  bottom: var(--space-2xl);
  justify-content: center;
}

.one-handed-mode .nav-button {
  max-width: 100px;
  padding: var(--space-lg);
}

/* Landscape Mobile */
@media screen and (max-width: 926px) and (orientation: landscape) {
  .playing-card-container {
    padding: var(--space-sm);
    min-height: calc(100vh - var(--header-height) - 60px);
  }
  
  .playing-card {
    min-height: 60vh;
  }
  
  .card-navigation {
    bottom: var(--space-sm);
  }
  
  .nav-button {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }
}

/* Large Mobile/Small Tablet */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .deck-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .playing-card {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Tablet Portrait */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .deck-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
  
  .playing-card-container {
    padding: var(--space-xl);
  }
  
  .card-navigation {
    position: relative;
    bottom: auto;
    margin-bottom: var(--space-xl);
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .playing-card {
    border-width: 0.5px;
  }
  
  .card-stack-indicator .stack-card {
    border-width: 0.5px;
  }
}

/* iOS Safari Specific */
@supports (-webkit-touch-callout: none) {
  /* iOS viewport fix */
  .playing-card-container {
    min-height: calc(100vh - var(--header-height) - env(safe-area-inset-bottom) - 100px);
  }
  
  /* iOS rubber band prevention */
  body {
    overscroll-behavior: none;
  }
  
  /* iOS tap highlight */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  .nav-button:not(.disabled) {
    -webkit-tap-highlight-color: var(--primary-color-alpha);
  }
}

/* Enhanced iOS Safe Area Handling */
@supports (padding: max(0px)) {
  @media screen and (min-width: 480px) and (max-width: 1024px) 
         and (orientation: landscape) and (max-height: 500px) {
    
    #mobile-landscape-overlay {
      /* Use safe area aware positioning */
      top: max(4px, env(safe-area-inset-top));
      left: max(4px, env(safe-area-inset-left));
      right: max(4px, env(safe-area-inset-right));
      bottom: max(4px, env(safe-area-inset-bottom));
    }
  }
}

/* Android Chrome Specific */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .playing-card {
    /* Android Chrome scrolling optimization */
    transform: translateZ(0);
  }
  
  .card-content {
    /* Android scrolling performance */
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0, 0, 0);
  }
}

/* Accessibility - Large Text */
@media (min-width: 320px) and (prefers-color-scheme: no-preference) {
  .large-text-mode {
    font-size: 120%;
  }
  
  .large-text-mode .card-reference {
    font-size: var(--font-size-3xl);
  }
  
  .large-text-mode .short-answer {
    font-size: var(--font-size-2xl);
  }
}

/* Battery Optimization */
@media (prefers-reduced-motion: reduce) {
  .playing-card,
  .nav-button,
  .deck-card {
    transform: none !important;
  }
  
  .swipe-indicator {
    display: none;
  }
}

/* Mobile Landscape Optimizations - 2024 Device Specifications */
@media screen and (min-width: 480px) and (max-width: 1024px) 
       and (orientation: landscape) and (max-height: 500px) {
  
  /* Container and Card Overrides */
  .playing-card-container {
    padding: var(--landscape-padding);
    min-height: calc(100vh - var(--header-height-landscape) - 20px);
  }
  
  .playing-card {
    width: var(--card-width-mobile-landscape);
    height: var(--card-height-mobile-landscape);
    max-width: none;
    margin: 0 auto;
  }
  
  /* Two-Column Layout System */
  .landscape-card-layout {
    display: flex;
    height: 100%;
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    overflow: hidden;
  }
  
  /* Extend Card Shadow to Infinity Left and Right */
  .playing-card {
    box-shadow: -150vw 8px 32px rgba(0, 0, 0, 0.15), 150vw 8px 32px rgba(0, 0, 0, 0.15), var(--card-shadow);
  }
  
  .card-meta-column {
    width: var(--landscape-meta-column-width);
    flex-shrink: 0;
    padding: var(--space-md);
    background: var(--background-secondary);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .card-content-column {
    flex: var(--landscape-content-column-flex);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card-background);
  }
  
  /* Scrollable Content Area */
  .card-content-scrollable {
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }
  
  .card-content-scrollable::-webkit-scrollbar {
    width: var(--landscape-scrollbar-width);
  }
  
  .card-content-scrollable::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .card-content-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
  }
  
  .card-content-scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
  }
  
  /* Meta Column Layout */
  .card-meta-header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
  }
  
  .card-meta-navigation {
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
  }
  
  /* Typography Adjustments for Landscape Reading */
  .card-reference {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-sm);
  }
  
  .card-meta {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-sm);
  }
  
  .short-answer {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }
  
  /* Navigation in Meta Column */
  .card-navigation {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: auto;
  }
  
  .nav-button {
    flex: none;
    max-width: none;
    width: 100%;
    padding: var(--space-sm);
    font-size: var(--font-size-xs);
    min-height: var(--touch-target-min);
    justify-content: center;
  }
  
  /* Answer Sections in Content Area */
  .answer-section {
    margin-bottom: var(--space-md);
  }
  
  .answer-toggle {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }
  
  /* Meta Information Styling */
  .appearance-order,
  .card-year,
  .card-show {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-xs);
  }
  
  /* Action Buttons in Meta Column */
  .card-actions {
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
  }
  
  .action-button {
    padding: var(--space-xs);
    font-size: var(--font-size-xs);
    min-height: 32px;
    justify-content: center;
  }
  
  /* Header Height Override */
  :root {
    --header-height: var(--header-height-landscape);
  }
}