/* 
 * NGO Plus Responsive CSS
 * Mobile-first responsive design
 */

/* ===========================================
   RESPONSIVE UTILITIES
   =========================================== */
@media (max-width: 640px) {
  .sm\:d-none { display: none; }
  .sm\:d-block { display: block; }
  .sm\:d-flex { display: flex; }
  .sm\:d-grid { display: grid; }
  
  .sm\:flex-column { flex-direction: column; }
  .sm\:flex-row { flex-direction: row; }
  
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
  
  .sm\:w-100 { width: 100%; }
  .sm\:w-75 { width: 75%; }
  .sm\:w-50 { width: 50%; }
  .sm\:w-25 { width: 25%; }
}

@media (max-width: 768px) {
  .md\:d-none { display: none; }
  .md\:d-block { display: block; }
  .md\:d-flex { display: flex; }
  .md\:d-grid { display: grid; }
  
  .md\:flex-column { flex-direction: column; }
  .md\:flex-row { flex-direction: row; }
  
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
}

@media (max-width: 1024px) {
  .lg\:d-none { display: none; }
  .lg\:d-block { display: block; }
  .lg\:d-flex { display: flex; }
  .lg\:d-grid { display: grid; }
  
  .lg\:flex-column { flex-direction: column; }
  .lg\:flex-row { flex-direction: row; }
  
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
}

/* ===========================================
   CONTAINER RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
  
  .grid-2-md { grid-template-columns: repeat(2, 1fr); }
  .grid-3-md { grid-template-columns: repeat(3, 1fr); }
  .grid-4-md { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
  
  .grid-2-lg { grid-template-columns: repeat(2, 1fr); }
  .grid-3-lg { grid-template-columns: repeat(3, 1fr); }
  .grid-4-lg { grid-template-columns: repeat(4, 1fr); }
  .grid-5-lg { grid-template-columns: repeat(5, 1fr); }
  .grid-6-lg { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* ===========================================
   MOBILE (≤767px)
   =========================================== */
@media (max-width: 767px) {
  /* Typography Adjustments */
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }
  
  .lead {
    font-size: var(--text-lg);
  }
  
  /* Layout Adjustments */
  .section {
    padding: var(--space-8) 0;
  }
  
  .section-lg {
    padding: var(--space-12) 0;
  }
  
  /* Grid Adjustments */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  /* Button Adjustments */
  .btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Card Adjustments */
  .card {
    margin-bottom: var(--space-4);
  }
  
  /* Form Adjustments */
  .form-row {
    flex-direction: column;
  }
  
  /* Navigation Adjustments */
  .main-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--white);
    transition: right 0.3s ease;
    z-index: var(--z-modal);
    overflow-y: auto;
    padding: var(--space-8) var(--space-4);
  }
  
  .main-navigation.active {
    right: 0;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  /* Hero Section */
  .hero-section {
    min-height: 80vh;
    padding: var(--space-16) var(--space-4);
  }
  
  .hero-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
  }
  
  .hero-description {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
  }
  
  .hero-actions {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  /* Footer Adjustments */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .footer-column {
    text-align: center;
  }
  
  .social-links {
    justify-content: center;
  }
}

/* ===========================================
   TABLET (768px - 1023px)
   =========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Typography Adjustments */
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  
  /* Grid Adjustments */
  .grid-2,
  .grid-4,
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-3,
  .grid-5 {
    grid-template-columns: 1fr;
  }
  
  /* Layout Adjustments */
  .section {
    padding: var(--space-10) 0;
  }
  
  /* Navigation */
  .mobile-menu-toggle {
    display: none;
  }
  
  .main-navigation {
    display: flex;
  }
  
  /* Hero Section */
  .hero-section {
    min-height: 90vh;
  }
  
  .hero-title {
    font-size: var(--text-4xl);
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================================
   DESKTOP (≥1024px)
   =========================================== */
@media (min-width: 1024px) {
  /* Navigation */
  .mobile-menu-toggle {
    display: none;
  }
  
  .main-navigation {
    display: flex;
  }
  
  /* Hero Section */
  .hero-section {
    min-height: 100vh;
  }
  
  .hero-title {
    font-size: var(--text-5xl);
  }
  
  /* Grid System */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-6 { grid-template-columns: repeat(6, 1fr); }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===========================================
   LARGE DESKTOP (≥1280px)
   =========================================== */
@media (min-width: 1280px) {
  .hero-title {
    font-size: var(--text-6xl);
  }
  
  .lead {
    font-size: var(--text-2xl);
  }
}

/* ===========================================
   HOVER STATES (Desktop only)
   =========================================== */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
  
  .nav-link:hover::after {
    width: 100%;
  }
  
  .social-link:hover {
    transform: translateY(-3px);
  }
}

/* ===========================================
   TOUCH DEVICE OPTIMIZATIONS
   =========================================== */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px;
    padding: var(--space-4) var(--space-5);
  }
  
  .nav-link {
    padding: var(--space-3) var(--space-2);
  }
  
  .form-control,
  .form-select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 44px;
  }
}

/* ===========================================
   HIGH DPI SCREENS
   =========================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Optimize for retina displays */
  .hero-background {
    background-size: cover;
  }
}

/* ===========================================
   ORIENTATION SPECIFIC
   =========================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-section {
    min-height: 120vh;
    padding: var(--space-8) 0;
  }
  
  .hero-content {
    left: 0;
    right: 0;
    padding-top: var(--space-16);
  }
}

/* ===========================================
   ACCESSIBILITY - Reduced Motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .btn,
  .card,
  .nav-link,
  .social-link {
    transition: none;
  }
}