/* ============================================================
   responsive.css — tablet + mobile pass. Loaded last so it can
   correct anything the component stylesheets set.

   Breakpoints:
     ≤1080  large tablet / small laptop — nav drawer, layout easing
     ≤900   tablet portrait
     ≤680   large phone
     ≤460   small phone
   ============================================================ */

/* ---- safety: nothing may push the page wider than the viewport ---- */
img, canvas, svg, video, iframe { max-width: 100%; }
.wrap, .tc-inner { max-width: 100%; }
.h1, .h2, .h3, .tc-title, .wl-title, .fam-name, .ven-name, .pc-title { overflow-wrap: anywhere; }

/* ============================================================
   ≤1080 — the nav now carries six items plus the CTA, which no
   longer fits beside the brand. Move the links into the drawer
   here rather than at 860, but keep the CTA: it is the page's
   primary action and there is still room for it.
   ============================================================ */
@media (max-width: 1080px) {
  .nav .links { display: none; }
  .nav .links.open {
    display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 4px; padding: 14px;
    background: rgba(6, 9, 18, .97); border-bottom: 1px solid var(--stroke);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav .links.open a { padding: 13px 14px; border-radius: 10px; font-size: 15.5px; }
  .nav .links.open a.active::after { display: none; }
  .nav .cta { display: inline-flex; margin-left: auto; padding: 11px 20px; font-size: 14px; }
  .nav .menu-btn {
    display: flex; align-items: center; justify-content: center; margin-left: 10px;
    width: 42px; height: 42px; border-radius: 12px; cursor: pointer; font-size: 18px;
    background: var(--panel); border: 1px solid var(--stroke); color: var(--ink);
  }
  /* content pages: keep wide blocks inside the column on smaller screens */
  .tc-body .alignwide { width: 100%; margin-left: 0; }
}

/* ============================================================
   ≤1100 — large tablet / iPad landscape. The four-across About
   stats break 3+1 below this, and three capability cards get too
   narrow, so both drop to a two-column rhythm here.
   ============================================================ */
@media (max-width: 1100px) {
  .caps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cap { padding: 16px; }
  .tools-grid { grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
  .stat-row { flex-wrap: wrap; gap: 22px 30px; }
  .stat-row .stat { flex: 0 0 calc(50% - 20px); }
}

/* ============================================================
   ≤900 — tablet portrait
   ============================================================ */
@media (max-width: 900px) {
  /* Ventures: two up, with less inner padding */
  .ven-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ven-card { min-height: auto; padding: 22px 22px 18px; gap: 16px; }
  .ven-filters { gap: 7px; }

  /* Works editorial list: no room for the tag column beside the title */
  .wl-row { grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 16px; padding: 24px 6px; }
  .wl-tags { display: none; }

  /* content pages */
  .tc { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 70px; }
  .tc-body { margin-top: 32px; }
  .tc-cover { margin-top: 30px; border-radius: 18px; }

  /* footer bar gains items as menus grow — let it wrap tidily */
  .footer .flinks { flex-wrap: wrap; gap: 14px 18px; }
}

/* ============================================================
   ≤680 — large phone
   ============================================================ */
@media (max-width: 680px) {
  .nav .cta { display: none; }

  .caps { gap: 10px; }
  .cap { padding: 14px; }
  .cap .t { font-size: 15px; }
  .tools-grid { grid-template-columns: repeat(4, 1fr); }
  /* Ventures back to a single column */
  .ven-grid { grid-template-columns: 1fr; }

  /* Works list: index and title only */
  .wl-row { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 20px 4px; }
  .wl-go { display: none; }

  /* blog + archives */
  .post-grid { grid-template-columns: 1fr; gap: 14px; }
  .tc { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 56px; }
  .tc-title { font-size: clamp(27px, 8vw, 38px); }
  .tc-body { font-size: 15.5px; }
  .tc-body h2 { margin-top: 40px; }
  .tc-body blockquote, .tc-body .wp-block-quote { padding: 18px 20px; border-radius: 14px; }
  .tc-body pre { padding: 16px; border-radius: 12px; }
  .tc-related { margin-top: 56px; padding-top: 32px; }
  .tc-pagination { margin-top: 32px; gap: 6px; }
  .tc-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; font-size: 13px; }

  /* Gutenberg columns must not stay side by side on a phone */
  .tc-body .wp-block-columns { flex-direction: column; gap: 18px; }

  /* tables scroll rather than forcing the page wide */
  .tc-body .wp-block-table { overflow-x: auto; }
  .tc-body .wp-block-table table { min-width: 460px; }
}

/* ============================================================
   ≤460 — small phone
   ============================================================ */
@media (max-width: 460px) {
  .caps { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-row .stat { flex: 0 0 100%; }
  .ven-card { padding: 18px 18px 16px; }
  .ven-name { font-size: 18px; }
  .ven-meta { gap: 12px; }
  .tc-title { font-size: 26px; }
  .pc-body { padding: 16px 16px 18px; }
}

/* ============================================================
   Touch devices: hover-only affordances would otherwise stick
   ============================================================ */
@media (hover: none) {
  .ven-card:hover, .post-card:hover { transform: none; }
  .post-card:hover .pc-media { transform: none; }
}