/*
 * Mobile layout for the reading surfaces (article pages, archive).
 *
 * The two apps are fixed-width desktop builds (CN 1440px, EN 1920px) with no
 * mobile layout upstream. Marketing pages use scaled-desktop viewports instead
 * (see scripts/mobilize.py); the pages people actually *read* get a real
 * reflow here. Loaded only on /KOLDetails/... and /archive/.
 *
 * The SPA hydrates these pages and re-renders the same scoped class names
 * (data-v-...), so these rules survive hydration.
 */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* --- global chrome ------------------------------------------------ */
  #view { width: 100% !important; }

  #Header { height: 64px !important; }
  #Header .box_1 {
    width: 100% !important;
    padding: 0 12px !important;
    overflow-x: auto;                 /* nav becomes a swipeable strip */
    -webkit-overflow-scrolling: touch;
  }
  #Header .box_1 img[width="170px"] { width: 110px !important; }
  #Header .box_1 .text { flex-wrap: nowrap; }
  #Header .box_1 a, #Header .box_1 .menu { font-size: 13px !important; white-space: nowrap; }

  #Footer .group_17 {
    width: 100% !important;
    height: auto !important;
    padding: 16px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* floating widgets earn no space on a phone */
  #aside-bar, .top-right-banner { display: none !important; }

  /* --- article page ------------------------------------------------- */
  #KOLDetails { flex-direction: column !important; padding: 64px 0 0 !important; }
  #KOLDetails .left { width: 100% !important; max-width: 100% !important; }
  /* sidebar recommendations: links stay in the HTML for crawlers, the
     column itself is desktop furniture */
  #KOLDetails .right { display: none !important; }

  #KOLDetails .left .w-title { padding: 24px 16px 12px !important; }
  #KOLDetails .left .w-title .title { font-size: 21px !important; line-height: 30px !important; }
  #KOLDetails .left .summary { padding: 12px 16px !important; }

  #KOLDetails .ql-container { padding: 0 !important; }
  #KOLDetails .ql-editor { padding: 12px 16px !important; }
  #KOLDetails .ql-editor img,
  #KOLDetails .ql-editor video,
  #KOLDetails .ql-editor iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  #KOLDetails .relevant-tag { padding: 0 16px; flex-wrap: wrap; }
  #KOLDetails .statement { margin: 16px; }

  /* --- archive ------------------------------------------------------ */
  .kr-wrap { padding: 32px 16px 60px !important; }
  .kr-wrap h1 { font-size: 24px !important; }
}