/* Mediavine / Journey layout enforcement — see DESIGN.md §4 */
/* Do not set overflow on the layout shell — it breaks position:sticky sidebars. */
.nm-main,
.nm-content {
  overflow-x: clip;
  max-width: 100%;
}

.nm-layout--content-sidebar,
.nm-sidebar {
  max-width: 100%;
}

@media (min-width: 1024px) {
  /* Center content + sidebar as one shell; equal outer margins via margin-inline: auto */
  .nm-layout--content-sidebar,
  .wp-block-group.nm-layout--content-sidebar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem !important;
    max-width: 1120px !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 1rem;
    box-sizing: border-box;
  }

  .nm-layout--content-sidebar > .nm-main,
  .nm-layout--content-sidebar > main.nm-main,
  .nm-layout--content-sidebar > .wp-block-group.nm-main {
    flex: 1 1 auto !important;
    max-width: 720px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Fixed 300px rail — never shrink (Mediavine / Journey) */
  .nm-layout--content-sidebar > .nm-sidebar,
  .nm-layout--content-sidebar > aside.nm-sidebar,
  .nm-layout--content-sidebar > .wp-block-template-part:has(.nm-sidebar) {
    flex: 0 0 300px !important;
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    margin-inline: 0 !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    z-index: 2;
  }

  .nm-sidebar {
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    flex-shrink: 0 !important;
  }

  .nm-layout--content-sidebar .nm-content,
  .nm-layout--content-sidebar .nm-content.nm-single,
  .nm-layout--content-sidebar article.nm-content {
    max-width: 720px !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 1023.98px) {
  .nm-layout--content-sidebar,
  .wp-block-group.nm-layout--content-sidebar {
    flex-direction: column !important;
    max-width: 100% !important;
  }

  .nm-layout--content-sidebar > .nm-sidebar,
  .nm-layout--content-sidebar > aside.nm-sidebar,
  .nm-layout--content-sidebar > .wp-block-template-part:has(.nm-sidebar) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}