/* responsive.css — tablet and phone layout for Going Concern.
 *
 * Every page is styled with React inline styles, which have no media queries.
 * These rules override them with !important. Most selectors match the
 * serialized inline style string (e.g. [style*="grid-template-columns"]);
 * the shared chrome (utility bar, nav, footer) uses gc-* class hooks instead.
 * If you rename a style value in the JSX, re-check the matching rule here.
 */

#root { overflow-x: clip; }

/* ---------------------------------------------------------------------------
 * ≤ 1100px — the three-column reading layouts (left rail · text · right rail)
 * no longer fit. Drop the left rail, keep the text column, put the right
 * rail under the text.
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  [style*="grid-template-columns: 1fr 720px 1fr"],
  [style*="grid-template-columns: 1fr 760px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  [style*="grid-template-columns: 1fr 720px 1fr"] > :first-child,
  [style*="grid-template-columns: 1fr 760px 1fr"] > :first-child {
    display: none !important;
  }
}

/* Pricing: the 96px price would push the three cards wider than the screen. */
@media (max-width: 1100px) {
  [style*="font-size: 96px"] { font-size: 64px !important; letter-spacing: -0.04em !important; }
  [style*="display: flex; align-items: baseline; gap: 8px"] { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
 * ≤ 900px — tablets: two-column heroes stack, four-up strips go two-up,
 * big display type steps down one notch.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .gc-util > :not(:first-child) { display: none !important; }
  .gc-logo-sub { display: none !important; }
  .gc-nav-links > a { white-space: nowrap; }

  [style*="fr 1fr;"], [style*="grid-template-columns: 1fr 1.5fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="fr 1fr;"] > [style*="border-right: 1.5px"],
  [style*="grid-template-columns: 1fr 1.5fr"] > [style*="border-right: 1.5px"] {
    border-right-width: 0 !important;
    border-bottom: 1.5px solid !important;
  }

  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"] > :nth-child(-n+2) { border-bottom: 1.5px solid; }
  [style*="grid-template-columns: repeat(4, 1fr)"] > :nth-child(2n) { border-right-width: 0 !important; }

  [style*="font-size: 156px"], [style*="font-size: 124px"],
  [style*="font-size: 120px"], [style*="font-size: 110px"] {
    font-size: 84px !important; letter-spacing: -0.04em !important;
  }
  [style*="font-size: 96px"] { font-size: 52px !important; }
}

/* ---------------------------------------------------------------------------
 * ≤ 760px — phones.
 * ------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* --- Chrome: utility bar, nav, footer ---------------------------------- */
  .gc-util { padding: 8px 16px !important; letter-spacing: 1px !important; }
  .gc-util > :not(:first-child) { display: none !important; }

  .gc-nav { flex-wrap: wrap; gap: 14px; padding: 14px 16px !important; }
  .gc-logo-sub { display: none !important; }
  .gc-nav-links { flex-wrap: wrap; gap: 6px !important; width: 100%; }
  .gc-nav-links > a {
    padding: 7px 9px !important; font-size: 11px !important; letter-spacing: 1px !important;
  }

  .gc-foot-bar { flex-wrap: wrap; gap: 6px 16px; }

  /* --- Gutters and section spacing -------------------------------------- */
  [style*="px 36px"], [style*="px 40px"] {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  [style*="padding: 56px"], [style*="padding: 64px"], [style*="padding: 72px"],
  [style*="padding: 80px"], [style*="padding: 88px"] {
    padding-top: 40px !important; padding-bottom: 40px !important;
  }
  [style*="margin: 40px -20px"] { margin-left: 0 !important; margin-right: 0 !important; }
  [style*="gap: 48px"] { gap: 24px !important; }

  /* --- Grids stack into one column --------------------------------------- */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns"] > * { min-width: 0; }
  /* a vertical divider becomes a horizontal one once cells stack */
  [style*="grid-template-columns"] > [style*="border-right: 1.5px"] {
    border-right-width: 0 !important;
    border-bottom: 1.5px solid !important;
  }

  /* Lesson tables: number on the left, everything else stacked beside it. */
  [style*="grid-template-columns: 90px 1.2fr 2.2fr 100px 120px"] {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    row-gap: 6px !important; padding: 16px !important;
  }
  [style*="grid-template-columns: 90px 1.2fr 2.2fr 100px 120px"] > :nth-child(n+2) {
    grid-column: 2; text-align: left !important;
  }
  div[style*="grid-template-columns: 90px 1.2fr 2.2fr 100px 120px"] { display: none !important; }

  /* Narrow label + content rows keep their label column. */
  [style*="grid-template-columns: 70px 1fr"],
  [style*="grid-template-columns: 60px 1fr 140px"] {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns: 70px 1fr 220px"] > :nth-child(3),
  [style*="grid-template-columns: 60px 1fr 140px"] > :nth-child(3) { grid-column: 2; }
  /* Who · logic · number rows: who on its own line, then logic beside the number. */
  [style*="grid-template-columns: 110px 1fr auto"] {
    grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 6px !important;
  }
  [style*="grid-template-columns: 110px 1fr auto"] > :first-child { grid-column: 1 / -1; }
  [style*="grid-template-columns: 120px repeat(3, 1fr)"] {
    grid-template-columns: 76px repeat(3, minmax(0, 1fr)) !important;
    font-size: 11px !important;
  }

  /* --- Display type ------------------------------------------------------ */
  /* Desktop headings run at 0.86–0.95 line-height; at phone sizes the
     highlighted words would overlap the line above. */
  h1, h2 { line-height: 1.04 !important; }
  [style*="font-size: 156px"], [style*="font-size: 124px"], [style*="font-size: 120px"],
  [style*="font-size: 110px"], [style*="font-size: 102px"] {
    font-size: 52px !important; letter-spacing: -0.04em !important;
  }
  [style*="font-size: 96px"], [style*="font-size: 92px"], [style*="font-size: 90px"],
  [style*="font-size: 88px"], [style*="font-size: 84px"] {
    font-size: 44px !important; letter-spacing: -0.035em !important;
  }
  [style*="font-size: 72px"] { font-size: 40px !important; letter-spacing: -0.03em !important; }
  [style*="font-size: 64px"], [style*="font-size: 60px"] {
    font-size: 38px !important; letter-spacing: -0.03em !important;
  }
  [style*="font-size: 56px"], [style*="font-size: 52px"] {
    font-size: 34px !important; letter-spacing: -0.03em !important;
  }
  [style*="font-size: 44px"] { font-size: 30px !important; }

  /* --- Section headers: heading + side note stack instead of squeezing ---- */
  [style*="justify-content: space-between; align-items: end"] {
    flex-direction: column; align-items: flex-start !important; gap: 18px;
  }
  [style*="justify-content: space-between; align-items: end"] > * { text-align: left !important; }

  /* --- Fixed card heights only make sense side by side ------------------- */
  [style*="min-height: 220px"], [style*="min-height: 230px"], [style*="min-height: 240px"],
  [style*="min-height: 280px"], [style*="min-height: 320px"], [style*="min-height: 420px"] {
    min-height: 0 !important;
  }
  [style*="min-height: 220px"] > [style*="justify-content: space-between"],
  [style*="min-height: 230px"][style*="justify-content: space-between"],
  [style*="min-height: 220px"][style*="justify-content: space-between"] { gap: 18px; }

  /* --- Landing "mismatch" bars: labels must fit the narrower bar ---------- */
  [style*="white-space: nowrap; overflow: hidden"] {
    font-size: 10px !important; letter-spacing: 0.5px !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }

  /* --- Small stat strips stay side by side ------------------------------- */
  .gc-keep-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .gc-keep-cols > [style*="border-right: 1.5px"] {
    border-right-width: 1.5px !important; border-bottom: none !important;
  }
  .gc-keep-cols > * { padding: 12px 10px !important; }

  /* --- Tools filter bar ---------------------------------------------------- */
  .gc-filter-bar { flex-wrap: wrap; gap: 12px; }
  .gc-filters { flex-wrap: wrap; gap: 6px !important; }
  .gc-filters > button { white-space: nowrap; padding: 7px 10px !important; }

  /* --- Meta rows of short items wrap instead of squeezing ------------------ */
  [style*="display: flex; gap: 24px"] { flex-wrap: wrap; gap: 6px 14px !important; }

  /* --- Lesson share buttons ------------------------------------------------ */
  button[style*="padding: 6px 12px"] { white-space: nowrap; padding: 6px 9px !important; }

  /* --- One-off rows -------------------------------------------------------- */
  #cta { flex-direction: column; }
  #cta > a { text-align: center; }
  #cta > a + a { border-left: 1.5px solid !important; border-top-width: 0 !important; }

  /* --- Pricing comparison table: keep the four columns -------------------- */
  .gc-table4 { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) !important; }
  .gc-table4 > * { padding: 10px 6px !important; font-size: 12.5px !important; }
  /* --- Calculator bar rows and short label/value rows: keep side by side --- */
  .gc-row3 { grid-template-columns: 96px minmax(0, 1fr) 78px !important; }
  .gc-row-lv { grid-template-columns: 34px minmax(0, 1fr) auto !important; }
}