/* Shared mobile layout fixes — load AFTER page-specific CSS */

html {
  scrollbar-gutter: stable;
}

@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  /* Prevent grid/flex children from overflowing viewport */
  .hero,
  .hero > *,
  .hero-content-left,
  .hero-visual,
  .cause-page-hero,
  .cause-page-hero-content,
  .about-hero,
  .hero-content,
  .page-hero,
  .section,
  .donate-section,
  .stats-bar {
    min-width: 0;
    max-width: 100%;
  }

  .hero h1,
  .cause-page-hero-content h1,
  .hero-content h1,
  .page-hero h1,
  .causes-hero-content h1 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  .hero p,
  .cause-page-hero-content p {
    overflow-wrap: break-word;
  }

  /* Cause detail pages */
  .cause-page-hero {
    min-height: auto;
    padding: 48px 0 56px;
    margin-top: 72px;
  }

  .cause-page-hero-content {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .cause-page-hero-content h1 {
    font-size: clamp(28px, 8vw, 42px);
  }

  .cause-page-hero-content p {
    font-size: 16px;
    line-height: 1.7;
  }

  .cause-page-section,
  .cause-page-impact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .cause-page-cta-banner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* About page hero */
  .about-hero {
    margin-top: 72px;
    height: auto;
    min-height: 60vh;
    padding: 48px 20px;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
    padding: 0 4px;
  }

  .hero-content h1 {
    font-size: clamp(32px, 9vw, 48px);
  }

  /* Gallery / stories page hero */
  .page-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Footer alignment */
  .footer-bottom {
    align-items: center !important;
    text-align: center;
  }

  .footer-bottom p {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .cause-page-hero-content {
    padding: 0 16px;
  }

  .cause-page-hero-content h1 {
    font-size: clamp(26px, 7.5vw, 34px);
  }

  .hero-content h1 {
    font-size: clamp(28px, 8vw, 38px);
  }
}