/* Shared page geometry. Keep this after component styles so route-specific
   typography and internal layouts can evolve without changing outer margins. */
:root {
    --page-content-width:1176px;
    --page-gutter:32px;
    --page-start:32px;
    --page-end:80px;
    --section-space:32px;
    --content-gap:24px;
    --page-edge:max(var(--page-gutter),calc((100% - var(--page-content-width))/2));
}
.site-shell > .site-header {
    width:100%; max-width:none; margin:0;
    padding-inline:var(--page-edge);
}
.site-shell > main > :is(.directory,.establishment-page,.results-page,.profile-page,.discover-page,.ranking-page,.legal-page,.upload-page,.review-journey,.budget-page) {
    box-sizing:border-box;
    width:min(calc(100% - 2 * var(--page-gutter)),var(--page-content-width));
    max-width:none;
    margin-inline:auto;
    padding:var(--page-start) 0 var(--page-end);
}
.site-shell > main > :is(.home-search-view,.home-popular,.home-recent,.home-visited,.quick-discovery,.discovery-recent,.product-discovery,.how-section,.showcase,.contribute) {
    padding-inline:var(--page-edge);
    padding-block:var(--section-space);
}
.site-shell > main > .home-search-view:not(.is-search-active) > .home-search-view__inner,
.site-shell > main > :is(.home-popular,.home-recent,.home-visited) > * {
    width:100%; max-width:var(--page-content-width); margin-inline:auto;
}
.site-shell > main > :is(.member-home,.admin-home) {
    width:min(calc(100% - 2 * var(--page-gutter)),var(--page-content-width));
    max-width:none; margin-inline:auto;
}
.site-shell > main > .member-home { padding-block:var(--section-space); }
.site-shell > main > .auth-page { padding:var(--page-start) var(--page-edge) var(--page-end); }
.site-shell > footer { padding:var(--content-gap) var(--page-edge); }
.site-shell > main > .directory > .comparison-back { margin-bottom:var(--content-gap); }
.site-shell > main > .directory > .lead { margin-block:var(--content-gap); }
.site-shell > main > .establishment-page .establishment-layout { gap:var(--section-space); }
.site-shell > main > .establishment-page .establishment-facts { margin-bottom:var(--section-space); }
.site-shell > main > .directory > .reviews { margin-top:var(--section-space); padding-top:var(--content-gap); }
/* Initial HTML uses the same grid before Blazor takes over. */
.initial-app-shell > :is(.initial-app-header,.initial-app-intro) { width:100%; margin-inline:0; padding-inline:var(--page-edge); max-width:none; }

@media(max-width:720px) {
    :root { --page-gutter:20px; --page-start:24px; --page-end:64px; --section-space:24px; --content-gap:20px; }
    /* The active mobile search remains a viewport overlay. */
    .site-shell > main > .home-search-view.is-search-active { padding:calc(env(safe-area-inset-top) + 10px) var(--page-gutter) 16px; }
}