/* ===========================================================================
   Classes Listing element (fame/classes-list) — the CARD only.

   Everything above the results (pill bar, search, layout, filter rail, toolbar,
   empty state, pager) is fame-list-shell.css, shared with the ebooks listing.
   The wrapper carries both classes — class="fame-list-shell fame-classes-list" —
   and the shell's stylesheet must be linked FIRST, since the --feb-* variables
   come from it.

   A row is cover | body | actions, collapsing to a stack on narrow screens.
   =========================================================================== */
.fame-classes-list {
  --fcl-online: #0566e3;
  --fcl-physical: #7c5ce8;
}

.feb-grid { display: flex; flex-direction: column; gap: 16px; }

.fcl-card {
  display: grid; grid-template-columns: 150px 1fr 200px; gap: 20px;
  background: #fff; border: 1px solid var(--feb-line); border-radius: var(--feb-radius);
  padding: 16px; align-items: stretch;
}
.fcl-card[hidden] { display: none; }

/* ---- cover + date badge ---- */
.fcl-media {
  position: relative; display: block; border-radius: 10px; overflow: hidden;
  background: #f3f6fc; align-self: stretch; min-height: 132px;
}
.fcl-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fcl-datebadge {
  position: absolute; top: 10px; left: 10px; width: 46px;
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(15, 31, 61, .18);
}
.fcl-datebadge-m {
  width: 100%; text-align: center; background: var(--feb-primary); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 0;
}
.fcl-datebadge-d { font-size: 17px; font-weight: 700; color: var(--feb-ink); padding: 2px 0 4px; }

/* ---- body ---- */
/* text-align is explicit: the element can sit in a theme section that centres
   its text, and the row must always read left. */
.fcl-body { min-width: 0; display: flex; flex-direction: column; text-align: left; }
.fcl-chips { margin: 0 0 7px; display: flex; gap: 7px; flex-wrap: wrap; }
.fcl-chip {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.fcl-chip.is-online { background: #e7f0fd; color: var(--fcl-online); }
.fcl-chip.is-physical { background: #f0ecfd; color: var(--fcl-physical); }

.fcl-title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; }
.fcl-title a { color: inherit; text-decoration: none; }
.fcl-title a:hover { color: var(--feb-primary); }
.fcl-by { font-size: 12.5px; font-weight: 500; color: var(--feb-primary); white-space: nowrap; }

.fcl-desc { margin: 6px 0 0; color: var(--feb-muted); font-size: 13px; line-height: 1.55; }

.fcl-tags { margin: 10px 0 0; display: flex; gap: 7px; flex-wrap: wrap; }
.fcl-tag {
  display: inline-block; padding: 4px 11px; border-radius: 6px;
  background: #f1f4fa; color: var(--feb-muted); font-size: 11.5px; font-weight: 600;
}

/* The facts sit on a rule at the foot of the row, as in the design. */
.fcl-facts {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--feb-line);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.fcl-fact { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--feb-muted); }
.fcl-fact:nth-child(1) svg { color: #2aab8c; }
.fcl-fact:nth-child(2) svg { color: #e2545b; }
.fcl-fact:nth-child(3) svg { color: #f0a23a; }

/* ---- actions ---- */
.fcl-actions {
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
  border-left: 1px solid var(--feb-line); padding-left: 20px;
}
.fcl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 9px; padding: 11px 14px; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.fcl-btn-join { background: var(--feb-primary); color: #fff; }
.fcl-btn-join:hover { background: #0450b4; color: #fff; }
/* Counting down before the start ("Join in 2 hours"): a soft tint until it turns to "Join now". */
.fcl-btn-join.is-soon { background: #e4eefc; color: var(--feb-primary); }
.fcl-btn-join.is-soon:hover { background: #d3e3fb; color: var(--feb-primary); }
.fcl-btn-ghost { background: #fff; border-color: var(--feb-line); color: var(--feb-ink); }
.fcl-btn-ghost:hover { border-color: #c7d5ee; color: var(--feb-primary); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .feb-layout { grid-template-columns: 1fr; }
  .feb-rail { order: -1; }
}
@media (max-width: 720px) {
  .fcl-card { grid-template-columns: 110px 1fr; }
  .fcl-actions {
    grid-column: 1 / -1; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--feb-line); padding-top: 14px;
    flex-direction: row; flex-wrap: wrap;
  }
  .fcl-btn { flex: 1 1 140px; }
  .fcl-title { font-size: 15.5px; }
  .fcl-by { display: block; white-space: normal; }
}