/* ====== GLOBAL STABILITY (Android-safe) ====== */
html{
  /* Prevent Android Chrome from inflating text sizes unexpectedly */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  overflow-x:hidden;  /* kill accidental sideways scroll on tight viewports */
}

/* Make media fluid by default */
img, video{
  max-width:100%;
  height:auto;
  display:block;
}

/* Gentle page gutters on small screens */
@media (max-width: 480px){
  .container,
  .featured-stories .fs-container,
  .cta-inner,
  #impactStories .wrap{
    padding-inline: clamp(16px, 4vw, 24px);
  }
}

/* Prefer “safe viewport” units on mobile (if any sections use vh) */
:root{
  --vh: 100svh; /* small viewport height – stable under mobile browser chrome */
}

/* ====== WIDER MOBILE BREAKPOINT (≤ 480px) ====== */
/* This block gently replaces the old ≤430 rules without fighting them */
@media (max-width: 480px){

  /* HERO cards used on Contact/Donate/Impact, etc. */
  .hero-card,
  .don-hero .hero-card,
  .impact-hero .hero-card{
    width: min(382px, 100% - 32px);
    height: auto;
    aspect-ratio: 382 / 129;  /* keeps your visual ratio while allowing fluid width */
    border-radius: 16px;      /* slight round so it looks good on all widths */
  }
  .don-hero .hero-title,
  .impact-hero .hero-title{
    font-size: clamp(28px, 7vw, 32px);
    line-height: 1.1;
  }

  /* ===== Featured Stories (list article layout) ===== */
  /* Prevent overflow from fixed pixel sizes in the mobile comps */
  .featured-stories{ padding: 48px 0 96px; }
  .featured-stories .fs-container{ max-width: 100%; }

  .fs-block{
    margin: 0 0 72px;
  }

  /* Image card: make it fluid with a stable aspect ratio */
  .fs-media{
    float: none;           /* no float wrapping on small screens */
    shape-outside: none;
    margin: 0 auto 20px;
    width: min(100%, 349px);  /* never overflow */
    height: auto;
    aspect-ratio: 305 / 310;  /* close to your comp; tweak if needed */
    border-radius: 24px;
    overflow: hidden;
  }
  .fs-body{
    max-width: 340px;
    margin: 0 auto;
  }
  .fs-h3{
    font-size: clamp(20px, 5.4vw, 22px);
    line-height: 1.15;
  }
  .fs-lead{
    font-size: clamp(15px, 4.2vw, 16px);
    line-height: 1.6;
  }
  .fs-body p{
    font-size: clamp(15px, 4.2vw, 16px);
    line-height: 1.9;
  }

  /* ===== Blog post (open article) readability ===== */
  /* If your open-article page uses a content wrapper, this helps consistency */
  .post-body, .blog-article, .article-body{
    max-width: 340px;
    margin-inline: auto;
    font-size: clamp(16px, 4.8vw, 18px);  /* (18–20px on common phones) */
    line-height: 1.7;
  }

  /* Top image on the open article */
  .post-hero img, .blog-hero img, .article-hero img{
    width: 100%;
    height: auto;          /* avoid hard heights */
    aspect-ratio: 287 / 133; /* based on your first image comp */
    border-radius: 8px;
  }

  /* CTA pills: go full width and never overflow */
  .cta-buttons{ gap: 22px; flex-direction: column; align-items: stretch; }
  .cta-pill{
    width: 100% !important;
    padding-block: 24px;
    font-size: clamp(16px, 4.6vw, 18px);
    border-radius: 999px;
  }

  /* Footers: keep columns from pinching */
  .foot-grid{ row-gap: 24px; }
}

/* ====== “Narrow Androids” (≤ 400px) – extra safety ====== */
@media (max-width: 400px){
  .fs-media{ width: min(100%, 320px); }
  .fs-body{ max-width: 320px; }
  .post-body, .blog-article, .article-body{ max-width: 320px; }
}

/* ====== Optional: blog list cards if you used a grid ======
   These rules ensure 1 column and no overflow on tight widths.
*/
@media (max-width: 480px){
  .blog-list, .posts, .cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .blog-card, .post-card, .card{
    width: 100%;
  }
  .blog-card img, .post-card img, .card img{
    width: 100%;
    height: auto;
    aspect-ratio: 317 / 311;   /* matches your mobile comps */
    object-fit: cover;
    border-radius: 12px;
  }
}

/* ====== Last: defensive fix for any element forcing scroll ====== */
@media (max-width: 480px){
  [style*="width: 349px"], [style*="width: 340px"], [style*="width: 317px"]{
    max-width: 100% !important;
  }
}


/* =========================
   MOBILE-ONLY RESCUE RULES
   (≤ 480px) — desktop untouched
   ========================= */
@media (max-width: 480px){

  /* 1) Kill sideways scroll, safely */
  html, body{
    max-width: 100vw;
    overflow-x: clip;         /* avoids scrollbar but doesn't clip vertical content */
  }

  /* 2) Media should never push layout wider than the screen */
  img, video, svg, canvas, iframe{
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* 3) Keep main wrappers inside the viewport + add safe gutters */
  .nav-wrap,
  .container,
  .foot-grid,
  .featured-stories .fs-container,
  .blog-list .list,
  .post-head-inner,
  .post-inner{
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 4) Sections must not crop their children on small screens */
  section,
  .home-hero,
  .impact-hero{
    overflow: visible;
  }

  /* 5) CTA sanity: stack, center, and prevent broken words */
  .cta-buttons,
  .home-hero .cta-row{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .btn,
  .cta-pill,
  .donate-pill,
  .home-hero .cta-row .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 14px 18px;
    white-space: nowrap;      /* stop "Volun- teer" */
    word-break: keep-all;
    hyphens: none;
  }

  /* 6) Paragraphs/titles won't hyphenate oddly on Android */
  body, p, h1, h2, h3, h4, h5, h6{
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* ===== Mobile polish (Android) — keep within viewport & keep CTA on one line ===== */
@media (max-width: 430px){

  /* Kill any sideways scroll caused by wide children */
  html, body { max-width:100%; overflow-x:hidden; }

  /* Make every “container-like” box respect the gutter */
  .container,
  .nav-wrap,
  .hero-card,
  .impact-hero .hero-card,
  .home-hero .hero-card,
  .impact-intro .container,
  .site-footer .container {
    width:auto;
    padding-left:24px;
    padding-right:24px;
    box-sizing:border-box;
  }

  /* Images/cards never wider than the screen */
  img, video { max-width:100%; height:auto; }
  .hero-card img { width:100%; height:auto; border-radius:12px; }

  /* CTA pills: full width, centered, never wrap */
  .cta-buttons { flex-direction:column; gap:18px; }
  .cta-pill,
  .btn, .donate-pill {           /* covers the hero Donate/Volunteer buttons too */
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-block:22px;
    white-space:nowrap;          /* keeps “Volunteer” on one line */
  }

  /* Paragraphs—no auto-hyphenation on Android */
  p, h1, h2, h3 { -webkit-hyphens:none; hyphens:none; }
}



/* Stop accidental sideways scroll (without 100vw pitfalls) */
html, body { width: 100%; overflow-x: hidden; }

/* Any flex child that was causing overflow */
* { box-sizing: border-box; }
section, div, .container { min-width: 0; }

/* Media shouldn’t exceed the viewport */
img, video { max-width: 100%; height: auto; display: block; }

/* Container rhythm */
.container { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* Hero CTA alignment */
.hero .cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero .cta .btn { white-space: nowrap; }

/* About section clipping guard (avoid fixed heights) */
.about-section { height: auto; min-height: 0; overflow: visible; }


/* Bigger, friendlier hit-areas (Donation Type, Payment Method, Sponsor a Project) */
.donate-form .panel > .panel-head,
.donate-form .tick-list .row-toggle{
  padding: 32px 16px !important;
  min-height: 60px !important;
  cursor: pointer !important;
}

/* Make the chevrons feel like actual buttons */
.donate-form .panel-head .chev,
.donate-form .row-toggle .chev-sm{
  font-size: 30px !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin-left: 8px !important;
}

/* Slightly larger text for the section titles */
.donate-form .panel-title,
.donate-form .row-toggle .row-label{
  font-size: 18px !important;
  line-height: 1.2 !important;
}


/* Remove accidental extra bottom space on the donate page */
.donate-form{ padding-bottom: 60 !important; }
.donate-cta-wrap{ margin-top: 120 !important; }

/* Reliable footer-at-bottom layout (doesn't fix the footer, just fills the page) */
html, body{ height: 100%; }
body{
  min-height: 100dvh;           /* handles mobile browser UI better than 100vh */
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }

/* Ensure the hidden sponsor list never occupies layout space */
#sponsorSubList[hidden]{ display: none !important; }

/* Kill the old "reserve a giant space" + hidden hack */
.donate-form .tick-list,
.donate-form #sponsorSubList{
  overflow: hidden;                 /* controlled by JS */
}

.donate-form #sponsorSubList[hidden]{
  display: none !important;         /* do NOT occupy layout when hidden */
}

/* Optional: keep the footer snug to the bottom */
html, body { height: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }


/* ---------- VOLUNTEER MENTORS (scoped) ---------- */
.mentors{ padding:140px 0 120px; background:#fff; }
.mentors-heading{
  font-family:"Coolvetica","Poppins",sans-serif;
  font-size:56px; font-weight:300; line-height:56px;
  color:var(--navy, #2D308F); text-align:center; margin:0 0 40px;
}

/* Responsive 4-up grid that won’t overflow on small screens */
.mentors-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-items:center;
}
@media (min-width:600px){ .mentors-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width:992px){ .mentors-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mcard{ width:100%; max-width:260px; display:flex; flex-direction:column; gap:18px; }
.mcard:hover{ transform: translateY(-5px); }
.mimg{
  width:100%; aspect-ratio: 239.69 / 277.28; /* matches your Team card feel */
  border-radius:24.65px; overflow:hidden; background:#D0D0D0;
}
.mimg img{ width:100%; height:100%; object-fit:cover; display:block; }

.mname{ font-size:20.28px; line-height:21.13px; font-weight:600; margin:0; color:#000; cursor:pointer; }
.mrole{ font-size:11.83px; line-height:12.68px; font-weight:300; margin:-6px 0 0; color:#000; }

/* Collapsible bio (identical behavior to .team) */
.mdesc{
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.75; color:#555;
  margin:0; max-height:0; overflow:hidden; opacity:0; transform:translateY(-4px);
  transition:max-height .35s ease, opacity .25s ease, transform .35s ease, margin .2s ease;
  display:-webkit-box; -webkit-box-orient:vertical;
}
.mcard.is-open .mdesc{
  margin-top:8px;
  max-height:56em;        /* roomy cap so long bios still fit */
  opacity:1;              /* (your team used 120; use 1 for valid opacity) */
  transform:translateY(0);
  -webkit-line-clamp: 39; /* soft cap for huge bios */
}

/* Make image also clickable/focusable, like your Team block */
.mimg{ cursor:pointer; }
.mname:focus{ outline:2px solid var(--green, #65AC42); outline-offset:2px; }

/* Mobile typography tighten */
@media (max-width:480px){
  .mentors{ padding:64px 0 80px; }
  .mentors-heading{ font-size:32px; line-height:32px; margin:0 0 37px; }
  .mcard{ max-width:349px; gap:16px; }
  .mname{ font-size:26px; }
  .mrole{ font-size:13px; }
}

/* Mentors: allow unlimited lines when open (no clamp, no cap) */
.mentors .mdesc{
  -webkit-line-clamp: unset !important;
  max-height: 0;                /* closed state stays animated */
  opacity: 0;
  transform: translateY(-4px);
}
.mentors .mcard.is-open .mdesc{
  /* max-height will be controlled by JS for smooth open/close */
  opacity: 1;
  transform: translateY(0);
}


/* keep hidden rows hidden, no matter what comes before */
.blog-list .row.is-hidden{ display:none !important; }

/* alignment/spacing (do NOT force display on hidden rows) */
.blog-list .card-link{ align-items:flex-start; }
.blog-list .row{ border-top:1px #B8B8B8 solid; padding:30px 0; }

/* thumbnail consistency */
.blog-list .thumb{
  width:261px; height:200px; object-fit:cover; display:block; border-radius:12px;
}

/* ===== Upcoming Events — original look (3-up, flat, no rounded corners) ===== */

/* Section wrapper */
.events {
  background:#EEE;
  padding:48px 0 72px;
}

/* Title (if you use .section-title above grid) */
.events .section-title {
  margin:0 0 28px;
  text-align:center;
  font:700 56px/1 "Coolvetica","Poppins",sans-serif;
  color:#2D308F;
}

/* Grid: 3 cards per row on desktop */
.events-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

/* Card */
.event {
  position:relative;
  padding:28px 28px 40px;
  min-height:280px;
  color:#fff;
  border-radius:0;              /* <- no rounded corners */
  box-shadow:none;              /* flat like the comp */
  display:flex;
  flex-direction:column;
}

/* Alternate the two brand colors (green/blue). 
   If you already set classes, you can remove these nth-child rules. */
.events-grid .event:nth-child(odd)  { background:#65AC42; } /* green */
.events-grid .event:nth-child(even) { background:#2D308F; } /* blue */

/* Date stack (top-left) */
.event .md { display:flex; flex-direction:column; gap:4px; }
.mth { font:600 14px/1 "Poppins",sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.day { font:700 28px/1 "Poppins",sans-serif; }

/* Title */
.event h3 {
  margin:16px 0 12px;
  font:700 28px/1.25 "Poppins",sans-serif;
}

/* Meta line(s) */
.meta {
  margin:0;
  font:500 14px/1.6 "Poppins",sans-serif;
  opacity:.95;
}

/* Arrow bottom-right */
.arr {
  position:absolute;
  right:18px;
  bottom:14px;
  font:700 18px/1 "Poppins",sans-serif;
  pointer-events:none; /* click goes to the full-card link */
  opacity:.9;
}

/* More/Hide button */
.more-events {
  display:flex;
  justify-content:center;
  margin-top:32px;
}
.more-events .btn {
  appearance:none; border:0; cursor:pointer;
  background:#65AC42; color:#fff;
  padding:12px 20px;
  border-radius:999px;           /* this pill stays rounded like the comp */
  font:600 14px/1 "Poppins",sans-serif;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.more-events .btn:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  background:#4E8C34;
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:640px){
  .events .section-title { font-size:36px; }
  .events-grid { grid-template-columns: 1fr; gap:20px; }
  .event { padding:22px 22px 36px; min-height:0; }
  .event h3 { font-size:22px; }
  .day { font-size:24px; }
}


/* ======== FORCE EVENTS TO MATCH THE ORIGINAL DESIGN ======== */
/* Hit almost any wrapper named events */
section#events, section[id*="events"], section.events, .events-belt {
  background:#EEEEEE !important;
  padding:90px 0 120px !important;
  box-shadow:0 0 0 100vmax #EEEEEE !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Title */
/* Responsive "Upcoming Events" title */
section#events .section-title,
section[id*="events"] .section-title,
section.events .section-title,
.events-belt .section-title {
  /* scales down on small screens, caps at desktop size */
  font-size: clamp(30px, 5vw, 56px) !important;
  font-weight: 520 !important;
  line-height: clamp(28px, 6.5vw, 56px) !important;
  text-align: center !important;
  margin: 0 0 clamp(20px, 6vw, 56px) !important;
  color: #2D308F !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Optional extra-tight phones */
@media (max-width: 360px){
  section#events .section-title,
  section[id*="events"] .section-title,
  section.events .section-title,
  .events-belt .section-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
}


/* Grid: 3 per row desktop, centered container */
section#events .events-grid,
section[id*="events"] .events-grid,
section.events .events-grid,
.events-belt .events-grid,
section#events .ev-grid,
section[id*="events"] .ev-grid,
section.events .ev-grid,
.events-belt .ev-grid {
  width:1276px !important;
  max-width:calc(100% - 48px) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:28px !important;
  align-items:stretch !important;
}

/* Card (kill rounded corners everywhere) */
section#events .event,
section[id*="events"] .event,
section.events .event,
.events-belt .event,
section#events [class*="event-card"],
section[id*="events"] [class*="event-card"],
section.events [class*="event-card"],
.events-belt [class*="event-card"],
section#events [class*="ev-card"],
section[id*="events"] [class*="ev-card"],
section.events [class*="ev-card"],
.events-belt [class*="ev-card"] {
  border-radius:0 !important;       /* ← square corners */
  padding:38px 42px !important;
  min-height:330px !important;
  box-shadow:none !important;
  position:relative !important;
  color:#fff !important;
}

/* Month/Day stack (top-left) */
section[id*="events"] .event .md,
section[id*="events"] [class*="ev-card"] .md {
  display:flex !important; flex-direction:column !important;
  gap:6px !important; align-items:flex-start !important;
}
section[id*="events"] .event .mth,
section[id*="events"] [class*="ev-card"] .mth {
  font:600 14px/14px "Poppins",sans-serif !important;
  letter-spacing:.8px !important; text-transform:uppercase !important; opacity:.95 !important;
}
section[id*="events"] .event .day,
section[id*="events"] [class*="ev-card"] .day {
  font:600 28px/30px "Poppins",sans-serif !important;
}

/* Title */
section[id*="events"] .event h3,
section[id*="events"] [class*="ev-card"] h3 {
   font-size:56px !important;
  margin:22px 0 16px !important;
  color:#fff !important;
  font:600 32px/40px "Poppins",sans-serif !important;
 
}

/* Meta lines */
section[id*="events"] .event .meta,
section[id*="events"] [class*="ev-card"] .meta {
  font:400 16px/22px "Poppins",sans-serif !important;
  color:#fff !important; opacity:.95 !important;
}

/* Arrow (bottom-right) */
section[id*="events"] .event .arr,
section[id*="events"] [class*="ev-card"] .arr {
  position:absolute !important; right:18px !important; bottom:18px !important;
  color:#fff !important; font-size:20px !important; line-height:1 !important; opacity:.9 !important;
}

/* Color blocks */
section[id*="events"] .event.bg-green,
section[id*="events"] [class*="ev-card"].bg-green { background:#65AC42 !important; color:#fff !important; }
section[id*="events"] .event.bg-navy,
section[id*="events"] [class*="ev-card"].bg-navy  { background:#2D308F !important; color:#fff !important; }

/* Tablet: 2 per row */
@media (max-width:1050px){
  section[id*="events"] .events-grid, section[id*="events"] .ev-grid{
    grid-template-columns:repeat(2,1fr) !important; gap:24px !important;
  }
  section[id*="events"] .event, section[id*="events"] [class*="ev-card"]{
    min-height:300px !important; padding:34px 36px !important;
  }
  section[id*="events"] .event h3, section[id*="events"] [class*="ev-card"] h3{
    font-size:28px !important; line-height:36px !important;
  }
}

/* Phone: 1 per row */
@media (max-width:640px){
  section#events, section[id*="events"], section.events, .events-belt { padding:48px 0 72px !important; }
  section[id*="events"] .section-title{ font-size:32px !important; line-height:30px !important; margin-bottom:28px !important; }
  section[id*="events"] .events-grid, section[id*="events"] .ev-grid{
    grid-template-columns:1fr !important; gap:20px !important;
  }
  section[id*="events"] .event, section[id*="events"] [class*="ev-card"]{
    min-height:auto !important; padding:26px 24px !important;
  }
  section[id*="events"] .event h3, section[id*="events"] [class*="ev-card"] h3{
    font-size:22px !important; line-height:28px !important;
  }
  section[id*="events"] .event .meta, section[id*="events"] [class*="ev-card"] .meta{
    font-size:14px !important; line-height:20px !important;
  }
}


/* --- 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: final mobile polish ---------- */
@media (max-width: 900px){
  /* Smaller, single-line-ish heading */
  #events .section-title{
    font-size: clamp(22px, 2.2vw, 32px) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    margin-bottom: 16px !important;
  }

  /* Trim the left/right gutters of the events container */
  #events .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Slightly tighter card padding so content never looks squished */
  #events .event, #events .ev-card{
    padding: 24px 20px !important;
  }
}