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

body.page-vip .sub-hero {
  --sub-hero-img-height: 120%;
}

/* Slightly bigger hero title than the shared 40px/9.302vw default. Reset
   back to subpage.css's own 3.15vw at desktop (below, in the single
   desktop media block per site convention) - our selector has higher
   specificity than subpage.css's plain class and would otherwise win
   there too. */
body.page-vip .sub-hero__title {
  font-size: 9.767vw; /* 42px */
}

/* Smaller hero subtitle than the shared 5.7vw sub-page default; reset to
   subpage.css's 1.875vw at desktop below (our selector has higher specificity). */
body.page-vip .sub-hero__subtitle {
  font-size: 4.651vw; /* 20px */
}

body.page-vip .sub-hero__brush {
  left: 0.5vw;
  width: 80%;
  transform: scaleY(2.5);
  /* transform-origin: left bottom; */
}

/* Room backdrop + banker cutout, kept on both breakpoints. Mirrored horizontally
   (Figma faces opposite of the shared asset's default) by flipping the whole media
   box so backdrop and avatar mirror together in one transform. */
body.page-vip .sub-hero__media {
  background: var(--white) url("../../images/heroes/bg_vip_hero.webp") no-repeat center / cover;
}

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

/* Mobile-only breathing room under the band titles; reset at desktop below. */
body.page-vip .benefit-section__title {
  padding-bottom: 2.5vw;
}

/* Word-scoped brush underline (copy/vip.js wraps the target word in this span) -
   scales with the word itself, so it survives copy edits and font-metric drift. */
/* z-index: 0 (with position: relative) opens a local stacking context scoped
   to just this word/group, so the brush's ::after (z-index: -1) only drops
   behind its own text - matching the .sub-hero__highlight/.sub-hero__brush
   pattern above. */
body.page-vip .benefit-section__title-brush {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}

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

/* Mobile: brush sits under just "choice". Desktop swaps to a bigger brush
   spanning the whole "your choice" group instead (see desktop override below). */
body.page-vip .benefit-section__title-brush-group {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}

body.page-vip .benefit-section__title--choice,
body.page-vip .benefit-section__title--transfer {
  margin-top: 1.25rem;
}

/* .benefit-row, .benefit-row__divider, .benefit-card-slot and
   .benefit-card__number (the "choice of one" group shared with alpha.css)
   now live in css/subpage.css. */

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

/* Availability notice (pin icon + text; VIP-only, kept local to this page). */
body.page-vip .availability-notice {
  margin: 0;
  padding-top: 2vw;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.3;
}

body.page-vip .availability-notice img {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

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

@media (min-width: 1024px) {
  /* Reset to subpage.css's desktop size - our mobile override above has higher
     specificity and would otherwise win here too. */
  body.page-vip .sub-hero__title {
    font-size: 3.125vw; /* 60px */
  }

  body.page-vip .sub-hero__subtitle {
    font-size: 1.875vw; /* 36px */
    width: 37.5vw;
  }

  body.page-vip .benefit-section__title {
    padding-bottom: 0; /* 2.5vw above is mobile-only */
  }

  body.page-vip .sub-hero {
    --sub-hero-img-height: 120%;
  }

  body.page-vip .sub-hero__media {
    height: 15vw;
  }

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

  body.page-vip .availability-notice {
    font-size: var(--fs-18);
  }
  body.page-vip .sub-hero__media img{
    height: 110%;
  }

  /* Desktop: hide the mobile per-word brush, show a bigger one spanning the
     whole "your choice" group instead. */
  body.page-vip .benefit-section__title-brush::after {
    display: none;
  }

  /* "Receive a benefit" (transfer title) reuses both classes on the SAME
     span (single word, no separate group wrapper needed) - since it's the
     same ::after pseudo-element as the rule above, its display: none would
     otherwise win (that rule is the only one setting display), so it must
     be re-enabled here. */
  body.page-vip .benefit-section__title-brush-group::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: -0.6rem;
    height: 1.25rem;
    background: url("../../images/decorations/subhero-brush.svg") no-repeat center / 100% 100%;
    pointer-events: none;
  }

  /* Keep every benefit card the same width across the whole page (fees /
     choice-row / transfer), overriding the shared subpage.css gap + width
     formula which don't agree with each other by default. */
  body.page-vip .benefit-row {
    gap: 0.5vw;
  }

  /* The row (flex, default align-items: stretch) already stretches each li to
     equal height, but the "choice" slot's visible white card is a nested div
     one level deeper (li.benefit-card-slot > div.benefit-card) - a block
     child doesn't inherit its parent's stretched height on its own, so it was
     sizing to its own content instead of matching the plain li.benefit-card
     cards (grant/deposit), which ARE the stretched flex item themselves. */
  body.page-vip .benefit-row .benefit-card-slot--choice .benefit-card {
    height: 100%;
  }

  /* Fees (first) and transfer (last) cards are solo cards, not part of the
     3-up choice row - the visible card itself (not its full-width slot
     wrapper) is sized to a flat 95% of the section width and centered. */
  body.page-vip .benefit-card--fees,
  body.page-vip .benefit-card--transfer {
    width: 97%;
    /* margin: 0 auto; */
  }

  /* The row's cards stretch to equal height; shared subpage.css centers each
     card's icon+body content (align-items: center), so shorter titles drift
     down to the middle of the taller card instead of staying level with the
     others. Anchor to the top so every title (and its "Learn more" button,
     already effectively level via the card's own height) lines up. */
  body.page-vip .benefit-row .benefit-card {
    align-items: center;
  }

  /* flex-start above pins the icon to the top of the stretched card - keep
     titles top-aligned but re-center the icon in the card's full height. */
  body.page-vip .benefit-row .benefit-card__icon {
    align-self: center;
  }

  /* Slightly tighter than the shared 18px desktop title size (subpage.css). No
     token matches ~17.7px, so keep the vw and floor it with --fs-min directly. */
  body.page-vip .benefit-row .benefit-card h3 {
    font-size: max(var(--fs-min), 0.922vw);
  }
}