/* ==========================================================================
   CAPS4CANCER — Responsive
   Breakpoints: Desktop (default) → Laptop 1200 → Tablet 900 → Mobile 600
   ========================================================================== */

/* Laptop */
@media (max-width: 1200px) {
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer__top .footer__col:nth-child(4) { display: none; }
}

/* Tablet */
@media (max-width: 900px) {
  .nav__links { gap: 30px; }
  .card-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .community { grid-template-columns: 1fr; }
  .involve-grid { grid-template-columns: repeat(2, 1fr); }
  .step-grid { grid-template-columns: repeat(2, 1fr); }
  .institution-grid { grid-template-columns: repeat(2, 1fr); }
  .winwin-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-alt__badge { width: 116px; height: 116px; }
  .hero-alt__logo { width: 110px; }
  .counters { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .two-col,
  .two-col--reverse { grid-template-columns: 1fr; }
  .two-col--reverse .two-col__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Mobile */
@media (max-width: 600px) {
  :root { --section-pad-x: 20px; }

  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--c-white);
    flex-direction: column;
    justify-content: center;
    gap: 36px;
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    z-index: 1;
  }
  .nav__links a { color: var(--c-navy) !important; font-size: 1.1rem; }
  .nav__links.is-open { transform: translateX(0); }
  .nav__cta { display: inline-flex; }

  .nav__toggle { display: flex; }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav__toggle.is-open { color: var(--c-black) !important; }

  .hero__title { font-size: clamp(2.25rem, 11vw, 3rem); }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }

  .card-grid { grid-template-columns: 1fr; }
  .counters { grid-template-columns: 1fr; gap: 40px; }
  .feature-grid { grid-template-columns: 1fr; gap: 36px; }
  .involve-grid { grid-template-columns: 1fr; gap: 28px; }
  .step-grid { grid-template-columns: 1fr; }
  .institution-grid { grid-template-columns: 1fr; }
  .winwin-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-alt { padding-top: 130px; }
  .hero-alt__badge { position: static; width: auto; margin-bottom: 20px; }
  .hero-alt__logo { position: static; width: 90px; margin: 20px auto 0; }
  .hero-alt__visual { flex-direction: column; }

  .newsletter-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .newsletter-bar__label { flex-direction: column; text-align: center; }
  .newsletter-bar form { justify-content: center; }
  .newsletter-bar input[type="email"] { flex: 1; min-width: 0; }

  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .btn-row { flex-direction: column; width: 100%; }
  .btn-row .btn { width: 100%; }

  .page-hero { padding-top: 160px; }
}

/* Grid overflow guard — prevents any grid child (especially SVG/image content
   with an intrinsic size) from forcing its track wider than the container,
   which is what caused the mission/research/partners illustration overflow. */
.card-grid > .card,
.counters > *,
.stat-strip > *,
.feature-grid > *,
.involve-grid > .involve-card,
.step-grid > .step-card,
.institution-grid > .institution-card,
.winwin-grid > .winwin-grid__item,
.community > *,
.contact-grid > *,
.partner-grid > .partner-logo,
.footer__top > .footer__col {
  min-width: 0;
}
html, body { max-width: 100%; overflow-x: hidden; }