/* ============================================================
   BTCNodes — responsive.css  (tablet + mobile overlay)
   v2 — 2026-07-10  (v1 regression fixed: v1 re-forced min-width
   onto version/country/node-map tables, breaking the existing
   card mode at <=820 and widening the whole page)

   RULES OF THIS FILE:
   - Loaded LAST on every page (after site-polish.css / page CSS).
   - Every rule lives inside a max-width media query at <=900px.
     Nothing here can affect desktop (>900px) by construction.
   - Standard breakpoints (only these):
       900px  = tablet portrait  (iPad 768/810/834)
       760px  = large phone / small tablet
       560px  = phone            (390-430 class devices)
       400px  = small phone      (SE / older Androids)
   - !important is used ONLY where site-polish.css already uses
     !important on the same property and must be out-ranked.
   ============================================================ */


/* ============================================================
   TABLET PORTRAIT  <=900px
   ============================================================ */
@media (max-width: 900px) {

  /* --- kill stray horizontal scroll from long hashes/IPs --- */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* --- every table wrapper scrolls with momentum --- */
  .table-wrap,
  .terminal-table-wrap,
  .detail-table-wrap,
  .country-table-wrap,
  .version-table-wrap,
  .node-map-table-wrap,
  .hashrate-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* --- two-col layouts that theme only breaks at 860/820 ---
         pull them up so 861-900 tablet range isn't cramped */
  .node-detail-grid,
  .detail-kpis,
  .status-hero-grid {
    grid-template-columns: 1fr;
  }

  /* --- page shells: tighter side gutters on tablet --- */
  .page-shell {
    width: min(100% - 32px, 1080px);
  }

  .terminal-header-wrap,
  .terminal-hero,
  .terminal-stats,
  .terminal-two-col,
  .terminal-grid,
  .terminal-chain-stage {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ============================================================
   LARGE PHONE  <=760px
   ============================================================ */
@media (max-width: 760px) {

  /* ---------- HEADER / NAV (all pages) ----------
     Brand on its own row, nav becomes a single-line
     horizontally scrollable strip. No wrapping blob. */
  .terminal-header-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .terminal-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    gap: 6px;
    margin: 0 -16px;                /* bleed to edges */
    padding: 0 16px;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  }

  .terminal-nav::-webkit-scrollbar { display: none; }

  .terminal-nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;               /* tap target */
    padding: 0 10px;
    white-space: nowrap;
  }

  /* ---------- TICKER: slow it down so it's readable ---------- */
  .terminal-ticker-inner {
    animation-duration: 55s;
  }

  /* ---------- TABLES ----------
     Keep side-scroll model but make it usable. */
  th, td {
    padding: 9px 8px;
  }

  .terminal-table th,
  .terminal-table td {
    padding: 10px 10px;
  }

  /* ---------- FOOTER ---------- */
  .terminal-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .terminal-footer {
    flex-direction: column;
    gap: 10px;
  }

  /* ---------- HERO / ACTION rows on inner pages ---------- */
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero-actions .big-link,
  .hero-actions .btn {
    justify-content: center;
    min-height: 44px;
  }

  /* ---------- generic 4-col stat rows -> 2 col ---------- */
  .terminal-stats,
  .detail-kpis,
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
   CARD-MODE GUARD  <=820px
   pages.css + site-polish.css convert the version / country /
   node-map tables into stacked cards at <=820. This file loads
   last, so it must NEVER re-widen those tables. Assert the
   card-mode minimums here so no earlier !important can win,
   and clamp every ancestor so one wide element can't push the
   whole document past the viewport (the "page shoved right"
   bug on /bitcoin-node-versions and /bitcoin-node-map).
   ============================================================ */
@media (max-width: 820px) {

  .version-table,
  .country-table,
  .node-map-preview-table {
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .version-table-wrap,
  .country-table-wrap,
  .node-map-table-wrap,
  .version-live-panel,
  .country-live-panel,
  .node-map-live-panel {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* page-level guard: nothing may exceed the viewport */
  .page-shell,
  .page-shell main,
  .page-shell section,
  .page-shell .panel {
    max-width: 100%;
    min-width: 0;
  }

  /* hashrate chart height is CSS-owned (chart uses autoSize) */
  .hashrate-chart { height: 380px; }
}


/* ============================================================
   PHONE  <=560px
   ============================================================ */
@media (max-width: 560px) {

  /* ---------- stat grids collapse fully ---------- */
  .terminal-stats,
  .terminal-stats-five,
  .detail-kpis,
  .status-grid,
  .country-live-stats,
  .version-live-stats,
  .home-v2-snapshot,
  .home-v2-section-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---------- hero actions stack ---------- */
  .hero-actions {
    grid-template-columns: 1fr;
  }

  /* ---------- typography guard on inner pages ---------- */
  .compact-page-hero h1,
  .hero-copy h1 {
    font-size: clamp(30px, 10vw, 40px);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }

  .lead,
  .terminal-hero p {
    font-size: 14.5px;
  }

  /* ---------- touch targets ---------- */
  button,
  .btn,
  .big-link,
  input[type="search"],
  input[type="text"],
  select {
    min-height: 44px;
  }

  .terminal-mini-label button {
    min-height: 34px;               /* small utility buttons exempt */
  }

  /* ---------- panels: less padding, more content ---------- */
  .terminal-panel-head {
    padding: 11px 14px;
  }

  .terminal-stat {
    padding: 13px 14px;
  }

  .panel {
    padding: 16px 14px;
  }

  /* ---------- footer to single column ---------- */
  .terminal-footer-grid {
    grid-template-columns: 1fr;
  }

  /* ---------- long strings never overflow ---------- */
  code, .mono, .terminal-node-row strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ---------- guides / cards ---------- */
  .guides-grid,
  .quick-actions {
    grid-template-columns: 1fr;
  }

  /* ---------- hashrate chart (chart uses autoSize) ---------- */
  .hashrate-chart { height: 300px; }
}


/* ============================================================
   SMALL PHONE  <=400px
   ============================================================ */
@media (max-width: 400px) {

  .terminal-header-wrap,
  .terminal-hero,
  .terminal-stats,
  .terminal-two-col,
  .terminal-grid,
  .terminal-chain-stage {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-shell {
    width: min(100% - 20px, 1080px);
  }

  .terminal-nav {
    margin: 0 -12px;
    padding: 0 12px;
  }

  .terminal-fees,
  .terminal-block-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .terminal-fee strong {
    font-size: 15px;
  }

  .terminal-hero h1 {
    font-size: 32px;
  }
}

/* ============================================================
   MOBILE LAYOUT PATCH v3 — 2026-07-10
   Fixes the remaining squeezed-column bug on /bitcoin-node-map,
   /bitcoin-node-countries, and the mobile hashrate chart panel.

   Root cause:
   theme-terminal.css applies padded page-shell rules to BOTH
   .page-shell and nested main elements. Some SEO pages use:
     <div class="page-shell"><main>...</main></div>
   That double-padding reduced usable card width to ~274px on a
   390px phone. These rules are intentionally more specific than
   theme-terminal's terminal-home-v1 selectors and loaded last.
   ============================================================ */
@media (max-width: 900px) {
  body.terminal-site .page-shell > main,
  body.terminal-home-v1.terminal-site .page-shell > main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.terminal-site .page-shell,
  body.terminal-site main.page-shell,
  body.terminal-home-v1.terminal-site .page-shell,
  body.terminal-home-v1.terminal-site main.page-shell {
    box-sizing: border-box !important;
  }
}

@media (max-width: 760px) {
  body.terminal-site .page-shell,
  body.terminal-site main.page-shell,
  body.terminal-home-v1.terminal-site .page-shell,
  body.terminal-home-v1.terminal-site main.page-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.terminal-site .page-shell > main > .hero,
  body.terminal-site .page-shell > main > .panel,
  body.terminal-site .page-shell > main > .cards,
  body.terminal-site main.page-shell > .hero,
  body.terminal-site main.page-shell > .panel,
  body.terminal-site main.page-shell > .cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .node-map-stat-grid,
  .country-live-stats,
  .version-live-stats,
  .hashrate-metric-grid {
    gap: 10px !important;
  }

  .node-map-stat,
  .country-live-stats article,
  .version-live-stats article {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .node-map-guide-grid article,
  .node-map-type-grid article,
  .node-map-faq-grid article,
  .seo-info-card,
  .card,
  .panel,
  .content-card {
    border-radius: 14px !important;
  }

  .panel-head {
    gap: 10px;
  }

  .panel-head .text-link {
    white-space: normal;
  }

  /* Hashrate overlay checkboxes are visually replaced by the switch.
     The hidden real input inherited global width:100%, causing mobile
     horizontal overflow and making the chart/card feel clipped. */
  .price-overlay-toggle input {
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 560px) {
  body.terminal-site .page-shell,
  body.terminal-site main.page-shell,
  body.terminal-home-v1.terminal-site .page-shell,
  body.terminal-home-v1.terminal-site main.page-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .panel,
  .content-card,
  .seo-info-card,
  .card {
    padding: 14px 12px !important;
  }

  .node-map-disclaimer {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .node-map-guide-grid,
  .node-map-type-grid,
  .node-map-faq-grid,
  .node-map-link-grid,
  .seo-info-grid,
  .cards {
    gap: 12px !important;
  }

  .node-map-guide-grid p,
  .node-map-type-grid p,
  .node-map-faq-grid p,
  .seo-info-card p,
  .card p,
  .section-note,
  .node-map-live-note {
    line-height: 1.5 !important;
  }

  .hashrate-chart {
    height: 320px !important;
  }
}