/* Charity People — Enhanced Mobile Responsive Layer */

/* Small phones (<=480px) */
@media (max-width: 480px) {
  html { font-size: 15px; }
  .header-inner { height: 64px; padding: 0 var(--space-sm); }
  .logo-text { font-size: 0.95rem; }
  .logo-text-sub { font-size: 0.55rem; }
  .hero { min-height: 82vh; }
  .hero-inner { padding: 4rem 1rem; }
  .hero h1 { font-size: 2.2rem; line-height: 1.1; }
  .hero p { font-size: 1rem; max-width: 100%; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .section { padding: var(--space-xl) 0; }
  .stats-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .stat-card { padding: var(--space-sm); }
  .stat-number { font-size: 2.2rem; }
  .timeline { padding-left: 1.2rem; }
  .timeline::before { left: 4px; }
  .timeline-item::before { left: -1.55rem; width: 10px; height: 10px; border-width: 2px; }
  .card-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .card-body { padding: var(--space-sm); }
  .container { padding: 0 var(--space-sm); }
  .section-header { margin-bottom: var(--space-lg); }
  .footer-inner { padding: 0 var(--space-sm); }
  .footer-bottom { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  input, textarea, select { font-size: 16px; } /* Prevent iOS zoom */
}

/* Tablets and medium phones (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .hero { min-height: 85vh; }
  .hero-inner { padding: 5rem var(--space-md); }
  .hero h1 { font-size: 2.8rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .card-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

/* Large phones / small tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .card-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .hero-inner { padding: 5rem var(--space-md); }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
  .card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.98); }
}

/* Print */
@media print {
  .site-header, .hero-image-bg, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}