/* ========================================
 * CONSOLIDATED TOUCH-SPECIFIC STYLES
 * ========================================
 * 
 * CONSOLIDATED: This file merges discover-mobile-touch.css, discover-small-phone-touch.css, 
 * and discover-tablet-touch.css into a single organized file.
 * 
 * Target: All touch devices (320px - 1023px)
 * Device: Touch devices only (phones, tablets)
 * 
 * Breakpoints:
 * - Small Phone: 320px - 375px (iPhone SE, small Android phones)
 * - Mobile: 376px - 519px (Standard phones, mobile only)
 * - Small Tablet: 520px - 697px (iPhone landscape, small tablets)
 * - Medium Tablet: 551px - 767px (Standard tablets)
 * - Wide Tablet: 768px - 1023px (iPad, large tablets)
 * 
 * FUTURE: Touch detection will be separated from responsive breakpoints
 * Desktop will have mouse-specific interactions instead of touch
 * ======================================== */

/* SMALL PHONE: 320px - 375px */
@media (min-width: 320px) and (max-width: 375px) {
  /* Ultra-compact sizing for small phones */
  
  /* Override desktop margins aggressively */
  * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Small phone: Even tighter spacing */
  body.discover-page {
    --touch-spacing-x: 0.75rem;
  }
  
  /* Topbar - keep original height */
  .discover-top-bar {
    padding: 0.5rem 0.75rem !important;
    min-height: 4rem !important;
  }
  
  /* Search and datetime fields - COMPACT to fit comfortably */
  .search-display-container,
  .datetime-display-container {
    min-height: 1.75rem !important; /* 28px */
    max-height: 1.75rem !important;
    height: 1.75rem !important;
    padding: 0.125rem 0.375rem !important;
  }
  
  /* Smaller text for small phone screens */
  .discover-top-bar .text-xs {
    font-size: 0.5625rem !important; /* 9px */
  }
  
  .discover-top-bar .text-sm {
    font-size: 0.6875rem !important; /* 11px */
  }
  
  /* Bottom sheet: Small phone optimized */
  #listings-sheet,
  #listings-content-mobile,
  #spot-detail-content,
  .spot-details-container {
    font-size: 0.875rem;
    padding: 0.2rem !important;
  }

  /* Card layouts optimized for small screens */
  .spot-card {
    min-height: 100px;
    padding: 0.5rem;
  }
}

/* MOBILE: 376px - 519px (mobile only, tablet starts at 520px) - CONSOLIDATED */
@media (min-width: 376px) and (max-width: 519px) {
  /* Remove aggressive desktop margins */
  .discover-top-bar,
  body.discover-page > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Mobile touch: Comfortable spacing */
  body.discover-page {
    --touch-spacing-x: 1.25rem;
  }
  
  /* Topbar - keep original height */
  .discover-top-bar {
    min-height: 4.5rem !important;
    padding: 0.875rem 1rem !important;
  }
  
  /* Entry fields: COMPACT containers */
  .search-display-container,
  .datetime-display-container {
    min-height: 2rem !important; /* 32px */
    max-height: 2rem !important;
    height: 2rem !important;
    padding: 0.1875rem 0.5rem !important;
  }
  
  /* Mobile: Compact text sizing */
  .discover-top-bar .text-xs {
    font-size: 0.625rem !important; /* 10px */
  }
  
  .discover-top-bar .text-sm {
    font-size: 0.75rem !important; /* 12px */
  }
  
  /* Bottom sheet: Mobile-optimized */
  #listings-sheet,
  #listings-content-mobile,
  #spot-detail-content,
  .spot-details-container {
    font-size: 0.875rem;
    padding: 0.2rem !important;
  }
  
  /* Spot cards: Touch-friendly sizing */
  .spot-card {
    min-height: 120px;
    padding: 0.875rem;
  }
}

/* MEDIUM TABLET: 551px - 767px */
@media (min-width: 551px) and (max-width: 767px) {
  /* Medium tablet touch: Remove desktop margins */
  
  /* Reset aggressive desktop spacing */
  .discover-top-bar,
  body.discover-page > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Medium tablet touch: Comfortable spacing */
  body.discover-page {
    --touch-spacing-x: 1.5rem;
  }
  
  /* Topbar - keep original height */
  .discover-top-bar {
    min-height: 5rem !important;
    padding: 1rem 1.25rem !important;
  }
  
  /* Entry fields: COMPACT containers */
  .search-display-container,
  .datetime-display-container {
    min-height: 2.25rem !important; /* 36px */
    max-height: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0.25rem 0.625rem !important;
  }
  
  /* Medium tablets - compact text */
  .discover-top-bar .text-xs {
    font-size: 0.6875rem !important; /* 11px */
  }
  
  .discover-top-bar .text-sm {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  /* Bottom sheet: Tablet-optimized */
  #listings-sheet,
  #listings-content-mobile,
  #spot-detail-content,
  .spot-details-container {
    font-size: 0.9375rem;
    padding: 0.2rem !important;
  }
  
  /* Spot cards: More comfortable on medium tablet */
  .spot-card {
    min-height: 140px;
    padding: 1rem;
  }
}

/* WIDE TABLET: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Wide tablet touch: Maximum space utilization */
  
  /* Remove all desktop margins */
  body.discover-page,
  body.discover-page > *,
  .discover-top-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Wide tablet touch: Generous spacing */
  body.discover-page {
    --touch-spacing-x: 2rem;
  }
  
  /* Topbar - keep original height */
  .discover-top-bar {
    min-height: 5.5rem !important;
    padding: 1.25rem 1.5rem !important;
  }
  
  /* Entry fields: COMPACT containers */
  .search-display-container,
  .datetime-display-container {
    min-height: 2.5rem !important; /* 40px */
    max-height: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  /* Wide tablets: Readable text */
  .discover-top-bar .text-xs {
    font-size: 0.75rem !important; /* 12px */
  }
  
  .discover-top-bar .text-sm {
    font-size: 0.875rem !important; /* 14px */
  }
  
  /* Bottom sheet: Wide tablet optimizations */
  #listings-sheet,
  #listings-content-mobile,
  #spot-detail-content,
  .spot-details-container {
    font-size: 1rem;
    padding: 0.2rem !important;
  }
  
  /* Spot cards: Comfortable sizing on wide tablets */
  .spot-card {
    min-height: 160px;
    padding: 1.25rem;
  }
  
  /* Map container: Full height minus topbar */
  #map-container {
    top: 5.5rem !important;
    height: calc(100vh - 5.5rem) !important;
  }
}

/* ============================================================================
   COMPREHENSIVE BOTTOM SHEET PADDING - All screens 1022px and under
   ============================================================================ */
@media (max-width: 1022px) {
  /* Ensure all bottom sheet elements have 0.2rem padding */
  #listings-sheet,
  #listings-content-mobile,
  #spot-detail-content,
  .spot-details-container {
    padding: 0.2rem !important;
  }
}