/* ========================================
   MOBILE RESPONSIVE LAYOUT
   Personal Trainer App - Dark Cyberpunk Theme
   ======================================== */

/* ========================================
   TABLET BREAKPOINT (≤768px)
   ======================================== */

@media (max-width: 768px) {
  
  /* HEADER */
  header {
    padding: 16px !important;
  }
  
  .header-title h1 {
    font-size: 1.5rem !important;
  }
  
  .subtitle {
    font-size: 0.9rem !important;
  }
  
  /* HERO LANDING */
  .hero-landing {
    padding: 32px 16px !important;
  }
  
  .hero-content {
    flex-direction: column !important;
    gap: 32px !important;
  }
  
  .hero-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
  }
  
  .hero-cta {
    width: 100% !important;
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
  }
  
  /* HERO IMAGES - STACK VERTICALLY */
  .hero-images {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .hero-image-card.large {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  /* FEATURES - 2x2 GRID */
  .hero-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  .feature-card {
    padding: 16px !important;
  }
  
  .feature-icon {
    font-size: 2rem !important;
  }
  
  .feature-title {
    font-size: 0.95rem !important;
  }
  
  .feature-description {
    font-size: 0.85rem !important;
  }
  
  /* STATS - KEEP IN ROW BUT SMALLER */
  .hero-stats {
    padding: 24px 16px !important;
    gap: 16px !important;
  }
  
  .stat-number {
    font-size: 2rem !important;
  }
  
  .stat-label-hero {
    font-size: 0.85rem !important;
  }
  
  /* SIDEBAR - FULL WIDTH */
  .sidebar {
    width: 100% !important;
    position: static !important;
    margin-bottom: 24px !important;
  }
  
  /* PROFILE FORM */
  .form-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .form-group {
    width: 100% !important;
  }
  
  input, select, button {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  /* BUTTONS - TOUCH FRIENDLY */
  button, .btn {
    min-height: 44px !important;
    padding: 12px 24px !important;
  }
  
  /* EXERCISE CARDS - SINGLE COLUMN */
  #workout-display {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .exercise-card {
    padding: 16px !important;
  }
  
  /* VIDEO - ADJUSTED HEIGHT */
  .exercise-video,
  video {
    height: 200px !important;
  }
  
  /* PLAY OVERLAY - SMALLER */
  .video-play-overlay {
    width: 56px !important;
    height: 56px !important;
  }
  
  /* RECIPE CARDS - SINGLE COLUMN */
  .recipe-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* MODAL - FULL SCREEN */
  .modal-content {
    width: 95% !important;
    max-height: 90vh !important;
    padding: 20px !important;
  }
  
  /* QUOTES */
  .quote-text {
    font-size: 1.3rem !important;
  }
  
  .quote-author {
    font-size: 0.95rem !important;
  }
}

/* ========================================
   MOBILE BREAKPOINT (≤480px)
   ======================================== */

@media (max-width: 480px) {
  
  /* HEADER */
  .header-title h1 {
    font-size: 1.25rem !important;
  }
  
  .subtitle {
    font-size: 0.8rem !important;
  }
  
  /* HERO LANDING */
  .hero-landing {
    padding: 24px 12px !important;
  }
  
  .hero-badge {
    font-size: 0.7rem !important;
    padding: 6px 12px !important;
  }
  
  .hero-title {
    font-size: 1.75rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
  
  .hero-cta {
    padding: 14px 28px !important;
    font-size: 1rem !important;
  }
  
  /* FEATURES - SINGLE COLUMN */
  .hero-features {
    grid-template-columns: 1fr !important;
  }
  
  /* STATS - SINGLE COLUMN */
  .hero-stats {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .stat-item-hero {
    width: 100% !important;
    text-align: center !important;
  }
  
  /* VIDEO - SMALLER HEIGHT */
  .exercise-video,
  video {
    height: 180px !important;
  }
  
  /* PLAY OVERLAY - SMALLEST */
  .video-play-overlay {
    width: 48px !important;
    height: 48px !important;
  }
  
  .video-play-overlay::after {
    border-width: 8px 0 8px 14px !important;
  }
  
  /* EXERCISE CARD */
  .exercise-card {
    padding: 12px !important;
  }
  
  .exercise-card h3 {
    font-size: 1.1rem !important;
  }
  
  /* STATS GRID */
  .exercise-stats {
    gap: 8px !important;
  }
  
  .stat-item {
    padding: 8px !important;
  }
  
  .stat-value {
    font-size: 1.1rem !important;
  }
  
  .stat-label {
    font-size: 0.75rem !important;
  }
  
  /* BADGES */
  .muscle-badge {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }
  
  /* MODAL */
  .modal-content {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }
  
  .modal-close {
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  /* QUOTES */
  .quote-text {
    font-size: 1.1rem !important;
    padding: 0 12px !important;
  }
  
  .quote-author {
    font-size: 0.85rem !important;
  }
  
  /* FORM INPUTS */
  input, select, textarea {
    padding: 12px !important;
    font-size: 16px !important;
  }
  
  /* RECIPE CARDS */
  .recipe-card {
    padding: 12px !important;
  }
  
  .recipe-card h3 {
    font-size: 1rem !important;
  }
  
  /* MACRO ITEMS */
  .macro-item {
    padding: 8px !important;
  }
  
  .macro-value {
    font-size: 1rem !important;
  }
  
  .macro-label {
    font-size: 0.75rem !important;
  }
}

/* ========================================
   TOUCH INTERACTIONS (MOBILE)
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  
  /* REMOVE HOVER EFFECTS ON TOUCH DEVICES */
  .exercise-card:hover {
    transform: none !important;
  }
  
  /* TAP TO SHOW VIDEO OVERLAY */
  .video-play-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* ACTIVE STATE FOR BUTTONS */
  button:active,
  .btn:active {
    transform: scale(0.95) !important;
  }
  
  /* CARD TAP FEEDBACK */
  .exercise-card:active {
    transform: scale(0.98) !important;
  }
  
  .recipe-card:active {
    transform: scale(0.98) !important;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION (MOBILE)
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
  
  /* HERO - REDUCE VERTICAL PADDING */
  .hero-landing {
    padding: 20px 16px !important;
  }
  
  .hero-title {
    font-size: 1.5rem !important;
  }
  
  /* VIDEO - WIDER ASPECT */
  .exercise-video,
  video {
    height: 160px !important;
  }
  
  /* FEATURES - BACK TO 2 COLUMNS */
  .hero-features {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* STATS - BACK TO ROW */
  .hero-stats {
    flex-direction: row !important;
  }
}

/* ========================================
   SAFE AREA INSETS (iPhone X+)
   ======================================== */

@supports (padding: max(0px)) {
  header {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  
  .hero-landing {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  
  .sidebar {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* ========================================
   VIDEO ASPECT RATIO (16:9 MAINTAINED)
   ======================================== */

@media (max-width: 768px) {
  .exercise-video-wrapper,
  .video-wrapper {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  
  .exercise-video,
  video {
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* ========================================
   DARK THEME PRESERVED
   ======================================== */

/* All mobile styles inherit dark cyberpunk theme */
/* Orange (#FF6B35) and Blue (#4A5FD9) accents maintained */
/* No changes to color scheme needed */

/* ========================================
   ACCESSIBILITY - MOBILE
   ======================================== */

/* Larger tap targets */
@media (max-width: 768px) {
  a, button, .clickable {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Prevent text size adjustment on orientation change */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
  
  /* Disable parallax/complex effects */
  .parallax,
  .complex-animation {
    transform: none !important;
  }
}