/* Private sub-page (/private/). Every selector scoped under body.page-private (see CLAUDE.md). */

/* Hero: photo crop overflows the card by 24% (see .sub-hero in subpage.css for defaults). */
body.page-private .sub-hero {
  --sub-hero-img-height: 124%;
}

/* Room backdrop on the card, banker cutout overflowing its top - kept on both breakpoints. */
body.page-private .sub-hero__media {
  background: var(--white) url("../../images/heroes/bg_hero_private.webp") no-repeat center / cover;
}

/* Benefit band arrangement ------------------------------------------------- */

body.page-private .benefit-section__title--transfer {
  margin-top: 1.25rem;
}

/* Word-scoped brush underline under "benefit"; the span is present in both
   the HTML fallback and copy/private.js so data-copy injection keeps it. */
body.page-private .benefit-section__title-brush {
  position: relative;
  white-space: nowrap;
}

body.page-private .benefit-section__title-brush::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1875rem;
  height: 0.375rem;
  background: url("../../images/decorations/subhero-brush.svg") no-repeat center / 100% 100%;
  pointer-events: none;
}

body.page-private .benefit-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.page-private .perks {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.page-private .fine-print {
  margin-top: 1.25rem;
}

@media (min-width: 1024px) {
  body.page-private .benefit-row {
    flex-direction: row;
  }

  body.page-private .benefit-row .benefit-card {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Deposit/transfer cards sit alone, matching one card's width in the 3-up row above. */
  body.page-private .benefit-card--deposit,
  body.page-private .benefit-card--transfer {
    width: calc((100% - 2.5rem) / 3);
    max-width: 100%;
  }

  body.page-private .perks {
    margin-top: 2.5rem;
  }

  /* .only-desktop only whitelists specific selectors (see components.css) - this
     br needs its own reset to actually show at 1024px+. */
  body.page-private .benefit-card--transfer h3 br.only-desktop {
    display: inline;
  }
}