/* Tablet breakpoint: 4 action cards → 2 columns */
@media (max-width: 900px) {
  .action-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .action-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #featured-grid .grid-auto {
    grid-template-columns: 1fr !important;
  }

  .header-inner {
    height: 60px;
  }

  .logo {
    font-size: 1.2rem;
  }

  .nav-btn span.nav-label {
    display: none;
  }

  #app {
    padding-top: 70px;
  }

  /* Quiz */
  .quiz-question {
    font-size: 1.4rem;
  }

  .mood-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .mood-card {
    padding: 18px 12px;
  }

  .mood-card .mood-icon {
    font-size: 2rem;
  }

  .time-option {
    padding: 16px;
  }

  /* Results */
  .alternatives-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .top-pick-card .top-pick-image {
    height: 200px;
  }

  .top-pick-card .top-pick-title {
    font-size: 1.3rem;
  }

  /* Profile */
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-sidebar {
    position: static;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .stat-card .stat-value {
    font-size: 1.8rem;
  }

  .stat-card {
    padding: 16px 10px;
  }

  /* Search */
  .search-box {
    flex-direction: column;
  }

  .search-tabs {
    flex-wrap: wrap;
  }

  /* Modal */
  .modal-content {
    border-radius: var(--radius);
    max-height: 95vh;
  }

  .modal-image {
    height: 200px;
  }

  .modal-title {
    font-size: 1.3rem;
  }

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

  .ingredient-list {
    grid-template-columns: 1fr;
  }

  /* YouTube videos */
  .youtube-videos-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Restaurants */
  .restaurant-inputs {
    grid-template-columns: 1fr;
  }

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

  /* General */
  .grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .notification {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .mood-grid {
    grid-template-columns: 1fr;
  }

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

  .nav-links {
    gap: 4px;
  }

  .nav-btn {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .youtube-videos-grid {
    grid-template-columns: 1fr;
  }
}