/* ==========================================================================
   Section heading

   A shared section component: the centred eyebrow / heading / sub-heading /
   CTA stack that introduces a band, and the --cta variant that closes a page.

   It lived in hero.css, which meant any page wanting a section heading had to
   link the whole hero stylesheet to get it — and /products/ did not, so its
   headings and closing CTA rendered unstyled. Extracted verbatim so every page
   can link it on its own. No rule changed in the move.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.section-headings__wrapper{
  position:relative;padding-block:32px;
  --section-heading-eyebrow-color:var(--ps-color-brand-500);
  --section-heading-content-color:var(--ps-color-neutral-3-500);
}
.section-headings__wrapper.no-top-padding{padding-top:0}
.section-headings__wrapper.no-bottom-padding{padding-bottom:0}
.section-headings__wrapper.no-bottom-padding .section-headings__heading:last-child,
.section-headings__wrapper.no-bottom-padding .section-headings__sub-heading:last-child{
  text-box:none;
  margin-block:calc((-1lh + 1cap + 1px) / 1.605) calc((-1lh + 1.9cap) / 3.21);
}
.section-headings__cell{grid-column-end:span var(--ps-grid-columns);text-align:center}
.section-headings__content{color:var(--section-heading-content-color);display:flex;flex-direction:column;gap:40px}
.section-headings__copy{display:flex;flex-direction:column;row-gap:40px}
.section-headings__eyebrow{color:var(--section-heading-eyebrow-color)}
.section-headings__heading{margin:0}
.section-headings__sub-heading{margin-top:-8px;color:var(--ps-color-secondary-5-500)}
.section-headings__sub-heading p{margin:0}
.section-headings__ctas{display:flex;flex-direction:column;align-items:center;gap:16px;justify-content:center}

@media (min-width:640px){
  .section-headings__wrapper{padding-block:64px}
  .section-headings__ctas{flex-direction:row}
  .section-headings__cell--left{text-align:left}
  .section-headings__cell--left .section-headings__content{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .section-headings__cell--left .section-headings__ctas{flex-shrink:0}
}
@media (min-width:1024px){
  .section-headings__wrapper{padding-block:80px}
}
@media (min-width:1350px){
  .section-headings__cell--8{grid-column-start:3;grid-column-end:span 8}
  .section-headings__cell--10{grid-column-start:2;grid-column-end:span 10}
}