/* Sticky columns pin vertically CENTERED in the viewport (instead of at the
   top), and slide on down to the bottom when their section ends - the same
   behavior as the ClubVIO Calculator's result column and Featured
   Categories' left column. sticky-center.js keeps --vio-sticky-half at half
   each element's rendered height (150px is only the pre-JS guess); max()
   keeps it clear of the fixed header when the column is too tall to center.
   Standalone (not bundled), and prefixed `html body` so it wins over each
   block's own `top: var(--vio-fixed-top)` regardless of stylesheet load
   order. Only `top` is overridden - which columns are sticky (and at what
   breakpoint) is still decided by each block's own rules. */

html body .vio-fifty-fifty-flex--sticky-left .vio-fifty-fifty-flex__col--left,
html body .vio-fifty-fifty-flex--sticky-right .vio-fifty-fifty-flex__col--right,
html body .vio-fifty-fifty--sticky-media .vio-fifty-fifty__media,
html body .vio-fifty-fifty--sticky-copy .vio-fifty-fifty__copy,
html body .vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--sticky-opposite .vio-fifty-fifty-accordion__col--media,
html body .vio-fifty-fifty-accordion.vio-fifty-fifty-accordion--sticky-content .vio-fifty-fifty-accordion__col--content,
html body .vio-quiz-hero--sticky-copy .vio-quiz-hero__copy,
html body .vio-treatment-cat-plan__media {
  top: max(var(--vio-fixed-top, 96px), calc(50vh - var(--vio-sticky-half, 150px)));
}

/* These two kept an extra 24px of clearance under the header. */
html body .vio-faq-fifty-fifty--sticky-opposite .vio-faq-fifty-fifty__col--faqs,
html body .vio-faq-fifty-fifty--sticky-content .vio-faq-fifty-fifty__col--content,
html body .vio-basic-callout--sticky-faqs .vio-basic-callout__col--faqs {
  top: max(calc(var(--vio-fixed-top, 96px) + 24px), calc(50vh - var(--vio-sticky-half, 150px)));
}