/* ============================================
   Responsive Design - Mobile First Approach
   ============================================ */

/* ============================================
   Tablet: 600px - 960px
   ============================================ */

@media (max-width: 960px) and (min-width: 600px) {
  .trip-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cover-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   Desktop Small: 960px - 1200px
   ============================================ */

@media (max-width: 1200px) and (min-width: 960px) {
  .trip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   Mobile: < 600px
   ============================================ */

@media (max-width: 600px) {
  /* Header */
  .header {
    padding: var(--spacing-md) var(--spacing-md);
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .header-title {
    font-size: 24px;
  }

  .header-actions {
    width: 100%;
    flex-direction: column;
  }

  .header-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-text {
    display: inline;
  }

  /* Info Banner */
  .info-banner {
    margin: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .info-text {
    font-size: 14px;
  }

  .info-subtext {
    font-size: 12px;
  }

  /* Toolbar */
  .toolbar {
    padding: 0 var(--spacing-md);
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-item {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-select,
  .toolbar-btn {
    width: 100%;
  }

  /* Trip Grid */
  .trip-grid-container {
    padding: 0 var(--spacing-md) var(--spacing-md);
  }

  .trip-grid {
    grid-template-columns: 1fr;
  }

  /* Trip Card */
  .trip-card-name {
    font-size: 16px;
  }

  .trip-card-date {
    font-size: 13px;
  }

  .trip-card-stats {
    font-size: 11px;
  }

  .trip-card-stat .material-icons {
    font-size: 14px;
  }

  .trip-card-drag-handle {
    display: none; /* Hide drag handle on mobile */
  }

  /* Modals */
  .modal {
    padding: var(--spacing-sm);
  }

  .modal-content {
    max-height: 90vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-md);
  }

  .modal-title {
    font-size: 18px;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Cover Grid */
  .cover-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Filter Section */
  .filter-section h3 {
    font-size: 14px;
  }

  .filter-option {
    font-size: 13px;
    padding: 6px var(--spacing-sm);
  }

  /* Toast */
  .toast {
    left: var(--spacing-md);
    right: var(--spacing-md);
    transform: translateX(0) translateY(100px);
    max-width: calc(100% - var(--spacing-lg));
  }

  .toast.show {
    transform: translateX(0) translateY(0);
  }
}

/* ============================================
   Extra Small Mobile: < 400px
   ============================================ */

@media (max-width: 400px) {
  .header-title {
    font-size: 20px;
  }

  .trip-card-content {
    padding: var(--spacing-sm);
  }

  .trip-card-name {
    font-size: 15px;
  }

  .trip-card-stats {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .cover-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Landscape Mobile
   ============================================ */

@media (max-height: 600px) and (orientation: landscape) {
  .modal-content {
    max-height: 95vh;
  }

  .modal-body {
    max-height: 60vh;
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  .header-actions,
  .toolbar,
  .trip-card-actions,
  .trip-card-favorite,
  .trip-card-drag-handle {
    display: none !important;
  }

  .trip-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trip-card {
    break-inside: avoid;
  }

  .trip-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
}