/* Global Mobile Overrides */

@media (max-width: 960px) {
  /* Switch 3-column grids to 2-columns on tablets */
  .results-grid, .stats-row, .meta { 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
  
  /* Switch 5-column grids to 2-columns on tablets */
  .pd-grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
  
  .plot-search-row { 
    grid-template-columns: 1fr !important; 
  }
}

@media (max-width: 640px) {
  /* Switch all grids to 1-column on mobile phones */
  .results-grid, .stats-row, .meta, .grid, .row, .benefits { 
    grid-template-columns: 1fr !important; 
  }
  
  .pd-grid { 
    grid-template-columns: 1fr !important; 
    gap: 10px !important; 
  }
  
  /* Modal adjustments for smaller screens */
  .plot-detail-panel { 
    padding: 16px !important; 
  }
  
  .pd-head { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
    position: relative;
  }
  
  .pd-close { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
  }

  /* Make sure inputs/buttons take full width */
  .plot-search-row .field, .plot-search-row .btn {
      width: 100% !important;
  }
}