/* AIU responsive layer.
   The design prototypes are entirely inline styles, so the only way to adapt
   them for phones without editing 51 pages is attribute-substring selectors on
   the style attribute, with !important, inside media queries. Both the spaced
   and unspaced spellings that appear in the markup are covered. */

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
img, video { max-width: 100%; height: auto; }

/* ---------- tablets and below ---------- */
@media (max-width: 960px) {
  /* two-column article body + sidebar -> single column */
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"] { grid-template-columns: 1fr !important; }
  [style*="position:sticky"], [style*="position: sticky"] { position: static !important; }

  /* three- and four-up card grids -> two-up */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* page gutters */
  [style*="padding:48px 48px 36px"] { padding: 30px 24px 24px !important; }
  [style*="padding:48px 56px"]      { padding: 30px 24px !important; }
  [style*="padding:64px 48px 52px"] { padding: 40px 24px 32px !important; }
  [style*="padding:56px 48px 56px 96px"] { padding: 36px 24px !important; }
  [style*="padding:56px 48px 28px"] { padding: 36px 24px 20px !important; }
  [style*="padding:48px"]           { padding: 30px 24px !important; }
  [style*="padding:40px 48px 0"]    { padding: 26px 24px 0 !important; }
  [style*="padding:26px 48px"]      { padding: 22px 24px !important; }

  /* headline sizes */
  [style*="font-size:62px"], [style*="font-size: 62px"],
  [style*="font-size:54px"], [style*="font-size: 54px"],
  [style*="font-size:52px"], [style*="font-size: 52px"],
  [style*="font-size:50px"], [style*="font-size: 50px"],
  [style*="font-size:46px"], [style*="font-size: 46px"],
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 36px !important; line-height: 1.1 !important; }

  /* fixed-width panels */
  [style*="width:340px"], [style*="width: 340px"] { width: auto !important; max-width: 100% !important; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  /* EVERY multi-column grid becomes a single column. The one exception is the
     small icon+text rows (84px 1fr) which read fine at phone width. */
  [style*="grid-template-columns"]:not([style*="grid-template-columns: 84px 1fr"]):not([style*="grid-template-columns:84px 1fr"]) {
    grid-template-columns: 1fr !important;
  }

  /* fixed-width columns / panels / hard minimums that force horizontal scroll */
  [style*="width: 520px"], [style*="width:520px"],
  [style*="width: 560px"], [style*="width:560px"],
  [style*="width:380px"], [style*="width: 380px"],
  [style*="width:340px"], [style*="width: 340px"] { width: auto !important; max-width: 100% !important; }
  [style*="min-width:300px"], [style*="min-width: 300px"],
  [style*="min-width:320px"], [style*="min-width: 320px"] { min-width: 0 !important; }

  /* the header row: logo / search / links wraps instead of overflowing */
  [style*="display:flex"][style*="justify-content:space-between"],
  [style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: wrap !important; gap: 12px 18px !important; }

  /* tighter gutters */
  [style*="padding:48px 48px 36px"] { padding: 22px 16px 18px !important; }
  [style*="padding:48px"]           { padding: 22px 16px !important; }
  [style*="padding:40px 48px 0"]    { padding: 18px 16px 0 !important; }
  [style*="padding:26px 48px"]      { padding: 18px 16px !important; }
  [style*="padding:24px"]           { padding: 18px !important; }

  /* headline sizes */
  [style*="font-size:62px"], [style*="font-size: 62px"],
  [style*="font-size:54px"], [style*="font-size: 54px"],
  [style*="font-size:52px"], [style*="font-size: 52px"],
  [style*="font-size:50px"], [style*="font-size: 50px"],
  [style*="font-size:46px"], [style*="font-size: 46px"],
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 30px !important; line-height: 1.1 !important; }
  [style*="font-size:26px"]         { font-size: 22px !important; }

  /* the nav links row (Guides · Tools · Reviews …) is a no-wrap flex row ~500px
     wide - the single element that forced every page out to 544px on phones */
  [style*="display:flex"][style*="gap:26px"],
  [style*="display: flex"][style*="gap: 26px"] { flex-wrap: wrap !important; gap: 8px 16px !important; width: 100% !important; }

  /* absolutely-positioned handwritten captions ("↑ start with the calculator")
     hang off their anchor and widen the page; put them back in the flow */
  [style*="position: absolute"][style*="top: 100%"],
  [style*="position:absolute"][style*="top:100%"] { position: static !important; display: block !important; white-space: normal !important; margin: 8px 0 0 !important; }

  /* the search box is a fixed 210px custom element; let it take the row */
  aiu-search[style*="width: 210px"], aiu-search[style*="width:210px"] { width: 100% !important; flex-basis: 100% !important; }

  /* the handwritten subtitle sits beside the headline on desktop; stack it */
  [style*="align-items:baseline"][style*="flex-wrap:wrap"] { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }

  /* footer: three spans in a row -> stacked */
  [style*="justify-content:space-between"][style*="font-size:13px"] { flex-direction: column !important; gap: 6px !important; }

  /* search box shouldn't force the header wider than the phone */
  aiu-search, [style*="width:210px"] { width: 100% !important; max-width: 100% !important; }
}