/* bb-visuals.css: Phase 1 site visuals and Guides rows (Steering 9 B, inc/bb-visuals.php).
   Every selector below is a bb-vis-* class that the renderer adds ONLY when a slot has an image, or a Guides row
   renders, so this file cannot reach an element on a page where nothing was added. Loaded only on pages with work. */

/* ── V1 split head: eyebrow, H2 and opening block left (7), image right (5), 64px gap ─────────────────────────── */
.bb-vis-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(440px, 5fr); column-gap: 64px; align-items: center; }
.bb-vis-split-text { min-width: 0; text-align: left; }
.bb-vis-split-text > .bb-label, .bb-vis-split-text > h2, .bb-vis-split-text > p, .bb-vis-split-text > div { margin-left: 0 !important; margin-right: 0 !important; }
.bb-vis-split-text > :last-child { margin-bottom: 0 !important; }
@media (min-width: 1024px) { .bb-vis-split + * { margin-top: 48px; } }   /* stacked layouts take the figure's own margin */
.bb-vis-v1 { margin: 0; min-width: 0; }
.bb-vis-v1 img.bb-vis-img { display: block; width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 4 / 3; object-fit: cover !important; border-radius: 16px; }
.bb-vis-v1--light img.bb-vis-img { border: 1px solid #E8DCCF; }
.bb-vis-v1--dark img.bb-vis-img { border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 32px 80px -32px rgba(255, 106, 0, 0.28); }
/* Section padding with a V1: the SITE rhythm, 96px plus the fluid .bb-wrap padding (60px under 768), like every other
   section. Steering 9 had zeroed the wrap, which left these sections about 50px tighter than their neighbours at 1440
   (owner report, 25 Oct 2026). (0,2,3) beats the two-class section rules such as .bb-section.bb-ct-explainer. */
html body section.bb-vis-has-v1.bb-vis-has-v1 { padding-top: 96px !important; padding-bottom: 96px !important; }
html body section.bb-vis-has-v1.bb-vis-has-v1 > .bb-wrap { padding-top: clamp(20px, 4vw, 60px) !important; padding-bottom: clamp(20px, 4vw, 60px) !important; }
/* The last block's own bottom margin would add 3 to 28px under the 96 (measured 21 Oct 2026), so it is zeroed, two levels deep. */
html body section.bb-vis-has-v1.bb-vis-has-v1 > .bb-wrap > :last-child, html body section.bb-vis-has-v1.bb-vis-has-v1 > .bb-wrap > :last-child > :last-child { margin-bottom: 0 !important; }

/* Homepage problem section: copy beside the image, the four problem cards as one full-width row below. */
html body .bb-problem-inner.bb-vis-problem { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(440px, 5fr); column-gap: 64px; row-gap: 48px; align-items: center; }
html body .bb-problem-inner.bb-vis-problem > .bb-prob-items { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: auto !important; max-width: none !important; margin: 0 !important; }

@media (max-width: 1023px) {
  .bb-vis-split, html body .bb-problem-inner.bb-vis-problem { display: block !important; }
  .bb-vis-v1 { max-width: 640px; margin: 32px auto; }
  html body .bb-problem-inner.bb-vis-problem > .bb-prob-items { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px !important; }
}
@media (max-width: 767px) {
  .bb-vis-v1 { max-width: none; margin: 24px 0; }
  html body section.bb-vis-has-v1.bb-vis-has-v1 { padding-top: 60px !important; padding-bottom: 60px !important; }
  html body .bb-problem-inner.bb-vis-problem > .bb-prob-items { grid-template-columns: minmax(0, 1fr); }
}

/* ── E emblem tiles: True Black ground, edge to edge, 1px hairline ───────────────────────────────────────────── */
.bb-vis-e { display: block; flex: none; overflow: hidden; background: #0A0C10; border: 1px solid rgba(255, 255, 255, 0.06); box-sizing: border-box; }
.bb-vis-e img.bb-vis-img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; }
.bb-vis-e--72 { width: 72px; height: 72px; border-radius: 12px; margin: 0 0 16px; }
/* Related cards: emblem and category label on one header row, the title below (26 Oct 2026). */
.bb-vis-card-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.bb-vis-card-head > .bb-vis-e--72 { width: 56px; height: 56px; margin: 0; border-radius: 12px; }
/* (0,3,2): beats .bb-related .bb-related-card .bb-case-pill (0,3,0), which pins the pill to flex-start with a 12px margin. */
html body .bb-related-card .bb-vis-card-head > .bb-case-pill, html body .bb-related-card .bb-vis-card-head > .bb-related-eyebrow { margin: 0 !important; align-self: center !important; }
/* Card pills never wrap and always sit on the emblem's line, centred on it (owner, 27 Oct 2026; a stacked fallback was
   tried the same day and rejected). A wrapped pill took the whole width beside the emblem ("Performance Marketing" as a
   two-line pill 190px wide around 103px of text). In a narrow card the head tightens instead of stacking: the emblem
   goes 56 to 48px, the gap 14 to 12 and the pill's tracking 0.1em to 0.04em, and from 300px down the emblem is 44px and the pill 10.8px (the size the white-label
   pills already use). Four-card rows go 2 x 2 below 1400px (bb-pillar.css), where no size fits. Keyed on the card's own
   width, so every card in a row tightens together. */
html body .bb-related-card { container-type: inline-size; }
html body .bb-related-card .bb-vis-card-head { flex-wrap: nowrap; }
html body .bb-related-card .bb-vis-card-head > :is(.bb-case-pill, .bb-related-eyebrow) { white-space: nowrap !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
@container (max-width: 350px) {
  html body .bb-related-card .bb-vis-card-head { gap: 12px; }
  html body .bb-related-card .bb-vis-card-head > .bb-vis-e--72 { width: 48px; height: 48px; border-radius: 10px; }
  html body .bb-related-card .bb-vis-card-head > :is(.bb-case-pill, .bb-related-eyebrow) { letter-spacing: 0.04em !important; }
}
@container (max-width: 300px) {
  html body .bb-related-card .bb-vis-card-head { gap: 10px; }
  html body .bb-related-card .bb-vis-card-head > .bb-vis-e--72 { width: 44px; height: 44px; }
  html body .bb-related-card .bb-vis-card-head > :is(.bb-case-pill, .bb-related-eyebrow) { font-size: 10.8px !important; }
}
/* Phones: the card's side padding goes 28 to 20px under 480px, which gives a 360px phone a 278px head, enough for
   "Conversion Rate Optimization" beside its emblem. Under about 330px no readable size fits, so there only the pill
   takes its own line under the emblem. */
@media (max-width: 480px) { html body .bb-related-card.bb-related-card { padding-left: 20px !important; padding-right: 20px !important; } }
@container (max-width: 245px) {
  html body .bb-related-card .bb-vis-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.bb-vis-e--96 { width: 96px; height: 96px; border-radius: 12px; }
.bb-vis-e--128 { width: 128px; height: 128px; border-radius: 16px; margin: 24px auto 20px; }   /* pillar steps, centred: number, 24, emblem, 20, eyebrow, 8, heading */
.bb-vis-head { display: flex; align-items: center; gap: 24px; }
.bb-vis-head > h2 { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (max-width: 767px) {
  .bb-vis-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── C CTA band art (Steering 12 §7): the art never touches the copy ──
   Copy column: 600px at most, on the container's left line. Art area: from the copy column's right edge plus a 64px
   gutter to the container's right line, inset top and bottom by the band padding (--bb-fpad, also the band's padding).
   The art is placed whole inside it (its baked left fade stays inside the area, never under the copy), filling the
   area's height, anchored right, centred vertically, never wider than the area. The area is narrower than 360px below
   1088px (container minus 600 minus 64), so the art is hidden there; the <picture> source hands those widths a 1px data
   URI, so hidden art never downloads. mix-blend-mode lighten on the box: the file's baked black is a no-op over the
   band, so it cannot paint a dark rectangle over the band's own glow. */
html body section.bb-final.bb-vis-c { position: relative; overflow: hidden; }
html body section.bb-final.bb-vis-c > :not(.bb-vis-c-art) { position: relative; z-index: 1; }
.bb-vis-c-art { display: none; }
@media (min-width: 768px) {
  html body section.bb-final.bb-vis-c .bb-final-inner { text-align: left; margin-right: auto !important; max-width: 600px !important; padding-left: 0 !important; padding-right: 0 !important; }
  html body section.bb-final.bb-vis-c > .bb-final-inner { margin-left: var(--bb-c-gut) !important; }
  html body section.bb-final.bb-vis-c > .bb-wrap > .bb-final-inner { margin-left: 0 !important; }
  html body section.bb-final.bb-vis-c .bb-final-actions { justify-content: flex-start !important; align-items: center; }
  /* both CTAs on one line inside the 600px column: the widest pair (/google-ads-for-ecommerce/, 673px at 17.1px type and
     24px side padding) measures about 590px at 16px type, 14px side padding and a 10px gap; heights are unchanged */
  html body section.bb-final.bb-vis-c .bb-final-actions { column-gap: 10px !important; }
  html body section.bb-final.bb-vis-c .bb-final-actions .bb-btn { font-size: 16px !important; padding-left: 14px !important; padding-right: 14px !important; white-space: nowrap; }
  /* the heading stays in the copy column (bb-white-label.css sets it nowrap from before the art) */
  html body section.bb-final.bb-vis-c h2 { white-space: normal !important; }
}
@media (min-width: 1088px) {
  html body section.bb-final.bb-vis-c { --bb-fpad: 120px; padding-top: var(--bb-fpad) !important; padding-bottom: var(--bb-fpad) !important; }
  html body section.bb-final.bb-vis-c > .bb-wrap { padding-top: 0 !important; padding-bottom: 0 !important; }
  .bb-vis-c-art { display: flex; justify-content: flex-end; align-items: center; position: absolute; top: var(--bb-fpad); bottom: var(--bb-fpad);
    left: calc(var(--bb-c-gut) + 664px); right: var(--bb-c-gut); z-index: 0; pointer-events: none; mix-blend-mode: lighten; }
  .bb-vis-c-art picture { display: contents; }
  .bb-vis-c-art img.bb-vis-img { display: block; height: 100% !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: right center; }
  /* the homepage band is the shortest (720px at 1440 against 933 on the service pages), so the band-padding inset left
     its art 477px tall and 382 wide; a 40px inset gives it the band's height (owner, 25 Oct 2026). The art stays right
     of the copy column, so the taller box still touches no text. */
  html body.home section.bb-final.bb-vis-c .bb-vis-c-art { top: 40px; bottom: 40px; }
}

/* ── Guides row ───────────────────────────────────────────────────────────────────────────────────────────── */
/* Guides row = the homepage "Latest Guides" component (bb-blog.css); only the section rhythm is set here: 96px plus the
   fluid wrap, as every section (60 + 20 on phones), and two guides share two columns. */
html body section.bb-vis-guides.bb-home-blog { padding: calc(96px + clamp(20px, 4vw, 60px)) 0 !important; }
@media (min-width: 768px) { html body .bb-blog .bb-card-grid.bb-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { html body section.bb-vis-guides.bb-home-blog { padding: 80px 0 !important; } }

/* V1 sections whose OUTER Elementor container adds its own padding on top of the section's rhythm (measured 26 Oct 2026 at
   1440: 80/0, 56/0, 96/96 and 80/80 px, so the core problem read ~218px from its band edge against ~160 everywhere else).
   The section carries the rhythm; the container adds nothing. Phones measured clean. Elementor drives padding through
   --padding-*, so both are set. */
@media (min-width: 768px) {
  body .elementor-12483 .elementor-element.elementor-element-36b22b8,
  body .elementor-7426 .elementor-element.elementor-element-36b22b8,
  body .elementor-12544 .elementor-element.elementor-element-36b22b8,
  body .elementor-5928 .elementor-element.elementor-element-a2f7b0a { --padding-top: 0px; --padding-bottom: 0px; padding-top: 0 !important; padding-bottom: 0 !important; }
}