.editor-info-page {
  --editor-info-page-index-width: 340px;
  --editor-info-page-index-gap: 80px;
  --editor-info-page-uniform-margin-vert: 2.4rem;
  /* Gap between the sticky subsite navigation and the first body row on pages
     that open without a full-width header. Matches the page index's own sticky
     offset gap (44px) so the content top and a pinned index read consistently. */
  --editor-info-page-top-gap: 44px;
}

.editor-info-page {
  margin: auto;
  /* Use uniform vertical margins between all components. */
  .com:not(.com-page-header):not(.com-page-index) + .com {
    margin-top: var(--editor-info-page-uniform-margin-vert);
  }
}

/*
  When the page opens without a full-width header (page_header / library_header),
  the first component would otherwise sit flush against the sticky subsite
  navigation. Give the whole body a top margin so it has breathing room. Scoped
  to the widths where that navigation is visible (it is hidden below 800px).
  A header-led page is exempt: its hero is a full-bleed banner meant to meet the
  subheader.
*/
@media (width >= 800px) {
  .editor-info-page:not(.has-header) {
    margin-top: var(--editor-info-page-top-gap);
  }
}

/* Exception. Use natural heading margins instead of uniform margins. */
.site-main .editor-info-page .components .com-heading + .com {
  margin-top: 0;
}

/*
  Only allow page header component to span max width.

  The auto side margins are load-bearing, not tidiness. max-width alone
  constrains a block's width but leaves it against the left edge of the
  viewport. Components that set `margin-left:auto; margin-right:auto` in their
  own stylesheet (heading, featured-link, accordion, paragraph) centred anyway;
  rich-content ships no stylesheet at all, so on a page WITHOUT a page index its
  body copy rendered flush left under centred headings.

  It went unnoticed because every Info page in the network used a page index
  until now, and those take the grid branch below, which centres via the grid
  rather than this rule. Centring here rather than adding a stylesheet to
  rich-content fixes every component that has no margins of its own, including
  any added later.
*/
.editor-info-page:not(.has-page-index) .components > :not(.com-page-header):not(.com-library-header) {
  max-width: var(--mobile-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/*
  If page index component is included, set up a grid layout. Only enable page
  index and its accompanying styles when page is wide enough.
*/
@media (width <= 900px) {
  .com-page-index { display: none; }
  /*
     Same fix as above, and this branch is the one that was visible on every
     existing page. Below 900px a page-index page drops out of the grid that was
     centring it and falls back to this rule, so without auto margins its body
     copy sat against the left edge with all 40px of the gutter stacked on the
     right. It reads as "the text is touching the screen edge" on a phone.
  */
  .editor-info-page.has-page-index .components > :not(.com-page-header):not(.com-library-header) {
    max-width: var(--mobile-content-max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (width > 900px) {

  .editor-info-page.has-page-index .components {
    display: grid;
    /* grid-template-columns: 360px 1fr; */
    grid-template-columns: 1fr  /* Left-side margin */
                           var(--editor-info-page-index-width)  /* Page index */
                           var(--editor-info-page-index-gap)  /* Page index gap */
                           calc(min(100%, var(--content-max-width)) - var(--editor-info-page-index-width) - var(--editor-info-page-index-gap))  /* Main content */
                           1fr;  /* Right-side margin */
  }

  /* Components that span full width. */
  .editor-info-page.has-page-index .components {
    .com-page-header, .com-library-header, .com-custom-footer { grid-column: 1 / -1; }
    /* .com-page-header, .com-custom-footer, .com-contacts { grid-column: 1 / -1; } */
  }

  /* Page index components span the 2nd and 3rd column. */
  .editor-info-page.has-page-index .components .com-page-index {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1000;
    align-self: start;
  }

  /*
    With no full-width header on row 1, the index must begin on row 1 so it
    top-aligns with the first content block. Pinned to row 2 (the default, which
    assumes a header hero fills row 1) it dropped one content-row below the
    content -- the reported gap above the Table of Contents.
  */
  .editor-info-page.has-page-index:not(.has-header) .components .com-page-index {
    grid-row: 1 / span 1000;
  }

  /* All other components span the 4th and 5th column. */
  .editor-info-page.has-page-index .components > * {
    grid-column: 4 / span 1;
  }

}


/*
  Custom component rules.
*/
.editor-info-page.has-page-index {
  .com-contacts .layout { grid-template-columns: 1fr; }
}

.editor-info-page {
  .com.com-featured-link + .com.com-featured-link {
    margin-top: var(--com-featured-link-margin-sibling);
  }
}