/* Garden Heights responsive layout
   Loaded after each page's legacy inline CSS so one fluid layout system can
   serve the full catalog without widening intentionally narrow legal/forms. */
:root {
  --gha-wide-max: 1240px;
  --gha-book-max: 1200px;
  --gha-workbook-max: 1160px;
  --gha-shell-max: 1440px;
  --gha-page-gutter: clamp(16px, 3vw, 48px);
}

/* Catalog and pricing pages: let the visual grids use modern desktop space. */
body.wide-page .wrap,
body.wide-page .crumb,
body.wide-page .nh-hero,
body.wide-page .ed-hero-in,
body.wide-page .feat-strip-in,
body.wide-page .lib-inner,
body.wide-page .cat-inner,
body.wide-page .hiw-in,
body.wide-page .why-diff-in,
body.wide-page .gw {
  max-width: var(--gha-wide-max);
}

body.wide-page .bgrid {
  max-width: 1160px;
}

/* Book landing pages: wider framing plus two scannable Part columns. */
body.book-page .bhero-in,
body.book-page .wrap {
  width: 100%;
  max-width: var(--gha-book-max);
}

body.book-page .bhero .desc {
  max-width: 780px;
}

body.book-page .crumb {
  width: 100%;
  max-width: var(--gha-book-max);
  margin-inline: auto;
}

@media (min-width: 1100px) {
  body.book-page .chlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  body.book-page .chrow {
    height: 100%;
  }
}

/* Interactive workbooks: center a generous shell instead of stopping at 840px. */
body.workbook-page .shell {
  width: min(100%, var(--gha-shell-max));
  margin-inline: auto;
  grid-template-columns: 224px minmax(0, 1fr);
}

body.workbook-page main {
  width: 100%;
  max-width: var(--gha-workbook-max);
  margin-inline: auto;
  padding: 32px var(--gha-page-gutter) 80px;
  justify-self: center;
}

/* A portrait tablet is more comfortable without the sidebar; the full section
   navigation remains available through the existing top/mobile controls. */
@media (max-width: 900px) {
  body.workbook-page .shell {
    display: block;
    width: 100%;
  }

  body.workbook-page aside {
    display: none;
  }

  body.workbook-page main {
    max-width: none;
    padding: 24px 24px 64px;
  }

  body.workbook-page .vgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body.workbook-page main {
    padding: 18px 16px 56px;
  }

  body.workbook-page .vgrid {
    grid-template-columns: 1fr;
  }

  body.workbook-page .tf {
    flex-direction: column;
  }
}