/* ============================================================
   Contactable — Business Verification page styles
   Shared archetypes (hero, challenge, verify/tabs) come from
   css/capability.css (cap-* classes). This file holds only
   business-specific bits: the custom hero background, the bespoke
   Solution and UBO sections, and a couple of overrides.
   Loads after iip.css + capability.css.
   ============================================================ */

/* ===== Hero — custom background (sits on top of cap-hero) =====
   Dev-Ready node 10773-1946: the desktop asset is composed at the full
   frame width (network diagram across the top-right), rendered as
   width-fill cover — same template as the idv/biometric heroes.
   Verified by landmark fractions, Δ ≤ 0.2% per band. */
.biz-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url(../assets/brand/biz-hero-bg.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  /* y = -4.58vw pins the top crop to the same fraction at every width
     (equals Figma's -66px at 1440); plain `center` drifted the diagram
     upward on wider screens as the rendered image grew. */
  background-position: right -4.58vw;
}

/* ===== Per-page override on the shared challenge ===== */
@media (min-width: 901px) {
  .biz-challenge__img-wrap { aspect-ratio: 493 / 581; }  /* ≥901 only: stacked shows full photo */
}

/* ===== The Solution (bespoke: copy left, image right) ===== */
.biz-solution { background: #fff; padding: 112px 0; }
.biz-solution__inner { display: flex; gap: 80px; align-items: center; }
.biz-solution__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.biz-solution__copy { display: flex; flex-direction: column; gap: 24px; }
.biz-solution__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  /* unified section-heading size */
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.biz-solution__text { font-size: 18px; line-height: 1.6; color: #0f1e6d; margin: 0; }
.biz-solution__text p { margin: 0; }
.biz-solution__text p + p { margin-top: 1em; }
/* Transparent cutout PNG: rounded scene block with the head + shoes
   overflowing it baked in — must NOT clip or re-round it. */
.biz-solution__img-wrap {
  flex: 0 0 auto;
  width: min(560px, 50%);
  aspect-ratio: 751 / 838;
}
.biz-solution__img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ===== UBO mid-page CTA (bespoke orange banner) ===== */
.biz-ubo {
  position: relative;
  overflow: hidden;
  /* Figma CTA/15 (node 10934:5507, 1440×490). Gradient shows wherever the
     photo doesn't reach (tablet/mobile bands) and doubles as load fallback. */
  background: linear-gradient(90deg, #d36426, #e97e38);
  aspect-ratio: 1440 / 490;
  display: flex;
  align-items: center;
  padding: 72px 64px;
}
/* Figma <img> transform → CSS 1:1 per band (w% & left% of box width, top% of
   box height; height:auto preserves the 4096×1872 aspect — the node's h%
   values check out). Box aspect is locked per band so the % are exact. */
.biz-ubo__bg {
  display: block;
  position: absolute;
  max-width: none;
  width: 152.46%;
  height: auto;
  left: -2.18%;
  top: -78.19%;
  pointer-events: none;
}
.biz-ubo__inner {
  position: relative;
  z-index: 1;
  width: 100%; /* flex item: without this, margin:0 auto centres the shrunk box */
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.biz-ubo__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  /* unified section-heading size */
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  line-height: 1.2;
  color: #fff;
  margin: 0 0 16px;
  max-width: 560px;
  text-wrap: wrap; /* base balance re-breaks after "deeper"; Figma breaks greedy */
}
.biz-ubo__text { font-size: 20px; font-weight: 500; line-height: 1.5; color: #fff; margin: 0; max-width: 692px; }
.biz-ubo__btn { background: #6861e7; border-color: #6861e7; color: #fff; margin-top: 8px; }
.biz-ubo__btn:hover { background: #5a52d5; border-color: #5a52d5; color: #fff; }

/* ===== Final CTA column ratio override (Figma: ~60/40) ===== */
.biz-final .final__inner { grid-template-columns: 3fr 2fr; }

/* ============================================================
   Responsive — bespoke sections only (shared archetypes handled
   in capability.css)
   ============================================================ */
/* Very wide (≥1600): freeze the background render so the diagram stops
   growing/blurring on wide monitors; stays right-pinned. */
@media (min-width: 1600px) {
  .biz-hero__bg { background-size: min(100%, 1600px) auto; background-position: right -73px; }
}

/* Solution — stack on tablet & below (≤1100): copy full-width on top
   (left-aligned, comfortable measure), figure centred beneath. Two-column
   only at wider desktop where there's room. */
@media (max-width: 1100px) {
  .biz-solution { padding: 72px 0; }
  /* image on top, copy below — centred */
  .biz-solution__inner { flex-direction: column-reverse; gap: 40px; align-items: center; }
  .biz-solution__content { align-items: center; text-align: center; }
  .biz-solution__img-wrap { width: 100%; max-width: 440px; }
}

@media (max-width: 900px) {
  /* Hero — tablet design (Dev-Ready node 13216-692, 834×534 frame):
     tablet/mobile asset (squares row + connector + circle) sits in a band
     to the right of the button, bleeding off the right and bottom edges.
     Converted from the node's recorded image transform.
     KNOBS: 105.78% = diagram size; 17.35vw = left inset; 24.82vw = bottom bleed. */
  .biz-hero { padding: 56px 0 72px; }
  .biz-hero__bg {
    background-image: url(../assets/brand/biz-hero-bg-mobile.webp);
    background-size: 105.78% auto;
    background-position: 17.35vw calc(100% + 24.82vw);
  }
  /* Figma tablet type: 48px title constrained so it breaks after
     "VERIFICATION SOUTH"; 18px eyebrow; 392px body measure. */
  /* Figma box is 639px — wider than the 560px copy column (overflows it,
     same pattern as desktop); viewport-capped so it can't spill the gutter. */
  .biz-hero__title { font-size: 48px; width: min(639px, 100vw - 70px); max-width: none; }
  /* the eyebrow element carries only the shared class — target it via the
     page hero so the override actually applies */
  .biz-hero .cap-hero__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  .biz-hero__text { max-width: 392px; }

  /* UBO — Figma tablet frame 11614:2234 (834×587): copy TOP-LEFT, rings band
     in the lower half bleeding off right/bottom. Node img transform 1:1. */
  .biz-ubo { aspect-ratio: 834 / 587; align-items: flex-start; padding: 50px 39px; }
  .biz-ubo__bg { width: 185.09%; left: -23.78%; top: 15.51%; }
  .biz-ubo__heading { font-size: 36px; line-height: 1.3; max-width: 438px; margin-bottom: 0; }
  .biz-ubo__text { max-width: 421px; }
  .biz-ubo__btn { margin-top: 0; } /* Figma body↔button gap 25 ≈ column gap 24 */

  /* Final CTA — single column */
  .biz-final .final__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Mobile hero (Dev-Ready node 11598-1585, 393×534 frame): diagram band
     below the button, bleeding off the left and bottom edges. Converted
     from the node's recorded image transform.
     KNOBS: 157.79% = diagram size; -34.2vw = left bleed; 28.63vw = bottom bleed. */
  /* bottom padding = the node's 166px button-to-frame-bottom distance, so
     the bottom-anchored diagram lands just below the button regardless of
     content height. */
  .biz-hero { padding: 48px 0 166px; }
  .biz-hero__bg {
    background-size: 157.79% auto;
    background-position: -34.2vw calc(100% + 28.63vw);
  }
  .biz-hero__title { font-size: 28px; max-width: none; }
  .biz-hero .cap-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .biz-hero__text { max-width: none; }

  /* UBO — Figma mobile frame 11614:2225 (393×648): copy top-left (content
     inset 39px), rings bleeding off the bottom. Node img transform 1:1;
     gradient per node (right #e87b36 → left #dd6d2a). */
  .biz-ubo {
    aspect-ratio: 393 / 648;
    padding: 69px 39px 50px;
    background: linear-gradient(90deg, #dd6d2a, #e87b36);
  }
  .biz-ubo__bg { width: 303.25%; left: -88.63%; top: 43.78%; }
  .biz-ubo__heading { font-size: 28px; line-height: 1.4; max-width: 296px; }
  .biz-ubo__text { max-width: 296px; }
  .biz-ubo__btn { margin-top: 21px; } /* Figma body↔button gap 45 (24 column gap + 21) */
}