/* ============================================================
   mobile.css — loaded LAST (after site.css + per-page CSS) so it can correct
   mobile layout for every page, including the doc/legal/guide pages whose
   doc.css never carried the header's mobile rules.
   ============================================================ */

/* ---- <= 900px: shared header collapse + global safety net ---- */
@media (max-width: 900px) {
  /* Backstop: never allow horizontal scroll. overflow-x:clip (vs hidden) does
     not create a scroll container, so sticky/fixed positioning is unaffected. */
  html { overflow-x: clip; }
  body { overflow-x: hidden; }

  /* Header: hide desktop nav + CTA, show the hamburger. These rules previously
     lived only in the per-page CSS (about.css, etc.), so pages on doc.css kept
     the desktop header and overflowed ~400px. Centralise them here. */
  .site-header__bar { max-width: 100%; padding: 12px 20px; gap: 12px; }
  .site-header__brand img { height: 22px; }
  .site-nav,
  .site-header__cta { display: none !important; }
  .site-nav.is-open {
    display: flex !important; position: fixed; inset: 64px 0 0 0; z-index: 90;
    background: var(--paper); flex-direction: column; align-items: stretch;
    padding: 24px 20px 80px; overflow-y: auto; gap: 6px;
    border-top: 1px solid var(--rule-on-paper);
  }
  .site-header.on-navy .site-nav.is-open { background: var(--ink); }
  .site-nav.is-open .site-nav__dropdown { width: 100%; }
  .site-nav.is-open .site-nav__link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 4px; font-size: 17px; width: 100%;
    border-bottom: 1px solid var(--rule-on-paper);
  }
  .site-header.on-navy .site-nav.is-open .site-nav__link { color: var(--paper); border-bottom-color: var(--rule-on-navy); }
  .site-nav.is-open .site-nav__panel {
    position: static; display: block; box-shadow: none; background: var(--paper-200);
    border: 0; border-radius: 0; margin: 4px 0 12px; padding: 12px 0;
  }
  .site-header.on-navy .site-nav.is-open .site-nav__panel { background: var(--bg-navy-card); }
  .site-nav.is-open .site-nav__panel a { padding: 10px 16px; font-size: 14px; }
  .site-nav.is-open .caret { display: none; }
  .site-nav.is-open .site-nav__cta-mobile {
    margin-top: 20px; background: var(--ink); color: var(--leaf);
    padding: 16px 20px; border-radius: 4px; font-size: 15px; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center;
  }
  .site-header__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--rule-on-paper);
    border-radius: 8px; background: transparent; color: var(--ink);
    margin-left: auto; cursor: pointer; padding: 0;
  }
  .site-header.on-navy .site-header__burger { border-color: var(--rule-on-navy); color: var(--paper); }
  .site-header__burger svg { width: 18px; height: 18px; }
  body.menu-open { overflow: hidden; }

  /* Shared footer + breadcrumbs collapse (also only in per-page CSS, so doc
     pages overflowed on the multi-column footer). */
  .site-footer__inner, .site-footer__base, .site-footer__news-inner, .header__inner {
    grid-template-columns: 1fr !important; max-width: 100% !important;
    padding-left: 20px !important; padding-right: 20px !important; gap: 24px !important;
  }
  .crumbs__inner { padding-left: 20px !important; padding-right: 20px !important; font-size: 11px; }
  .crumbs__inner .right { display: none; }

  /* Announce bar: keep it to two lines (message + link). The "New" pill otherwise
     wraps onto its own line, pushing the bar to three lines on phones. Hide the
     pill and trim the type a touch so the message sits on one line above the link.
     (Per-page CSS only stacks the bar; these tightening rules live here, shared.) */
  .announce { font-size: 11px; }
  .announce__left .pill { display: none; }

  /* Media + code + form fields never wider than the screen; long text wraps. */
  img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
  pre { max-width: 100%; overflow-x: auto; }
  input, select, textarea { max-width: 100%; }
  p, li, h1, h2, h3, h4, dd, figcaption { overflow-wrap: break-word; }

  /* Doc-page tables: stay within the screen, wrap cell content. */
  .doc__body table { table-layout: fixed; }
  .doc__body th, .doc__body td { overflow-wrap: break-word; word-break: break-word; }
}

/* ---- <= 600px: collapse multi-column components that still overflow ---- */
@media (max-width: 600px) {
  /* case-studies "impact" metrics row (.facts__inner: 3 fixed cols) */
  .facts__inner { grid-template-columns: 1fr !important; gap: 28px; }
  .facts .item + .item {
    padding-left: 0 !important; border-left: 0 !important; margin-left: 0 !important;
    padding-top: 28px; border-top: 1px solid var(--rule-on-paper);
  }

  /* transparency outputs cards (.outputs__grid: 4 cols) */
  .outputs__grid { grid-template-columns: 1fr !important; }

  /* tree-planting-partner local steps (.local__rail: 4 cols) */
  .local__rail { grid-template-columns: 1fr !important; gap: 28px; }

  /* tanzania process timeline rows (.proc__step: 3 cols, .when: nowrap) */
  .proc__rail { flex-direction: column; }
  .proc__step { grid-template-columns: 1fr !important; gap: 6px; }
  .when { white-space: normal !important; }

  /* long inline links that refused to wrap */
  .link { white-space: normal !important; }

  /* case-studies "beyond" cards (.beyond__grid: 2 cols) */
  .beyond__grid { grid-template-columns: 1fr !important; }

  /* transparency methods grid (3 cols) + verification ladder rungs (4 cols) */
  .meth__grid { grid-template-columns: 1fr !important; }
  .rung { grid-template-columns: 1fr !important; gap: 4px; }

  /* transparency eco-value split (96px col + big gap + 269px col) */
  .ecov__inner { grid-template-columns: 1fr !important; gap: 24px; }

  /* planting-days / carbon-credits enquiry form (inner is pinned ~345px) */
  .pdform__inner { max-width: 100% !important; }

  /* marketing-hub fake desktop dashboard (~830px, decorative): collapse its
     inner columns, drop the sidebar, and clip — it's an illustration. */
  .inproduct__split { grid-template-columns: 1fr !important; }
  .mock { max-width: 100%; overflow: hidden !important; }
  .mock__body { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .mock__side { display: none !important; }

  /* marketing-hub "in the wild" cards use an inline repeat(4,1fr); the page CSS
     drops it to 2 cols at <=900px, but the cards are ~200px so two still spill
     at phone width -> force a single column. */
  .inthewild [style*="repeat(4, 1fr)"],
  .inthewild [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }

  /* footer legal/links row: let it wrap instead of overflowing */
  .site-footer__base { flex-wrap: wrap; gap: 10px 16px; }

  /* planting-days / carbon-credits enquiry form: cap inner width */
  .pdform__inner { padding-left: 16px !important; padding-right: 16px !important; }
  .pdform__inner > * { max-width: 100% !important; }

  /* senegal SDG strip header (flex/grid row -> stack) */
  .sdg-strip__inner { display: block !important; }
  .sdg-strip__head { max-width: 100% !important; }
}

/* ---- light polish: comfortable doc spacing on phones ---- */
@media (max-width: 600px) {
  .doc__inner { padding-top: 40px; padding-bottom: 72px; }
}

/* ============================================================
   Cut-off fixes (round 2): components clipped by overflow:hidden
   sections that never collapsed on phones. Found with a clipping
   audit (element wider than its box), not just page-scroll.
   ============================================================ */
@media (max-width: 700px) {
  /* multi-column stat/card/nav grids that were clipped off-screen -> 1 column */
  .pressure__stats,
  .impact-glance__row,
  .network__values,
  .hero__grid,
  .hero__cards,
  .scell,
  .outputs__head,
  .ladder__head,
  .ladder__foot,
  .iflow__foot,
  .iflow__rail,
  .sdg-strip__head,
  .pathway { grid-template-columns: 1fr !important; }

  /* decorative desktop dashboard mockups (homepage / businesses / marketing-hub):
     hide on phones — a clipped or sideways-scrolling fake desktop UI reads as
     broken; the surrounding copy already conveys the point. */
  .platform__viz, .mock { display: none !important; }
}

/* ============================================================
   Cut-off fixes (round 3): card grids whose 1fr track wouldn't
   shrink below the content's intrinsic width (min-content), plus
   a few remaining multi-column rows. minmax(0,1fr)+min-width:0
   lets tracks/items shrink so content wraps instead of clipping.
   ============================================================ */
@media (max-width: 700px) {
  /* card grids -> one shrinkable column */
  .more__grid,        /* case-studies: "more case studies" cards */
  .solution__grid,    /* case-study: solution scells */
  .hero__cards        /* marketing-hub: hero cards */
  { grid-template-columns: minmax(0, 1fr) !important; }

  /* who-we-are media split */
  .split { grid-template-columns: 1fr !important; }

  /* integrations anchor nav: wrap the chips */
  .anchors__inner { flex-wrap: wrap !important; }

  /* allow card items + their content to shrink and wrap (min-content fix) */
  .mcard, .scell, .hcard, .istep, .bart,
  .pathway__media, .split__media, .ecov__stamp, .challenge__photo { min-width: 0 !important; }
  .hcard .n, .scell__copy, .mcard, .bart, .istep__top { overflow-wrap: anywhere; white-space: normal; }
}

/* ============================================================
   Cut-off fixes (round 4): the last stubborn cases — decorative
   bleeds, min-content grid tracks, and inline-style grids.
   ============================================================ */
@media (max-width: 700px) {
  /* integrations: dashed connector line bleeds 40px past the screen edges */
  .iflow__rail::before { display: none !important; }
  /* integrations plantday inline 2-col grid */
  .plantday-section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* marketing-hub hero: minmax(0,1fr) lets the card column shrink below the
     card's intrinsic min-width so the cards fit instead of being clipped */
  .hero__inner { grid-template-columns: minmax(0, 1fr) !important; }
  .hcard { min-width: 0 !important; }
  .hcard > * { min-width: 0 !important; overflow-wrap: anywhere; }

  /* case-study challenge (text | photo) split */
  .challenge__inner { grid-template-columns: 1fr !important; }

  /* who-we-are media split */
  .split { grid-template-columns: 1fr !important; }

  /* image slots / photo fills must never exceed their box */
  image-slot, .photo-fill, .image-slot { max-width: 100% !important; min-width: 0 !important; }
}

/* ---- round 5: final small cases ---- */
@media (max-width: 700px) {
  /* marketing-hub hero pills: wrap the badges instead of a 4-col row */
  .hero__pills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  /* who-we-are small inset media: clip the few-px caption tail */
  .split__media { overflow: hidden; }
  /* transparency verified stamp: let its label wrap */
  .ecov__stamp, .ecov__stamp * { min-width: 0; overflow-wrap: anywhere; }
}

/* ---- round 6: homepage hero stats card (.hero__live) ----
   It's position:absolute bottom/right with a desktop width, so on phones it
   bled ~93px off the LEFT edge (first stat clipped). Span the hero width and
   let the stats wrap. */
@media (max-width: 700px) {
  .hero__live {
    left: 16px !important; right: 16px !important; bottom: 16px !important;
    width: auto !important; max-width: none !important;
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
    padding: 16px 18px !important;
  }
  .hero__live .div { display: none !important; } /* vertical dividers look odd when wrapping */
}


/* ===== V2 SHELL responsive rules (July 2026 redesign) — appended so legacy
   pages render the new header/footer correctly at small widths ===== */
@media (max-width: 960px){
  .site-footer__news-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 32px;
  }
  .site-footer__news-copy h3 { font-size: 32px; }}

/* Dropdown fix companion: keep burger-opened panels visible (see site.css) */
.site-nav.is-open .site-nav__panel { visibility: visible; opacity: 1; transition: none; }

/* Mobile drawer fix (July 2026): keep the header + close button reachable while
   the menu is open — hide the announce and lift the header above the z-90 drawer. */
@media (max-width: 900px) {
  body.menu-open .announce { display: none; }
  body.menu-open .site-header { z-index: 95; }
}