/* business-portal
   Values taken from the legacy row's vc_custom rules (desktop), its decoded
   responsive_spacing blobs (tablet <=1024px, mobile <=767px), and the live
   production markup captured in prod-reference/request-an-rma.html, which
   gave the actual vc_col-sm/md/lg classes (so the 3 real breakpoints below
   are read off the rendered page, not guessed) and the two images' real alt
   text. Every copy of the row across all 8 pages is byte-identical, so one
   sheet serves all 8 placements.

   Heading font size has no title_font_size override in the source -- it
   uses Woodmart's "wd-fontsize-xxxl" preset class (confirmed in
   prod-reference), but that class's px value is defined in the theme's own
   stylesheet, which was not captured. 36px/26px below is a PLACEHOLDER, not
   sourced -- check against the rendered dev page. Same for "LOG IN TODAY..."
   (wd-fontsize-m, also a preset with no captured px value; 16px placeholder).
   DRAFT -- not compared against the live page yet. */

/* Full bleed: the source row carries data-vc-stretch-content="true"
   (full_width="stretch_row_content"), and the section otherwise renders
   inside article.prose inside a max-width container, so it has to escape
   both. 100vw includes the scrollbar, hence the overflow guard. */
.sf-cta-banner--business-portal {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  /* No vertical space of its own -- the page owns spacing around banners. */
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  /* row's responsive_spacing: tablet margin-bottom 0; mobile carries no
     override of its own, so this value also covers the mobile range. */
  .sf-cta-banner--business-portal { margin-bottom: 0; }
}

/* 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.

   Real breakpoints, read off vc_col-sm-12/vc_col-lg-6/vc_col-md-6 (text) and
   vc_col-sm-6/vc_col-lg-3/vc_col-md-3 (each image) in prod-reference:
     <768px  (xs, no class): all three columns stack full width
     768-991 (sm):            text is full width on its own row; the two
                               images share the row below it, 50/50
     >=992   (md/lg):         50% / 25% / 25%, one row (content_placement=
                               "middle" -> vc_row-o-content-middle -> center)
*/
.sf-cta-banner--business-portal .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
}

.sf-cta-banner--business-portal .wp-block-column {
  min-width: 0;
}

/* Below 992 the three columns cannot sit side by side, and the legacy
   behaviour -- images folding onto their own row under the text -- reads as
   two stacked bands rather than one. The images are decorative, so they are
   hidden instead and the text takes the full width. This also retires the
   source's row_reverse_mobile="1", which only existed to order that fold. */
.sf-cta-banner--business-portal .wp-block-column:nth-child(1) { flex: 1 1 100%; }

@media (max-width: 991px) {
  .sf-cta-banner--business-portal .wp-block-column:nth-child(2),
  .sf-cta-banner--business-portal .wp-block-column:nth-child(3) { display: none; }
}

@media (min-width: 992px) {
  .sf-cta-banner--business-portal .wp-block-columns { flex-wrap: nowrap; align-items: center; }
  .sf-cta-banner--business-portal .wp-block-column:nth-child(1) { flex: 0 1 50%; }
  .sf-cta-banner--business-portal .wp-block-column:nth-child(2),
  .sf-cta-banner--business-portal .wp-block-column:nth-child(3) { flex: 0 1 25%; }
}

/* Text column (vc_column offset lg-6/md-6, vc_col-sm-12): desktop
   padding/margin from vc_custom_1636991511065; mobile from the column's
   responsive_spacing blob. No tablet override in the source, so the desktop
   values carry through the sm/tablet range. */
/* DEVIATION from the source, deliberate. vc_custom_1636991511065 specifies
   padding-left/right 15%, and at our column widths that eats roughly 290px of
   a 960px column -- enough to crowd the 140px "PORTAL" word against the
   heading it is supposed to sit behind. 8% keeps an inset without the crowding
   so the two read as separate layers, which is how the original looks. */
.sf-cta-banner--business-portal .wp-block-column:nth-child(1) {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 0 8%;
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  .sf-cta-banner--business-portal .wp-block-column:nth-child(1) {
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px 15px 60px;
  }
}

/* Image columns (vc_column width=1/2, vc_col-sm-6/lg-3/md-3): desktop from
   vc_custom_1636991455816 / _1636991464091; tablet and mobile from each
   column's responsive_spacing blob. */
.sf-cta-banner--business-portal .wp-block-column:nth-child(2),
.sf-cta-banner--business-portal .wp-block-column:nth-child(3) {
  margin-bottom: 40px;
  padding-top: 0;
}

/* The source's tablet and mobile margins for these columns are not carried
   forward: below 992 they are hidden, so the values would never apply. */

.sf-cta-banner--business-portal .wp-block-column:nth-child(2) img,
.sf-cta-banner--business-portal .wp-block-column:nth-child(3) img {
  border-radius: 0;
  margin: 0 auto;
  display: block;
}

/* "PORTAL" eyebrow: woodmart_text_block 677d2636917f1, 140px/700/right-
   aligned, color #f7f7f7, margin-bottom -100px (it overlaps behind the line
   below), class "hidden-xs" in prod-reference -- hidden below the sm
   boundary, which is the same 767px this sheet already uses for mobile. */
.sf-cta-banner--business-portal .wp-block-column:nth-child(1) p:nth-of-type(1) {
  font-size: 140px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: #F2F2F2;
  margin: 0 0 -100px;
}

@media (max-width: 767px) {
  .sf-cta-banner--business-portal .wp-block-column:nth-child(1) p:nth-of-type(1) {
    display: none;
  }
}

/* "LOG IN TODAY TO GET STARTED!": woodmart_text_block 677d2640204b4, color
   #bfbfbf, margin-bottom 10px. wd-fontsize-m is a Woodmart preset with no
   px value captured; 16px is a placeholder. */
.sf-cta-banner--business-portal .wp-block-column:nth-child(1) p:nth-of-type(2) {
  color: #bfbfbf;
  font-size: 16px;
  margin: 0 0 10px;
}

/* "BUSINESS <u>PORTAL</u>" heading: woodmart_title 677d265ccc4b4,
   margin-bottom 15px. The size is NOT set here -- the heading carries
   class="section-title" in the body, so it uses the site's own display
   heading, clamp(26px, 3.5vw, 40px). The legacy used Woodmart's
   wd-fontsize-xxxl preset, whose px value lives in the theme stylesheet and
   was never captured, so matching the site beats guessing at theirs. */
.sf-cta-banner--business-portal .wp-block-heading {
  margin: 0 0 15px;
}

/* Same accent as every other band: Woodmart's wd-underline-colored is not an
   underline, it colours the word. */
.sf-cta-banner--business-portal .wp-block-heading u {
  color: var(--amber);
  text-decoration: none;
}


/* Description paragraph: woodmart_text_block 677d26730f998, margin-bottom
   25px, font-size 16px desktop / 14px tablet+mobile (its own
   responsive_spacing blob carries no override; only the font-size blob
   does), content width capped at 489px desktop / 427px tablet+mobile. */
.sf-cta-banner--business-portal .wp-block-column:nth-child(1) p:nth-of-type(3) {
  font-size: 16px;
  max-width: 489px;
  margin: 0 0 25px;
}

@media (max-width: 1024px) {
  .sf-cta-banner--business-portal .wp-block-column:nth-child(1) p:nth-of-type(3) {
    font-size: 14px;
    max-width: 427px;
  }
}

/* Buttons: the CTAs carry class="btn primary" and class="btn ghost" in the
   body, so they are the site's own buttons from site.css rather than copies.
   The pairing follows the legacy classes -- PORTAL REGISTER was
   btn-color-black (solid), PORTAL LOGIN was btn-style-bordered (outline).
   All that is needed here is to undo .prose's link underline and space the
   pair. */
.sf-cta-banner--business-portal a.btn {
  text-decoration: none;
  margin-right: 10px;
}