/* One outer content boundary for every website template, matching the homepage.
 * Keep card padding and internal columns independent of the page gutter.
 * These rules intentionally win over widths in the exported legacy themes.
 */
@media screen {
  :root {
    --ch-content-max: 1192px;
    --ch-content-width: min(var(--ch-content-max), calc(100% - 40px));
    --ch-content-gutter: max(20px, calc((100vw - var(--ch-content-max)) / 2));
  }
  @media (max-width: 1399px) { :root { --ch-content-max: 1116px; } }
  @media (max-width: 1199px) { :root { --ch-content-max: 936px; } }
  @media (max-width: 991px) { :root { --ch-content-max: 696px; } }
  @media (max-width: 767px) { :root { --ch-content-max: 516px; } }
  @media (max-width: 575px) { :root { --ch-content-max: 1192px; } }

  body :is(.chn-bar, .chn-footer-inner, .chp-wrap, .chr-wrap, .ch-weekly-wrap,
    .ch-team-wrap, .chm-reading, .lh-reading, .chv-guide, .chac-shell),
  body :is(.htw-recap, .security-article),
  body :is(.policy-main, .single-post-main) > .single-post,
  body .single-post-main > .chr-review-next,
  body .ch-team-careers-hero .header-banner-info,
  body main .container:not(.generalPanel):not(.faceliftGeneralPanel),
  body .case-study-main .case-study {
    box-sizing: border-box;
    width: var(--ch-content-width) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    min-width: 0;
  }

  /* Nested containers inherit the available space, without a second gutter. */
  body main .container .container:not(.generalPanel):not(.faceliftGeneralPanel),
  body .single-post-main > .single-post .container,
  body .chp-wrap .chp-wrap {
    width: 100% !important;
  }

  /* Article headings, photographs, captions and prose share the same edges. */
  body .htw-recap :is(.htw-header, .htw-copy),
  body .chr-article :is(.chr-article-header, .chr-article-header h1,
    .chr-body.single-post, .chr-author, .chr-player),
  body .chp-wrap.chv-reading,
  body :is(.security-article, .ch-linux-guide) .lh-guide-related > div {
    max-width: none;
    padding-inline: 0;
  }

  /* Full-bleed customer-story backgrounds retain the same content gutter. */
  body .case-study-main .ch-ai-story { padding-inline: var(--ch-content-gutter); }

  /* An inset CTA is a card within the page boundary, not a narrower page. */
  body .single-post-main > .chr-review-next { padding-inline: 32px !important; }
  body .chp-final > .chp-wrap { padding-left: 56px !important; }
  @media (max-width: 760px) {
    body .single-post-main > .chr-review-next { padding-inline: 24px !important; }
    body .chp-final > .chp-wrap { padding-left: 0 !important; }
  }
}