/*
 * Deep Water mobile fixes. Added 2026-09-15 after deployment, approved by Michael Crafton.
 * Phones and small tablets only (under 768px). Desktop is unaffected. No copy or colour changes.
 * These rules also belong in the repository source; once an export carries them, delete this
 * file and its <link> tag in each page.
 * !important is needed where the export sets the property in an inline style attribute.
 */
@media (max-width: 767px) {

  /* 1. Footer links: 18px tall with a 12px gap is too small to tap reliably.
        Each link becomes a 44px tap target; the gap moves into the padding. */
  #dwFooter [data-dwfoot-cols] a {
    display: block;
    padding-block: 13px;
  }
  #dwFooter [data-dwfoot-cols] div:has(> a) {
    gap: 0 !important;
  }

  /* 2. Mobile menu button (built by buildMobNav): 30px tall, raised to 44px. */
  #dwMobBtn {
    min-height: 44px !important;
  }

  /* 3. AI & Automation text input is 13px, so iOS Safari zooms the page on focus. */
  #wiwInput {
    font-size: 16px !important;
  }

  /* 4. Home hero: the depth readout (left) and "Scroll to descend" (centred) share a baseline
        and overlap at phone widths. Lift the scroll cue above the readout. */
  #heroMeter + div {
    bottom: 64px !important;
  }

  /* 5. Home "operators" stats: a wrapping flex row leaves the fourth stat alone on its own line.
        Lay the four stats out as a 2 x 2 grid. Selected structurally because the reveal
        script rewrites the inline style attribute. */
  #operators h2 + p + div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px !important;
  }

  /* 6. Home second hero state ("We find the hidden value..."): the text block is centred, and
        with the two buttons stacked its bottom runs under the fixed Ask bar (bottom:15vh below
        560px). Raise the block slightly and tighten its vertical spacing so the buttons clear
        the bar down to a 360 x 600 viewport. */
  #heroResolve {
    top: 45% !important;
  }
  #heroResolve > p {
    margin-top: 16px !important;
  }
  #heroResolve > div:last-child {
    margin-top: 24px !important;
    gap: 12px !important;
  }
  #heroResolve > div:last-child > a {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* ---- Second pass, 2026-09-16: full scan of all twelve pages at 360 x 740 ---- */
@media (max-width: 767px) {

  /* 7. Single-column grids collapsed with `1fr` cannot shrink below their widest child
        (form selects size to their longest option; 404 depth labels are nowrap), so the
        column is wider than the screen: 346px on the Request Consideration section of eight
        pages and the Contact hero (clipped text on Contact), 368px on the 404 sonar grid. */
  [data-gate-grid], [data-sonar-grid], [data-hero-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-gate-grid] select, [data-gate-grid] input, [data-gate-grid] textarea,
  [data-hero-grid] select, [data-hero-grid] input, [data-hero-grid] textarea {
    max-width: 100%;
    min-width: 0;
  }

  /* 8. Method step rows (number | title | one-line description) stay three columns on phones,
        squeezing the description to 39-102px. Put the description on its own line under the
        title. FAQ rows share [data-toc-head] but have no description, so they are excluded. */
  [data-toc-head]:has([data-toc-one]) {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }
  [data-toc-head] > span:last-child:has([data-toc-one]) {
    grid-column: 2;
    justify-content: space-between !important;
  }
  [data-toc-one] {
    text-align: left !important;
    max-width: none !important;
  }

  /* 9. Rows that wrap and strand their last item, as the Home stats did. */
  #gap div:has(> div > #evgAs) {                       /* Home value gap figures: 3 + 1 -> 2 x 2 */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px !important;
  }
  #methodology [style*="margin-top:14px;display:flex;gap:12px;flex-wrap:wrap"]:has(> span:nth-child(4)) {
    display: grid !important;                          /* About four dimensions: 3 + 1 -> 2 x 2 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }
  #methodology [style*="margin-top:14px;display:flex;gap:12px;flex-wrap:wrap"]:has(> span:nth-child(4)) > span {
    text-align: center;
  }
  div:has(> div > #rwCashOut) {                        /* Turnaround runway figures: 2 + 1 -> 3 across */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
    align-items: end;
  }
  #tools div:has(> button[data-tool-tab]) {            /* AI tool tabs: 2 + 1 -> 3 equal tabs */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px !important;
  }
  #tools button[data-tool-tab] {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px !important;
    padding: 12px 6px !important;
    text-align: center;
  }

  /* 10. Service-page hero corner labels (depth left, caption right) share bottom:88px and
         overlap on narrow phones (27px on Branding, 18px on Leadership). Drop the depth label. */
  #heroZone [style*="left:clamp(20px,4vw,44px);bottom:88px"] {
    bottom: 62px !important;
  }

  /* 11. 404 discipline list: names truncated with an ellipsis once the grid fits. Let them wrap. */
  #sonar a span[style*="text-overflow:ellipsis"] {
    white-space: normal !important;
    overflow: visible !important;
  }

  /* 12. Headings that leave one short word alone on the last line. */
  h1, h2, h3, [data-hero-h1] {
    text-wrap: balance;
  }
}

@media (max-width: 700px) {
  /* 13. Card grids with no phone rule on two pages, leaving 151px-wide cards up to 492px tall:
         Systems [data-bnd-grid] (the other three pages already have this rule) and
         AI & Automation [data-travels-grid]. */
  [data-bnd-grid], [data-travels-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}