/* Tablet ≤ 1200px */
@media (max-width: 1200px){
    .nav-wrap{padding:0 24px}
    .container{padding:0 24px; width:100%}
    .about-grid{grid-template-columns:1fr; gap:40px}
    .focus-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:391px; justify-content:center}
    .events-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:329px; justify-content:center}
    .stories{grid-template-columns:1fr; justify-content:center}
    .cta-grid{grid-template-columns:1fr}
    .cta-btn{width:100%}
    .gallery-grid{grid-template-columns:1fr; grid-template-rows:auto; gap:24px}
    .big,.sm,.bottom-b,.bottom-c{width:100%; height:auto; transform:none}
  }
  
  /* Mobile ≤ 600px (≈430 canvas) */
  @media (max-width: 600px){
    .main-nav{display:none}
    .nav-toggle{display:block}
  
    .nav-wrap{height:90px}
  
    .hero{height:600px}
    .hero-grid{grid-template-columns:1fr}
    .display{font-size:60px}
    .lead{font-size:22px}
    .hero-ctas{margin-top:24px; gap:24px}
    .hero-btn{width:200px; height:48px; border-radius:24px}
  
    .about{padding:80px 0 0}
    .about-grid{grid-template-columns:1fr; gap:24px}
    .founder-card{width:100%; height:auto}
    .about-text{max-width:none}
  
    .focus-grid{grid-template-columns:1fr; grid-auto-rows:391px}
    .stats-row{flex-wrap:wrap; gap:32px; justify-content:center}
  
    .stories{gap:24px}
    .story-card{width:100%; height:auto}
    .events-grid{grid-template-columns:1fr; grid-auto-rows:329px}
    .more-events{width:100%}
  
    .gallery-btn{width:100%}
  }

  @media (max-width:600px){
    .hero .display{ margin-bottom:12px; }  /* tighter on phones */
    .hero .hero-ctas{ margin-top:36px; }   /* increase gap below subheading */
  }

  @media (max-width:600px){
    .hero-copy{ margin-left:0; padding-left:16px; }
  }
  
/* --- Volunteer page scroll fix: kill nested scroller --- */
html, body {
  height: auto;
  overflow-y: auto;
}

/* anything wrapping the form must NOT scroll */
main,
.vol-form,
.form-card,
.vol-form .container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* keep the mentor bio animation working – only this can clip */
.mentors .mdesc {
  overflow: hidden; /* needed for the open/close transition */
}

  /* Smaller, sane heading on phones */
#events .section-title{
  font-size: clamp(24px, 6.5vw, 40px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  word-break: normal !important;
  text-align: center !important;
}

/* MOBILE: force true 1-column stack + full-width cards */
@media (max-width: 900px){
  #events .events-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    gap: 22px !important;
  }

  /* kill any old fixed widths */
  #events .events-grid > *,
  #events .event,
  #events .ev-card{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* slightly smaller card text on mobile */
  #events .event h3, #events .ev-card h3{
    font-size: 22px !important;
    line-height: 1.28 !important;
    margin: 12px 0 8px !important;
  }
  #events .event .meta, #events .ev-card .meta{
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

/* Make the “More events” button bigger */
#events .more-events{
  min-width: 260px !important;
  padding: 18px 28px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
}


/* EVENTS — let rows auto-size on all screens */
#events .events-grid{ grid-auto-rows: unset !important; }