/* ==========================================================================
   RESPONSIVE
   Breakpoints: Laptop 1200 / Tablet 900 / Mobile 640 / Small mobile 400
   ========================================================================== */

/* ---- Laptop ---- */
@media (max-width: 1200px) {
  :root { --space-3xl: 3.6rem; --space-2xl: 3.6rem; }
  .impact-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-md); }
  .projects-grid, .why-grid, .stories-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-xl); }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .nav-links, .nav-actions .icon-btn.search-trigger { display: none; }
  .hamburger { display: flex; }
  .nav-actions .btn-primary { padding: 12px 20px; font-size: 0.85rem; }

  .about-preview .container { grid-template-columns: 1fr; }
  .collage { height: 380px; margin-bottom: var(--space-md); }
  .vision-grid { grid-template-columns: 1fr !important; }
  .model-grid { grid-template-columns: 1fr !important; }
  .model-grid .value-list { margin-top: var(--space-lg); }
  .dept-detail-grid { grid-template-columns: 1fr !important; }

  .donation-banner { grid-template-columns: 1fr; }
  .volunteer-cta { margin: 0 var(--space-sm); width: calc(100% - 2 * var(--space-sm)); min-height: 400px; }
  .volunteer-cta .container { margin-left: var(--space-lg); margin-right: var(--space-lg); }

  .hero-rings { display: none; }
  .hero-stats { gap: var(--space-lg); }

  .newsletter-band { flex-direction: column; align-items: flex-start; }
  .newsletter-form { max-width: 100%; width: 100%; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  :root { --space-3xl: 2.8rem; --space-2xl: 2.4rem; --nav-height: 70px; }

  h1 { font-size: 2.3rem; }
  .container { padding: 0 var(--space-sm); }

  .hero-content p { font-size: 1rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-dots { bottom: 100px; }

  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid, .why-grid, .stories-grid, .news-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); padding-bottom: var(--space-lg); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .donation-banner { padding: var(--space-lg); }
  .cookie-notice { flex-direction: column; left: 14px; right: 14px; bottom: 14px; }

  .volunteer-cta .container { margin-left: var(--space-md); margin-right: var(--space-md); }
}

/* ---- Small mobile ---- */
@media (max-width: 400px) {
  h1 { font-size: 1.95rem; }
  .btn { padding: 14px 24px; font-size: 0.88rem; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-sm); }
  .impact-ring { width: 66px; height: 66px; }
  .testimonial-slide p.quote { font-size: 1.1rem; }
}

/* ---- Large screens ---- */
@media (min-width: 1600px) {
  :root { --container-width: 1380px; }
}

/* ---- Inner-page components: laptop ---- */
@media (max-width: 1200px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid.leads { grid-template-columns: repeat(2, 1fr); }
  .impact-levels { grid-template-columns: repeat(3, 1fr); }
  .blog-layout { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .media-grid, .bts-gallery-grid, .bts-photo-grid { grid-template-columns: repeat(3, 1fr); }
  .infographic-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-logo-grid { grid-template-columns: repeat(3, 1fr); }
  .benefits-grid, .benefit-strip { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .donate-panel { grid-template-columns: 1fr; }
  .donate-summary { position: static; }
}

/* ---- Inner-page components: tablet ---- */
@media (max-width: 900px) {
  .team-grid, .team-grid.leads { grid-template-columns: repeat(2, 1fr); }
  .impact-levels { grid-template-columns: 1fr; }
  .opportunity-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 1fr 1fr; }
  .blog-list .news-card { grid-template-columns: 1fr; }
  .blog-list .news-media { height: 200px; }
  .gallery-item.wide, .gallery-item.tall { grid-column: span 1; grid-row: span 1; height: 240px; }
  .media-grid, .bts-gallery-grid, .bts-photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-tabs { flex-wrap: wrap; }
}

/* ---- Inner-page components: mobile ---- */
@media (max-width: 640px) {
  .page-hero { min-height: 50vh; padding-bottom: var(--space-xl); }
  .team-grid, .team-grid.leads { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid, .bts-gallery-grid, .bts-photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-sm); }
  .media-tile { height: 150px; }
  .infographic-grid, .benefits-grid, .benefit-strip { grid-template-columns: 1fr 1fr; }
  .partner-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .dept-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-search input { width: 100%; }
  .donate-tabs, .faq-categories { overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .bar-chart { gap: var(--space-sm); }
  .timeline::before { left: 18px; }
  .timeline-item { padding-left: 54px; }
}

/* ==========================================================================
   FULL MOBILE-DEVICE HARDENING
   Covers the logo/nav lockup, tables, dialogs and edge-case widths across
   phones from ~320px up, plus landscape phones and foldables.
   ========================================================================== */

/* ---- Global safety net: never allow horizontal scroll on any device ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* ---- Logo scales down as the navbar compresses ---- */
@media (max-width: 900px) {
  .brand-logo-img { height: 34px; }
  .brand { padding: 6px 12px; gap: 8px; }
}
@media (max-width: 480px) {
  .brand-logo-img { height: 28px; }
  .brand { padding: 5px 10px; }
}

/* ---- Nav actions: keep donate button, search and hamburger from colliding ---- */
@media (max-width: 400px) {
  .navbar .container { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-primary { padding: 10px 14px; font-size: 0.78rem; }
  .icon-btn.search-trigger { display: none; }
}

/* ---- Data tables (hours, snapshots) scroll instead of overflowing ---- */
@media (max-width: 640px) {
  .hours-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Lightbox on small phones ---- */
@media (max-width: 480px) {
  .lightbox-inner { width: 94vw; }
  .lightbox-inner img { max-height: 62vh; }
  .lightbox-caption { font-size: 0.8rem; }
  .lightbox-prev, .lightbox-next, .lightbox-close { width: 40px; height: 40px; }
}

/* ---- Search & mobile menu never exceed the viewport ---- */
@media (max-width: 400px) {
  .mobile-menu { width: 100vw; padding: var(--space-lg) var(--space-md); }
  .search-box input { font-size: 1.4rem; }
}

/* ---- Impact / infographic grids collapse gracefully on very small phones ---- */
@media (max-width: 360px) {
  .impact-grid, .infographic-grid, .benefits-grid, .benefit-strip, .team-grid, .team-grid.leads, .partner-logo-grid {
    grid-template-columns: 1fr;
  }
  h1 { font-size: 1.7rem; }
  .btn { width: 100%; }
  .donate-tab, .filter-chip { width: auto; }
}

/* ---- Landscape phones (short viewport height) ---- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero, .page-hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-lg)); padding-bottom: var(--space-lg); }
  .scroll-cue { display: none; }
  .mobile-menu { padding-top: var(--space-md); }
}

/* ---- Foldables / tablets in portrait (e.g. 768–900px) ---- */
@media (min-width: 641px) and (max-width: 820px) {
  .projects-grid, .why-grid, .stories-grid, .news-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Auth pages ---- */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { min-height: 260px; padding: var(--space-lg); }
  .auth-visual-content blockquote { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .auth-form-side { padding: var(--space-xl) var(--space-sm); }
  .auth-visual { min-height: 200px; }
  .auth-visual-content blockquote { display: none; }
}

/* ==========================================================================
   TOUCH-DEVICE FIXES
   Content that only appeared on :hover is invisible on phones/tablets,
   since touch has no reliable hover state. Make it visible by default
   wherever it hides information rather than just adding a flourish.
   ========================================================================== */

@media (pointer: coarse), (max-width: 900px) {
  .team-social { bottom: 0; background: linear-gradient(to top, rgba(11,29,25,0.82), transparent); }
  .gallery-overlay { opacity: 1; background: linear-gradient(to top, rgba(11,29,25,0.7), transparent 70%); }
}

/* ---- Minimum comfortable touch target size (WCAG 2.5.5) ---- */
@media (pointer: coarse) {
  .icon-btn, .hamburger, .back-to-top, .pagination button, .testimonial-nav button,
  .amount-chip, .filter-chip, .dept-tab, .donate-tab { min-height: 44px; }
  .nav-links a, .dropdown a, .mobile-menu a, .footer-col a, .social-row a { min-height: 44px; display: flex; align-items: center; }
  .footer-col ul { gap: 2px; }
}

/* ==========================================================================
   FOOTER — dedicated mobile pass
   ========================================================================== */

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); text-align: left; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer { padding-top: var(--space-xl); }
  .social-row { justify-content: flex-start; }
  .footer-bottom { gap: var(--space-sm); }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-legal { gap: var(--space-lg); }
}

@media (max-width: 400px) {
  .footer-grid { gap: var(--space-lg); }
  .footer-col h4 { font-size: 0.95rem; }
  .footer-contact li { font-size: 0.86rem; }
  .newsletter-band { padding: var(--space-lg) var(--space-md); }
  .newsletter-form { min-width: 0; }
}




@media (max-width: 480px) {
  .hours-table td { display: block; width: 100% !important; padding: 4px 0; border-bottom: none; }
  .hours-table td:last-child { text-align: left; padding-bottom: 12px; border-bottom: 1px solid #EEF2F1; }
}

@media (max-width: 900px) {
  .fundraising-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .donor-wall-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 380px) {
  .countdown-timer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 280px; margin-left: auto; margin-right: auto; }
  .countdown-unit { min-width: 0; }
}

@media (max-width: 900px) {
  #install-app-btn { display: none !important; }
}

@media (max-width: 900px) {
  .completed-projects-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .before-after-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .video-list-grid { grid-template-columns: 1fr !important; }
}