/* v961 — VOA sidebar root-cause fix
   Problem found: public-sidebar-standard-alignment-v935 treated .voa-article-shell-v787GN as a
   two-column grid shell, but on the VOA page the actual sidebar is not a direct child of that shell.
   The only direct child is .article-card, so v935 squeezed the whole article card into the left grid
   lane. The inner VOA layout then tried to create its own article/sidebar columns inside that already
   squeezed lane, making the article text narrow and pulling the sidebar away from the page's real
   right edge.

   Fix: only on VOA pages, neutralize the wrong outer-grid behavior and make the real inner
   .voa-content-layout-v797 the desktop two-column layout. The sidebar is anchored in the inner
   right column; mobile/tablet stacking remains intact. */

@media (min-width:1081px){
  html body.voa-sidebar-right-rootfix-v961{
    --voa-root-shell-v961: 1560px;
    --voa-root-gutter-v961: clamp(28px, 3.2vw, 56px);
    --voa-root-sidebar-v961: 330px;
    --voa-root-gap-v961: 36px;
  }

  /* Restore the outer wrapper to a normal centered article wrapper.
     This cancels the incorrect v935 grid applied to .voa-article-shell-v787GN. */
  html body.voa-sidebar-right-rootfix-v961 .voa-article-shell-v787GN{
    display:block !important;
    grid-template-columns:none !important;
    gap:0 !important;
    width:100% !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }

  html body.voa-sidebar-right-rootfix-v961 .voa-article-card-v787GN{
    width:min(var(--voa-root-shell-v961), calc(100vw - (var(--voa-root-gutter-v961) * 2))) !important;
    max-width:min(var(--voa-root-shell-v961), calc(100vw - (var(--voa-root-gutter-v961) * 2))) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible !important;
  }

  /* The real desktop layout lives here: article lane + right sidebar. */
  html body.voa-sidebar-right-rootfix-v961 .voa-content-layout-v797.trust-style-voa-layout-v799{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--voa-root-sidebar-v961) !important;
    column-gap:var(--voa-root-gap-v961) !important;
    row-gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:28px 0 52px !important;
    align-items:start !important;
    overflow:visible !important;
  }

  html body.voa-sidebar-right-rootfix-v961 .trust-style-voa-main-v799,
  html body.voa-sidebar-right-rootfix-v961 .voa-main-copy-v797{
    grid-column:1 !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  html body.voa-sidebar-right-rootfix-v961 .voa-reference-sidebar-v797,
  html body.voa-sidebar-right-rootfix-v961 aside.voa-reference-sidebar-v797.emergency-sidebar-v787FR{
    grid-column:2 !important;
    width:var(--voa-root-sidebar-v961) !important;
    min-width:var(--voa-root-sidebar-v961) !important;
    max-width:var(--voa-root-sidebar-v961) !important;
    justify-self:end !important;
    align-self:start !important;
    position:sticky !important;
    top:104px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    padding-right:0 !important;
    margin-right:0 !important;
    margin-left:0 !important;
    transform:none !important;
    overflow:visible !important;
  }

  html body.voa-sidebar-right-rootfix-v961 .voa-reference-sidebar-v797 .emergency-side-box-v787FR{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* Medium desktop: keep two columns but avoid squeezing the article lane. */
@media (min-width:1081px) and (max-width:1280px){
  html body.voa-sidebar-right-rootfix-v961{
    --voa-root-sidebar-v961: 310px;
    --voa-root-gap-v961: 26px;
    --voa-root-gutter-v961: 28px;
  }
}

/* At the same breakpoint used by the original VOA page, the sidebar should stack normally. */
@media (max-width:1080px){
  html body.voa-sidebar-right-rootfix-v961 .voa-article-shell-v787GN{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  html body.voa-sidebar-right-rootfix-v961 .voa-article-card-v787GN{
    width:min(100%, calc(100vw - 32px)) !important;
    max-width:min(100%, calc(100vw - 32px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  html body.voa-sidebar-right-rootfix-v961 .voa-content-layout-v797.trust-style-voa-layout-v799{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  html body.voa-sidebar-right-rootfix-v961 .voa-reference-sidebar-v797,
  html body.voa-sidebar-right-rootfix-v961 aside.voa-reference-sidebar-v797.emergency-sidebar-v787FR{
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    position:static !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:16px !important;
    padding-right:0 !important;
    margin-right:0 !important;
  }
}

@media (max-width:680px){
  html body.voa-sidebar-right-rootfix-v961 .voa-reference-sidebar-v797,
  html body.voa-sidebar-right-rootfix-v961 aside.voa-reference-sidebar-v797.emergency-sidebar-v787FR{
    grid-template-columns:1fr !important;
  }
}