/*
 * The site has two horizontal layout modes:
 * 1. full bleed (the element keeps its natural 100% width);
 * 2. page shell (the same outer edges as the footer).
 *
 * Component padding belongs inside the shell and must not be used to create
 * a third page edge.
 */
.inlayers-header__inner,
.inlayers-footer__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.inlayers-page-shell,
.inlayers-page:not(.inlayers-about),
.inlayers-about__heading,
.inlayers-about__body,
.inlayers-editorial-hero,
.inlayers-editorial-landing__intro,
.inlayers-editorial-index,
.inlayers-collection-landing__header,
.inlayers-collection-index,
.inlayers-single-collection__hero,
.inlayers-single-collection__content,
.inlayers-chapter__header,
.inlayers-chapter-index,
.inlayers-single-editorial__title-region,
.inlayers-single-editorial__featured-image,
.inlayers-single-editorial__content,
.inlayers-editorial-gallery-carousel:not(.inlayers-editorial-gallery-carousel--card),
.inlayers-single-gallery__header,
.inlayers-single-gallery__featured-image,
.inlayers-single-gallery__content,
.inlayers-gallery-related,
.inlayers-fallback,
.inlayers-not-found-page {
  box-sizing: border-box;
  width: calc(100% - (2 * var(--wp--custom--layout--gutter)));
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* These wrappers stay full bleed; their children opt into the page shell. */
.inlayers-editorial-landing,
.inlayers-collection-landing,
.inlayers-chapter,
.inlayers-gallery-landing,
.inlayers-single-collection,
.inlayers-single-gallery,
.inlayers-fallback-page {
  padding-inline: 0;
}

/* Editorial wide content now follows the shell instead of the viewport. */
.inlayers-single-editorial__content
  .wp-block-post-content
  > :is(h2, figure, [class*="inlayers-pattern-"]) {
  width: 100%;
  margin-inline: 0 !important;
}

/* Gallery navigation uses the shell edge even on screens wider than 1440px. */
.inlayers-gallery-browser__navigation {
  left: max(
    var(--wp--custom--layout--gutter),
    calc((100vw - var(--wp--style--global--wide-size)) / 2)
  );
}

@media (max-width: 767px) {
  .inlayers-about__body {
    padding-inline: 0;
  }

  .inlayers-gallery-browser__navigation {
    left: auto;
    padding-inline: var(--wp--custom--layout--gutter);
  }
}