/* dr-responsive.css — mobile/tablet overrides for the inline-styled Deeprouter pages.
   Pages use inline styles (no classes). The DC runtime renders them through React, which
   NORMALIZES inline styles: spaces after colons/commas and `0` -> `0px`
   (e.g. "grid-template-columns: repeat(3, 1fr)", "position: sticky", "padding: 0px 32px").
   These attribute selectors therefore match the NORMALIZED form. !important beats inline. */

/* ---------- Tablet & below ---------- */
@media (max-width: 880px){
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Hero / large side-by-side flex rows -> stack vertically */
  [style*="display: flex"][style*="gap: 48px"]{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Hero stat row wraps instead of overflowing */
  [style*="display: flex"][style*="gap: 38px"]{ flex-wrap: wrap !important; gap: 22px !important; }

  /* Fixed-width hero routing diagram -> scale the WHOLE subtree uniformly with zoom so the
     SVG paths and the absolutely-positioned model pills stay aligned (resizing the box alone
     distorts the SVG and detaches the pills). Auto margins center it in the stacked column. */
  [style*="width: 560px"][style*="height: 460px"]{
    zoom: 0.78 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Card grids -> single column */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"]{ grid-template-columns: 1fr !important; }

  /* Dense stat / cert / provider grids -> two columns */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"]{ grid-template-columns: repeat(2, 1fr) !important; }

  /* Sidebar layouts (Docs / Privacy / Models) -> stack */
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 230px 1fr"],
  [style*="grid-template-columns: 228px 1fr"]{ grid-template-columns: 1fr !important; gap: 22px !important; }

  /* A 1fr track won't shrink below its content's min-width, so wide code blocks blow the
     column out past the viewport. Let stacked grid children shrink and code scroll inside. */
  [style*="grid-template-columns: 240px 1fr"] > *,
  [style*="grid-template-columns: 230px 1fr"] > *,
  [style*="grid-template-columns: 228px 1fr"] > *{ min-width: 0 !important; }
  pre{ max-width: 100% !important; overflow-x: auto !important; }

  /* Any non-shrinking flex item (fixed-width code/terminal/form/side cards like Enterprise
     "deploy.sh" & "Talk to sales", SOC2 "Request report") can't exceed the viewport.
     Small fixed items (icons, avatars, the 44px burger) are already < 100% so are unaffected.
     Code/inputs inside reflow via the pre + input rules below. */
  [style*="flex: 0 0 auto"]{ max-width: 100% !important; }

  /* Two-column "text + form/card" rows that use a 40px gap (SOC2 request, contact rows)
     -> allow them to wrap so the side card drops below the copy instead of overflowing. */
  [style*="display: flex"][style*="gap: 40px"]{ flex-wrap: wrap !important; }

  /* Inline email-subscribe rows -> let the input shrink so the row never overflows. */
  [style*="display: flex"][style*="gap: 10px"][style*="flex: 0 0 auto"] > input{ flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }

  /* Un-stick tall side panels once stacked so they don't eat the viewport */
  [style*="position: sticky"][style*="100vh"]{
    position: static !important;
    height: auto !important;
    max-height: none !important;
    border-right: none !important;
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Footer 4-col -> 2-col */
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"]{ grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* Reset the nav logo's desktop centering nudge */
  [style*="margin-left: 28px"]{ margin-left: 0 !important; }

  /* Auth pages (Sign up / Sign in): two-column split -> single column.
     Hide the marketing aside (the panel with the left border) and let the form fill width. */
  [style*="min-height: 100vh"][style*="display: flex"][style*="overflow: hidden"]{ overflow: visible !important; }
  [style*="background: var(--dr-panel)"][style*="border-left"]{ display: none !important; }
  [style*="min-height: 100vh"][style*="display: flex"][style*="overflow: hidden"] > [style*="flex: 1"]{
    padding-left: 22px !important; padding-right: 22px !important;
  }

  /* Scale down oversized display headings */
  h1{ font-size: 40px !important; line-height: 1.08 !important; }
  h2{ font-size: 30px !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 560px){
  h1{ font-size: 32px !important; }
  h2{ font-size: 25px !important; }

  /* Footer: brand on top (full width), the three link groups in a tight 3-col row
     so it's compact instead of one very long single column. */
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"]{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px 14px !important;
  }
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] > div:first-child{
    grid-column: 1 / -1 !important;
  }
  /* shrink the footer link lists a touch so longer labels never wrap */
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] [style*="flex-direction: column"]{
    font-size: 13px !important;
    gap: 9px !important;
  }

  /* Models "Sort by" row: on phones keep it a single tidy line that scrolls horizontally
     instead of wrapping ("Name" was dropping to its own line and looked broken). */
  [style*="align-items: center"][style*="gap: 8px"][style*="flex-wrap: wrap"]{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  /* Tighten common horizontal section padding (normalized: "0px 32px") */
  [style*="padding: 0px 32px"]{ padding-left: 18px !important; padding-right: 18px !important; }

  /* CTA button pairs -> stack vertically, comfortably sized, so labels stop wrapping
     into 3-4 lines in narrow side-by-side pills. Covers the centered final CTA and the
     left-aligned hero CTA. */
  [style*="gap: 14px"][style*="justify-content: center"],
  [style*="display: flex"][style*="gap: 14px"][style*="margin-bottom: 42px"]{
    flex-direction: column !important;
    align-items: center !important;
  }
  [style*="gap: 14px"][style*="justify-content: center"] > a,
  [style*="display: flex"][style*="gap: 14px"][style*="margin-bottom: 42px"] > a{
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }

  /* Routing diagram a touch smaller on phones */
  [style*="width: 560px"][style*="height: 460px"]{ zoom: 0.6 !important; }
}