/* Xinzhe mobile adaptation patch v2
   Scope: only modules that contain a category description block.
   Goal: stop clipping wide spec tables on phones, let the description use the
   full row width, keep desktop untouched (all rules live inside @media). */
@media (max-width: 768px) {
  /* 1) the description column is 10/12 wide on desktop - go full width on phones */
  .row-col:has(.categoryList_desc) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* 2) trim the module gutter on phones (34px each side is too much) */
  .row-box:has(.categoryList_desc) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* 3) classic responsive-table pattern: the table itself becomes a
        horizontal scroller, so the user sees a native scrollbar */
  .cke_editable table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    table-layout: auto !important;
  }
  /* 4) never clip a description card */
  .cke_editable .xz-adv-card,
  .cke_editable .xz-adv-grid {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  /* 5) the card grid collapses to one full-width column on phones */
  .cke_editable .xz-adv-grid {
    grid-template-columns: 100% !important;
  }
  /* 6) Excel-pasted fixed widths on block elements must not force sideways
        scroll - let the text wrap. (span is excluded on purpose: the cards
        use tiny decorative <span width:5px> bars) */
  .cke_editable div[style*="width"],
  .cke_editable p[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* 7) long words / spec codes must not force sideways page scroll */
  .cke_editable,
  .cke_editable div,
  .cke_editable p,
  .cke_editable td,
  .cke_editable th {
    word-break: break-word;
  }
}