/* ============================================================
   site-mobile.css — Mobile / small-viewport polish layer
   Loaded LAST so it wins over earlier rules.
   Targets phone widths (≤640px) and tablet (≤880px) where needed.
   ============================================================ */

/* Hard guard against horizontal overflow ------------------ */
/* NOTE: overflow-x: hidden on html/body breaks position: sticky.
   Use overflow-x: clip (no scrolling context). */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; }

/* ---------- Unified card radius (matches the 3 hero showcase cards) ----- */
:root {
  --radius-xl: 32px;
  --radius-2xl: 36px;
}
/* Bring all cards / large surfaces to the same 32px rounding */
.gfm-about,
.gfm-project,
.gfm-project-photo,
.gfm-tier,
.gfm-area,
.gfm-cta-card,
.gfm-blog-cover,
.gfm-article-cover,
.gfm-story-image,
.gfm-team-photo,
.gfm-team-card-rich,
.gfm-calc-card,
.gfm-calc-outcome,
.gfm-map-canvas,
.gfm-map-detail,
.gfm-prj-featured,
.gfm-prj-card,
.gfm-prj-card-media,
.gfm-prj-featured-media,
.gfm-tl-card,
.gfm-impact-stripe,
.gfm-modal-card,
.gfm-testimonial,
.gfm-nl-card,
.gfm-video,
.gfm-prayer-form-wrap,
.gfm-prayer-card,
.gfm-banner > *,
.gfm-hero-tile,
.gfm-hero-photo,
.gfm-vmodal-frame {
  border-radius: 32px;
}
/* Newsletter, footer and founder cards already use 28px — bump to match */
.gfm-newsletter,
.gfm-footer-inner,
.gfm-founder-card,
.gfm-founder-bio,
.gfm-founder-photo-wrap {
  border-radius: 32px;
}
/* Inner photo inside founder card slightly smaller so it nests cleanly */
.gfm-founder-photo-wrap { border-radius: 24px; }
image-slot.gfm-founder-photo { border-radius: 24px; }


/* Spenden button: standalone on desktop, hidden on mobile (lives inside burger menu) */
.gfm-nav-donate-mobile { display: none; }
@media (max-width: 880px) {
  .gfm-nav-donate-desktop { display: none !important; }
}

/* ---------- Tablet & below (≤880px) ---------- */
@media (max-width: 880px) {

  /* Tighter section rhythm */
  :root {
    --section-y: 64px;
    --section-y-tight: 40px;
  }

  /* Nav: keep brand + CTA on one row, hide hamburger glitches */
  .gfm-nav { padding: 10px var(--gutter, 16px); gap: 12px; }
  .gfm-nav-cta { gap: 8px; }
  .gfm-nav-cta .btn { padding: 10px 18px; font-size: 14px; }

  /* Hero — pull padding way back, shrink the type */
  .gfm-hero,
  .gfm-hero-light {
    padding: clamp(36px, 7vw, 96px) var(--gutter, 16px) clamp(28px, 5vw, 72px) !important;
  }
  .gfm-hero .gfm-hero-inner,
  .gfm-hero-light .gfm-hero-inner {
    padding-left: 0 !important;
    gap: 18px !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .gfm-hero-title,
  .gfm-hero-light .gfm-hero-title {
    font-size: clamp(36px, 7vw, 56px) !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .gfm-hero-light .gfm-hero-sub,
  .gfm-hero-lead { text-align: center; margin-inline: auto; }
  .gfm-hero-actions { width: 100%; justify-content: center; }
  .gfm-hero-actions .btn,
  .gfm-hero-actions .btn-on-dark,
  .gfm-hero-actions .btn-ghost-on-dark { flex: 1 1 auto; text-align: center; }

  /* Hero variant B + C tweaks */
  .gfm-hero-split-text .gfm-hero-title { font-size: clamp(34px, 8.5vw, 52px); }
  .gfm-hero-cine-title { font-size: clamp(38px, 10vw, 60px); }
  .gfm-hero-variant-c { min-height: 70vh; padding-top: clamp(96px, 22vw, 160px); padding-bottom: clamp(48px, 8vw, 96px); }

  /* Generic section padding shrink */
  .gfm-section,
  .gfm-section-narrow,
  .gfm-section-wide {
    padding: clamp(48px, 7vw, 88px) var(--gutter, 16px);
  }
  .gfm-video-band { padding: 32px var(--gutter, 16px) 56px; }
  .gfm-video-band .gfm-shead h2 {
    font-size: clamp(22px, 6.2vw, 32px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    max-width: 100% !important;
  }
  .gfm-creed { padding: 56px var(--gutter, 16px); }

  /* Page hero (inner pages) */
  .gfm-page-hero { padding: clamp(80px, 14vw, 144px) var(--gutter, 16px) clamp(40px, 7vw, 80px); }
  .gfm-page-hero h1 { font-size: clamp(36px, 6vw, 52px); }
  .gfm-page-hero p { font-size: 16px; }

  /* About card — stack on mobile (already handled <800px but reinforce) */
  .gfm-about-body { padding: clamp(24px, 6vw, 40px); }
  .gfm-about-photo { min-height: 240px; }

  /* CTA pair cards */
  .gfm-cta-card {
    padding: clamp(28px, 6vw, 48px);
    min-height: auto;
  }
  .gfm-cta-card h2 { font-size: clamp(24px, 6vw, 32px); }

  /* Donate band */
  .gfm-donate-inner { padding: 56px var(--gutter, 16px); }
  .gfm-donate-card {
    padding: clamp(20px, 5vw, 32px);
    gap: 16px;
    flex-direction: column;
  }
  .gfm-donate-icon { width: 48px; height: 48px; }
  .gfm-donate-details {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .gfm-donate-details dt { margin-top: 8px; }
  .gfm-donate-title { font-size: clamp(26px, 6.5vw, 36px); }

  /* Newsletter band */
  .gfm-newsletter-band { padding: 12px 14px 8px; }
  .gfm-newsletter {
    padding: clamp(28px, 6vw, 40px) clamp(22px, 5vw, 32px);
    border-radius: 32px;
    gap: 28px;
  }
  .gfm-newsletter-title { font-size: clamp(28px, 7vw, 40px); line-height: 1.05; }
  .gfm-newsletter-sub { font-size: 15px; }
  .gfm-nl-input,
  .gfm-nl-submit { font-size: 15px; padding: 16px 20px; }

  /* Footer */
  .gfm-footer { padding: 8px 14px 18px; }
  .gfm-footer-inner {
    padding: clamp(32px, 7vw, 48px) clamp(22px, 5vw, 32px) clamp(24px, 5vw, 32px);
    border-radius: 32px;
    gap: 32px;
  }
  .gfm-footer-top { grid-template-columns: 1fr; gap: 28px; }
  .gfm-footer-word {
    /* allow wrap on phones so it never overflows */
    white-space: normal;
    word-break: break-word;
    font-size: clamp(36px, 11vw, 56px);
    line-height: 0.95;
  }
  .gfm-footer-cols {
    justify-content: flex-start;
    justify-self: stretch;
    gap: clamp(32px, 8vw, 64px);
    padding-top: 0;
  }
  .gfm-footer-bottom { gap: 12px; }
  .gfm-footer-legal { gap: 16px; }

  /* FAQ — break out of sticky on mobile */
  .gfm-faq-grid > div:first-child { position: static; max-width: none; }
  .gfm-faq-grid h2 { font-size: clamp(28px, 7vw, 40px); }
  .gfm-faq-trigger { padding: 14px 18px; }
  .gfm-faq-body { padding: 0 18px 16px; }

  /* Scope accordion */
  .gfm-scope-trigger { padding: 14px 18px; font-size: 15px; }
  .gfm-scope-body { padding: 0 18px 16px; }

  /* Testimonials */
  .gfm-testimonial { padding: 24px 22px 22px; border-radius: 32px; }
  .gfm-testimonial-name { font-size: 18px; }

  /* Modal */
  .gfm-modal { padding: 12px; align-items: flex-end; }
  .gfm-modal-card { padding: 24px 22px; border-radius: 32px; }
  .gfm-modal-card h3 { font-size: clamp(22px, 6vw, 28px); }
  .gfm-amt { flex: 1 1 calc(50% - 8px); padding: 12px 16px; }

  /* Calculator */
  .gfm-calc-card { padding: clamp(20px, 5vw, 32px); }
  .gfm-calc-amt { font-size: clamp(56px, 16vw, 96px); }
  .gfm-calc-currency { font-size: clamp(28px, 7vw, 40px); }
  .gfm-calc-outcome { padding: 18px; }
  .gfm-calc-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .gfm-calc-actions .btn { width: 100%; text-align: center; }

  /* Mission Map */
  .gfm-map-canvas { padding: 18px; aspect-ratio: 4 / 3; }
  .gfm-map-compass { display: none; }
  .gfm-map-marker-lbl {
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: 0.06em;
  }
  .gfm-map-detail { padding: 22px; }
  .gfm-map-detail-name { font-size: clamp(26px, 7vw, 36px); }

  /* Projects filterbar */
  .gfm-prj-filterbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px var(--gutter, 16px);
  }
  .gfm-prj-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .gfm-prj-filters::-webkit-scrollbar { display: none; }
  .gfm-prj-filter { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
  .gfm-prj-featured-wrap { padding: 32px var(--gutter, 16px); }
  .gfm-prj-featured-body { padding: clamp(24px, 6vw, 40px); }
  .gfm-prj-featured-title { font-size: clamp(28px, 7vw, 42px); }
  .gfm-prj-stats { gap: 12px; }
  .gfm-prj-grid-wrap { padding: 0 var(--gutter, 16px) 56px; }
  .gfm-prj-grid { grid-template-columns: 1fr; gap: 16px; }
  .gfm-prj-card-body { padding: 20px; }
  .gfm-prj-card-stats { gap: 20px; }

  /* Contact */
  .gfm-form-row { grid-template-columns: 1fr !important; }
  .gfm-input { font-size: 16px; /* prevents iOS zoom */ }
  .gfm-textarea { font-size: 16px; min-height: 140px; }

  /* Team rich cards */
  .gfm-team-card-rich .gfm-team-meta { padding: 22px; }
  .gfm-team-dl { gap: 16px; }

  /* Founder split */
  .gfm-founder-card { padding: 10px; }
  .gfm-founder-photo-wrap { aspect-ratio: 4 / 3.2; }
  .gfm-founder-bio { padding: clamp(24px, 6vw, 40px); }
  .gfm-founder-bio-h { font-size: clamp(22px, 6vw, 28px); }

  /* Timeline */
  .gfm-tl-card { padding: 16px 18px; }

  /* Showcase cards (already stacks <720px in site-pages3 — soften vertical) */
  .gfm-showcase-row { padding: 0; }

  /* Story (about page drop cap) */
  .gfm-story p { font-size: 16px; }
  .gfm-story p:first-of-type::first-letter { font-size: 3.2em; }

  /* Article (blog post) */
  .gfm-article { padding: 32px var(--gutter, 16px) 56px; }
  .gfm-article h1 { font-size: clamp(28px, 7.5vw, 40px); }
  .gfm-article p { font-size: 16px; }
  .gfm-article h2 { font-size: clamp(24px, 6.5vw, 32px); margin: 40px 0 12px; }
  .gfm-article blockquote { padding-left: 16px; font-size: 18px; }

  /* Pull quote */
  .gfm-pullquote { padding: 24px 0 12px 20px; font-size: clamp(20px, 5.5vw, 26px); }

  /* Featured project featured-media */
  .gfm-prj-featured-media { min-height: 240px; }

  /* Bigger tap targets */
  .btn,
  .btn-on-dark,
  .btn-ghost-on-dark { min-height: 44px; }

  /* Scope items + cards a bit tighter */
  .gfm-area { padding: 24px; min-height: 0; gap: 12px; }
  .gfm-area h3 { font-size: 20px; }
  .gfm-tier { padding: 24px; min-height: 0; }
  .gfm-tier h3 { font-size: 20px; }
}

/* ---------- Phone (≤540px) ---------- */
@media (max-width: 540px) {

  /* Side gutters get even tighter */
  :root { --gutter: 14px; }

  /* Area dialog: stack the two images on phones (2-up on tablet/desktop) */
  .gfm-area-modal-media { grid-template-columns: 1fr; }

  /* Brand text sometimes spills — let it shrink */
  .gfm-brand-logo { height: 32px; }
  .gfm-nav-cta .btn { padding: 9px 14px; font-size: 13px; }

  /* Newsletter form: vertical */
  .gfm-nl-form { flex-direction: column; }
  .gfm-nl-socials { flex-direction: column; gap: 8px; padding: 10px; }
  .gfm-nl-social { padding: 14px 18px; font-size: 14px; }
  .gfm-nl-card { padding: 10px; gap: 8px; }

  /* Footer cols: stack */
  .gfm-footer-cols { grid-template-columns: 1fr; gap: 22px; }
  .gfm-footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Donate band: minimize */
  .gfm-donate-inner { padding: 48px var(--gutter, 14px); }

  /* Big projects featured: cleaner stack */
  .gfm-prj-featured-meta { gap: 6px; }
  .gfm-prj-stats { grid-template-columns: 1fr 1fr; }
  .gfm-prj-stats > *:nth-child(3) { grid-column: 1 / -1; }

  /* Impact stripe: 2 cols already, label sizes */
  .gfm-impact-label { font-size: 10px; }

  /* Mission map detail: typography */
  .gfm-map-detail-copy { font-size: 14px; }

  /* Tweaks panel: shrink and ensure it fits */
  .om-tweaks-panel,
  [class*="tweaks"] {
    max-width: calc(100vw - 24px) !important;
  }

  /* Field marquee frames */
  .gfm-feld-frame { width: 180px !important; }

  /* Hero buttons: full width and stack */
  .gfm-hero-actions { flex-direction: column; align-items: stretch; }
  .gfm-hero-actions .btn,
  .gfm-hero-actions .btn-on-dark,
  .gfm-hero-actions .btn-ghost-on-dark { width: 100%; }

  /* Section headers */
  .gfm-shead h2,
  .gfm-stack-center h2 { font-size: clamp(24px, 7vw, 32px); }
  .gfm-shead p { font-size: 15px; }

  /* Mission statement */
  .gfm-mission { font-size: clamp(26px, 5.5vw, 44px); }
}

/* ---------- Tiny phones (≤380px) ---------- */
@media (max-width: 380px) {
  .gfm-hero-title { font-size: clamp(28px, 8.5vw, 36px) !important; }
  .gfm-footer-word { font-size: 32px; }
  .gfm-newsletter-title { font-size: 24px; }
  .gfm-page-hero h1 { font-size: 30px; }
}