/* The catalog hero card. Consumers: Course Catalog, Blog. The frame's
   410 at 1440, kept proportional to the viewport. Inside, a row: 62
   inset, a 390 picture slot, 132 gap, the 488 text column centred, a
   right inset equal to the gap (her call) and the rest free. The slot
   is the frames' — both put the text at 584 whatever the picture's
   width (her call) — and scales with the card; the picture sits
   centred in it at the card's height, its box the render's 1× ratio
   (set inline by the renderer), so it scales with the card and always
   shows the frame's crop — her call, over a width-driven picture that
   got cut deeper as the card lost height. Inset and gap ramp 700→1440
   (floors 30, PROPOSED), free space goes first, the text shrinks last.
   Stacks below 800. */
.hero-card {
  --hero-card-height: min(calc(28.47vw / var(--zoom)), 410px);
  display: flex;
  align-items: center;
  gap: clamp(30px, calc(-66.49px + 13.784vw), 132px);
  height: var(--hero-card-height);
  padding-left: clamp(30px, calc(-0.27px + 4.3243vw), 62px);
  padding-right: clamp(30px, calc(-66.49px + 13.784vw), 132px); /* as the gap, her call */
  border-radius: var(--radius-big);
  background: var(--color-cards-bg);
  overflow: hidden;
}
@media (max-width: 988px) {
  .hero-card { border-radius: var(--radius-big-mobile); }
}
.hero-card__media {
  flex: none;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  width: calc(var(--hero-card-height) * 390 / 410);
  height: var(--hero-card-height);
}
/* A render fills its box exactly; a whole picture takes the same crop
   from the top. The ratio stays on the img in every mode. */
.hero-card__media img {
  display: block;
  height: 100%;
  aspect-ratio: var(--hero-card-media-w) / var(--hero-card-media-h);
  object-fit: cover;
  object-position: 50% 0;
}
.hero-card__text {
  flex: 1 1 488px;
  max-width: 488px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-heading-to-subtitle); /* the frame's 11 → the token */
}
.hero-card__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500; /* the frame's Medium, flat — not the section title's fluid weight */
  /* The H2 token with a 32 low end over its 28 — her "a bit bigger" on
     the phone, 32 PROPOSED (recipe). */
  font-size: clamp(32px, calc(14.973px + 2.4324vw), 50px);
  line-height: 1.3;
}
.hero-card__body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-hero);
  line-height: 1.35;
}
/* The shared button is width:100%; the wrapper hugs the label as in
   the Contacts frame, a CTA gap under the body. */
.hero-card__action {
  width: fit-content;
  margin-top: var(--gap-content-to-cta);
}
/* Stacked (PROPOSED, no frame): text with the card padding, capped at
   the frame's 488 column (her call: cap the line), then the
   illustration under it at its desktop width, flush with the card's
   right inset (her call), showing the same crop. */
@media (max-width: 799.98px) {
  .hero-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: 0;
  }
  .hero-card__text {
    order: -1;
    flex: none;
    padding: var(--card-padding-m-block);
  }
  .hero-card__action {
    width: 100%; /* full width on the phone, as the consultation's button */
  }
  .hero-card__media {
    align-self: flex-end;
    height: auto;
    width: min(calc(100% - var(--card-padding-m-block)), calc(var(--hero-card-media-w) * 1px));
    margin: 0 var(--card-padding-m-block) 0 0;
    overflow: hidden; /* or the flex item grows to the image's own ratio */
  }
  .hero-card__media img {
    width: 100%;
    height: auto;
  }
}