/* assets/responsive.css — tablet & phone adaptation polish, layered on top of
   the existing styles. Goal: feel properly designed for each device, not just
   width-squeezed. Easy to tune/remove (one <link> per page). */

/* ── Safety net: never overflow sideways; wrap long words gracefully ────── */
html, body { overflow-x: hidden; }
h1, h2, h3, p, li, .mast-title, .mast-lead, .db-name, .blog-title { overflow-wrap: break-word; }
.mast-copy, .mast-title, .mast-lead { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   TABLET  (≤ 900px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  /* Dense framework matrix: stop squeezing into unreadable columns — give each
     column a comfortable min width and let it scroll horizontally (swipe). Cell
     min-width is respected by table layout (a min-width on <table> is not). */
  .matrix-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .matrix th, .matrix td{ min-width: 156px; }
  .matrix .phase{ min-width: 96px; }
  .matrix-scroll::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:36px; pointer-events:none;
    background:linear-gradient(90deg, rgba(232,222,210,0), rgba(232,222,210,.92));
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHONE  (≤ 600px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px){
  /* Nav: tighter so every link + the 中文 toggle stay on-screen */
  .nav{ padding-left: 16px; padding-right: 16px; height: 56px; }
  .nav-links{ gap: 13px; }
  .nav-links a{ font-size: 9.5px; letter-spacing: .1em; }
  .lang-toggle{ font-size: 9.5px; letter-spacing: .1em; padding-left: 10px; }
  .nav-brand .nav-logo{ width: 98px; height: 38px; }

  /* Services masthead: scale the couplet (keep the <br> so the two clauses stay
     cleanly separated — no "need,For" run-on), lighten the lead */
  .mast-title{ font-size: clamp(22px, 7vw, 31px); line-height: 1.24; }
  .mast-lead{ font-size: 15px; line-height: 1.8; }

  /* Slightly tighter section rhythm so phone doesn't feel sparse/scrolly */
  .section{ padding-top: clamp(54px, 13vw, 80px); padding-bottom: clamp(54px, 13vw, 80px); }

  /* Stat grids: clean 2-up with comfortable size */
  .db-stats{ grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }

  /* Hero illustrative note: wrap instead of running off the edges */
  .hero-note{ white-space: normal; max-width: 84%; text-align: center; line-height: 1.5; }

  /* Service category header (name + tag + rule) wraps tidily */
  .svc-cat-head{ flex-wrap: wrap; gap: 8px 12px; }
  .svc-cat-head .rule{ flex-basis: 100%; }

  /* Footer bottom: stack copyright + visit counter */
  .footer-bottom{ flex-direction: column; gap: 8px; align-items: flex-start; }

  /* Blog hero: keep the slogan + reserved area in proportion on small screens */
  .blog-status{ min-height: clamp(300px, 42vh, 460px); }
}

/* ─────────────────────────────────────────────────────────────────────────
   SMALL PHONE  (≤ 380px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px){
  .nav-links{ gap: 10px; }
  .nav-links a{ font-size: 9px; }
  .lang-toggle{ font-size: 9px; padding-left: 8px; }
  .mast-title{ font-size: clamp(20px, 7.2vw, 27px); }
}