/* CareInsight — mobile hardening (redesign port).
   Original handover rules were scoped to #dc-root and loaded via a broken
   protocol-relative URL, so they never applied. Re-scoped to the redesign DOM:
   page content lives in <main id="ci-page-content">; the footer renders outside
   it as <footer data-dc-tpl>. Loaded last so these win over inline styles. */

@media (max-width: 700px) {

  /* section gutters: 44px is too tight a squeeze on a 390px screen */
  #ci-page-content section > div,
  #ci-page-content section > div > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* label / description rows stack instead of crushing the description */
  #ci-page-content [style*="grid-template-columns: 200px"],
  #ci-page-content [style*="grid-template-columns: 220px"],
  #ci-page-content [style*="grid-template-columns: 180px"],
  #ci-page-content [style*="grid-template-columns: 240px"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* multi-column card grids -> single column */
  #ci-page-content [style*="grid-template-columns: repeat(3"],
  #ci-page-content [style*="grid-template-columns: repeat(4"],
  #ci-page-content .two-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* footer: 4 uneven columns -> 2 (footer lives outside <main>) */
  footer[data-dc-tpl] [style*="grid-template-columns: 1.5fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
  }

  /* footer side padding matches content gutters */
  footer[data-dc-tpl] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* stat pairs inside panels */
  #ci-page-content [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* display type */
  #ci-page-content h1 { font-size: 34px !important; line-height: 1.06 !important; }
  #ci-page-content h2 { font-size: 27px !important; line-height: 1.14 !important; }
  #ci-page-content h3 { font-size: 21px !important; }

  /* oversized editorial stats */
  #ci-page-content [style*="font-size: 88px"],
  #ci-page-content [style*="font-size: 76px"],
  #ci-page-content [style*="font-size: 72px"] { font-size: 52px !important; }

  /* body copy floor — nothing under 13px on a phone */
  #ci-page-content [style*="font-size: 11px"],
  #ci-page-content [style*="font-size: 11.5px"],
  #ci-page-content [style*="font-size: 12px"],
  #ci-page-content [style*="font-size: 12.5px"] { font-size: 13px !important; }
  #ci-page-content .card__idx,
  #ci-page-content .card__tag,
  #ci-page-content .card__kicker,
  #ci-page-content .mono { font-size: 13px !important; }

  /* tap targets */
  #ci-page-content button { min-height: 44px; }

  /* accordion rows: let the category tag wrap under the name */
  #ci-page-content button[style*="display: flex"] { flex-wrap: wrap !important; }

  /* keep media and panels inside the screen — !important beats inline width:Npx.
     Decorative watermarks carry inline width:420px/1180px; cap them and keep their
     aspect ratio so they stay inside their overflow:hidden parents. */
  #ci-page-content img:not([aria-hidden="true"]):not([style*="position: absolute"]), #ci-page-content video:not([style*="position: absolute"]) {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Absolutely-positioned hero media stretch to fill their hero (inset:0 +
     height:100%) — forcing height:auto here made them size by intrinsic ratio
     (~219px) and left empty space below. Keep the width cap but let height fill. */
  #ci-page-content video[style*="position: absolute"], #ci-page-content img[style*="position: absolute"] {
    max-width: none !important;
  }
  /* iframes have no intrinsic ratio — height:auto would collapse them (this is
     what crushed the agent-library board to 150px). Cap width only; height is
     managed by site.js auto-fit. */
  #ci-page-content iframe { max-width: 100% !important; }

  /* any element with an inline fixed pixel width wider than a phone screen:
     clamp it to the viewport instead of letting it clip or scroll. */
  #ci-page-content [style*="width: 546px"], #ci-page-content [style*="width:546px"],
  #ci-page-content [style*="width: 1180px"], #ci-page-content [style*="width:1180px"],
  #ci-page-content [style*="width: 620px"], #ci-page-content [style*="width:620px"],
  #ci-page-content [style*="width: 720px"], #ci-page-content [style*="width:720px"],
  #ci-page-content [style*="width: 680px"], #ci-page-content [style*="width:680px"],
  #ci-page-content [style*="width: 760px"], #ci-page-content [style*="width:760px"],
  #ci-page-content [style*="width: 900px"], #ci-page-content [style*="width:900px"],
  #ci-page-content [style*="width: 1080px"], #ci-page-content [style*="width:1080px"],
  #ci-page-content [style*="width: 1200px"], #ci-page-content [style*="width:1200px"],
  #ci-page-content [style*="width: 1240px"], #ci-page-content [style*="width:1240px"],
  #ci-page-content [style*="width: 1400px"], #ci-page-content [style*="width:1400px"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Product Suite: the desktop section header band duplicates the new mobile
     accordion's own band — hide the desktop one on phones. It is the direct
     child of #products before the Column Accordion host. */
  #products > div[data-dc-tpl="98"] { display: none !important; }

  /* Product accordion: the open color panel must bleed to the screen edges.
     The generic section-gutter rule (section > div padding) compounds through
     the .sc-host wrapper + .acc + .acc__list and insets the color field by
     ~48px a side, reading as a rounded bevel. Zero that chain out; the
     accordion's own styles carry the padding the copy needs. */
  #products .sc-host { padding-left: 0 !important; padding-right: 0 !important; }
  #ca-section .acc, #ca-section .acc__list, #ca-section .acc__item,
  #ca-section .acc__panel, #ca-section .acc__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* decorative divider labels ("Four products · pick a department"): the nowrap
     mono text + flex rule lines overflow on phones — let the text wrap/shrink
     and drop the flanking gradient rules. */
  #ci-page-content span[style*="white-space: nowrap"][style*="letter-spacing"] {
    white-space: normal !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }
  #ci-page-content div[style*="display: flex"] > span[style*="linear-gradient"][style*="flex: 1 1 0%"] {
    display: none !important;
  }
  /* Platform Layer (mobile): Engine card first (Brain/Engine swapped), and the
     section heading scaled up ~4px — clamp() bottomed out too small on phones. */
  #platforms .ci-plat-grid { display: flex !important; flex-direction: column !important; }
  #platforms .ci-plat-engine { order: -1; }
  #platforms .ci-plat-h2 { font-size: 36px !important; }

  /* Results table: 3 columns overflow a phone (metric col is nowrap, 18px
     padding, wide mono headers -> table ~539px on a 390px screen, and the
     wrapper clips it). Tighten padding + fonts and let the metric wrap so all
     three columns fit without horizontal scrolling. */
  #ci-page-content table { table-layout: fixed !important; width: 100% !important; }
  #ci-page-content table th, #ci-page-content table td {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  #ci-page-content table th:nth-child(1), #ci-page-content table td:nth-child(1) { width: 30% !important; }
  #ci-page-content table th:nth-child(2), #ci-page-content table td:nth-child(2) { width: 28% !important; }
  #ci-page-content table th:nth-child(3), #ci-page-content table td:nth-child(3) { width: 42% !important; }
  #ci-page-content table th, #ci-page-content table td {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  #ci-page-content table th { font-size: 10.5px !important; letter-spacing: 0.06em !important; }
  #ci-page-content table td { font-size: 14px !important; line-height: 1.45 !important; }
  #ci-page-content table td[style*="white-space: nowrap"] { white-space: normal !important; }
}

@media (max-width: 420px) {
  #ci-page-content h1 { font-size: 30px !important; }
  #ci-page-content section > div, #ci-page-content section > div > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  footer[data-dc-tpl] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}