/* Shared platform grid. Page composition and reading widths remain local. */
:root {
  --public-page-max: 1280px;
  --public-page-gutter: 48px;
  --public-page-width: min(var(--public-page-max), calc(100% - 2 * var(--public-page-gutter)));
  --public-page-inset: max(var(--public-page-gutter), calc((100% - var(--public-page-max)) / 2));
  --public-header-height: 84px;
}
@media (max-width: 1100px) { :root { --public-page-gutter: 32px; } }
@media (max-width: 800px) { :root { --public-page-gutter: 24px; --public-header-height: 72px; } }
@media (max-width: 480px) { :root { --public-page-gutter: 20px; } }

/* Search and story sections inherit their grid through the existing contract. */
html body, html body.regional-showcase { --content: var(--public-page-width); }

html body :is(.mhv4 .v4-container, .legal-shell, .public-support-header, .public-support-hero, .public-support-paths, .public-support-faq, .public-support-footer),
html body.service-detail-page.renewal-service-page :is(.search-facts, .search-section:not(.renewal-final)) {
  width: var(--public-page-width);
  margin-inline: auto;
}

/* Full-width backgrounds keep the same content starting line as the main page. */
html body :is(.mh-template-header, .mh-template-hero, .mh-template-explorer, .mh-template-catalog, .mh-template-cta, .mh-template-page .mh-footer, .legal-header, .legal-footer, .search-nav, .search-footer, .story-nav, .story-footer, .cafe-header, .cafe-footer, .studio-header, .studio-footer),
html body.service-detail-page.renewal-service-page :is(.renewal-hero .search-hero-grid, .service-final.renewal-final) {
  padding-inline: var(--public-page-inset);
}

html body :is(.mhv4 .v4-header-inner, .mh-template-header, .legal-header, .search-nav, .story-nav, .cafe-header, .studio-header, .public-support-header),
html body.service-detail-page.renewal-service-page .search-nav {
  min-height: var(--public-header-height);
}
html body.service-detail-page .search-section { scroll-margin-top: calc(var(--public-header-height) + 12px); }

@media (max-width: 560px) {
  html body .service-mobile-nav { top: var(--public-header-height); }
  html body.service-detail-page :is(.search-section, .search-facts) { scroll-margin-top: calc(var(--public-header-height) + 54px); }
  html body .story-article-cover {
    width: calc(100% + 2 * var(--public-page-gutter));
    margin-left: calc(-1 * var(--public-page-gutter));
  }
  html body .story-article-cover figcaption { padding-inline: var(--public-page-gutter); }
}