/* serving-both-sides
   The last band, and the only one carrying reconstructed content: the six
   stat figures were dropped by the transform (woodmart_counter is
   verdictDrop) and rebuilt as blocks. Their values were recovered from two
   independent sources that agree exactly -- the row's own counter shortcodes
   and the deleted company-stats.yaml in git history.

   From the legacy row: the dark background, the counter grid's divider rules,
   the heading's 90% width, and the copy paragraph's tablet+mobile hide
   (wd_hide_on_tablet / wd_hide_on_mobile). The row's own vertical padding is
   not carried -- a banner contributes no space around itself -- and the
   heading's size comes from section-title rather than the Woodmart preset,
   whose px value was never captured.

   The background is a wp:image block, not a CSS background: it has no
   attachment id and is in no media manifest, and nothing in the sync mirrors
   url() targets, so as a stylesheet background it would 404. In the body it
   mirrors like any other image.

   The counters do NOT animate. The legacy ones count up from zero; that is
   deferred by design (spec decision 6), and the values are already in the DOM
   so it is a progressive enhancement whenever it is wanted. */

/* Full bleed: escapes article.prose and its max-width container, same
   pattern as every other banner (see PATTERN.md). */
.sf-cta-banner--serving-both-sides {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: #1c1c1c;
  /* No vertical padding: the page owns spacing around banners. */
  padding: 0 20px;
  color: #fff;
}

/* The background is an image BLOCK, not a CSS background: nothing in the sync
   mirrors url() targets, so a stylesheet background would 404 on the
   storefront origin. In the body it goes through mirrorInlineImages like any
   other image. Everything after it needs a stacking context to sit above. */
.sf-cta-banner--serving-both-sides .sf-cta-banner__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.sf-cta-banner--serving-both-sides .sf-cta-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.sf-cta-banner--serving-both-sides > .wp-block-columns {
  position: relative;
  z-index: 1;
}

/* Columns are restated here rather than inherited -- the .prose rules that
   give wp-block-columns its flex do not apply on the home slot. Scoped with
   a direct-child combinator so it does not also re-flex the nested stat
   rows below, which carry their own layout. */
.sf-cta-banner--serving-both-sides > .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.sf-cta-banner--serving-both-sides > .wp-block-columns > .wp-block-column {
  flex-basis: 100%;
  min-width: 0;
}

@media (min-width: 861px) {
  .sf-cta-banner--serving-both-sides > .wp-block-columns { flex-wrap: nowrap; }
  .sf-cta-banner--serving-both-sides > .wp-block-columns > .wp-block-column { flex: 1 1 0; }
}

.sf-cta-banner--serving-both-sides .sf-cta-banner__stats { padding: 10px 25px; }
.sf-cta-banner--serving-both-sides .sf-cta-banner__content { padding: 10px 35px; }

/* Six counters as a 3-row by 2-column grid, replicating the legacy row's own
   divider rules: a vertical rule between each pair, a horizontal rule
   between rows except after the last (the source's third vc_row_inner
   carries no border-bottom). */
.sf-cta-banner--serving-both-sides .sf-cta-stats__row {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

.sf-cta-banner--serving-both-sides .sf-cta-stats__row:last-child {
  border-bottom: none;
}

.sf-cta-banner--serving-both-sides .sf-cta-stat {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 35px;
  text-align: center;
}

.sf-cta-banner--serving-both-sides .sf-cta-stat:first-child {
  border-right: 1px solid rgba(255,255,255,0.3);
}

.sf-cta-banner--serving-both-sides .sf-cta-stat__value {
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.sf-cta-banner--serving-both-sides .sf-cta-stat__label {
  margin: 4px 0 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

/* Right column: heading (align="left", title_width="90"), copy, two CTAs. */
.sf-cta-banner--serving-both-sides .sf-cta-banner__content .wp-block-heading {
  margin: 0 0 20px;
  max-width: 90%;
  color: #fff;
}

.sf-cta-banner--serving-both-sides .sf-cta-banner__content p:nth-of-type(1) {
  margin: -15px 0 15px;
  font-size: 20px;
  color: #fff;
}

/* The bottom margin is what separates the pair once they wrap onto separate
   lines; side by side it is absorbed by the paragraph's own spacing. */
.sf-cta-banner--serving-both-sides a.btn {
  text-decoration: none;
  margin: 0 10px 10px 0;
}

/* .btn.ghost is built for a light ground -- var(--ink) on this photo would be
   near-invisible, so the outline pair is restated in white. */
.sf-cta-banner--serving-both-sides a.btn.ghost {
  color: #fff;
  border-color: #fff;
}

.sf-cta-banner--serving-both-sides a.btn.ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {
  .sf-cta-banner--serving-both-sides { padding: 0 20px; }
  /* wd_hide_on_tablet="yes" and wd_hide_on_mobile="yes" on the copy block. */
  .sf-cta-banner--serving-both-sides .sf-cta-banner__content p:nth-of-type(1) { display: none; }
  .sf-cta-banner--serving-both-sides .sf-cta-stat__value { font-size: 32px; }

  /* Stacked, the right column is no longer beside anything, so left-aligning
     it leaves the heading and buttons hanging off centre under the stats.
     The 90% heading cap has to go too, or the centring is off by 5%. */
  .sf-cta-banner--serving-both-sides .sf-cta-banner__content { text-align: center; }
  .sf-cta-banner--serving-both-sides .sf-cta-banner__content .wp-block-heading {
    max-width: none;
  }
  /* Symmetric, or the pair sits 5px left of centre. */
  .sf-cta-banner--serving-both-sides a.btn { margin: 0 5px 10px; }
}