/* Phone and tablet layout for the Claude Design pages.
 *
 * The design pages style everything inline and target desktop only, so these
 * overrides match on the serialized inline styles and need !important.
 * Everything lives inside max-width media queries: at 1024px and wider this
 * file changes nothing, so the desktop design is untouched.
 */

/* Tablet and below: the desktop nav no longer fits — swap it for the burger menu. */
@media (max-width: 1023px) {
  .hk-nav, .hk-signin { display: none !important; }
  .hk-burger { display: flex !important; }
  .hk-header-bar { height: 64px !important; gap: 12px !important; }
  .hk-actions { margin-left: auto; }

  /* Footer: brand block on its own row, link columns four across. */
  .hk-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 36px 24px !important; }
  .hk-footer-grid > div:first-child { grid-column: 1 / -1 !important; }

  /* Customer client library: three across, name above its tags. */
  .hk-client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hk-client-grid > * > div:first-child { flex-direction: column; gap: 8px !important; }
  .hk-client-grid > * > div:first-child > div { justify-content: flex-start !important; max-width: none !important; }
}

/* Phones and small tablets: single column, tighter gutters, smaller display type. */
@media (max-width: 760px) {
  html, body, #dc-root, #dc-prerender { overflow-x: clip; }
  img, video, iframe, canvas { max-width: 100%; }

  /* Multi-column layouts stack. Narrow fixed icon/number columns ("18px 1fr"),
     value columns ("1fr 96px") and the 7-day calendar keep their columns. */
  :where(:is(#dc-root, #dc-prerender) [style*="grid-template-columns: minmax"]:not([style*="repeat(7,"]):not([style*="fr) 96px"]):not([style*="fr) 180px"]):not([style*="fr) 52px"]):not([style*="fr) 76px"]):not([style*="1.1fr) repeat("]):not([style*="0.8fr) repeat(3,"]):not([style*="2fr 1fr 1fr"]):not([style*="1.8fr) 28px"]):not([data-committee] *)),
  :where(:is(#dc-root, #dc-prerender) [style*="grid-template-columns: repeat("]:not([style*="repeat(7,"]):not([style*="fr) 96px"]):not([style*="fr) 180px"]):not([style*="fr) 52px"]):not([style*="fr) 76px"]):not([style*="1.1fr) repeat("]):not([style*="0.8fr) repeat(3,"]):not([style*="2fr 1fr 1fr"]):not([style*="1.8fr) 28px"]):not([data-committee] *)),
  :where(:is(#dc-root, #dc-prerender) [style*="grid-template-columns: 1fr 1fr"]:not([style*="repeat(7,"]):not([style*="fr) 96px"]):not([style*="fr) 180px"]):not([style*="fr) 52px"]):not([style*="fr) 76px"]):not([style*="1.1fr) repeat("]):not([style*="0.8fr) repeat(3,"]):not([style*="2fr 1fr 1fr"]):not([style*="1.8fr) 28px"]):not([data-committee] *)),
  :where(:is(#dc-root, #dc-prerender) [style*="grid-template-columns: 2fr"]:not([style*="repeat(7,"]):not([style*="fr) 96px"]):not([style*="fr) 180px"]):not([style*="fr) 52px"]):not([style*="fr) 76px"]):not([style*="1.1fr) repeat("]):not([style*="0.8fr) repeat(3,"]):not([style*="2fr 1fr 1fr"]):not([style*="1.8fr) 28px"]):not([data-committee] *)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Stat and logo strips sit two-up rather than in one long column. */
  :where(:is(#dc-root, #dc-prerender) :is([style*="grid-template-columns: repeat(4, minmax"], [style*="grid-template-columns: repeat(5, minmax"],
    [style*="grid-template-columns: repeat(6, minmax"]):not([data-committee] *)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Comparison tables (a card of grid rows) keep their columns and scroll sideways inside the card. */
  div:has(> [style*="1.1fr) repeat("]),
  div:has(> [style*="0.8fr) repeat(3,"]),
  div:has(> [style*="2fr 1fr 1fr"]),
  div:has(> [style*="1.8fr) 28px"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [style*="1.1fr) repeat("],
  [style*="0.8fr) repeat(3,"],
  [style*="2fr 1fr 1fr"],
  [style*="1.8fr) 28px"] {
    min-width: 600px;
  }
  [style*="1.1fr) repeat(2,"] { min-width: 480px; }
  [style*="1.1fr) repeat(4,"] { min-width: 680px; }
  [style*="1.1fr) repeat(5,"] { min-width: 760px; }
  :where([style*="grid-column: span"]:not([data-committee] *)) { grid-column: auto !important; }

  /* Page containers: 20px gutters. */
  [style*="margin: 0px auto"][style*="padding:"] { padding-left: 20px !important; padding-right: 20px !important; }
  /* Section spacing: big desktop vertical padding (60–96px) comes down to 44px. */
  [style*="padding: 60px"],
  [style*="padding: 64px"],
  [style*="padding: 68px"],
  [style*="padding: 72px"],
  [style*="padding: 76px"],
  [style*="padding: 78px"],
  [style*="padding: 80px"],
  [style*="padding: 84px"],
  [style*="padding: 88px"],
  [style*="padding: 92px"],
  [style*="padding: 96px"] {
    padding-top: 44px !important;
  }
  [style*="padding: 60px 32px;"],
  [style*="padding: 64px 32px;"],
  [style*="padding: 68px 32px;"],
  [style*="padding: 72px 32px;"],
  [style*="padding: 76px 32px;"],
  [style*="padding: 78px 32px;"],
  [style*="padding: 80px 32px;"],
  [style*="padding: 84px 32px;"],
  [style*="padding: 88px 32px;"],
  [style*="padding: 92px 32px;"],
  [style*="padding: 96px 32px;"],
  [style*="32px 60px;"],
  [style*="32px 64px;"],
  [style*="32px 68px;"],
  [style*="32px 72px;"],
  [style*="32px 76px;"],
  [style*="32px 78px;"],
  [style*="32px 80px;"],
  [style*="32px 84px;"],
  [style*="32px 88px;"],
  [style*="32px 92px;"],
  [style*="32px 96px;"] {
    padding-bottom: 44px !important;
  }

  /* Display type, stepped down for phones. */
  [style*="font-size: 80px;"], [style*="font-size: 72px;"], [style*="font-size: 68px;"],
  [style*="font-size: 66px;"], [style*="font-size: 64px;"], [style*="font-size: 62px;"],
  [style*="font-size: 58px;"] { font-size: 36px !important; }
  [style*="font-size: 60px;"], [style*="font-size: 56px;"], [style*="font-size: 54px;"],
  [style*="font-size: 52px;"], [style*="font-size: 50px;"], [style*="font-size: 48px;"],
  [style*="font-size: 46px;"] { font-size: 30px !important; }
  [style*="font-size: 44px;"], [style*="font-size: 42px;"], [style*="font-size: 40px;"],
  [style*="font-size: 38px;"], [style*="font-size: 36px;"] { font-size: 27px !important; }
  [style*="font-size: 34px;"], [style*="font-size: 32px;"], [style*="font-size: 30px;"] { font-size: 23px !important; }
  [style*="font-size: 28px;"] { font-size: 22px !important; }
  [style*="font-size: 27px;"], [style*="font-size: 26px;"] { font-size: 21px !important; }
  [style*="font-size: 24px;"] { font-size: 20px !important; }
  /* Roomy desktop cards (quotes, CTAs) get phone padding. */
  [style*="padding: 40px 44px"], [style*="padding: 44px 40px"], [style*="padding: 44px 48px"], [style*="padding: 56px 56px"] { padding: 26px 22px !important; }

  /* Long words / URLs never force the page wider than the screen. */
  #dc-root p, #dc-root h1, #dc-root h2, #dc-root h3, #dc-root li, #dc-root td { overflow-wrap: anywhere; }
  table { display: block; max-width: 100%; overflow-x: auto; }

  /* Waterfall verification card stack: cards are absolutely stacked, so reserve their phone height. */
  .hk-card-stack { min-height: 540px !important; padding-right: 28px !important; }

  /* Buying-committee org chart: keep the desktop tree (excluded from the stacking rules above), scroll it sideways. */
  [data-committee] { overflow-x: auto !important; padding: 28px 20px 32px !important; }
  [data-committee] > * { min-width: 640px; }

  .hk-client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .hk-client-grid > * { padding: 16px !important; }
  .hk-client-grid [style*="font-size: 34px;"] { font-size: 22px !important; }

  /* Footer: link columns in pairs. */
  .hk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
}