/* =========================================================
   Global body-section intro geometry master v85
   Purpose: one shared position for normal section-heading right copy
   across Home, Science, Clinical and Commercial.

   IMPORTANT
   - Geometry only. Does not set H2/eyebrow/body font styling or colours.
   - Excludes hero, announcement/header, sticky submenu, proof strips,
     charts, special content layouts, pre-footer and footer.
   - Uses deliberately stronger specificity so older page-specific grids
     cannot override the shared geometry.
   ========================================================= */

:root{
  --global-section-intro-gap:clamp(42px,4vw,64px);
  --global-section-intro-copy-max:460px;
}

@media (min-width:1021px){
  /* One exact two-column geometry for every opted-in body section. */
  html body .global-section-intro.global-section-intro{
    display:grid!important;
    grid-template-columns:minmax(0,.94fr) minmax(360px,.72fr)!important;
    column-gap:var(--global-section-intro-gap)!important;
    row-gap:0!important;
    align-items:start!important;
  }

  /* Nested structure:
     <header>
       <div><eyebrow><h2></div>
       <p>right copy</p>
     </header>
     28px places the copy level with the H2 after the eyebrow. */
  html body .global-section-intro.global-section-intro > div:first-child{
    display:contents!important;
  }
  html body .global-section-intro.global-section-intro > div:first-child > .eyebrow:first-child{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:start!important;
  }
  html body .global-section-intro.global-section-intro > div:first-child > .eyebrow:first-child + h2{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
    justify-self:stretch!important;
    align-self:start!important;
  }
  html body .global-section-intro.global-section-intro > div:first-child + p{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    max-width:var(--global-section-intro-copy-max)!important;
    justify-self:start!important;
    align-self:start!important;
    margin:0!important;
  }

  /* Direct structure used by Science Origin and Home Programme:
     eyebrow / h2 / paragraph are direct children.  The paragraph shares
     the H2 row, so no extra top margin is required. */
  html body .global-section-intro.global-section-intro > .eyebrow:first-child{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:start!important;
  }
  html body .global-section-intro.global-section-intro > .eyebrow:first-child + h2{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
    justify-self:stretch!important;
    align-self:start!important;
  }
  html body .global-section-intro.global-section-intro > .eyebrow:first-child + h2 + p{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    max-width:var(--global-section-intro-copy-max)!important;
    justify-self:start!important;
    align-self:start!important;
    margin:0!important;
  }
}

/* Tablet: preserve the shared editorial relationship until 1020px, then stack. */
@media (max-width:1020px){
  html body .global-section-intro.global-section-intro{
    display:grid!important;
    grid-template-columns:1fr!important;
    column-gap:0!important;
    row-gap:0!important;
    align-items:start!important;
  }
  html body .global-section-intro.global-section-intro > *{
    grid-column:1!important;
    grid-row:auto!important;
  }
  html body .global-section-intro.global-section-intro > div:first-child + p,
  html body .global-section-intro.global-section-intro > .eyebrow:first-child + h2 + p{
    width:100%!important;
    max-width:700px!important;
    justify-self:start!important;
    align-self:start!important;
    margin:22px 0 0!important;
  }
}

@media (max-width:760px){
  html body .global-section-intro.global-section-intro > div:first-child + p,
  html body .global-section-intro.global-section-intro > .eyebrow:first-child + h2 + p{
    max-width:100%!important;
    margin-top:18px!important;
  }
}

/* Commercial headings intentionally use a 13px H2 top margin as part of their
   page typography. Mirror that offset on the right copy so its first line is
   still level with the visible H2, without changing Commercial typography. */
@media (min-width:1021px){
  html body.commercial-v82 .global-section-intro.global-section-intro > div:first-child + p{
    margin-top:13px!important;
  }
}