/* Zerra mobile.css — global responsive overrides */

/* ── Prevent mobile drawer from creating horizontal overflow ── */
/* overflow-x: clip on both html AND body so both scrollWidth values
   are clamped — Playwright uses max(html.scrollWidth, body.scrollWidth) */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

@media (max-width: 640px) {

  /* ── Stat strips: 4-col → 2-col ── */
  .stat-strip {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Two-col and three-col content sections → single column ── */
  .two-col,
  .three-col {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* ── Carbon method explainer cards: 2-col → 1-col ── */
  .method-explainers {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* ── Home: 3-to-5-col cards → 1-col (inline style requires !important) ── */
  .home-cards {
    grid-template-columns: 1fr !important;
  }

  /* ── Home: about section 2-col → 1-col ── */
  .home-about {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Home: browse grid and explainer grid → 1-col ── */
  .browse-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .exp-grid {
    grid-template-columns: 1fr;
  }

  /* ── Scorecard stats 3-col → single col ── */
  .scorecard-stats {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* ── Reduce horizontal padding on content sections ── */
  .page-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .context-section,
  .sector-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .market-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Make wide tables horizontally scrollable ── */
  .table-wrap {
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Controls bar: reduce padding and allow wrapping ── */
  .controls {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }

  /* ── Roadmap timeline: 2-col (date | body) → stacked ── */
  .timeline-wrap { padding-left: 1rem; padding-right: 1rem; }

  .timeline::before {
    left: 0;
  }

  .timeline-wrap .section-label {
    padding-left: 20px;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    padding-left: 20px;
  }

  .timeline-item::after {
    left: -13px;
    top: 20px;
  }

  .item-date {
    text-align: left;
    padding: 16px 0 2px;
    font-size: 11px;
  }

  .item-body {
    padding: 0 0 20px 0;
  }

  /* ── GOO / pulse / markets: hero section reduce font ── */
  .page-headline {
    font-size: clamp(22px, 7vw, 30px);
  }

  /* ── Home hero headline ── */
  .home-headline {
    font-size: clamp(28px, 9vw, 44px);
  }
}

@media (max-width: 768px) {
  /* ── Email capture section — reduce mobile padding ── */
  .subscribe-block {
    padding: 32px 20px;
    margin-top: 32px;
    margin-bottom: 0;
  }
}