/* user-driven-innovation
   Background #fbfbfb and heading 40px come from the legacy row's generated
   rules and its decoded responsive_spacing blob. The row's vertical padding
   (80/150 desktop, 150/160 tablet, 110/100 mobile) is deliberately NOT carried
   over: a banner contributes no vertical space of its own, so the page around
   it owns that and two banners can stack flush. */

/* Full bleed: the section renders inside article.prose inside a max-width
   container, so a banner that is meant to span the viewport has to escape both.
   100vw includes the scrollbar, hence the overflow guard on the inner. */
.sf-cta-banner--user-driven-innovation {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  background-color: #fbfbfb;
  /* No vertical padding: a band contributes no space of its own, so the page
     around it decides what it needs and two banners stack flush. The legacy
     row's 80px/150px is deliberately not reproduced -- it only worked there
     because a -100px overlap margin pulled the next section back up. */
  padding: 0 20px;
  overflow-x: hidden;
}

/* Columns are restated here rather than inherited: the .prose rules that give
   wp-block-columns its flex do not apply on the home slot, and a banner must
   lay out the same wherever it is placed. */
/* No max-width: the legacy row carries data-vc-stretch-content, so the columns
   span the viewport rather than sitting in a centred column. Capping them here
   was what kept the band looking narrower than the original. */
.sf-cta-banner--user-driven-innovation .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin: 0;
}

.sf-cta-banner--user-driven-innovation .wp-block-column {
  flex-basis: 100%;
  min-width: 0;
  text-align: center;
}

@media (min-width: 861px) {
  .sf-cta-banner--user-driven-innovation .wp-block-columns { flex-wrap: nowrap; }
  .sf-cta-banner--user-driven-innovation .wp-block-column { flex: 1 1 0; }
}

.sf-cta-banner--user-driven-innovation .wp-block-image img {
  margin: 0 auto;
  border-radius: 0;
}

/* Size, face, weight and casing come from class="section-title" in the body --
   the site's own display heading, clamp(26px, 3.5vw, 40px). Only the spacing
   is band-specific. The legacy title_font_size decoded to 40px desktop, which
   is the top of that clamp, so nothing is lost by using the site's scale. */
.sf-cta-banner--user-driven-innovation .wp-block-heading {
  margin: 10px 0 15px;
}

.sf-cta-banner--user-driven-innovation p { margin: 0 0 25px; }

.sf-cta-banner--user-driven-innovation p:last-child { margin-bottom: 0; }

/* The CTA carries `class="btn ghost"` in the body, so it IS the site's
   secondary button from site.css rather than a copy of one here. The only
   thing needed is to undo .prose's link underline, which would otherwise
   apply on top of it. */
.sf-cta-banner--user-driven-innovation a.btn {
  text-decoration: none;
}

/* No mobile heading override: section-title's clamp already scales it down to
   26px, and a fixed size here would beat the clamp on specificity. */