/* Courses desktop frame (1440 only). The page has no hero section, so
   this one offsets the fixed header itself; the gap under it is the
   header-to-hero token. */
.course-catalog {
  padding-top: calc(var(--header-height) + var(--gap-header-to-hero));
  padding-inline: var(--section-padding-x);
  padding-bottom: 120px; /* her flat 120 around Free Consultation, as FAQ */
}
@media (max-width: 988px) {
  .course-catalog {
    padding-top: calc(var(--header-height-mobile) + var(--gap-header-to-hero));
    padding-inline: var(--section-padding-x-mobile);
  }
}

/* The hero card is the shared `hero-card`. Its online render sits 8
   down in the frame; row mode only — stacked, the shared rule places it. */
@media (min-width: 800px) {
  .course-catalog .hero-card__media img {
    margin-top: 8px;
    height: calc(100% - 8px);
  }
}
/* On a switch the card stays put (her call): text and picture fade
   out, then the next ones fade in — the picture only once decoded. */
.course-catalog .hero-card__text {
  transition: opacity 0.2s ease;
}
.course-catalog .hero-card__text.is-switching {
  opacity: 0;
}
.course-catalog .hero-card__media img {
  transition: opacity 0.2s ease;
}
.course-catalog .hero-card__media img.is-hidden {
  opacity: 0;
}
@media (max-width: 799.98px) {
  .course-catalog .hero-card__media.is-flipped {
    transform: scaleX(-1); /* the online picture only, her call */
  }
}

/* Pills: the frame's 45 (10/20 padding around a 20/125% label), 10
   apart, dot 13 then 10; 56 under the card (30 on the phone), a flat
   20 above the grid — her numbers. The pills ramp to her mobile ends
   (label 14, padding 12, gap 0) — the 1440 values read as far apart
   on the phone.
   White shows under the pointer and travels with the pressed one (one
   moving element, her call). The row scrolls sideways rather than
   wrapping, bleeding to the screen edge on mobile (her call). */
/* No filter row (one format on sale): the row's own top margin. */
.course-catalog .hero-card + .card-grid {
  margin-top: clamp(30px, calc(5.405px + 3.5135vw), 56px);
}

.course-catalog__filters {
  position: relative;
  display: flex;
  gap: clamp(0px, calc(-9.46px + 1.3514vw), 10px);
  --filters-top: clamp(30px, calc(5.405px + 3.5135vw), 56px);
  margin-top: var(--filters-top);
  margin-bottom: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.course-catalog__filters::-webkit-scrollbar { display: none; }
/* A pressed pill paints its own background; nothing travels between
   them, because several can be pressed at once. */
.course-catalog__filter[aria-pressed="true"] {
  background: var(--color-cards-bg);
}
.course-catalog__filter {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px; /* her call: the frame's 20 at every width, not a ramp down to 12 */
  border: none;
  border-radius: var(--radius-label);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(14px, calc(8.324px + 0.81081vw), 20px);
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .course-catalog__filter:hover {
    background: var(--color-cards-bg);
  }
}
.course-catalog__filter--online::before,
.course-catalog__filter--offline::before {
  content: '';
  flex: none;
  /* 9 at 390 → the frame's 13 at 1440; it read huge next to 14px copy. */
  width: clamp(9px, calc(7.514px + 0.38095vw), 13px);
  height: clamp(9px, calc(7.514px + 0.38095vw), 13px);
  border-radius: 50%;
  background: var(--color-pill-online); /* the pills' colours, so the dots mean the same */
}
.course-catalog__filter--offline::before {
  background: var(--color-pill-offline);
}

/* On a phone the row wraps instead of scrolling, so no filter hides off
   the edge, and an unpressed pill carries its own grey (her calls).
   Pressed is white for every pill, formats included — the dots keep
   saying which is which. */
@media (max-width: 988px) {
  .course-catalog__filters {
    flex-wrap: wrap;
    gap: 10px 4px;
    margin-top: calc(var(--filters-top) + 40px); /* her call, over the hero card */
    margin-bottom: 10px;
    overflow: visible;
  }
  /* PROPOSED: the tokens hold no grey between the page and white. */
  .course-catalog__filter { background: #e8e8e8; }
  .course-catalog__filter[aria-pressed="true"] { background: var(--color-cards-bg); }
}

/* The grid is the shared `card-grid`; pills at 14 on full-width cards
   (her call). */
@media (max-width: 659.98px) {
  .course-catalog .course-card .label-pill { font-size: 14px; }
}
.course-catalog .card-grid .course-card[hidden] {
  display: none;
}