/* ═══════════════════════════════════════════════════
   MEDOLIES — RESPONSIVE CSS v3.0
   Complete mobile fixes for all pages and components
   Breakpoints: 1024px (tablet) | 768px (mobile) | 480px (small) | 360px (tiny)
   ═══════════════════════════════════════════════════ */

/* ── GLOBAL BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden !important; max-width: 100%; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* Video always full bleed */
.medolies-video-wrap { width: 100% !important; overflow: hidden; }
.medolies-video-wrap video { width: 100% !important; height: auto !important; min-height: 56.25vw; display: block; }

/* Minimum touch targets */
a, button, [role="button"], .nav-cta, .dc-fr, .dc-amt, .f-soc { min-height: 44px; min-width: 44px; }
.nav-cta, .nav-link, .dc-fr, .f-soc { display: inline-flex; align-items: center; justify-content: center; }

/* ═══════════════════════════════════════
   TABLET  ≤ 1024px
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Nav */
  nav.nav { top: 12px; }
  .h-sticker { display: none; }

  /* Hero */
  .hero { min-height: auto; padding-top: clamp(90px,12vw,120px) !important; }

  /* Bento */
  .bento-inner { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .bc1 { grid-column: 1 / 3 !important; grid-row: auto !important; min-height: 280px !important; }
  .bc2, .bc3, .bc4 { grid-column: auto !important; grid-row: auto !important; }

  /* Donate & CTA */
  .donate-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .cta-inner { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* About */
  .diff-grid { grid-template-columns: 1fr 1fr !important; }
  .social-grid { grid-template-columns: 1fr 1fr !important; }
  .founder-grid { gap: 40px !important; }
}

/* ═══════════════════════════════════════
   MOBILE  ≤ 768px
   ═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  nav.nav {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    padding: 5px 5px 5px 12px !important;
    gap: 4px !important;
    min-height: 44px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.6) !important;
  }
  .nav-sep { display: none !important; }
  .nav-links { display: flex !important; align-items: center !important; }
  .nav-link {
    font-size: .76rem !important;
    padding: 8px 12px !important;
    font-weight: 700 !important;
    color: #1C1C1E !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: none !important;
  }
  .nav-logo { margin-right: 0 !important; flex-shrink: 0 !important; }
  .nav-logo-img { height: 22px !important; max-width: 110px !important; }
  .nav-cta {
    padding: 8px 12px !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    background: #FF4D6D !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ── HERO ── */
  .hero {
    min-height: auto !important;
    padding-top: 88px !important;
    padding-bottom: 40px !important;
  }
  .h-kicker {
    font-size: .6rem !important;
    padding: 6px 12px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
  }
  .hero-h1 { font-size: clamp(2.6rem, 12vw, 4.5rem) !important; line-height: .9 !important; }
  .h-sticker { display: none !important; }
  .hero-bottom { flex-direction: column !important; gap: 20px !important; margin-top: 20px !important; }
  .hero-desc p { font-size: .92rem !important; margin-bottom: 18px !important; }
  .hero-btns { flex-direction: column !important; gap: 10px !important; width: 100%; }
  .hero-btns a, .hero-btns .btn-filled, .hero-btns .btn-outline-cream {
    width: 100% !important; justify-content: center !important; text-align: center !important;
  }
  .hero-right-stats { flex-direction: row !important; gap: 12px !important; flex-wrap: wrap !important; }
  .h-stat { text-align: left !important; }
  .h-stat-num { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  .h-stat-divider { height: 28px !important; }

  /* ── MARQUEE ── */
  .marquee-item { font-size: .88rem !important; padding: 0 14px !important; }

  /* ── BENTO ── */
  .bento-inner { grid-template-columns: 1fr !important; gap: 10px !important; }
  .bc1 { grid-column: 1 !important; padding: 26px !important; min-height: 200px !important; }
  .bc1-quote { font-size: 1.05rem !important; margin-bottom: 20px !important; }
  .bc1-btns { flex-direction: column !important; gap: 8px !important; }
  .bc1-btns a { width: 100% !important; justify-content: center !important; }
  .bc2 { grid-column: 1 !important; padding: 26px !important; }
  .bc2-num { font-size: clamp(2.5rem, 10vw, 4rem) !important; }
  .bc3 { grid-column: 1 !important; padding: 22px !important; min-height: 110px !important; }
  .bc3-num { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .bc4 { grid-column: 1 !important; min-height: 100px !important; font-size: 3rem !important; }

  /* ── VIDEO ── */
  .medolies-video-wrap video { min-height: 56vw !important; }

  /* ── DONATE ── */
  .donate-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .dl-h2 { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; }
  .impact-list { margin-bottom: 28px !important; }
  .il-amt { font-size: 1.4rem !important; width: 52px !important; }
  .il-desc { font-size: .82rem !important; }
  .dc-name-row { grid-template-columns: 1fr !important; }
  .dc-amts { grid-template-columns: repeat(3, 1fr) !important; }
  .dc-freq { gap: 4px !important; }
  .dc-fr { font-size: .75rem !important; padding: 8px 4px !important; }
  .donate-card-new { box-shadow: 0 8px 32px rgba(255,77,109,.1) !important; }

  /* ── CTA ── */
  .cta-inner { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center !important; }
  .cta-h2 { font-size: clamp(2rem, 9vw, 3.2rem) !important; }
  .cta-desc { font-size: .92rem !important; }
  .cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cta-btns a, .cta-btns .btn-rose-lg, .cta-btns .btn-outline-lg,
  .cta-btns .btn-yellow, .cta-btns .btn-outline {
    width: 100% !important; justify-content: center !important;
  }
  .cta-trust { justify-content: center !important; flex-wrap: wrap !important; }
  .cta-badge { font-size: .68rem !important; }

  /* ── INNER HERO ── */
  .inner-hero { padding-top: 80px !important; padding-bottom: 36px !important; margin-top: 0 !important; }
  .ih-h1, .ph-h1 { font-size: clamp(1.9rem, 8vw, 3rem) !important; }
  .ih-sub, .ph-sub { font-size: .88rem !important; }

  /* ── ABOUT PAGE ── */
  .about-section-white, .about-section-full {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .founder-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .founder-visual { height: 200px !important; font-size: 5rem !important; }
  .founder-quote { font-size: 1.1rem !important; padding-left: 16px !important; }
  .founder-body { font-size: .88rem !important; }
  .mv-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .mv-card { padding: 26px !important; }
  .mv-title { font-size: 1.2rem !important; }
  .diff-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .diff-card { padding: 24px !important; }
  .social-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .social-card { padding: 24px !important; }
  .stats-strip { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-pill { padding: 18px !important; }
  .sp-num { font-size: 2rem !important; }
  .media-grid { flex-direction: column !important; }
  .media-pill { width: 100% !important; justify-content: flex-start !important; }

  /* ── FOOTER ── */
  .footer-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .f-desc { max-width: 100% !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }

  /* ── BUTTONS ── */
  .btn-filled, .btn-outline-cream { width: 100% !important; justify-content: center !important; }
  .btn-rose-lg, .btn-outline-lg, .btn-yellow, .btn-main, .btn-outline {
    min-height: 48px !important; font-size: .9rem !important;
  }

  /* ── STORIES (if shown) ── */
  .stories-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .story-card { width: min(80vw, 300px) !important; }

  /* ── SECTION HEADINGS ── */
  .award-h2, .sec-h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; margin-bottom: 20px !important; }
  .kicker, .sec-eyebrow { margin-bottom: 8px !important; }

  /* ── WARM/SECTION PADDING ── */
  .warm-section, .section { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ═══════════════════════════════════════
   SMALL MOBILE  ≤ 480px
   ═══════════════════════════════════════ */
@media (max-width: 480px) {

  nav.nav { left: 8px !important; right: 8px !important; }
  .nav-logo-img { height: 18px !important; max-width: 90px !important; }
  .nav-link {
    padding: 7px 10px !important;
    font-size: .72rem !important;
    color: #1C1C1E !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
  }
  .nav-cta {
    padding: 7px 10px !important;
    font-size: .72rem !important;
    background: #1C1C1E !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 50px !important;
  }

  .hero-h1 { font-size: clamp(2.2rem, 11vw, 3.5rem) !important; }
  .h-kicker { font-size: .55rem !important; }
  .h-stat-num { font-size: 1.4rem !important; }
  .h-stat-divider { display: none !important; }
  .h-stat-lbl { font-size: .58rem !important; }

  .bc1 { padding: 20px !important; }
  .bc1-quote { font-size: .95rem !important; }
  .bc3-num { font-size: 2.2rem !important; }
  .bc2-num { font-size: 2.5rem !important; }

  .dc-amts { grid-template-columns: repeat(2, 1fr) !important; }
  .dc-fr { font-size: .72rem !important; }

  .stats-strip { grid-template-columns: 1fr !important; }
  .diff-card, .mv-card { padding: 20px !important; }
  .social-card { padding: 20px !important; }

  .cta-h2 { font-size: clamp(1.7rem, 8vw, 2.5rem) !important; }
  .cta-badge { font-size: .62rem !important; padding: 5px 10px !important; }

  .story-card { width: calc(100vw - 48px) !important; }

  .award-h2, .sec-h2 { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }

  .about-section-white, .about-section-full {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .founder-visual { height: 180px !important; }

  /* QR section */
  .qr-section-wrap img, .qr-section-wrap [style*="width:200px"] {
    width: 150px !important; height: 150px !important;
  }
}

/* ═══════════════════════════════════════
   TINY  ≤ 360px  (older Android, SE)
   ═══════════════════════════════════════ */
@media (max-width: 360px) {
  nav.nav { padding: 5px 5px 5px 8px !important; gap: 2px !important; }
  .nav-logo-img { height: 16px !important; max-width: 80px !important; }
  .nav-link {
    padding: 6px 8px !important;
    font-size: .68rem !important;
    color: #1C1C1E !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 700 !important;
  }
  .nav-cta {
    padding: 6px 8px !important;
    font-size: .68rem !important;
    background: #1C1C1E !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .hero-h1 { font-size: 2rem !important; }
  .bc1-quote { font-size: .88rem !important; }
  .ih-h1, .ph-h1 { font-size: 1.7rem !important; }
  .cta-h2 { font-size: 1.6rem !important; }
  .il-amt { font-size: 1.1rem !important; width: 44px !important; }
  .dc-freq { flex-wrap: wrap !important; }
  .award-h2 { font-size: 1.3rem !important; }
}