/* ==========================================================================
   Zentek — mobile refinements (main site)
   Loaded after each page's inline <style> so these rules win on equal
   specificity. Everything is either an intrinsic-sizing guard (safe at any
   width) or scoped to a max-width media query.
   ========================================================================== */

/* --- Intrinsic sizing guards (all widths) --------------------------------
   A `1fr` track is minmax(auto,1fr): its floor is the item's min-content
   width. Long unbreakable strings — "99.9992%", "~US$64.0B", uppercase
   letter-spaced labels — therefore push these grids wider than the viewport.
   Allowing the items to shrink removes that whole class of overflow. */
.analogue-grid > *, .apply-grid > *, .apt-grid > *, .board-grid > *,
.cred-grid > *, .cro-grid > *, .cro-metrics > *, .deposit-grid > *,
.diag-grid > *, .doc-grid > *, .f-grid > *, .fbr-callout > *,
.field-row > *, .filings-grid > *, .financing-grid > *, .footer-top > *,
.forms-grid > *, .geo-grid > *, .gov-grid > *, .hero-body > *,
.invest-grid > *, .invest-stats > *, .ip-grid > *, .leadership-grid > *,
.listing-strip > *, .mb-inner > *, .mission-grid > *, .numbers-grid > *,
.pea-grid > *, .perks > *, .platform-detail > *, .platform-header > *,
.principles > *, .process-steps > *, .release-item > *, .repos-steps > *,
.result-grid > *, .rm-grid > *, .roadmap-grid > *, .rs-inner > *,
.stats > *, .story-grid > *, .tam-grid > *, .tam-inner > *, .team-grid > *,
.ther-grid > *, .thesis-grid > *, .values > *, .vb-inner > *,
.vs-inner > * { min-width: 0; }

img, canvas, svg, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* Values and labels break rather than force a wider track */
.num-val, .num-lbl, .tam-val, .ana-val, .rspec .v, .istat .v, .stat-val,
.gap-bar-val, .ps-result, .gf-val, .f-legal, .f-copy,
.hero-h, .section-h, .platform-name, .result-number { overflow-wrap: break-word; }

.hero-h, .section-h, .platform-name, h1, h2 { hyphens: auto; }

/* ========================================================================== */
@media (max-width: 900px) {
  .numbers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ========================================================================== */
@media (max-width: 760px) {
  .rs-inner, .process-steps, .vs-inner, .cred-grid, .stats,
  .financing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-strip, .invest-stats, .cro-metrics,
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Inline-styled grids cannot be reached by a normal cascade override */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ========================================================================== */
@media (max-width: 600px) {
  section { padding: 52px 0; }

  /* Every remaining multi-column grid goes single-column */
  .analogue-grid, .apply-grid, .apt-grid, .board-grid, .cred-grid,
  .cro-grid, .cro-metrics, .deposit-grid, .diag-grid, .doc-grid, .f-grid,
  .fbr-callout, .field-row, .filings-grid, .financing-grid, .footer-top,
  .forms-grid, .geo-grid, .gov-grid, .hero-body, .invest-grid,
  .invest-stats, .ip-grid, .leadership-grid, .listing-strip, .mb-inner,
  .mission-grid, .numbers-grid, .pea-grid, .perks, .platform-detail,
  .platform-header, .principles, .process-steps, .release-item,
  .repos-steps, .result-grid, .rm-grid, .roadmap-grid, .rs-inner, .stats,
  .story-grid, .tam-grid, .tam-inner, .team-grid, .ther-grid, .thesis-grid,
  .values, .vb-inner, .vs-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Two-column label/value rows: the fixed label column plus a long value
     does not fit, so stack them. */
  .geo-fact, .ms-row, .dt-row, .vbs-row, .cs-row, .ana-row, .tool-card,
  .invest-link, .gap-bar-row { flex-wrap: wrap; }
  .gf-label, .ms-label, .dt-label, .vbs-label, .cs-label,
  .gap-bar-label { min-width: 0; width: 100%; }

  /* nowrap is what pushes these past the edge on a narrow screen */
  .ana-val, .gap-bar-val, .ri-date, .ri-arrow, .role-cta, .ql-item,
  .f-copy, .nav-cta { white-space: normal; }

  .num-card { padding: 22px 14px; }
  .num-val { font-size: clamp(22px, 7vw, 30px); }
  .ana-col, .rm-col, .pd-card { padding: 24px 20px; }
  .model-card { padding: 26px 22px; position: static; }
  .funding-bar, .ana-insight { padding: 22px 20px; }
  .hero-scroll { display: none; }
}

/* ========================================================================== */
@media (max-width: 560px) {
  /* The back-link label and the ticker badge are the first things to go */
  .nav-back span, .nav-logo-sub, .logo-ticker { display: none; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .nav-in { padding: 0 16px; }
  .stat-val, .result-number { font-size: clamp(40px, 14vw, 62px); }
}

/* --------------------------------------------------------------------------
   Mobile navigation
   .nav-links is hidden below 860px and nothing replaced it, so phones had no
   navigation at all. mobile-nav.js clones the existing links into the panel
   below; these rules style it.
   -------------------------------------------------------------------------- */
.mnav-toggle { display: none; }

@media (max-width: 860px) {
  nav .nav-cta { display: none; }
  .nav-logo { font-size: 16px; }
  .nav-logo-sub, .logo-ticker { font-size: 10px; padding: 2px 7px; }

  /* Back link + page title + toggle have to share one 72px bar */
  .nav-in { gap: 12px; }
  .nav-back, .nav-logo, .logo { min-width: 0; }
  .nav-back span, .nav-logo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mnav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    margin-right: -10px;
    background: none;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mnav-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
  }
  .mnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .mnav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .mnav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(6, 6, 5, 0.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 6px 40px 18px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .mnav-panel[hidden] { display: none; }
  .mnav-panel a {
    display: block;
    padding: 13px 0;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink2);
    border-bottom: 1px solid var(--border);
  }
  .mnav-panel a:last-child { border-bottom: 0; }
}

@media (max-width: 420px) {
  .mnav-panel { padding: 6px 16px 18px; }
}