/* After Army / Discharged Soldier sub-page (/soldier_release/). Every selector scoped
   under body.page-soldier_release (see CLAUDE.md). Includes a "NEW!" patch badge unique
   to two of this page's four benefit cards. */

body.page-soldier_release .sub-hero {
  --sub-hero-img-height: 110%;
}

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

/* Room backdrop + cutout overflowing its top, same treatment as /private/. */
body.page-soldier_release .sub-hero__media {
  background: var(--white) url("../../images/heroes/bg_soldier_release_hero.webp") no-repeat center / cover;
}

/* Four plain benefit cards (no "choice"/OR pattern, unlike private/vip/alpha) - mobile
   stacks them; desktop wraps 3-per-row then the 4th card alone. */
body.page-soldier_release .perks {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

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

/* "NEW!" patch badge on two of the four cards - same colors as the Home account-card
   badge but a square top-left ribbon, not rotated. */
body.page-soldier_release .benefit-card__patch,
body.page-soldier_release .modal__patch {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mobile sizes in vw (430px frame: px / 4.3 = vw); desktop restores the
     fixed rem values in the media block below. */
  min-height: 6.279vw; /* 27px; was height - WCAG 1.4.12 */
  padding: 0.233vw 4.326vw 0 5vw;
  border-radius: 4.651vw 0 0 0; /* 20px */
  background: var(--leumi-yellow);
  color: var(--leumi-navy);
  font-weight: 900;
  font-size: 3.35vw;
  line-height: 6.047vw; /* 26px */
  /* white-space: nowrap removed - the label is one word, so this was a no-op at
     normal spacing and a clipping risk once spacing is increased (1.4.12). */
}

@media (min-width: 1024px) {
  body.page-soldier_release .sub-hero__media {
    height: 16.5vw;
  }

  /* Desktop patch box per Figma: 90x27px with 16px text at 1920 (the vw values
     above are mobile-only; flex centering comes from the base rule). Height and
     inner metrics are em off its own font-size, which the token floors at 14px,
     so the nowrap label can't clip vertically. Width is vw so the patch keeps the
     card's proportions on laptops instead of widening with the floored text. */
  body.page-soldier_release .benefit-card__patch,
  body.page-soldier_release .modal__patch {
    width: 4.688vw; /* 90px */
    min-height: 1.6875em; /* 27px; was height - WCAG 1.4.12 */
    padding: 0.0625em 0.625em 0; /* 1px 10px 0 */
    border-radius: 1em 0 0 0; /* 20px */
    font-size: var(--fs-16);
    line-height: 1.625em; /* 26px */
  }

  /* Four cards: 3-up row, 4th wraps to its own row without stretching full width. */
  body.page-soldier_release .benefit-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  body.page-soldier_release .benefit-row .benefit-card {
    flex: 0 1 calc((100% - 2.5rem) / 3);
    min-width: 0;
  }

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

  body.page-soldier_release .sub-hero {
    --sub-hero-img-height: 90%;
  }

  body.page-soldier_release .sub-hero__title{
    font-size: 3.6vw;
  }
}