/**
 * AI Digest page geometry — canonical mobile gutter: 20 CSS px.
 * One owner per content column. Full-bleed backgrounds may reach the viewport;
 * their content still aligns to the same gutter. Card padding is independent.
 * Loaded after page styles; !important is limited to legacy geometry adapters.
 * See docs/mobile-layout.md before adding a new page container.
 */
:root {
  --aid-page-gutter-mobile: 20px;
  --aid-page-gutter-start: max(var(--aid-page-gutter-mobile), env(safe-area-inset-left, 0px));
  --aid-page-gutter-end: max(var(--aid-page-gutter-mobile), env(safe-area-inset-right, 0px));
}

@media (max-width: 767px) {
  /* Astra shells never add another inset around a page-owned container. */
  body #page #content,
  body #page #content > .ast-container {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0 !important;
  }

  /* Default for WordPress archives, search, fallback pages and future templates. */
  body #content > .ast-container > :where(main, #primary),
  .aid-page-container {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end) !important;
    min-width: 0;
  }

  /* These templates have section-owned gutters (including full-bleed headers). */
  body #content > .ast-container > :is(.aid-news-preview, .aid-news-single, .aid-article-single, .shop-main) {
    padding-inline: 0 !important;
  }

  body .aid-news-preview .aid-news-preview-inner,
  body .aid-news-reading-panel,
  body.aid-single-news .aid-news-article,
  body.aid-single-article .aid-longform-article {
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end) !important;
  }

  /* Static page sections use full-bleed surfaces so text aligns at 20px. */
  body #content .aid-static-page > :is(.aid-page-hero, .aid-page-section, .aid-page-split, .aid-page-content-card, .aid-editorial-manifest, .aid-page-proof, .aid-contact-note) {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--aid-page-gutter-start)) calc(-1 * var(--aid-page-gutter-end));
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end) !important;
    border-inline: 0;
    border-radius: 0;
    min-width: 0;
  }

  .aid-static-page .aid-page-hero > div,
  .aid-static-page .aid-page-content {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Astra's archive heading is already inside the default column. */
  body #content #primary .ast-archive-description {
    padding-inline: 0 !important;
    margin-inline: 0;
  }

  /* Legacy single-post/guide template: the primary column already owns 20px. */
  body.single-post:not(.aid-single-news):not(.aid-single-article) #content .ast-article-single {
    padding-inline: 0 !important;
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Homepage sections span the viewport; only their content owns gutters. */
  body .aid-editorial-hero__content,
  body .aid-editorial-hero__nav,
  body .aid-editorial-pulse__inner {
    box-sizing: border-box;
    width: calc(100% - var(--aid-page-gutter-start) - var(--aid-page-gutter-end));
    max-width: none;
    margin-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end);
    padding-inline: 0;
  }

  body :is(.aid-sec-body, .aid-market-inner, .aid-nl-inner, .aid-home-context-inner),
  body .aid-marketplace-promo {
    box-sizing: border-box;
    width: 100%;
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end) !important;
  }

  /* Legacy published homepage template retains the same content boundary. */
  body #content > .ast-container > :is(.hero, .news-layout, .section, .nl-section, .sec-guides, .newsletter, .site-footer) {
    box-sizing: border-box;
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end);
  }

  /* Catalog and product sections; leave inset padding inside actual cards. */
  body #content :is(.shop-catalog-inner, .shop-body, .shop-hero-inner, .shop-filters-inner, .pd-layout, .pd-breadcrumbs-inner, .pd-nav-inner) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end) !important;
  }

  body #content .shop-main > .shop-grid {
    width: calc(100% - var(--aid-page-gutter-start) - var(--aid-page-gutter-end));
    margin-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end);
    padding-inline: 0;
  }

  body #content :is(.shop-command-inner, .shop-catalog-controls) {
    box-sizing: border-box;
    width: calc(100% - var(--aid-page-gutter-start) - var(--aid-page-gutter-end));
    margin-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end);
    padding-inline: 0;
  }

  /* Breadcrumbs inside an already inset column must not inset it a second time. */
  body .aid-breadcrumbs-inner {
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end);
  }
  body :is(.aid-static-page, .aid-news-article, .aid-longform-article) .aid-breadcrumbs-inner {
    padding-inline: 0;
  }

  /* Global chrome follows the content grid; never target article footers. */
  body .site-header :is(.hdr-bar-inner, .hdr-masthead-inner, .hdr-nav-strip-inner),
  body #page > footer {
    padding-inline: var(--aid-page-gutter-start) var(--aid-page-gutter-end) !important;
  }
}