/* ===========================================================================
   Public profile page (/profile/{username}) — views/public-profile.blade.php.

   A first-pass design in the class-detail page's visual language (same palette
   and card shapes), so the two public pages read as one family. Meant to be
   replaced once the real design lands.

   One sheet covers both faces of the page: the instructor profile (about,
   courses, classes) and the student card (whitelisted facts only).
   =========================================================================== */
.fame-profile {
  --fpr-ink: #0f1f3d;
  --fpr-muted: #6b7a99;
  --fpr-line: #e6ebf5;
  --fpr-primary: #0566e3;
  --fpr-radius: 16px;
  /* partials/class-mini-card is styled by fame-class-detail.css, whose tokens
     live on .fame-class-detail — the same palette, redeclared here so the card
     keeps its colours on this page. */
  --fcd-ink: #0f1f3d;
  --fcd-muted: #6b7a99;
  --fcd-line: #e6ebf5;
  --fcd-primary: #0566e3;
  --fcd-radius: 16px;
  color: var(--fpr-ink);
  background: #f4f7fc;
  font-size: 14px;
  text-align: left;
  /* The page is dropped into the theme shell, which may lay its children out in
     a flex/inline context — without this the <main> shrink-wraps its content and
     the hero band stops wherever the text does. */
  display: block;
  width: 100%;
}
.fame-profile *, .fame-profile *::before, .fame-profile *::after { box-sizing: border-box; }
.fame-profile img { max-width: 100%; }

.fpr-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }

/* ---------- hero ----------
   A full-bleed band; .fpr-wrap centres the content inside it. The 92px of top
   padding clears the theme's sticky nav, which hangs 50px into the page
   (.mw-header-sticky-nav has margin-bottom:-50px). */
.fpr-hero { background: #e8f0fd; padding: 92px 0 34px; }
.fpr-hero-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.fpr-avatar {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  background: #fff; border: 4px solid #fff; flex: 0 0 auto;
  box-shadow: 0 10px 30px rgba(15, 31, 61, .10);
}
.fpr-hero-text { min-width: 0; flex: 1 1 320px; }

.fpr-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.fpr-badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.fpr-badge.is-instructor { background: #ffb400; color: #3a2a00; }
.fpr-badge.is-student { background: var(--fpr-primary); color: #fff; }
.fpr-crumb {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border-radius: 999px; padding: 5px 14px;
  font-size: 12px; color: var(--fpr-muted);
}
.fpr-crumb a { color: var(--fpr-muted); text-decoration: none; }
.fpr-crumb a:hover { color: var(--fpr-primary); }

.fpr-name { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.fpr-role { margin: 6px 0 0; color: var(--fpr-primary); font-size: 14.5px; font-weight: 600; }

.fpr-creds { margin: 14px 0 0; padding: 0; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; }
.fpr-cred { background: #fff; border: 1px solid var(--fpr-line); border-radius: 10px; padding: 8px 14px; }
.fpr-cred-title { display: block; font-size: 13px; font-weight: 700; }
.fpr-cred-note { display: block; margin-top: 2px; font-size: 11.5px; color: var(--fpr-muted); }

.fpr-links { margin: 16px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.fpr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
}
.fpr-btn--ghost { background: #fff; border-color: var(--fpr-line); color: var(--fpr-ink); }
.fpr-btn--ghost:hover { border-color: #c7d5ee; color: var(--fpr-primary); }

/* ---------- body ---------- */
.fpr-body { display: flex; flex-direction: column; gap: 18px; padding-top: 26px; padding-bottom: 44px; }

.fpr-card {
  background: #fff; border-radius: var(--fpr-radius); padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 31, 61, .05);
}
.fpr-card-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.fpr-about { margin: 0; color: var(--fpr-muted); font-size: 13.5px; line-height: 1.7; }
.fpr-empty { margin: 0; color: var(--fpr-muted); font-size: 13.5px; }
.fpr-since { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--fpr-line); font-size: 12.5px; color: var(--fpr-muted); }

/* Student facts */
.fpr-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.fpr-fact dt { margin: 0; font-size: 11.5px; color: var(--fpr-muted); }
.fpr-fact dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Instructor content. The cards are the site's own (partials/course-card,
   partials/class-mini-card), so only the grid lives here. */
.fpr-grid { display: grid; gap: 20px; }
.fpr-grid--courses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fpr-grid--classes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .fpr-grid--courses, .fpr-grid--classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fpr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fpr-hero { padding: 76px 0 26px; }
  .fpr-hero-inner { gap: 18px; }
  .fpr-avatar { width: 96px; height: 96px; }
  .fpr-name { font-size: 23px; }
  .fpr-grid--courses, .fpr-grid--classes { grid-template-columns: 1fr; }
  .fpr-facts { grid-template-columns: 1fr; }
}