/* Phase 31.6 — site-wide mobile/tablet visual balance QA
   Safe responsive constraints only; desktop composition remains unchanged. */

/* Prevent media or long content from forcing a page wider than the viewport. */
main img, main svg, main video, main iframe{max-width:100%;}
main figure{max-width:100%;}
main table{max-width:100%;}
main .card, main [class*="grid"] > *, main [class*="split"] > *{min-width:0;}
.article, .article-layout, .service-reading{min-width:0;}
.article p, .article li, .service-reading p, .service-reading li{overflow-wrap:anywhere;}

@media (min-width:621px) and (max-width:980px){
  /* Keep service hero media visually attached to the copy at tablet widths. */
  .service-hero .service-hero-grid{align-items:center;}
  .service-hero .service-visual{width:100%;max-width:560px;justify-self:center;}
  .service-page-hero + .section .split > div:first-child{width:100%;max-width:520px;justify-self:center;}

  /* Center the custom service graphics when their text column stacks. */
  .va3-desk,.lseo2-signal-board,.wp12-device-stage,.pd14-board,.pd14-canvas,.pd14-format-stage,
  .da15-dashboard,.aw16-canvas,.gb18-brandboard,.gb18-system-board,.gb18-format-stage,
  .mk19-board,.mk19-cycle,.wm-panel,.wm-visual{
    width:100%;max-width:680px;margin-left:auto;margin-right:auto;
  }

  /* Blog/article media should read as one balanced content column on tablet. */
  .article-layout .article,.kv-longform-post .kv-longform-body{margin-left:auto;margin-right:auto;}
  .article .kv-article-visual,.article .lc24-visual{max-width:820px;margin-left:auto;margin-right:auto;}
  .article .kv-article-visual img,.article .lc24-visual img{display:block;margin-left:auto;margin-right:auto;}
}

@media (max-width:620px){
  /* Service hero rhythm: preserve text -> CTA -> image, but keep the image balanced. */
  .service-hero .service-hero-grid{gap:26px;}
  .service-hero .service-visual{width:100%;max-width:560px;margin-left:auto;margin-right:auto;}
  .service-hero .service-visual img{display:block;width:100%;height:100%;}
  .service-hero .hero-actions{width:100%;}
  .service-hero .hero-actions .btn{max-width:100%;}

  /* Remove desktop-only visual offsets/tilts that can make stacked cards look uneven. */
  .service-feature,.va3-desk,.va3-handoff-panels,.lseo2-signal-board,.wp12-device-stage,
  .pd14-board,.pd14-canvas,.pd14-format-stage,.da15-dashboard,.aw16-canvas,
  .gb18-brandboard,.gb18-system-board,.gb18-format-stage,.mk19-board,.mk19-cycle,
  .wm-panel,.wm-visual{
    max-width:100%;margin-left:auto;margin-right:auto;transform:none;
  }

  /* Give diagram-style graphics predictable mobile breathing room. */
  .va3-desk,.lseo2-signal-board,.wp12-device-stage,.pd14-board,.pd14-format-stage,
  .da15-dashboard,.aw16-canvas,.gb18-brandboard,.gb18-system-board,.gb18-format-stage,
  .mk19-board,.wm-panel,.wm-visual{width:100%;}

  /* Article graphics and captions: consistent width, radius and alignment. */
  .article .kv-article-visual,.article .lc24-visual{width:100%;max-width:100%;margin:24px auto 28px;}
  .article .kv-article-visual img,.article .lc24-visual img,
  .kv-longform-post .kv-featured-wrap img{display:block;width:100%;max-width:100%;height:auto;margin-left:auto;margin-right:auto;}
  .article .kv-article-visual figcaption,.article .lc24-visual figcaption{padding:0 2px;text-align:left;}

  /* Embedded media and wide data stay inside the reading column. */
  .article iframe,.article video,.service-reading iframe,.service-reading video{width:100%;height:auto;aspect-ratio:16/9;}
  .article table,.service-reading table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Keep paired card systems from carrying desktop stagger into a one-column stack. */
  .service-feature-grid > *, .cards > *, .blog-grid > *{transform:none;}
}