/* ═══════════════════════════════════════════════════════
   CAPR RESPONSIVE — Mobile-First Breakpoint System
   Breakpoints: Desktop 1200+ | Tablet 768-1199 | Mobile-L 480-767 | Mobile-S 320-479
   ═══════════════════════════════════════════════════════ */

/* ── Touch & Interaction Global ─────────────────────── */
a, button, .btn, .prog-card, .project-card, .glass-card {
  -webkit-tap-highlight-color: transparent;
}

/* Ensure all interactive tap targets are at least 44px */
.btn, nav a, .nav-links a, .nav-mobile a, .nav-hamburger {
  min-height: 44px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Images — lazy loading hint + cover defaults ─────── */
img {
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════
   TABLET — 768px to 1199px
   ══════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  /* Section padding */
  :root { --section-pad: 5rem 3rem; }
  section, .section {
    padding: 5rem 3rem;
  }

  /* Nav: hide desktop links above 900px — nav.css handles <900px */
  .nav-links { gap: 1.4rem; }
  .nav-links a { font-size: 0.95rem; }

  /* Footer — 2 columns on tablet */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  /* Stats strip — 2 columns on tablet */
  .stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats-strip .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .stats-strip .stat-item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  /* Grids — tablet adjustments */
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  /* ── Partners page — 2x2 stats grid ────────────── */
  .partners-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .partners-stats-grid .stat-card {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE-L — 480px to 767px (major restructure)
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Section padding ─────────────────────────────── */
  :root { --section-pad: 3.5rem 1.5rem; }
  section, .section {
    padding: 3.5rem 1.5rem !important;
  }

  /* ── Cursor: disable on touch ────────────────────── */
  body { cursor: auto !important; }
  #cursor, #cursor-ring { display: none !important; }
  a, button, .btn { cursor: pointer !important; }

  /* ── Typography ──────────────────────────────────── */
  .t-hero, h1.t-hero {
    font-size: clamp(2.4rem, 8vw, 3.5rem) !important;
    white-space: normal !important;
  }
  .t-h2, h2.t-h2 {
    font-size: clamp(1.7rem, 6vw, 2.5rem) !important;
  }
  .t-body { font-size: 0.95rem !important; }
  .t-small { font-size: 0.8rem !important; }
  .eyebrow { font-size: 0.62rem !important; }

  /* ── Navigation ──────────────────────────────────── */
  nav {
    padding: 1rem 1.5rem !important;
  }
  nav.scrolled {
    padding: 0.75rem 1.5rem !important;
  }
  /* Hide donate button in nav on mobile — it's inside mobile menu */
  nav > a.btn-donate,
  nav > a.btn.btn-donate {
    display: none !important;
  }
  /* Show hamburger */
  .nav-hamburger { display: flex !important; }
  /* Hide desktop nav */
  .nav-links { display: none !important; }
  /* Hide subtitle in nav logo on mobile */
  .nav-logo-sub { display: none !important; }

  /* Mobile menu overlay — full screen dark green */
  .nav-mobile {
    background: var(--green-deep, #0d3311) !important;
    gap: 0.75rem !important;
    overflow-y: auto !important;
    padding: 2.5rem 1.5rem !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  .nav-mobile a {
    font-family: var(--serif) !important;
    font-size: 1.25rem !important;
    color: #ffffff !important;
    min-height: 40px !important;
    display: flex;
    align-items: center;
  }
  .nav-mobile a:hover { color: #fbbf24 !important; }
  .nav-mobile .btn-donate {
    display: flex !important;
    font-size: 0.95rem !important;
    margin-top: 0.75rem !important;
    min-height: 44px;
    padding: 0.75rem 2rem !important;
  }

  /* ── Hero section ────────────────────────────────── */
  #hero {
    padding-top: 6rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-bottom: 10rem !important;
    min-height: 100svh;
  }

  /* Partners Page Stats Grid - Vertical on Mobile */
  .partners-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }
  .partners-stats-grid .stat-card {
    padding: 1.5rem !important;
  }
  .partners-stats-grid .stat-num {
    font-size: 2.2rem !important;
  }

  /* Hero slideshow: position center top so faces are visible */
  .hero-slide {
    background-position: center top !important;
  }

  /* Hero content antigravity text */
  .hero-content-antigravity {
    padding: 6rem 1.5rem 2rem !important;
    animation: none !important; /* disable float animation on mobile for perf */
  }
  .hero-top-text {
    font-size: 1rem !important;
    letter-spacing: 0.3em !important;
  }
  .hero-main-headline {
    font-size: clamp(2.8rem, 12vw, 5rem) !important;
    height: auto !important;
    min-height: 1.3em;
    width: 100%;
    overflow: hidden;
  }
  .hero-subheadline {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
  }

  /* CTA Buttons in hero — stack vertically, smaller & centered */
  #hero > .hero-content-antigravity > div:last-child,
  .hero-cta-group,
  [style*="display: flex"][style*="gap: 1.5rem"][style*="justify-content: center"],
  .hero-content-antigravity > div[style] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.85rem !important;
    align-items: center !important; /* Center buttons instead of stretching */
  }
  .btn-pumpkin-orange,
  .btn-outline-white-hero {
    width: auto !important;
    min-width: 220px !important;
    max-width: 280px !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    justify-content: center !important;
    margin-top: 1rem !important;
  }
  .btn-pumpkin-orange:not(:first-child),
  .btn-outline-white-hero:not(:first-child) {
    margin-top: 0 !important;
  }

  /* Hero scroll indicator — keep, center */
  .scroll-indicator { left: 50%; transform: translateX(-50%); }

  /* Hero stat cluster — hide */
  .hero-stat-cluster { display: none !important; }
  /* Hero bottom stats */
  .hero-bottom-stat { padding: 1.2rem 0.75rem !important; }
  .hero-bottom-stat span:first-child { font-size: 1.5rem !important; }

  /* ── Stats strip ─────────────────────────────────── */
  .stats-strip {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    margin: -2rem 1rem 0 !important;
  }
  .stat-item {
    padding: 1.5rem 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .stat-item:nth-last-child(-n+2) { border-bottom: none !important; }
  .stat-num { font-size: 2rem !important; }
  .stat-women { display: none !important; }
  /* Stat icon size */
  .stat-item img { width: 38px !important; height: 38px !important; }

  /* ── About section — two-col → one-col ───────────── */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.35fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* About stats cards — reduce padding */
  [style*="padding: 3rem 2.5rem"] {
    padding: 1.8rem 1.5rem !important;
  }
  [style*="font-size: 3.5rem"] {
    font-size: 2.5rem !important;
  }

  /* ── Featured Project Grid (Tunga Ihene) ─────────── */
  .fp-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 2.5rem 1.5rem !important;
  }
  .fp-details {
    padding-top: 1rem !important;
  }
  .fp-ctas {
    justify-content: center !important;
  }
  .fp-cta-join {
    width: 100% !important;
    text-align: center !important;
  }

  /* ── Programs grid ───────────────────────────────── */
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 4rem !important; /* significant breathing room */
  }
  .prog-card {
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.07) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .prog-card-img-wrapper {
    height: 320px !important; /* prominent, stylish image */
    width: 100% !important;
    position: relative !important;
  }
  .prog-card-content {
    padding: 2.2rem 1.8rem !important;
    background: #ffffff !important;
    flex: none !important;
  }
  .prog-card-name {
    font-size: 1.4rem !important;
    font-family: var(--serif) !important;
    font-style: italic !important;
    margin-bottom: 1rem !important;
    color: var(--green-deep) !important;
  }
  .prog-card-desc {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--text-muted) !important;
    margin-bottom: 2.5rem !important;
  }
  .prog-card-stat {
    font-size: 0.78rem !important;
    padding: 1.5rem 0 0 !important;
    border-top: 1px solid var(--border) !important;
    margin-top: auto !important;
  }

  /* ── Featured project (Tunga Ihene) ──────────────── */
  .glass-green[style*="grid-template-columns"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="gap: 5rem"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Featured card padding on mobile */
  [style*="padding: 5rem"] {
    padding: 2rem !important;
  }
  [style*="padding: 5rem 6rem"] {
    padding: 2rem !important;
  }
  /* Hide the floating badge on mobile */
  [style*="position: absolute"][style*="bottom: -20px"][style*="right: -20px"],
  [style*="Dignity Restored"],
  [style*="Impact Highlight"] {
    display: none !important;
  }
  /* Feature card image height on mobile */
  [style*="height: 500px"] {
    height: 280px !important;
  }
  /* Rotate effect — remove on mobile */
  [style*="transform: rotate(2deg)"] {
    transform: none !important;
  }

  /* ── WASH Success Story ──────────────────────────── */
  .glass-green[style*="grid-template-columns: 1fr 1.35fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
  /* WASH section padding */
  [style*="padding: 5rem 6rem;"][style*="position: relative"][style*="overflow: hidden"] {
    padding: 2.5rem 1.5rem !important;
  }
  [style*="padding: 4rem 4rem"] {
    padding: 2rem 1.5rem !important;
  }
  /* WASH image */
  [style*="min-height: 380px"] {
    min-height: 240px !important;
    height: 240px !important;
  }
  blockquote[style*="font-size: clamp(1.15rem"] {
    font-size: 1.1rem !important;
  }

  /* ── CTA Band ────────────────────────────────────── */
  .glass-green[style*="grid-template-columns: 1.2fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
  }
  /* Hide right image in CTA on mobile */
  .glass-green[style*="grid-template-columns: 1.2fr 1fr"] > div:last-child {
    display: none !important;
  }
  /* CTA padding */
  [style*="padding: 5rem 6rem"][style*="z-index: 2"] {
    padding: 3rem 2rem !important;
  }
  /* CTA buttons — stack full width */
  [style*="display: flex"][style*="gap: 1.5rem"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    gap: 0.85rem !important;
  }
  [style*="display: flex"][style*="gap: 1.5rem"][style*="flex-wrap: wrap"] .btn,
  [style*="display: flex"][style*="gap: 1.5rem"][style*="flex-wrap: wrap"] a.btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* CTA section outer padding */
  [style*="padding: 6rem 6rem"] {
    padding: 2.5rem 1.5rem !important;
  }

  /* ── Footer ──────────────────────────────────────── */
  footer[style*="padding: 4rem 6rem"] {
    padding: 3rem 1.5rem 2rem !important;
  }
  footer > div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  footer > div[style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  /* Center logo section on mobile */
  footer > div > div:first-child {
    text-align: center;
  }
  footer > div > div:first-child > div:first-child {
    justify-content: center;
  }
  /* Hide Projects column in footer on mobile to save space */
  footer .footer-projects-col,
  footer > div[style] > div:nth-child(3) {
    display: none !important;
  }

  /* ── Partner ticker ──────────────────────────────── */
  .ticker-item {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  .ticker-track { gap: 1.5rem !important; }

  /* ── Impact page ─────────────────────────────────── */
  /* Hero banner sections with 8rem padding */
  [style*="padding:8rem 6rem"],
  [style*="padding: 8rem 6rem"] {
    padding: 6rem 1.5rem 3rem !important;
  }

  /* Impact stats two-column grid */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 4rem"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Impact image min-height on mobile */
  [style*="min-height:450px"],
  [style*="min-height: 450px"] {
    min-height: 300px !important;
  }

  /* ── General two-col grids → single col ─────────── */
  .grid-2 { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .grid-4 { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* ── Section header max-width on mobile ──────────── */
  .section-header { max-width: 100% !important; }

  /* ── Project card image height on mobile ─────────── */
  .project-card-img { height: 200px !important; }

  /* ── Inner padding of all cards ──────────────────── */
  .glass-card { padding: 1.2rem !important; }
  .modal-text { padding: 1.5rem !important; }
  .modal-title { font-size: 1.5rem !important; }
  .modal-img-wrapper { height: 220px !important; }

  /* ── Container ────────────────────────────────────── */
  .container { padding: 0 1.5rem !important; }

  /* ── All inline-style padding hacks ─────────────── */
  /* Override any hardcoded side paddings of 6rem on sections */
  [style*="padding: 7rem 6rem"],
  [style*="padding: 5rem 6rem"],
  [style*="padding: 4rem 6rem"],
  [style*="padding: 3rem 6rem"],
  [style*="padding: 6rem 6rem"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ── Donate Page CTA Block Fix ─────────────────── */
  .donation-cta-card {
    padding: 2.2rem 1.25rem !important;
  }
  .donation-cta-card > div {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }
  .donation-cta-card h2, 
  .donation-cta-card [style*="font-size:clamp"] {
    text-align: center !important;
  }
  .donation-cta-card p {
    text-align: center !important;
    margin: 0 auto !important;
  }
  .donation-cta-badges {
    justify-content: center !important;
  }
  .donation-cta-card .btn {
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE-S — 320px to 479px (smallest phones)
   ══════════════════════════════════════════════════════ */
@media (max-width: 479px) {

  /* ── Extra section compression ────────────────────── */
  :root { --section-pad: 3rem 1.25rem; }

  /* ── Extra Nav Compression ───────────────────── */
  .nav-mobile {
    gap: 0.5rem !important;
    padding: 1.5rem 1.25rem !important;
  }
  .nav-mobile a {
    font-size: 1.1rem !important;
    min-height: 38px !important;
  }
  section, .section {
    padding: 3rem 1.25rem !important;
  }
  [style*="padding: 7rem 6rem"],
  [style*="padding: 5rem 6rem"],
  [style*="padding: 4rem 6rem"],
  [style*="padding: 3rem 6rem"],
  [style*="padding: 6rem 6rem"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* ── Nav padding ──────────────────────────────────── */
  nav {
    padding: 1rem 1rem !important;
  }

  /* ── Hero ─────────────────────────────────────────── */
  .hero-main-headline {
    font-size: clamp(2.4rem, 14vw, 3.5rem) !important;
  }
  .hero-subheadline {
    font-size: 1rem !important;
  }
  .hero-top-text { font-size: 0.85rem !important; letter-spacing: 0.2em !important; }

  /* ── Stat numbers ──────────────────────────────────── */
  .stat-num { font-size: 1.8rem !important; }

  /* ── About heading text ──────────────────────────── */
  [style*="font-size: clamp(2rem, 3vw, 2.8rem)"] {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
  }

  /* ── Cards ────────────────────────────────────────── */
  .prog-card-content { padding: 1.25rem !important; }

  /* ── Ticker logos ─────────────────────────────────── */
  .ticker-logo { height: 32px !important; }

  /* ── Footer bottom bar ─────────────────────────────── */
  footer > div:last-child {
    flex-direction: column !important;
    text-align: center;
    gap: 0.75rem !important;
  }
  footer > div[style]:last-child > div { justify-content: center !important; }

  /* ── Prevent ANY horizontal overflow ─────────────── */
  body, html { max-width: 100vw; overflow-x: hidden; }
  * { max-width: 100%; }
  .ticker-track { max-width: none !important; }
}

/* ══════════════════════════════════════════════════════
   TOUCH DEVICES — disable 3D tilt + custom cursor
   ══════════════════════════════════════════════════════
   Also handled in JS (tilt.js) with matchMedia check.
   CSS fallback: ensure tilt-card has no perspective on touch */
@media (hover: none) {
  body { cursor: auto !important; }
  #cursor, #cursor-ring { display: none !important; }
  a, button, .btn { cursor: pointer !important; }
  .tilt-card { transform: none !important; }
  .tilt-card:hover { transform: translateY(-6px) !important; }
}

/* ══════════════════════════════════════════════════════
   PREVENT HORIZONTAL SCROLL — global safety net
   ══════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  html, body { overflow-x: hidden !important; max-width: 100%; }
  .hero-orb-1, .hero-orb-2, .hero-orb-3 { display: none; }
}