/* ==========================================================================
   VIETRRO 2026 — responsive.css
   Consolidated from the per-module @media(max-width:960/950/900/680/560px)
   blocks (all 19 sources used near-identical breakpoints/collapses).
   Verified against 1440x900 (desktop), 768x1024 (tablet) and 390x844
   (mobile) per the QA requirement.
   ========================================================================== */

/* ----- ~1024px: sidebar becomes an overlay drawer (see layout.css) ----- */
@media (max-width: 1024px) {
  .document-header { grid-template-columns: 1fr; padding-top: 44px; }
  .overview-cards { grid-template-columns: 1fr; }
  .doc-card-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Tablet / narrow desktop: collapse dense grids to 2 columns ----- */
@media (max-width: 900px) {
  .overview-grid, .principle-grid,
  .small-grid, .stats,
  .work-flow, .tariff-grid, .checklist,
  .method-grid, .status-strip, .formula-grid, .risk-grid, .todo-grid,
  .payment-flow, .pay-grid, .data-grid, .account-grid, .action-grid, .check-grid,
  .rights-flow, .scope-grid, .license-check, .public-grid, .risk-grid5, .kpi-grid,
  .class-grid, .roadmap {
    grid-template-columns: 1fr 1fr;
  }
  .flow { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); }
  .process-line { grid-template-columns: 1fr; }
  .process-node:not(:last-child)::after,
  .payment-step:not(:last-child)::after {
    content: "\2193"; right: 50%; top: auto; bottom: -13px; transform: translate(50%,50%);
  }
  .calc-grid, .calc-row { grid-template-columns: 1fr 1fr; }
  .chapters { grid-template-columns: 1fr; }
}

/* ----- 768px tablet checkpoint ----- */
@media (max-width: 768px) {
  :root { --sidebar-w: min(340px, 86vw); }
  .site-topbar { padding: 0 14px; gap: 10px; }
  .breadcrumb { display: none; }
  .section { padding: 46px 0; }
  .document-header { padding: 40px 0 34px; }
  h1 { font-size: 32px; }
  .lead { font-size: 16px; }
  .overview-grid, .principle-grid,
  .small-grid, .stats,
  .work-flow, .tariff-grid, .checklist,
  .method-grid, .status-strip, .formula-grid, .risk-grid, .todo-grid,
  .payment-flow, .pay-grid, .data-grid, .account-grid, .action-grid, .check-grid,
  .rights-flow, .scope-grid, .license-check, .public-grid, .risk-grid5, .kpi-grid,
  .class-grid, .roadmap {
    grid-template-columns: 1fr;
  }
  .calc-grid, .calc-row { grid-template-columns: 1fr; }
  .chapter .content { padding-left: 18px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .doc-card-grid { grid-template-columns: 1fr; }
  .chapter-header { padding: 32px 0 24px; gap: 14px; }
  .chapter-badge { width: 48px; height: 48px; font-size: 20px; }
  .chapter-pager { flex-direction: column; align-items: stretch; }
  .chapter-pager-ends { margin-left: 0; flex-direction: column; }
  .chapter-pager-prev, .chapter-pager-next { max-width: none; text-align: left; }
}

/* ----- 390px mobile checkpoint ----- */
@media (max-width: 480px) {
  .wrap { width: 92vw; }
  .site-logo small { display: none; }
  .topbar-search-btn span.label { display: none; }
  h1 { font-size: 27px; }
  .meta { gap: 8px; }
  .meta div { min-width: 92px; padding: 10px 11px; }
  .back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  .overview-card { padding: 20px; }
  .document-colophon { font-size: 12px; }
}