/* ==========================================================================
   RESPONSIVE STRATEGY & BREAKPOINTS
   ========================================================================== */

/* Spacing Adjustments for Small screens (Fine tuning what clamp couldn't reach) */
@media (max-width: 640px) {
  :root {
    --space-5: 1.25rem; /* Tighter spacing for mobile components */
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3.5rem;
    --space-16: 4.5rem;
  }

  .section {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
  }

  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* Buttons stack full-width on mobile */
  .btn-group {
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
  }

  .btn-group .btn {
    width: 100%;
  }

  /* Statistics stack as responsive cards */
  .hero-stats-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .stat-item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-sm);
  }

  /* Floating badges safety stacking to prevent horizontal scroll */
  .hero-floating-badge {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: var(--space-3) auto 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Mobile-First Header Nav Controls (Inherited from animations.css) */
@media (max-width: 1023px) {
}

/* Tablet Optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-tablet-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Quick select donation panels styling on medium screens */
  .donation-card-layout {
    grid-column: span 2;
  }
}

/* Large Screens (Desktop First enhancements) */
@media (min-width: 1200px) {
  .hero-layout-split {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }
}

/* Extremely Wide screens: prevent massive stretched cards */
@media (min-width: 1600px) {
  .container-wide {
    max-width: 1560px;
  }
}

/* ==========================================================================
   GLOBAL RESPONSIVE SAFETY
   ========================================================================== */

/* Prevent horizontal overflow on all devices */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure all images are responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* Touch-friendly minimum sizes */
@media (max-width: 767px) {
  .btn,
  button,
  a.btn {
    min-height: 44px;
  }
}

/* Container padding on small mobile */
@media (max-width: 360px) {
  .container,
  .container-narrow {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .container-wide {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Tablet container adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
  .container-wide {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* Footer responsive handled by components.css */