/* Under Hero, which ends on a flat 120: on desktop the strip's margin-top
   takes it back to the frame's 20; recompute if that 120 changes. Below
   the row the air above equals the air below, both the sitewide section
   spacing (her call): above, that token less Hero's own 120. */
.course-info {
  margin-top: -100px;
  padding-inline: var(--section-padding-x);
  padding-bottom: var(--section-spacing);
}
@media (max-width: 988px) {
  .course-info {
    margin-top: calc(var(--section-spacing) - 120px);
    padding-inline: var(--section-padding-x-mobile);
  }
}

.course-info__list {
  display: flex;
  gap: clamp(10px, calc(6.286px + 0.9524vw), 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Row from the header breakpoint (the text wraps in its cards down to
   989, where a card is ~298), a stack below, cards the container's width. */
@media (max-width: 988px) {
  .course-info__list { flex-direction: column; }
}

.course-info__card {
  flex: 1 1 0;
  min-width: 0;
  /* Row: the text on the left, the icon on the right edge (her call, over
     the frame's icon on the left); the stack below swaps it back. */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, calc(16.286px + 0.9524vw), 30px) 40px;
  background: var(--color-cards-bg);
  border-radius: var(--radius-medium); /* both frames say 24: flat, not the mobile token */
}

.course-info__icon {
  flex: none;
  display: block;
  width: auto;
}
.course-info__icon--calendar,
.course-info__icon--cap { height: clamp(38px, calc(37.257px + 0.1905vw), 40px); }
.course-info__icon--clock { height: clamp(38px, calc(36.143px + 0.4762vw), 43px); }
/* The frame draws the cap turned to face the text. */
.course-info__icon--cap { transform: scaleX(-1); }

.course-info__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.course-info__title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 500; /* the frame mixes Medium and Geologica Regular; one weight */
  font-size: clamp(18px, calc(17.257px + 0.1905vw), 20px);
  line-height: 1.1;
}
.course-info__caption {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
}

/* Stacked: the three cards share one text line and the icons sit centred
   in a common column as wide as the widest (the cap, 63→66) — her call;
   the frame lets each card's content find its own centre. Must stay after
   the card rule above. */
@media (max-width: 988px) {
  .course-info__card {
    display: grid;
    grid-template-columns: clamp(63px, calc(61.886px + 0.2857vw), 66px) minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 16px;
    padding-left: 30px;
  }
  .course-info__icon { justify-self: center; }
}