/* Content Page Extended Viewer V1B
   Allowlisted canonical extended layout for content pages.
   Standard mode remains the unchanged linear content page. */

@media (min-width: 1181px) {
  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] {
    --content-page-extended-gap: clamp(18px, 1.8vw, 28px);
    --content-page-extended-column-gap: var(--content-page-extended-gap);
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] > .page > .hero,
  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] > .page > .section-stack {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] > .page > .hero :is(.hero__title, .hero__subtitle, .hero-intro, p) {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide {
    position: relative;
    display: block;
    max-width: none;
    min-width: 0;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide::before {
    content: "";
    display: block;
    height: var(--content-page-extended-stack-height, 0px);
    margin-bottom: var(--content-page-extended-column-gap);
    pointer-events: none;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > [data-content-layout-block="1"] {
    position: absolute;
    inset-block-start: var(--content-page-extended-top, 0px);
    inset-inline-start: var(--content-page-extended-left, 0px);
    inline-size: var(--content-page-extended-column-width, calc((100% - var(--content-page-extended-column-gap)) / 2));
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide[data-extended-layout-ready="0"] > [data-content-layout-block="1"] {
    visibility: hidden;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > [data-content-layout-block="1"] > summary,
  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > [data-content-layout-block="1"] > .subaccordion-body {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > .knowledge-net-module-slot {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }

  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > .knowledge-net-module-slot > .knowledge-net-module-accordion,
  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > .knowledge-net-module-slot > .knowledge-net-module-accordion > summary,
  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > .knowledge-net-module-slot > .knowledge-net-module-accordion > .subaccordion-body,
  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > .knowledge-net-module-slot .chapter-knowledge-net,
  :root[data-layout-mode="extended"] #app-content[data-page-type="content"][data-content-extended-viewer-active="true"] .section-stack.content-page-extended-stack.is-wide > .knowledge-net-module-slot :is(.chapter-knowledge-net__viewer, .chapter-knowledge-net__tool, .knowledge-net-page__tool--embedded, [data-knowledge-net]) {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }
}