/* =====================================================================
   D - Bullion About (Figma 10159:9412; reused on FAQ 10159:19496).
   "About [B.I.G. logo]" lockup + centred lead paragraph + "Learn More"
   link. Desktop locked to the 1240 content area; fluid below via
   --container. Tokens only.
   ===================================================================== */

.bullion-about {
  padding-block: var(--ba-pad-y);
}

.bullion-about__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ba-stack-gap);
  text-align: center;
}

/* ---- Colour brand logo (fixed 155x55 asset, centred) ---- */
.bullion-about__logo {
  display: block;
  flex: none;
  width: 155px;
  height: 55px;
}

/* ---- Heading "About Bullion International Group" (Axiforma Medium 32/45) ---- */
.bullion-about__heading {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-45);
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

/* ---- Lead body (Axiforma Regular 18/25) ---- */
.bullion-about__body {
  margin: 0;
  max-width: var(--ba-body-max);
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Logo links to bullioninternationalgroup.com ---- */
.bullion-about__logo-link {
  display: inline-block;
  line-height: 0;
  margin-bottom: var(--redeem-stack-gap);   /* more breathing room between logo + heading */
  transition: opacity 0.15s ease;
}
.bullion-about__logo-link:hover { opacity: 0.8; }

/* ---- "Learn More" link (Axiforma Bold 18/25, gray-7) ---- */
.bullion-about__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ba-link-gap);
  padding: 12px 28px;
  border-radius: var(--radius-8);
  transition: background-color 0.15s ease;
}
.bullion-about__link:hover { background-color: var(--pale-blue); }
.bullion-about__link-label {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: var(--lh-25);
  color: var(--gray-7);
  white-space: nowrap;
}
/* Single arrow asset tinted via mask (reuses the price-arrow mask technique). */
.bullion-about__link-arrow {
  flex: none;
  width: var(--ba-arrow-w);
  height: var(--ba-arrow-h);
  background-color: var(--gray-7);
  -webkit-mask: url("../../img/bullion-about-arrow.svg") no-repeat center / contain;
          mask: url("../../img/bullion-about-arrow.svg") no-repeat center / contain;
}

/* ---- Tablet (768–1023): step heading size ---- */
@media (max-width: 1023.98px) {
  .bullion-about__heading {
    font-size: var(--fs-28);
    line-height: 1.3;
  }
}

/* ---- Mobile (≤767.98): default variant + split variant ---- */
@media (max-width: 767.98px) {
  .bullion-about {
    padding-inline: var(--pad-mobile);
  }
  .bullion-about__heading {
    font-size: clamp(24px, 6.4vw, var(--fs-32));
    line-height: 1.3;
  }
  /* Body + link span the full content width, centred. */
  .bullion-about__body {
    max-width: none;
    font-size: var(--fs-18);
  }
}

/* =====================================================================
   SPLIT VARIANT — "About BIG" redesign (Figma 8242:27543).
   Opt-in via .bullion-about--split (page passes split=true). Dark band,
   2-col layout: large heading LEFT (400px), body + "Learn More ..." link
   RIGHT (fills remaining width). Left-aligned, no logo, white text. Locked
   to the 1240 content area; stacks below the desktop breakpoint. All values
   are component-LOCAL --ba-split-* props so the default layout above and
   every other page stay byte-identical.
   ===================================================================== */
.bullion-about--split {
  /* component-local tokens (no global token edits) */
  --ba-split-bg: #343e48;
  --ba-split-pad-top: 60px;
  --ba-split-pad-bottom: var(--home-sec-pad-y);   /* 80px */
  --ba-split-col-gap: 20px;
  --ba-split-stack-gap: 20px;
  --ba-split-heading-w: 400px;
  --ba-split-arrow-w: 12.342px;
  --ba-split-arrow-h: 12px;
  --ba-split-link-tracking: 0.16px;

  padding-block: var(--ba-split-pad-top) var(--ba-split-pad-bottom);
  background-color: var(--ba-split-bg);
}

/* 2-col flex: heading fixed 400px, main column fills the rest. */
.bullion-about--split .bullion-about__content {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ba-split-col-gap);
  text-align: left;
}

/* LEFT — large heading (Axiforma Medium 32/45, white). */
.bullion-about--split .bullion-about__heading {
  flex: none;
  width: var(--ba-split-heading-w);
  text-align: left;
  color: var(--gray-0);
}

/* RIGHT — body + link column. */
.bullion-about--split .bullion-about__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ba-split-stack-gap);
}

/* Body (keeps existing 18/25 raw {{{body}}}; white, full-width, left). */
.bullion-about--split .bullion-about__body {
  max-width: none;
  width: 100%;
  text-align: left;
  color: var(--gray-0);
}

/* "Learn More ..." link — inline, no pill padding, white label + arrow. */
.bullion-about--split .bullion-about__link {
  justify-content: flex-start;
  padding: 0;
  border-radius: 0;
}
.bullion-about--split .bullion-about__link:hover {
  background-color: transparent;
  opacity: 0.85;
}
.bullion-about--split .bullion-about__link-label {
  color: var(--gray-0);
  letter-spacing: var(--ba-split-link-tracking);
}
/* Reuse the shared arrow mask, tinted white and sized per Figma. */
.bullion-about--split .bullion-about__link-arrow {
  width: var(--ba-split-arrow-w);
  height: var(--ba-split-arrow-h);
  background-color: var(--gray-0);
}

/* Stack on tablet/mobile: heading over body+link, full width. */
@media (max-width: 1023.98px) {
  .bullion-about--split .bullion-about__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .bullion-about--split .bullion-about__heading {
    width: 100%;
  }
}

/* ---- Phone (≤599): restore split-content gap — matches main ≤599 ---- */
@media (max-width: 599.98px) {
  .bullion-about--split .bullion-about__content {
    gap: var(--ba-split-col-gap); /* 20px — tablet's 24px leaked via 1023.98 */
  }
}