/* Explicitly opted-in top banners only. The image/background reaches both
   viewport edges; each page keeps its own inner text rail and composition.
   Load this layer before legacy !important theme/layout layers. */
@layer printpass-top-hero {
  @media screen {
    body:has(#main-content [data-pa-top-hero]) {
      /* Clip only at the viewport, not at a narrower main/content rail. */
      overflow-x: clip !important;
    }

    #main-content:has([data-pa-top-hero]) {
      margin-block-start: 0 !important;
      padding-block-start: 0 !important;
      /* Keep the existing body width. Only the hero breaks out of that rail. */
      overflow: visible !important;
    }

    /* Several routes nest the first hero inside an entry/workspace wrapper.
       Remove only its ancestor frame; never change the body-content rails. */
    #main-content :has([data-pa-top-hero]) {
      margin-block-start: 0 !important;
      padding-block-start: 0 !important;
      border-block-start-width: 0 !important;
      overflow: visible !important;
    }

    /* These public routes have a viewport-wide main and a narrower inner rail.
       Clip the 100vw banner's desktop-scrollbar excess at main, so the image
       still reaches the viewport edges and vertical content remains visible. */
    #main-content:has(#connect-hub, #quote-workspace, #pricing-workbench, .pa-faq-manual, .pa-about-page) {
      overflow-x: clip !important;
      overflow-y: visible !important;
    }

    /* Score already owns a viewport-wide root. Clip its decorative breakouts
       there so the desktop scrollbar cannot create horizontal page overflow. */
    #main-content #score-workbench:has([data-pa-top-hero]) {
      overflow: clip !important;
    }

    #main-content [data-pa-top-hero] {
      box-sizing: border-box;
      width: 100vw !important;
      max-width: none !important;
      margin-inline: calc(50% - 50vw) !important;
      margin-block-start: 0 !important;
      border-radius: 0 !important;
      border-inline-width: 0 !important;
    }

    /* Split/editorial banners need a reading gutter even when their old rail
       was only 16px wider than the content. The artwork still fills the banner. */
    #main-content [data-pa-top-hero]:is(
      .pa-page-hero,
      .pa-discover-atlas__hero,
      .pa-guides-manual__hero,
      .pa-help-router__hero,
      .pa-get-it-printed__hero,
      .pa-evidence-lab__hero,
      .pa-tools-hero,
      .pa-security-brief,
      .pa-faq-manual__hero
    ) {
      padding-inline: max(1.25rem, calc(var(--pa-gutter) / 2), calc((100vw - var(--pa-rail-wide)) / 2)) !important;
    }

    /* Evidence Lab previously borrowed its dark surface from the inset parent.
       Its expanded header must carry that surface all the way to the edges. */
    #main-content .pa-evidence-lab__hero[data-pa-top-hero] {
      background: radial-gradient(circle at 88% 4%, rgba(65, 209, 202, .16), transparent 26rem),
        linear-gradient(145deg, #07151b 0%, #0c2028 52%, #071419 100%);
    }

    #main-content [data-pa-top-hero] > :is(.pa-precision-hero__inner, .pa-my-work-heading__inner) {
      width: min(calc(100% - max(2.5rem, var(--pa-gutter))), var(--pa-rail-wide)) !important;
    }

    @media (min-width: 1920px) {
      /* Record/admin banners have direct children rather than an inner rail.
         Expand their background, not the distance between copy and actions. */
      #main-content [data-pa-top-hero]:is(
        .pa-ps-hero, .pa-ps-share-hero, .pa-ps-detail-hero,
        .pa-doctor-history-hero, .pa-doctor-result-hero,
        .pa-sp-hero, .pa-sp-detail-hero, .pa-project-detail-hero,
        .pa-admin-precision-hero, .pa-admin-record__hero,
        .pa-admin-guide__hero, .pa-admin-doc-hero, .pa-ops-precision-hero,
        .pa-privacy-hero, .admin-privacy-detail__hero,
        .pa-privacy-account-hero, .pa-privacy-detail-hero, .privacy-request-public__hero,
        .pa-support-hero, .pa-community-record-hero, .pa-state-hero
      ) {
        padding-inline: max(3rem, calc((100vw - var(--pa-rail-wide, 112rem)) / 2 + 3rem)) !important;
      }
    }
  }
}