/* Phone layout for every 东哥 (udpackaging) template, 2026-10-24: home, product / application / hub pages, resource articles,
   calculators and legal notices. Loaded after each page's own stylesheet; desktop (≥ 1181 px) is untouched except for the
   overflow clip, which only hides decorative layers that reach past the page edge. */

/* decorative orbs, hexes and the hero image's parallax never widen the page */
.page-ud main { overflow-x: clip; }

/* ---------- ≤ 1180 px: single-column grids must not grow past the screen because of a wide table or a long select ---------- */
@media (max-width: 1180px) {
  .pd-hero-grid, .pd-fit-stage, .pd-specs-grid, .pd-pads-grid, .pd-parts-row, .pd-safety-grid, .pd-mount-top, .pd-vtabs,
  .pd-scope-grid, .pd-partsec-grid, .pd-form-grid, .pd-range-card, .tl-grid,
  .ud-hero-grid, .ud-breakdown-body, .ud-families-grid, .ud-row, .ud-spec-top, .ud-callouts, .ud-span, .ud-price, .ud-why,
  .ud-qa, .ud-ptabs-body, .ud-seq, .ud-ind-top, .ud-ind, .ud-markets { grid-template-columns: minmax(0, 1fr); }
  .pd-table-frame, .ud-tablewrap { max-width: 100%; }
}
@media (max-width: 1100px) { .lg-grid { grid-template-columns: minmax(0, 1fr); } }
.tl-input .form-control, .pd-form-card .form-control { max-width: 100%; min-width: 0; }

/* ---------- ≤ 760 px: phone ---------- */
@media (max-width: 760px) {
  /* headings sized for a 375 px screen */
  .ud-h1 { font-size: 36px; line-height: 1.1; }
  .ud-h2, .ud-glass .ud-h2, .ud-spec-card .ud-h2, .ud-qc-panel .ud-h2 { font-size: 28px; line-height: 1.22; }
  .pd-h1 { font-size: 34px; line-height: 1.12; }
  .pd-h2-center, .ar-h2, .lg-h2, .tl-end-h, .ar-enquiry-h, .pd-h2-bars span, .pd-h2-tab span { font-size: 26px; line-height: 1.25; }
  .ar-h1, .lg-h1, .tl-h1 { font-size: 30px; line-height: 1.18; }
  .ar-cover-title { font-size: 32px; }
  .pd-range-body h3 { font-size: 24px; }
  .pd-range-num { font-size: 96px; }
  .pd-range-card { padding: 26px 20px; }
  .pd-range-media { min-height: 200px; }
  .pd-range-media img { max-height: 220px; }

  /* section rhythm */
  .ud-sec { padding-block: 56px; }
  .tl-band { padding: 40px 0 44px; }
  .tl-body { padding: 32px 0 44px; }
  .tl-lead, .ar-lead-p, .lg-lead { font-size: 17px; }
  .ar-p, .lg-p, .dc-p { font-size: 16.5px; }

  /* hero data cards: two per row, compact */
  .pd-params { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .pd-param { padding: 14px 14px; gap: 10px; }
  .pd-param-icon { display: none; }
  .pd-param dd { font-size: 16px; }

  /* the product card beside a spec table moves under it and shrinks */
  .pd-float-card { max-width: 300px; margin: 24px auto 0; }
  .pd-stage { max-width: 320px; }

  /* labels never under 12 px */
  .ar-table-tag, .pd-nf-label, .ar-map-tag, .ar-map-toggle, .ud-tag-k, .ar-card-tag, .ar-card-data dt, .ar-more-kicker, .ar-pn-label, .ud-ind-figs small, .ud-line-specs dt { font-size: 12px; }

  /* tap targets */
  .ar-map-toggle { min-height: 36px; padding: 6px 14px; }
  .site-footer a { display: inline-block; padding-block: 6px; }
  .footer-heading a { padding-block: 8px; }
  .ud-link { padding-block: 6px; }

  /* resource articles: the guide map collapses (ud.js), the product card follows the article */
  .ar-page { padding-top: 24px; }
  .ar-map { margin-bottom: 4px; }
  .ar-cover { min-height: 0; padding: 26px 20px 54px; margin: 22px 0 26px; }
  .ar-cover-img { max-width: 180px; max-height: 180px; }
  .ar-cover-sub { font-size: 15px; }
  .ar-answer, .ar-scope { padding: 22px 18px 6px; }
  .ar-enquiry { padding: 28px 20px 30px; }
  .ar-more-list { grid-template-columns: 1fr; gap: 16px; }

  /* calculators */
  .dc-card { padding: 24px 18px 10px; }
  .dc-h2 { font-size: 22px; }
  .tl-input .calc-result .datapoint { flex-direction: column; gap: 4px; }
  .tl-input .calc-result .datapoint strong, .tl-input .calc-result .calc-value { max-width: none; text-align: left; }
  .dc-formula { font-size: 13.5px; overflow-wrap: anywhere; }
}

/* ---------- ≤ 640 px: tables become one card per row, each cell labelled with its column (td[data-label]) ---------- */
@media (max-width: 640px) {
  .ud-tablewrap, .ar-table-scroll, .dc-table-scroll, .pd-table-frame { overflow: visible; }
  .ud-tablewrap table, .ar-table table, .dc-table table { min-width: 0 !important; width: 100%; border: 0; background: none; }
  .ud-tablewrap thead, .ar-table thead, .dc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ud-tablewrap tbody, .ar-table tbody, .dc-table tbody { display: grid; gap: 12px; }
  .ud-tablewrap tr, .ar-table tbody tr, .dc-table tbody tr { display: block; overflow: hidden; border: 1px solid #dbe3ea; border-radius: 4px; background: #fff !important; }
  .ud-tablewrap tbody th, .ud-tablewrap td, .ar-table tbody th, .ar-table td, .dc-table tbody th, .dc-table td {
    display: block; width: auto !important; padding: 10px 14px !important; border: 0 !important; text-align: left !important; white-space: normal !important; }
  .ud-tablewrap tbody th, .ar-table tbody th, .dc-table tbody th { background: var(--ud-navy) !important; color: #fff !important; font-size: 15.5px; font-weight: 800; }
  .ud-tablewrap tbody th a, .ar-table tbody th a, .dc-table tbody th a { color: #ffb58a !important; }
  .ud-tablewrap td + td, .ar-table td + td, .dc-table td + td { border-top: 1px solid #edf1f5 !important; }
  .ud-tablewrap td[data-label]::before, .ar-table td[data-label]::before, .dc-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ud-muted); }
  .ud-tablewrap caption { display: block; text-align: left; }
  /* dark tables keep a dark card */
  .ud-table-dark tr { border-color: rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .04) !important; }
  .ud-table-dark tbody th { background: rgba(255, 255, 255, .1) !important; }
  .ud-table-dark td + td { border-top-color: rgba(255, 255, 255, .08) !important; }
  .ud-table-dark td[data-label]::before { color: #9fb3c8; }
  .ar-table-wide .ar-table-scroll { background: none; }
}

/* hero data cards on a phone: label above value; long table captions in sentence case */
@media (max-width: 760px) {
  .pd-param { display: block; }
  .pd-param dt { margin-bottom: 4px; font-size: 12px; }
  .pd-param dd { font-size: 17px; line-height: 1.3; }
  .ud-tablewrap caption { font-size: 13px; letter-spacing: .02em; text-transform: none; line-height: 1.5; }
}