/* =====================================================================
   D - Title Banner — page hero band (Figma 10159:15113 / 10167:7385).
   Full-bleed dark radial-gradient band with a big centered title, an
   optional large body paragraph, and an optional inline logo rendered
   on the same row as the title ("Redeem at [logo]" variant).
   Content is locked to the 1240 area; the gradient band spans full width.
   Tokens only.
   ===================================================================== */

.title-banner {
  /* Full-bleed band regardless of container; content re-centered inside. */
  background: var(--title-banner-gradient);
  color: var(--gray-0);
  padding-block: var(--tb-pad-block);
}

.title-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tb-gap);
  text-align: center;
  word-break: break-word;
}

/* ---- Title (Axiforma Medium 44/55 — OG Desktop H1) ---- */
.title-banner__title {
  margin: 0;
  max-width: var(--tb-content-max);
  width: 100%;
  font-weight: var(--fw-medium);
  font-size: var(--fs-44);
  line-height: var(--lh-55);
  text-wrap: balance; /* even 2-line split (matches Figma break) without forcing mid-word breaks on mobile */
}

/* ---- Headline row: title + inline logo on one line (Redeem variant) ---- */
.title-banner__headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tb-gap);
}
.title-banner__headline .title-banner__title {
  width: auto;
  white-space: nowrap;
}

.title-banner__logo {
  display: block;
  height: var(--tb-logo-h);
  flex-shrink: 0;
}
.title-banner__logo img {
  display: block;
  height: 100%;
  width: auto;
}

/* ---- Body (Axiforma Regular 18/25 — OG Desktop Large Body) ---- */
.title-banner__body {
  max-width: var(--tb-content-max);
  width: 100%;
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
}
.title-banner__body p {
  margin: 0 0 var(--tb-gap);
  /* Even out the wrapped lines so a short tail (e.g. "97:1.") doesn't get
     stranded on its own line at wider breakpoints. */
  text-wrap: balance;
}
.title-banner__body p:last-child {
  margin-bottom: 0;
}
/* Redeem variant body is Axiforma SemiBold 20 / normal (OG Desktop H4). */
.title-banner__body--with-logo {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: normal;
}

/* ---- Responsive — tablet (1024 breakpoint) ---- */
@media (max-width: 1023.98px) {
  .title-banner__title {
    font-size: var(--fs-36);
    line-height: 1.25;
  }
}

/* ---- Mobile 390 (M - Title Banner 10167:7415) — match Figma ---- */
@media (max-width: 767.98px) {
  .title-banner {
    /* M frame: content starts 60px from band top, ~60px bottom. */
    padding-block: var(--tb-pad-block-mobile);
    padding-inline: var(--pad-mobile);
  }
  .title-banner__inner {
    gap: var(--tb-gap-mobile);
  }
  /* Title row stacks: "Redeem at" above the inline logo, centred. */
  .title-banner__headline {
    flex-direction: column;
    gap: var(--tb-gap-mobile);
  }
  .title-banner__title {
    font-size: var(--tb-title-mobile);
    line-height: 1.25;
  }
  .title-banner__headline .title-banner__title {
    white-space: normal;
  }
  .title-banner__logo {
    height: var(--tb-logo-h-mobile);
  }
  /* Body is full-width within the 20px gutters, centred. */
  .title-banner__body {
    max-width: none;
  }
}

/* Optional blue subheading inside the hero body (e.g. Limit Orders H2). */
.title-banner__subheading {
  display: block;
  margin: 4px 0 14px;
  color: var(--soft-blue);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24, 24px);
  line-height: 1.3;
}