/* Youth ("Young Account") sub-page (/youth/). Every selector scoped under body.page-youth
   (see CLAUDE.md). Benefit structure is a flat 2-up row (no OR dividers/step numerals,
   no perks grid, no transfer card), simpler than private.css/business.css. */

/* gal_youth.webp is a single flattened photo card (no transparent cutout), unlike
   private/vip/alpha's cutout-over-backdrop treatment, so the img fills the card directly. */
@media (max-width: 1023px) {
  body.page-youth .sub-hero {
    padding-top: 0;
  }
}

body.page-youth .sub-hero__media {
  background: transparent;
  height: 38.5vw;
}

body.page-youth .sub-hero__media img {
  position: static;
  transform: none;
  width: 100%;
  /* 100%, not fit-content: iOS Safari resolves fit-content block-size on an img
     to its intrinsic height (533px), overflowing the card across the page. */
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: inherit;
  margin-top:2vw;
}

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

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

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

@media (min-width: 1024px) {
  body.page-youth .sub-hero {
    padding-top: 2vw;
  }

  body.page-youth .sub-hero__media {
    height: 13.875vw;
  }

  body.page-youth .benefit-row {
    flex-direction: row;
  }

  /* Only 2 cards in this row - fix each to one card's width in the 3-up rows
     used on the other sub-pages (same formula as business's standalone card). */
  body.page-youth .benefit-row .benefit-card {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    min-width: 0;
  }
  body.page-youth .sub-hero__media img {
    margin-top: 0;
  }
}