/* Wedding ("Getting Married") sub-page (/wedding/). Every selector scoped under
   body.page-wedding (see CLAUDE.md). */

/* Composite cutout (banker + cake) is wider than other pages' single-person avatars,
   so this stays lower than subpage.css's 124% default to keep both fully visible. */
body.page-wedding .sub-hero {
  --sub-hero-img-height: 120%;
}

body.page-wedding .sub-hero__title {
  font-size: 8.7vw;
}

body.page-wedding .sub-hero__brush {
  bottom: 0;
  transform: scaleY(0.45);
  transform-origin: left bottom;
}

body.page-wedding .sub-hero__media {
  background: var(--white) url("../../images/heroes/bg_wedding_hero.webp") no-repeat center / cover;
}

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

body.page-wedding .benefit-section__title--more {
  margin-top: 1.25rem;
}

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

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

@media (min-width: 1024px) {
  body.page-wedding .sub-hero__title {
    font-size: 3.15vw; /* restore shared desktop title size */
  }

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

  body.page-wedding .sub-hero__media {
    transform: scaleX(-1);
  }

  body.page-wedding .benefit-row {
    flex-direction: row;
    gap: 1.25rem;
  }

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

  /* Standalone deposit card matches one card's width in the 3-up row above. */
  body.page-wedding .benefit-card--deposit {
    width: calc((100% - 2.5rem) / 3);
    max-width: 100%;
  }

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