/* 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
   home hero's (8 → 0). */
.course-catalog {
  padding-top: calc(var(--header-height) + clamp(0px, calc(-7.57px + 1.081vw), 8px));
  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) + clamp(0px, calc(-7.57px + 1.081vw), 8px));
    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). */
.course-catalog__filters {
  position: relative;
  display: flex;
  gap: clamp(0px, calc(-9.46px + 1.3514vw), 10px);
  margin-top: clamp(30px, calc(5.405px + 3.5135vw), 56px);
  margin-bottom: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.course-catalog__filters::-webkit-scrollbar { display: none; }
@media (max-width: 988px) {
  .course-catalog__filters {
    margin-inline: calc(-1 * var(--section-padding-x-mobile));
    padding-inline: var(--section-padding-x-mobile);
  }
}
.course-catalog__filter-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: var(--radius-label);
  background: var(--color-cards-bg);
  opacity: 0;
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
}
/* First placement jumps, not slides. */
.course-catalog__filter-bg:not(.is-placed) {
  transition: none;
}
.course-catalog__filter-bg.is-placed {
  opacity: 1;
}
.course-catalog__filter {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(12px, calc(4.432px + 1.0811vw), 20px);
  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;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-accent-buttons); /* the frame's #b5f085, read as the token */
}
.course-catalog__filter--offline::before {
  background: #a1a1a1; /* the frame's one-off, not a token */
}

/* 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;
}