/* theory-hub.css — Music Theory course-hub specifics on the shared cosmic base
   (chord-styles.css supplies .bg / .rail / .shell / .mz-topbar / .mz-hero). */

/* Shell geometry matches VR's .shell EXACTLY (1080px column, rail-offset 92) so the
   top menu / brand / hero land in the same position as every other page. */
.th-shell { width: min(100%, 1080px); margin: 0 auto; padding: 22px 24px 80px 92px; }
@media (max-width: 760px) { .th-shell { width: auto; padding: 16px 16px 56px; padding-left: 72px; } }

.th-meta { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: -8px 0 26px; color: var(--sub); font-family: var(--font-body); font-size: 13.5px; }
.th-meta-pill { color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  padding: 3px 11px; border-radius: 999px; }
.th-meta-sep { opacity: .5; }

.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }

.th-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  transition: transform .2s cubic-bezier(.3,.7,.4,1), box-shadow .2s ease, border-color .2s ease;
}
.th-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop, 0 36px 84px -30px rgba(0,0,0,.5));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

.th-cover { position: relative; height: 92px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; color: rgba(255,255,255,.96); }
.th-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent 30%, rgba(0,0,0,.22)); }
.th-num { position: relative; z-index: 1; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.th-kicker { position: relative; z-index: 1; font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

.th-body { padding: 16px 18px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.th-title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.th-desc { margin: 0; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--sub); text-wrap: pretty; }
.th-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.th-chip { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--ink-2, var(--sub));
  background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 999px; }
.th-open { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--accent); }
.th-card:hover .th-open { gap: 10px; }

@media (max-width: 720px) { .th-grid { grid-template-columns: 1fr; gap: 16px; } }