/*
 * Responsive rules. Breakpoints follow "apple-website-clone" by Reiyn
 * (MIT License, Copyright (c) 2023 Reiyn).
 */

@media (max-width: 1022px) {

  /* Navbar */

  .respnavbar { display: block; }

  .navlinks {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(0, 45, 101, 0.98);
    padding: 8px 22px 22px;
  }
  nav.open .navlinks { display: flex; }

  .navlink {
    margin: 0;
    padding: 14px 0;
    font-size: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .navcta {
    margin: 18px 0 0;
    text-align: center;
    padding: 12px;
    font-size: 17px;
  }

  /* Info bar */

  .infobar { flex-direction: column; }

  /* Hero */

  .hero { min-height: 480px; padding-top: 48px; }

  .mp1-title1, .hero-title { font-size: 40px; }

  .mp1-title2, .hero-sub {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .mainpagelink, .hero-links { font-size: 17px; gap: 22px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Grid tiles */

  .grid-item, .tile {
    flex-basis: 100%;
    margin: 0 0 12px;
    min-height: 0;
  }

  .tiles { padding: 12px 0 0; }

  .section-title { font-size: 36px; }

  .cards { grid-template-columns: 1fr 1fr; }
  .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .cards-4 .card { padding: 22px 16px; }
  .cards-4 .card h3 { font-size: 18px; }
  .cards-4 .card p { font-size: 14px; }
  .tool { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .cards-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .hero-photo { min-height: 520px; }
  .hero-photo-donors { background-position: 58% 30%; }
  .hero-photo-home { background-position: 68% 20%; }
  .band { padding: 56px 18px; }
  .band-title { font-size: 32px; }
  .band-sub { font-size: 17px; }
  .cards-4 { grid-template-columns: 1fr; }
  :root { --nav-h: 56px; }
  .navbrand img { height: 36px; }
  .footer-logo img { height: 48px; }
  .mp1-title1, .hero-title { font-size: 34px; }
  .mp1-title2, .hero-sub { font-size: 19px; }
  .stat-num { font-size: 34px; }
  .section { padding: 64px 18px; }
  .section-title { font-size: 30px; }
  .section-lead { font-size: 18px; }
  .motherday, .tile-title { font-size: 30px; }
  .motherday2, .tile-desc { font-size: 17px; }
  .cards, .cards-2, .people { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .panel { padding: 24px 20px; }
  .result-big { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}