/* Deterministic mobile layout rules. Typography is defined in CSS and is never
 * calculated from rendered values after first paint. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 782px) {
  html,
  body {
    overflow-x: hidden;
  }

  body,
  body * {
    box-sizing: border-box;
  }

  /* Prevent text from forcing cards/sections wider than the viewport. */
  body :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,figcaption,blockquote,td,th,a,button,input,select,textarea) {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Text-bearing controls expand vertically when their copy wraps. */
  body :where(button,.wp-block-button,.wp-block-button__link,input,select,textarea) {
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  body :where(input,select,textarea) {
    min-height: 3.25em;
    padding-top: .72em !important;
    padding-bottom: .72em !important;
  }

  body textarea {
    min-height: 8em;
  }

  body :where(.wp-block-button__link,button,[class*="button"],[class*="Button"]) {
    min-height: 2.9em;
    padding-top: .72em !important;
    padding-bottom: .72em !important;
  }

  /* Common vivoVerse cards / boxes / tiles should size from their content on mobile. */
  body :where(
    [class*="card"],
    [class*="Card"],
    [class*="box"],
    [class*="Box"],
    [class*="tile"],
    [class*="Tile"],
    [class*="pill"],
    [class*="Pill"],
    [class*="panel"],
    [class*="Panel"],
    [class*="stat"],
    [class*="Stat"],
    .wp-block-column
  ) {
    height: auto !important;
    max-height: none !important;
  }

  /* Let flex/grid children shrink to the viewport while their height grows. */
  body :where(.wp-block-group,.wp-block-columns,.wp-block-column,[class*="grid"],[class*="Grid"]) > * {
    min-width: 0;
  }

  /* Avoid one-line labels and buttons overflowing narrow viewports. */
  body :where(.wp-block-button__link,button,label,legend,[class*="title"],[class*="Title"],[class*="label"],[class*="Label"]) {
    white-space: normal !important;
  }

  /* Homepage — Make Faster, Informed Decisions.
     Give the icons and copy breathing room and let each frosted card
     size naturally around its contents. */
  body.home .vv-home-decisions .vv-home-decision-grid {
    gap: 14px !important;
  }

  body.home .vv-home-decisions .vv-home-decision-card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 18px !important;
    align-items: center !important;
  }

  body.home .vv-home-decisions .vv-home-decision-icon {
    width: 72px !important;
    max-width: 72px !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 2px !important;
    margin: 0 !important;
  }

  body.home .vv-home-decisions .vv-home-decision-icon img,
  body.home .vv-home-decisions .vv-home-decision-icon svg {
    width: 100% !important;
    max-width: 68px !important;
    height: 100% !important;
    max-height: 64px !important;
    object-fit: contain !important;
  }

  body.home .vv-home-decisions .vv-home-decisions-subtitle {
    margin-bottom: 20px !important;
    line-height: 1.45 !important;
  }

  body.home .vv-home-decisions .vv-home-decision-copy {
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  /* Homepage — From Chemical Exposure to Toxicity Insights.
     Keep artwork and card containers balanced with the mobile copy. */
  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow) {
    overflow: hidden !important;
  }

  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow)
    :where([class*="card"], [class*="step"], .wp-block-column) {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow)
    :where(figure, .wp-block-image, [class*="image"], [class*="media"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow) img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow) p {
    line-height: 1.45 !important;
  }

  body .vv-screen-page-v368 .vv-screen-overview-copy-v370 > p {
    font-size: 20.8px !important;
    line-height: 28.704px !important;
  }

  body .vv-screen-page-v368 .vv-screen-hero-v368 h1 {
    display: table !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 42px !important;
    line-height: 1.04 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Give the workflow artwork substantially more horizontal room on phones.
     Cards containing an image become a left-image/right-caption grid so the
     caption can wrap more tightly while the illustration grows. */
  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow)
    :where([class*="card"], [class*="step"], .wp-block-column):has(img) {
    display: grid !important;
    grid-template-columns: minmax(145px, 48%) minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: center !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow)
    :where([class*="card"], [class*="step"], .wp-block-column):has(img)
    :where(figure, .wp-block-image, [class*="image"], [class*="media"]) {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 180px !important;
    margin: 0 auto !important;
  }

  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow)
    :where([class*="card"], [class*="step"], .wp-block-column):has(img) img {
    width: 100% !important;
    max-width: 180px !important;
    min-height: 115px !important;
    object-fit: contain !important;
  }

  body.home :is(.vv-dart-workflow, .vv-home-vivodart-workflow)
    :where([class*="card"], [class*="step"], .wp-block-column):has(img) p {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}