/* ===========================================================================
   Class detail page (views/class-detail.blade.php) — "Class Detail Page.png".

   The palette is the one the classes LISTING already uses (fame-list-shell.css:
   ink #0f1f3d, muted #6b7a99, line #e6ebf5, primary #0566e3), so a student who
   clicks a row from the listing stays in the same page family.

   Layout: a tinted hero band with the tab nav, then a cards column plus a
   sticky class card, then the "more classes" strip.
   =========================================================================== */
.fame-class-detail {
  --fcd-ink: #0f1f3d;
  --fcd-muted: #6b7a99;
  --fcd-line: #e6ebf5;
  --fcd-primary: #0566e3;
  --fcd-radius: 16px;
  --fcd-hero-bg: #e8f0fd;
  --fcd-page-bg: #f4f7fc;
  color: var(--fcd-ink);
  background: var(--fcd-page-bg);
  font-size: 14px;
  text-align: left;
}
.fame-class-detail *, .fame-class-detail *::before, .fame-class-detail *::after { box-sizing: border-box; }
.fame-class-detail img { max-width: 100%; }

/* The site container: 1320px with a 20px gutter, the same as the theme's
   .container at xxl and the webinar page's .fw-container. */
.fcd-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }

/* A heading the design does not print but the document still needs. */
.fame-class-detail .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- hero ----------
   The theme's sticky nav bar hangs INTO the page: header-footer.css gives
   .mw-header-sticky-nav margin-bottom:-50px, so the first 50px of whatever
   follows the header sits under it (the webinar page clears it with 130px).
   The hero therefore opens with room for the bar plus the design's gap. */
.fcd-hero { background: var(--fcd-hero-bg); padding: 92px 0 0; }
/* The right-hand column is the instructor card (424px in the design, the same
   width as the class card below it, so the two line up down the page). */
.fcd-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: 24px; align-items: stretch;
  padding-bottom: 30px;
}
/* The tab row sits at the FOOT of the text column, level with the bottom of the
   instructor card beside it — the way the design lines the two up. */
.fcd-hero-left { display: flex; flex-direction: column; }
.fcd-hero-left .fcd-tabs { margin-top: auto; }
/* No cover image saved → the text takes the whole band. */
.fcd-hero-grid.is-single { grid-template-columns: 1fr; }
.fcd-hero-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.fcd-pill {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--fcd-primary); color: #fff; font-size: 12px; font-weight: 600;
}
.fcd-crumb {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: #fff; border-radius: 999px; padding: 5px 14px;
  font-size: 12px; color: var(--fcd-muted);
}
.fcd-crumb a { color: var(--fcd-muted); text-decoration: none; }
.fcd-crumb a:hover { color: var(--fcd-primary); }

.fcd-title { margin: 0 0 12px; font-size: 34px; line-height: 1.22; font-weight: 700; color: var(--fcd-ink); }
.fcd-sub { margin: 0 0 20px; max-width: 54ch; color: var(--fcd-muted); font-size: 14.5px; line-height: 1.65; }

/* ---------- the instructor card (hero, right) ----------
   Everything on it comes from the instructor's user profile. The amber tab is
   the one colour taken from the design; the rest is the page's own palette. */
.fcd-inscard {
  position: relative; text-align: center; padding: 34px 24px 24px;
  background: linear-gradient(180deg, #f9f4fe 0%, #e4edfb 100%);
  border: 1px solid #dfe8fb; border-radius: var(--fcd-radius);
  box-shadow: 0 10px 30px rgba(15, 31, 61, .07);
}
.fcd-inscard-tag {
  position: absolute; top: 0; left: 0; margin: 0;
  background: #ffb400; color: #3a2a00; font-size: 12px; font-weight: 700;
  padding: 6px 18px; border-radius: var(--fcd-radius) 0 14px 0;
}
.fcd-inscard-img {
  display: block; width: 120px; height: 120px; margin: 6px auto 14px;
  border-radius: 50%; object-fit: cover; background: #fff;
}
/* overflow-wrap: an account with no first/last name falls back to its username,
   which can be one long unbreakable word. */
.fcd-inscard-name { margin: 0; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.fcd-inscard-role { margin: 6px 0 0; color: var(--fcd-primary); font-size: 13.5px; font-weight: 600; }

/* One line of credential titles, dot-separated (the dots are drawn here, so the
   markup stays a plain list). */
.fcd-inscard-creds {
  margin: 12px 0 0; padding: 0; list-style: none;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  font-size: 12.5px; color: var(--fcd-muted);
}
.fcd-inscard-creds li { position: relative; }
.fcd-inscard-creds li + li::before {
  content: ""; position: absolute; left: -9px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: #c3cad8; transform: translateY(-50%);
}

.fcd-inscard-btn { margin-top: 18px; padding: 12px 26px; }
.fcd-inscard-links {
  margin: 12px 0 0; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px;
}
.fcd-inscard-links a { color: var(--fcd-muted); text-decoration: none; }
.fcd-inscard-links a:hover { color: var(--fcd-primary); text-decoration: underline; }

/* ---------- tab nav ---------- */
.fcd-tabs { display: flex; gap: 10px; flex-wrap: wrap; padding: 26px 0 0; }
.fcd-tab {
  display: inline-block; background: #fff; color: var(--fcd-ink); text-decoration: none;
  border: 1px solid transparent; border-radius: 10px 10px 0 0; padding: 11px 20px;
  font-size: 13.5px; font-weight: 600;
}
.fcd-tab:hover { color: var(--fcd-primary); }
.fcd-tab.is-active { color: var(--fcd-primary); box-shadow: inset 0 -3px 0 var(--fcd-primary); }

/* ---------- body ---------- */
.fcd-grid {
  /* 872 + 24 + 424 = the design's 1320 container. */
  display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: 24px;
  padding-top: 26px; padding-bottom: 36px; align-items: start;
}
.fcd-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.fcd-card {
  background: #fff; border-radius: var(--fcd-radius); padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 31, 61, .05);
}
.fcd-card-title { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.fcd-rich { color: var(--fcd-muted); font-size: 13.5px; line-height: 1.7; }
.fcd-rich p { margin: 0 0 10px; }
.fcd-rich p:last-child { margin-bottom: 0; }
.fcd-rich a { color: var(--fcd-primary); }

/* What you will learn — two columns of ticked points */
.fcd-learn { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.fcd-learn-item { display: flex; gap: 10px; align-items: flex-start; }
.fcd-learn-ico { flex: 0 0 auto; color: var(--fcd-primary); line-height: 0; margin-top: 1px; }
.fcd-learn-text { font-size: 13px; line-height: 1.55; color: var(--fcd-ink); }
.fcd-learn-desc { display: block; margin-top: 3px; color: var(--fcd-muted); font-size: 12.5px; }

/* ---------- buttons ---------- */
.fcd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 10px; padding: 12px 18px; font-size: 13.5px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.fcd-btn--sm { padding: 9px 16px; font-size: 12.5px; }
.fcd-btn--join { background: var(--fcd-primary); color: #fff; }
.fcd-btn--join:hover { background: #0450b4; color: #fff; }
/* Before the class starts the button counts down ("Join in 2 hours"): a soft
   tint so it reads as "not yet", filling in when it turns to "Join now". */
.fcd-btn--join.is-soon { background: #e4eefc; color: var(--fcd-primary); }
.fcd-btn--join.is-soon:hover { background: #d3e3fb; color: var(--fcd-primary); }
.fcd-btn--ghost { background: #fff; border-color: var(--fcd-line); color: var(--fcd-ink); }
.fcd-btn--ghost:hover { border-color: #c7d5ee; color: var(--fcd-primary); }
.fcd-btn-ico { line-height: 0; }

/* ---------- sidebar ---------- */
.fcd-side { position: sticky; top: 90px; }
.fcd-sidecard {
  background: linear-gradient(180deg, #eef4ff 0%, #f6f3ff 100%);
  border: 1px solid #dfe8fb; border-radius: var(--fcd-radius); padding: 20px;
}
.fcd-status {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px;
  background: #fff; border-radius: 999px; padding: 5px 13px;
  font-size: 12px; font-weight: 600;
}
.fcd-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2aab8c; }
.fcd-status.is-past { color: var(--fcd-muted); }
.fcd-status.is-past .fcd-status-dot { background: var(--fcd-muted); }

.fcd-facts { margin: 0 0 16px; display: flex; flex-direction: column; gap: 14px; }
.fcd-fact { display: flex; gap: 12px; align-items: flex-start; }
.fcd-fact-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.fcd-fact--date .fcd-fact-ico { color: #2aab8c; }
.fcd-fact--time .fcd-fact-ico { color: #e2545b; }
.fcd-fact--dur .fcd-fact-ico { color: #f0a23a; }
.fcd-fact--type .fcd-fact-ico { color: #7c5ce8; }
.fcd-fact--venue .fcd-fact-ico { color: var(--fcd-primary); }
.fcd-fact-label { margin: 0; font-size: 11.5px; color: var(--fcd-muted); font-weight: 500; }
.fcd-fact-value { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; }

.fcd-note {
  margin: 0 0 14px; background: #fdf3e3; border-radius: 10px; padding: 10px 13px;
  font-size: 12px; line-height: 1.5; color: #8a6523;
}
.fcd-note--ok { background: #e6f6f1; color: #1d6f5b; }
.fcd-sidehint { margin: 8px 0 0; font-size: 11.5px; color: var(--fcd-muted); text-align: center; }

.fcd-sidecard .fcd-btn { width: 100%; }
.fcd-btn--cal { margin-top: 10px; background: #fff; border-color: #dfe8fb; color: var(--fcd-ink); font-weight: 600; }
.fcd-btn--cal:hover { border-color: #c7d5ee; color: var(--fcd-primary); }

/* ---------- more upcoming classes ---------- */
.fcd-more { padding: 10px 0 44px; }
.fcd-more-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.fcd-more-title { margin: 0; font-size: 22px; font-weight: 700; }
.fcd-more-link { color: var(--fcd-primary); font-size: 13px; text-decoration: none; }
.fcd-more-link:hover { text-decoration: underline; }
.fcd-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.fcd-mini { background: #fff; border-radius: var(--fcd-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 31, 61, .05); }
.fcd-mini-media { display: block; height: 128px; background: #eef2f9; }
.fcd-mini-media img { width: 100%; height: 100%; object-fit: cover; }
.fcd-mini-body { padding: 14px 16px 16px; }
.fcd-mini-chip {
  display: inline-block; margin: 0 0 8px; padding: 3px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.fcd-mini-chip.is-online { background: #e7f0fd; color: var(--fcd-primary); }
.fcd-mini-chip.is-physical { background: #1b2436; color: #fff; }
.fcd-mini-title { margin: 0 0 6px; font-size: 14.5px; line-height: 1.4; font-weight: 700; }
.fcd-mini-title a { color: inherit; text-decoration: none; }
.fcd-mini-title a:hover { color: var(--fcd-primary); }
.fcd-mini-meta { margin: 0; font-size: 12px; color: var(--fcd-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  /* The instructor card goes FIRST on a narrow screen, as the cover image did. */
  .fcd-hero-grid { grid-template-columns: 1fr; }
  .fcd-hero-right { order: -1; }
  .fcd-grid { grid-template-columns: 1fr; }
  .fcd-side { position: static; }
  .fcd-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fcd-hero { padding-top: 76px; }   /* the nav bar still overlaps by 50px */
  .fcd-title { font-size: 25px; }
  .fcd-learn { grid-template-columns: 1fr; }
  .fcd-more-grid { grid-template-columns: 1fr; }
  .fcd-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .fcd-tab { white-space: nowrap; }
}