/* Responsive Design - Mobile Optimizations */

@media (max-width: 768px) {
  /* Layout */
  main {
    padding: 1rem 0.75rem;
  }
  
  section {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  /* Zodiac Grid */
  .zodiac-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }

  .zodiac-card {
    padding: 0.6rem 0.4rem;
    min-height: 80px;
  }

  .zodiac-icon {
    font-size: 1.75rem;
  }

  .zodiac-name {
    font-size: 0.75rem;
  }

  /* Form Grid */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Mode Selector */
  .mode-selector {
    flex-direction: column;
    gap: 0.5rem;
  }

  .mode-btn {
    width: 100%;
    padding: 0.75rem;
  }
  
  /* Buttons */
  button,
  [role="button"] {
    width: 100%;
    padding: 0.6rem;
  }

  /* Theme Toggle */
  .theme-toggle {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  /* Section Cards */
  .chinese-animals,
  .moonphase-cards,
  .nightsky-grid {
    grid-template-columns: 1fr;
  }

  /* Wisdom Grid */
  .wisdom-grid {
    grid-template-columns: 1fr;
  }

  /* Tarot Cards */
  .tarot-spread {
    gap: 1rem;
  }
  
  .tarot-card {
    padding: 0.5rem 0;
  }

  .card-emoji {
    font-size: 2rem;
  }

  .card-header h5 {
    font-size: 1.1rem;
  }

  .card-meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* I-Ging */
  .hexagram-number {
    font-size: 1.5rem;
  }

  .hexagram-header h5 {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .zodiac-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .zodiac-icon {
    font-size: 1.8rem;
  }

  .zodiac-name {
    font-size: 0.75rem;
  }

  /* User Info */
  .user-info-grid {
    grid-template-columns: 1fr;
  }
}