/* Component: Masterclass card (Figma node 950:3601 "masterclass-row-frame",
   redesigned 2026-07 — off-white surface with a line-art icon in place of
   the old dark photo + gradient overlay treatment. Cards stretch evenly to
   fill the 1360px container edge-to-edge, centered, and share row height. */
.masterclass-list {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.masterclass-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
  background: var(--card-surface);
  border: 1px solid var(--fog-white);
}

.masterclass-card__bg {
  width: 100%;
  aspect-ratio: 4096 / 3807;
  object-fit: cover;
}

/* No photo yet (Level II-IV before content lands) — flat fill instead of a
   stock placeholder image, matching the card surface's own tint one shade
   down so the empty box still reads against it. */
.masterclass-card__bg--placeholder {
  background: var(--fog-white);
}

.masterclass-card__eyebrow {
  font-family: var(--font-gotham);
  font-weight: var(--text-body-large-weight);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line);
  letter-spacing: var(--text-body-large-tracking);
  color: var(--dark);
}

.masterclass-card__title {
  font-family: var(--font-gotham);
  font-weight: var(--text-heading-h3-weight);
  font-size: var(--text-heading-h3-size);
  line-height: var(--text-heading-h3-line);
  color: var(--dark);
}

.masterclass-card__desc-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.masterclass-card__description {
  font-family: var(--font-gotham);
  font-weight: var(--text-body-large-weight);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line);
  letter-spacing: var(--text-body-large-tracking);
  color: var(--dark);
}

/* Was --fog-white, which is 1.92:1 on --card-surface, i.e. the duration line
   was effectively invisible on the homepage. Left over from the pre-2026-07
   card, which was a dark photo with a gradient overlay where fog-white was
   the correct muted value. The redesign moved the eyebrow, title and
   description to --dark and this one line was missed. --dark measures 17.3:1.

   Hierarchy is preserved without adding a colour: this line is already set
   apart by size (14px against the description's 18px) and by the light
   weight. Gold was the other candidate and was rejected at 3.24:1, under the
   4.5:1 needed at this size.

   Note this now differs from design/css/components/masterclass-card.css,
   which still carries the original value. design/ is Luis's delivered
   artifact and is left as the historical record; worth confirming with him. */
.masterclass-card__duration {
  font-family: var(--font-gotham);
  font-weight: var(--text-label-light-weight);
  font-size: var(--text-label-light-size);
  line-height: var(--text-label-light-line);
  color: var(--dark);
}

@media (max-width: 1100px) {
  .masterclass-list {
    flex-direction: column;
  }

  .masterclass-card {
    flex: 0 0 auto;
    width: 100%;
  }
}