/* ============================================================================
   Coaching hub — landing surface at #/coaching
   ============================================================================
   Page composition (top → bottom):
     1. Hero panel        — 2-col: stats left, AI suggestion right
     2. Action card row   — 3 cards: AI Coach / Browse Coaches / Courses
     3. Continue learning — 3-col course grid with race-themed cover gradients
     4. Live + Coach split — 2-col: Live now feed | Become-a-coach panel
     5. Coach-a-friend bar — full-width footer row

   Token discipline: only --color-*, --space-*, --radius-*, --font-*, etc.
   Race colors are referenced via --color-race-{terran,protoss,zerg,random}.
   No --bg-0/--text-mute/--line/raw --accent — those belong to the JSX
   prototype's separate token system and must not leak in.
   ========================================================================= */

.coaching-hub {
  width: 100%;
}

.coaching-hub__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   Eyebrow — uppercase mono caption used everywhere
   --------------------------------------------------------------------------- */

.coaching-hub__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ----------------------------------------------------------------------------
   1. Hero panel — 2-column command-deck layout
   --------------------------------------------------------------------------- */

.coaching-hub__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-6);
  background:
    linear-gradient(135deg, var(--color-accent-soft), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.30)),
    var(--color-bg-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.coaching-hub__hero::before {
  /* Vertical accent seam at the boundary between the 1.1fr left and 1fr right columns */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% * 1.1 / 2.1);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-accent), transparent);
  opacity: 0.35;
  pointer-events: none;
}

.coaching-hub__hero-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.coaching-hub__hero-right {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.coaching-hub__hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  line-height: var(--leading-tight);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.coaching-hub__hero-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coaching-hub__hero-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}

/* Stat tile row — always 4 columns on desktop, always renders */
.coaching-hub__hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

.coaching-hub__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.coaching-hub__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.coaching-hub__stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.coaching-hub__stat-value--zerg    { color: var(--color-race-zerg); }
.coaching-hub__stat-value--terran  { color: var(--color-race-terran); }
.coaching-hub__stat-value--protoss { color: var(--color-race-protoss); }
.coaching-hub__stat-value--random  { color: var(--color-race-random); }

.coaching-hub__stat-delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.coaching-hub__stat-delta.is-pos { color: var(--color-success); }
.coaching-hub__stat-delta.is-neg { color: var(--color-danger); }
.coaching-hub__stat-delta.is-subline { color: var(--color-text-subtle); }

/* AI suggestion side card */
.coaching-hub__suggest {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  width: 100%;
  background: rgba(86, 194, 255, 0.04);
  border: 1px solid rgba(86, 194, 255, 0.25);
  border-radius: var(--radius-md);
}

.coaching-hub__suggest-body {
  flex: 1 1 auto;
  margin-top: var(--space-2);
}

.coaching-hub__suggest-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.coaching-hub__suggest-text strong {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.coaching-hub__suggest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Reusable pill button (suggest CTAs + footer Start session) */
.coaching-hub__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.coaching-hub__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.coaching-hub__btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}

.coaching-hub__btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent-hover);
}

/* ----------------------------------------------------------------------------
   2. Primary action cards — exactly 3 cards in a single row
   --------------------------------------------------------------------------- */

.coaching-hub__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.coaching-hub__action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  min-height: 220px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.25)),
    var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  --card-accent: var(--color-text-muted);
}

.coaching-hub__action-card:hover {
  border-color: var(--card-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.coaching-hub__action-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.coaching-hub__action-card--cyan {
  --card-accent: var(--color-accent);
  background:
    linear-gradient(135deg, var(--color-accent-soft), transparent 50%),
    var(--color-bg-raised);
  border-color: rgba(86, 194, 255, 0.3);
}

.coaching-hub__action-card--cyan.coaching-hub__action-card--glow {
  box-shadow:
    0 0 0 1px rgba(86, 194, 255, 0.15),
    0 8px 32px rgba(86, 194, 255, 0.10);
}

.coaching-hub__action-card--gold {
  --card-accent: var(--color-race-protoss);
}
.coaching-hub__action-card--gold:hover {
  border-color: var(--color-race-protoss);
}

.coaching-hub__action-card--purple {
  --card-accent: var(--color-race-zerg);
}
.coaching-hub__action-card--purple:hover {
  border-color: var(--color-race-zerg);
}

/* Corner accent flourish */
.coaching-hub__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  border-top: 1px solid var(--card-accent);
  border-right: 1px solid var(--card-accent);
  pointer-events: none;
}

.coaching-hub__corner--bl {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid var(--card-accent);
  border-left: 1px solid var(--card-accent);
}

.coaching-hub__action-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-1);
  border: 1px solid var(--card-accent);
  border-radius: var(--radius-md);
  color: var(--card-accent);
  background: rgba(0, 0, 0, 0.30);
}

.coaching-hub__action-eyebrow {
  /* Inherits .coaching-hub__eyebrow but lets us tighten in special variants */
  color: var(--color-text-subtle);
}

.coaching-hub__action-card--cyan .coaching-hub__action-eyebrow {
  color: var(--color-accent);
}

.coaching-hub__action-card--gold .coaching-hub__action-eyebrow {
  color: var(--color-race-protoss);
}

.coaching-hub__action-card--purple .coaching-hub__action-eyebrow {
  color: var(--color-race-zerg);
}

.coaching-hub__action-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.coaching-hub__action-body {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.coaching-hub__action-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}

.coaching-hub__action-cta {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--card-accent);
}

.coaching-hub__action-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-subtle);
}

/* ----------------------------------------------------------------------------
   3. Continue learning — heading + 3-column course grid
   --------------------------------------------------------------------------- */

.coaching-hub__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.coaching-hub__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.coaching-hub__section-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
}

.coaching-hub__section-accessory {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.coaching-hub__section-more {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  text-decoration: none;
}

.coaching-hub__section-more:hover {
  color: var(--color-accent-hover);
}

.coaching-hub__section-more--bottom {
  align-self: flex-end;
  margin-top: var(--space-2);
}

.coaching-hub__course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.coaching-hub__course-skel {
  border-radius: var(--radius-lg);
}

/* Course card */
.coaching-hub__course-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.coaching-hub__course-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.coaching-hub__course-card--zerg:hover    { border-color: rgba(167, 139, 250, 0.40); }
.coaching-hub__course-card--terran:hover  { border-color: rgba(86, 194, 255, 0.40); }
.coaching-hub__course-card--protoss:hover { border-color: rgba(247, 201, 72, 0.40); }

.coaching-hub__course-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.coaching-hub__course-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-elevated);
}

/* Race-themed gradient covers — pure CSS, no image dependency */
.coaching-hub__course-cover--zerg {
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.28), rgba(196, 107, 255, 0.10)),
    linear-gradient(45deg, #1a0d2e, #0d1f3d);
}
.coaching-hub__course-cover--terran {
  background:
    linear-gradient(135deg, rgba(86, 194, 255, 0.28), rgba(31, 95, 168, 0.14)),
    #0a1729;
}
.coaching-hub__course-cover--protoss {
  background:
    linear-gradient(135deg, rgba(247, 201, 72, 0.24), rgba(181, 132, 24, 0.10)),
    #1a1407;
}
.coaching-hub__course-cover--placeholder {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.20)),
    var(--color-bg-elevated);
}

.coaching-hub__course-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.55));
}

.coaching-hub__course-pct {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.6);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
}

.coaching-hub__course-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.coaching-hub__course-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coaching-hub__course-author {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.coaching-hub__course-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
}

.coaching-hub__progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-1);
}

.coaching-hub__progress-fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width var(--duration-medium) var(--ease-out);
}

.coaching-hub__course-card--zerg    .coaching-hub__progress-fill { background: var(--color-race-zerg); }
.coaching-hub__course-card--terran  .coaching-hub__progress-fill { background: var(--color-race-terran); }
.coaching-hub__course-card--protoss .coaching-hub__progress-fill { background: var(--color-race-protoss); }

.coaching-hub__course-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

/* Reusable chip — race tags + LIVE/HOT/PRIVATE badges + due-today flag */
.coaching-hub__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.coaching-hub__chip--small {
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.coaching-hub__chip--zerg {
  color: var(--color-race-zerg);
  border-color: rgba(167, 139, 250, 0.40);
  background: rgba(167, 139, 250, 0.10);
}
.coaching-hub__chip--terran {
  color: var(--color-race-terran);
  border-color: rgba(86, 194, 255, 0.40);
  background: rgba(86, 194, 255, 0.10);
}
.coaching-hub__chip--protoss {
  color: var(--color-race-protoss);
  border-color: rgba(247, 201, 72, 0.40);
  background: rgba(247, 201, 72, 0.10);
}
.coaching-hub__chip--due {
  color: var(--color-warning);
  border-color: rgba(251, 191, 36, 0.40);
  background: rgba(251, 191, 36, 0.10);
}
.coaching-hub__chip--live {
  color: var(--color-danger);
  border-color: rgba(248, 113, 113, 0.40);
  background: rgba(248, 113, 113, 0.10);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.coaching-hub__chip--live .coaching-hub__live-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-danger);
  box-shadow: 0 0 8px var(--color-danger);
  animation: coachingHubPulse 1.4s infinite;
}

@keyframes coachingHubPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ----------------------------------------------------------------------------
   4. Live + Become-a-coach split
   --------------------------------------------------------------------------- */

.coaching-hub__split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

/* Live now feed */
.coaching-hub__livefeed {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.coaching-hub__live-skel {
  border-radius: var(--radius-md);
}

.coaching-hub__live-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-body);
  transition: background var(--duration-fast) var(--ease-out);
}

.coaching-hub__live-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.coaching-hub__live-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.coaching-hub__live-row--empty {
  grid-template-columns: minmax(0, 1fr) auto;
}

.coaching-hub__live-empty-text {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.coaching-hub__live-avatar {
  position: relative;
  display: inline-flex;
}

.coaching-hub__live-pulse {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--color-danger);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 6px var(--color-danger);
  animation: coachingHubPulse 1.4s infinite;
}

.coaching-hub__live-main {
  min-width: 0;
}

.coaching-hub__live-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.coaching-hub__live-host {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.coaching-hub__live-host--zerg    { color: var(--color-race-zerg); }
.coaching-hub__live-host--terran  { color: var(--color-race-terran); }
.coaching-hub__live-host--protoss { color: var(--color-race-protoss); }

.coaching-hub__live-text {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.coaching-hub__live-watchers {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.coaching-hub__live-cta {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Become-a-coach panel — gold-accented CTA card */
.coaching-hub__coach-cta {
  position: relative;
  padding: var(--space-6);
  background:
    linear-gradient(180deg, rgba(247, 201, 72, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.30)),
    var(--color-bg-raised);
  border: 1px solid rgba(247, 201, 72, 0.25);
  border-radius: var(--radius-lg);
  overflow: hidden;
  --card-accent: var(--color-race-protoss);
}

.coaching-hub__coach-cta::before {
  /* Soft radial glow in the top-right corner */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 90% 10%, rgba(247, 201, 72, 0.08), transparent 60%);
  pointer-events: none;
}

.coaching-hub__coach-cta-title {
  margin: var(--space-2) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.coaching-hub__coach-cta-body {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.coaching-hub__coach-cta-body strong {
  color: var(--color-race-protoss);
  font-weight: var(--weight-semibold);
}

.coaching-hub__coach-cta-btn {
  margin-top: var(--space-4);
}

/* Bullets — used inside the coach-cta panel */
.coaching-hub__bullets {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.coaching-hub__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.coaching-hub__bullet-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-race-protoss);
}

/* ----------------------------------------------------------------------------
   5. Coach-a-friend footer bar
   --------------------------------------------------------------------------- */

.coaching-hub__friend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.coaching-hub__friend-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.coaching-hub__friend-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: var(--tracking-display);
}

.coaching-hub__friend-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.coaching-hub__friend-avatars {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Stack overlapping avatars */
.coaching-hub__friend-avatars .coaching-hub__friend-avatar {
  border: 2px solid var(--color-bg-raised);
  margin-left: -10px;
}

.coaching-hub__friend-avatars .coaching-hub__friend-avatar:first-child {
  margin-left: 0;
}

.coaching-hub__friend-tail {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-left: var(--space-2);
}

/* ----------------------------------------------------------------------------
   Mobile (<= 767px)
   - Hero collapses to single column; vertical seam removed
   - Action cards stack
   - Course grid + live-now go single-column
   - Coach-a-friend footer stacks
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .coaching-hub__hero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }
  .coaching-hub__hero::before {
    display: none;
  }
  .coaching-hub__hero-title {
    font-size: var(--text-3xl);
  }
  .coaching-hub__hero-tag {
    font-size: var(--text-base);
  }
  .coaching-hub__hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .coaching-hub__actions,
  .coaching-hub__course-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .coaching-hub__action-card {
    padding: var(--space-4);
    min-height: 0;
  }

  .coaching-hub__split {
    grid-template-columns: minmax(0, 1fr);
  }

  .coaching-hub__live-row {
    /* Drop the watchers column on mobile to keep the row from cramping. */
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .coaching-hub__live-watchers {
    display: none;
  }

  .coaching-hub__friend {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .coaching-hub__friend-avatars {
    justify-self: start;
  }
  .coaching-hub__friend-cta {
    justify-self: start;
  }

  .coaching-hub__inner {
    gap: var(--space-5);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .coaching-hub__action-card,
  .coaching-hub__course-card,
  .coaching-hub__progress-fill,
  .coaching-hub__live-row {
    transition: none;
  }
  .coaching-hub__action-card:hover,
  .coaching-hub__course-card:hover {
    transform: none;
  }
  .coaching-hub__live-pulse,
  .coaching-hub__chip--live .coaching-hub__live-dot {
    animation: none;
  }
}


/* ============================================================
 * Coming Soon — vespene-1.2 launch gating for the Coaching Hub.
 *   - .coaching-hub__action-card.is-coming-soon — Browse Coaches +
 *     Courses cards in the action row.
 *   - .coaching-hub__btn.is-coming-soon — "Find a coach" hero CTA in
 *     the AI suggestion card.
 *   - .coaching-hub__section-more.is-coming-soon — "View library →"
 *     link on the Continue learning section.
 * Drop this whole block + the `comingSoon: true` callsites + the
 * is-coming-soon classes on launch.
 * ============================================================ */

/* --- Action cards (Browse Coaches / Courses) ---------------------- */

.coaching-hub__action-card.is-coming-soon {
  cursor: not-allowed;
  opacity: 0.78;
  filter: saturate(0.85);
  position: relative;
}
.coaching-hub__action-card.is-coming-soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border, #2a2f36);
}
.coaching-hub__action-card.is-coming-soon::after {
  /* Subtle diagonal stripe overlay so the disabled state is unmistakable
   * even if a screen reader user lands here. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) 22px,
    rgba(255, 255, 255, 0.02) 22px,
    rgba(255, 255, 255, 0.02) 24px
  );
}

.coaching-hub__action-soon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-display, Rajdhani), sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #56c2ff);
  background: var(--color-accent-soft, rgba(86, 194, 255, 0.12));
  border: 1px solid var(--color-accent-line, rgba(86, 194, 255, 0.35));
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}
.coaching-hub__action-soon::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* --- Hero btns (AI suggestion card secondary) --------------------- */

.coaching-hub__btn.is-coming-soon {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(0.7);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.coaching-hub__btn-soon {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--color-accent-soft, rgba(86, 194, 255, 0.18));
  color: var(--color-accent, #56c2ff);
  line-height: 1.4;
  white-space: nowrap;
}

/* --- Section heading + "View library →" link --------------------- */

.coaching-hub__heading-soon {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--font-display, Rajdhani), sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent, #56c2ff);
  background: var(--color-accent-soft, rgba(86, 194, 255, 0.12));
  border: 1px solid var(--color-accent-line, rgba(86, 194, 255, 0.35));
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}
.coaching-hub__section-more.is-coming-soon {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}