/*
 * Learning-Path Course Landing
 * Rendered inside studentlms.coursedashboard.coursedetails when
 * $scope.hasLearningPaths is true. All selectors namespaced under .lp-landing.
 * Typography tokens mirror the coaching-center scale (coaching-center-custom.css).
 */

/* Host for the inline LP detail (ng-include of learningpath.html) — make sure it
   gets the full content height so the detail view's scrollers behave as on the LP tab. */
.lp-detail-host {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* When an LP card is clicked (lpDetailMode === true), hide the chapter rail. The LP
   detail view has its own internal left panel; showing both would compete for
   attention and waste horizontal space. "All modules" → lpDetailMode flips false →
   class removed → rail returns automatically. */
.lp-rail-hidden .courseplanchapterMenu {
  display: none !important;
}

/* "Back to course" bar — shown above the legacy chapter content when the user
   escaped from the LP landing via a rail click. Clicking the button refreshes
   the LP fetches and returns the user to the landing. */
.lp-back-bar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #E2E8F0;
  flex-shrink: 0;
}
.lp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms, box-shadow 160ms;
}
.lp-back-btn:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1D4ED8;
}
.lp-back-btn:focus,
.lp-back-btn:focus-visible {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.3);
}
.lp-back-btn svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .lp-back-btn { transition: none; }
}

.lp-landing {
  /* Typography scale — mirrored from coaching-center-custom.css. Scoped here so the
     partial is self-contained even when CC stylesheets aren't loaded on this page. */
  --font24: 24px;
  --font22: 22px;
  --font20: 20px;
  --font18: 18px;
  --font16: 16px;
  --font14: 14px;
  --font13: 13px;
  --font12: 12px;
  --font11: 11px;
  --normal:   400;
  --medium:   500;
  --semiBold: 600;
  --bold:     700;

  /* Lives inside the existing md-content flex row as the right pane (the chapter rail
     is its sibling). Width is whatever flex grants us — no max-width / centering. */
  padding: var(--space-6) var(--space-8) var(--space-12);
  background: var(--color-surface-app);
  font-family: inherit;
  font-size: var(--font14);
  font-weight: var(--normal);
  color: var(--color-text-primary);
  overflow-y: auto;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lp-landing *, .lp-landing *::before, .lp-landing *::after {
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────
 * HERO
 * ───────────────────────────────────────────── */
.lp-landing .lp-hero {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-8);
}
.lp-landing .lp-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
.lp-landing .lp-hero-left { padding: var(--space-10) 44px; }

.lp-landing .lp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 10px 4px 4px;
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-100);
  border-radius: var(--radius-full);
  font-size: var(--font12);
  font-weight: var(--medium);
  color: var(--color-accent-700);
  margin-bottom: var(--space-5);
}
.lp-landing .lp-hero-eyebrow .pip {
  width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--color-accent-600); color: #fff;
  display: grid; place-items: center;
  font-size: var(--font11); font-weight: var(--bold);
}

.lp-landing .lp-hero-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font24);
  font-weight: var(--bold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-brand-900);
  text-wrap: pretty;
}
.lp-landing .lp-hero-title em {
  font-family: var(--font-family-editorial, "Inter", inherit);
  font-style: italic;
  font-weight: 900;
  color: var(--color-accent-600);
}

.lp-landing .lp-hero-tag {
  margin: 0 0 var(--space-6);
  font-size: var(--font16);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 52ch;
  text-wrap: pretty;
}

.lp-landing .lp-hero-modules {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.lp-landing .lp-module-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px 6px 8px;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-size: var(--font12);
  font-weight: var(--medium);
  color: var(--color-text-primary);
}
.lp-landing .lp-module-chip .dot { width: 8px; height: 8px; border-radius: var(--radius-full); }
.lp-landing .lp-module-chip.list  .dot { background: #8b5cf6; }
.lp-landing .lp-module-chip.read  .dot { background: var(--color-warning); }
.lp-landing .lp-module-chip.write .dot { background: var(--color-success); }
.lp-landing .lp-module-chip.speak .dot { background: var(--color-danger); }

/* Index-based palette matching the module/video cards. */
.lp-landing .lp-module-chip.lp-chip-color-0 .dot { background: #8b5cf6; }
.lp-landing .lp-module-chip.lp-chip-color-1 .dot { background: var(--color-warning); }
.lp-landing .lp-module-chip.lp-chip-color-2 .dot { background: var(--color-success); }
.lp-landing .lp-module-chip.lp-chip-color-3 .dot { background: var(--color-danger); }

.lp-landing .lp-hero-cta { display: flex; gap: var(--space-3); align-items: center; }
.lp-landing .lp-hero-cta .lp-btn { white-space: nowrap; }

/* Local button variants — use only if .nlp-btn--lg isn't available in the cascade. */
.lp-landing .lp-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 18px;
  height: 44px;
  border-radius: 10px;
  font-size: var(--font14);
  font-weight: var(--medium);
  border: 1px solid transparent;
  transition: all var(--duration-normal) var(--ease-standard);
  cursor: pointer;
  font-family: inherit;
}
.lp-landing .lp-btn-primary {
  background: var(--color-accent-600);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 2px rgba(37,99,235,0.4);
}
.lp-landing .lp-btn-primary:hover {
  background: var(--color-accent-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent-glow);
}
.lp-landing .lp-btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.lp-landing .lp-btn-ghost:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
}
.lp-landing .lp-btn svg { width: 16px; height: 16px; }

/* Hero right — target band card */
.lp-landing .lp-hero-right {
  background: linear-gradient(160deg, #12344D 0%, #1F4D72 60%, #2563EB 130%);
  color: #fff;
  padding: var(--space-10) 44px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.lp-landing .lp-hero-right::before {
  content: "";
  position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(96,165,250,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.lp-landing .lp-hero-right-label {
  font-size: var(--font11);
  font-weight: var(--semiBold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-4);
}
.lp-landing .lp-band-stat {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.lp-landing .lp-band-num {
  font-size: var(--font24);
  font-weight: var(--bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lp-landing .lp-band-suffix {
  font-size: var(--font18);
  font-weight: var(--medium);
  color: rgba(255,255,255,0.75);
}
.lp-landing .lp-band-desc {
  font-size: var(--font13);
  line-height: var(--lh-normal);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-6);
  max-width: 32ch;
}
.lp-landing .lp-progress-track {
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.lp-landing .lp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
  width: 8%;
  border-radius: var(--radius-full);
}
.lp-landing .lp-progress-meta {
  font-size: var(--font11);
  color: rgba(255,255,255,0.6);
  display: flex; justify-content: space-between;
}
.lp-landing .lp-progress-meta b { color: #fff; font-weight: var(--semiBold); }

/* ─────────────────────────────────────────────
 * META STRIP
 * ───────────────────────────────────────────── */
.lp-landing .lp-meta-strip {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--space-10);
}
.lp-landing .lp-meta-cell {
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.lp-landing .lp-meta-cell + .lp-meta-cell::before {
  content: ""; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4);
  width: 1px; background: var(--color-border-default);
}
.lp-landing .lp-meta-cell .ico {
  width: 28px; height: 28px;
  border-radius: var(--radius-md);
  background: var(--color-accent-50);
  color: var(--color-accent-600);
  display: grid; place-items: center;
  margin-bottom: 2px;
}
.lp-landing .lp-meta-cell .ico svg { width: 16px; height: 16px; }
.lp-landing .lp-meta-cell .lbl {
  font-size: var(--font11);
  color: var(--color-text-muted);
  font-weight: var(--medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lp-landing .lp-meta-cell .val {
  font-size: var(--font16);
  font-weight: var(--semiBold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}
.lp-landing .lp-meta-cell .sub {
  font-size: var(--font11);
  color: var(--color-text-secondary);
}

/* ─────────────────────────────────────────────
 * SECTION HEADER
 * ───────────────────────────────────────────── */
.lp-landing .lp-section { margin-bottom: var(--space-12); }
.lp-landing .lp-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-6);
}
.lp-landing .lp-section-title-wrap h2 {
  margin: 0 0 4px;
  font-size: var(--font22);
  font-weight: var(--semiBold);
  letter-spacing: -0.02em;
  color: var(--color-brand-900);
}
.lp-landing .lp-section-title-wrap p {
  margin: 0;
  font-size: var(--font13);
  color: var(--color-text-secondary);
}
.lp-landing .lp-section-link {
  font-size: var(--font13);
  font-weight: var(--medium);
  color: var(--color-accent-600);
  background: transparent; border: none;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  font-family: inherit;
}
.lp-landing .lp-section-link:hover { color: var(--color-accent-700); }
.lp-landing .lp-section-link svg { width: 14px; height: 14px; }

/* ─────────────────────────────────────────────
 * MODULE OVERVIEW
 * ───────────────────────────────────────────── */
.lp-landing .lp-mod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.lp-landing .lp-mod-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: var(--space-2);
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard),
              border-color var(--duration-normal) var(--ease-standard);
}
.lp-landing .lp-mod-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--color-border-strong);
}
.lp-landing .lp-mod-card:focus,
.lp-landing .lp-mod-card:focus-visible {
  outline: none;
  border-color: var(--color-accent-600);
  box-shadow: var(--shadow-focus);
}
.lp-landing .lp-mod-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.lp-landing .lp-mod-card.list::before  { background: #8b5cf6; }
.lp-landing .lp-mod-card.read::before  { background: var(--color-warning); }
.lp-landing .lp-mod-card.write::before { background: var(--color-success); }
.lp-landing .lp-mod-card.speak::before { background: var(--color-danger); }

/* Index-based palette for learning-path cards — cycles purple/amber/emerald/red. */
.lp-landing .lp-mod-card.lp-color-0::before { background: #8b5cf6; }
.lp-landing .lp-mod-card.lp-color-1::before { background: var(--color-warning); }
.lp-landing .lp-mod-card.lp-color-2::before { background: var(--color-success); }
.lp-landing .lp-mod-card.lp-color-3::before { background: var(--color-danger); }
.lp-landing .lp-mod-card.lp-color-0 .lp-mod-card-bar-fill { background: #8b5cf6; }
.lp-landing .lp-mod-card.lp-color-1 .lp-mod-card-bar-fill { background: var(--color-warning); }
.lp-landing .lp-mod-card.lp-color-2 .lp-mod-card-bar-fill { background: var(--color-success); }
.lp-landing .lp-mod-card.lp-color-3 .lp-mod-card-bar-fill { background: var(--color-danger); }
.lp-landing .lp-mod-card-bar-fill {
  height: 100%; width: 0%;
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-standard);
}

/* Card header — row with "PATH N" label + completion % */
.lp-landing .lp-mod-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
}
.lp-landing .lp-mod-card-pct {
  font-size: var(--font18);
  font-weight: var(--bold);
  color: var(--color-text-primary);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

/* Stats row — nodes + milestones */
.lp-landing .lp-mod-card-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--font12);
  color: var(--color-text-muted);
}
.lp-landing .lp-mod-card-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-feature-settings: "tnum";
}
.lp-landing .lp-mod-card-stat svg { flex-shrink: 0; }

/* Current milestone — inline pip + label/name */
.lp-landing .lp-mod-card-current {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}
.lp-landing .lp-mod-card-current-pip {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-accent-600);
  color: #fff;
  display: grid; place-items: center;
  font-size: var(--font11);
  font-weight: var(--bold);
  font-feature-settings: "tnum";
}
.lp-landing .lp-mod-card-current-text {
  display: flex; flex-direction: column;
  min-width: 0;
}
.lp-landing .lp-mod-card-current-text .lbl {
  font-size: 10px;
  font-weight: var(--semiBold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.lp-landing .lp-mod-card-current-text .val {
  font-size: var(--font13);
  font-weight: var(--semiBold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Use the per-color edge as a subtle bar-fill color too. */
.lp-landing .lp-mod-card.lp-color-0 .lp-mod-card-pct { color: #8b5cf6; }
.lp-landing .lp-mod-card.lp-color-1 .lp-mod-card-pct { color: var(--color-warning); }
.lp-landing .lp-mod-card.lp-color-2 .lp-mod-card-pct { color: var(--color-success); }
.lp-landing .lp-mod-card.lp-color-3 .lp-mod-card-pct { color: var(--color-danger); }
.lp-landing .lp-mod-card-name {
  font-size: var(--font11);
  font-weight: var(--semiBold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.lp-landing .lp-mod-card-title {
  font-size: var(--font16);
  font-weight: var(--semiBold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.lp-landing .lp-mod-card-meta {
  display: flex; justify-content: space-between;
  font-size: var(--font11);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.lp-landing .lp-mod-card-meta b { color: var(--color-text-primary); font-weight: var(--semiBold); }
.lp-landing .lp-mod-card-bar {
  height: 3px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}
.lp-landing .lp-mod-card-bar div { height: 100%; border-radius: var(--radius-full); }

/* ─────────────────────────────────────────────
 * VIDEO GRID
 * ───────────────────────────────────────────── */
.lp-landing .lp-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.lp-landing .lp-vcard {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  display: flex; flex-direction: column;
  text-align: left;
  padding: 0;
  font-family: inherit;
}
.lp-landing .lp-vcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--color-border-strong);
}
.lp-landing .lp-vcard-thumb {
  position: relative;
  aspect-ratio: 16/10;
  background-color: var(--color-neutral-100);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.lp-landing .lp-vcard-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lp-landing .lp-vcard-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.lp-landing .lp-vcard-play {
  position: absolute; left: 16px; bottom: 14px;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.95);
  color: var(--color-brand-900);
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 2;
  transition: transform var(--duration-normal) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.lp-landing .lp-vcard:hover .lp-vcard-play {
  transform: scale(1.1);
  background: #fff;
}

/* When no real thumbnail is available, promote the play button to the centre and
   scale it up — fills the otherwise-empty gradient surface with a clear affordance. */
.lp-landing .lp-vcard-thumb.no-thumb .lp-vcard-play {
  left: 50%;
  bottom: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, 50%);
}
.lp-landing .lp-vcard-thumb.no-thumb .lp-vcard-play svg { width: 24px; height: 24px; }
.lp-landing .lp-vcard:hover .lp-vcard-thumb.no-thumb .lp-vcard-play {
  transform: translate(-50%, 50%) scale(1.08);
}
.lp-landing .lp-vcard-duration {
  position: absolute; right: 12px; bottom: 14px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font11);
  font-weight: var(--medium);
  z-index: 2;
  font-feature-settings: "tnum";
}
.lp-landing .lp-vcard-badge {
  position: absolute; left: 12px; top: 12px;
  background: rgba(255,255,255,0.95);
  color: var(--color-text-primary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font11);
  font-weight: var(--semiBold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 2;
}
.lp-landing .lp-vcard-badge.purple  { background: #8b5cf6; color: #fff; }
.lp-landing .lp-vcard-badge.amber   { background: var(--color-warning); color: #fff; }
.lp-landing .lp-vcard-badge.emerald { background: var(--color-success); color: #fff; }
.lp-landing .lp-vcard-badge.red     { background: var(--color-danger); color: #fff; }

.lp-landing .lp-vcard-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.lp-landing .lp-vcard-title {
  font-size: var(--font14);
  font-weight: var(--semiBold);
  color: var(--color-text-primary);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.lp-landing .lp-vcard-desc {
  font-size: var(--font12);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin: 0;
}
/* Lighter "Tap to preview" placeholder when the resource has no description. */
.lp-landing .lp-vcard-desc-muted {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   Intro-resource player dialog (lpLandingPlayIntroResource → $mdDialog)
   ───────────────────────────────────────────────────────────────────────── */
.lp-intro-player-dialog {
  /* Default windowed size. .is-fullscreen overrides below. */
  width: 80vw;
  height: 80vh;
  max-width: none;
  max-height: none;
}
.lp-intro-player-dialog.is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
}
.lp-intro-player-dialog .lp-intro-player-toolbar {
  background: #12344D !important;
  color: #fff !important;
}
.lp-intro-player-dialog .lp-intro-player-toolbar md-icon,
.lp-intro-player-dialog .lp-intro-player-toolbar .md-button,
.lp-intro-player-dialog .lp-intro-player-toolbar .md-button md-icon {
  color: #fff !important;
}
.lp-intro-player-dialog .lp-intro-player-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-intro-player-dialog .lp-intro-player-content {
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.lp-intro-player-dialog .lp-intro-player-content iframe {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
}
.lp-landing .lp-vcard-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--font11);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.lp-landing .lp-vcard-meta .sep {
  width: 3px; height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-300);
}
.lp-landing .lp-vcard-meta b {
  color: var(--color-text-secondary);
  font-weight: var(--medium);
}

/* ─────────────────────────────────────────────
 * INSTRUCTOR
 * ───────────────────────────────────────────── */
.lp-landing .lp-inst {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}
.lp-landing .lp-inst-avatar {
  width: 120px; height: 120px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-accent-600) 0%, var(--color-accent-400) 100%);
  display: grid; place-items: center;
  color: #fff;
  font-size: var(--font24);
  font-weight: var(--bold);
  letter-spacing: -0.02em;
  position: relative;
  flex-shrink: 0;
}
.lp-landing .lp-inst-avatar::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--color-accent-200);
}
.lp-landing .lp-inst-name {
  font-size: var(--font22);
  font-weight: var(--semiBold);
  letter-spacing: -0.02em;
  color: var(--color-brand-900);
  margin: 0 0 4px;
}
.lp-landing .lp-inst-role {
  font-size: var(--font13);
  color: var(--color-accent-600);
  font-weight: var(--medium);
  margin: 0 0 var(--space-3);
}
.lp-landing .lp-inst-bio {
  font-size: var(--font13);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  max-width: 64ch;
}
.lp-landing .lp-inst-stats { display: flex; gap: var(--space-6); }
.lp-landing .lp-inst-stat { display: flex; flex-direction: column; gap: 2px; }
.lp-landing .lp-inst-stat .v {
  font-size: var(--font18);
  font-weight: var(--semiBold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.lp-landing .lp-inst-stat .l {
  font-size: var(--font11);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: var(--medium);
}
.lp-landing .lp-inst-cta {
  display: flex; flex-direction: column; gap: var(--space-2);
}

/* ─────────────────────────────────────────────
 * RESPONSIVE
 * ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .lp-landing .lp-video-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-landing .lp-mod-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-landing .lp-meta-strip { grid-template-columns: repeat(2, 1fr); }
  .lp-landing .lp-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .lp-landing { padding: var(--space-5) var(--space-4) var(--space-10); }
  .lp-landing .lp-hero-left,
  .lp-landing .lp-hero-right { padding: var(--space-6); }
  .lp-landing .lp-hero-title { font-size: var(--font22); }
  .lp-landing .lp-band-num { font-size: var(--font22); }
  .lp-landing .lp-meta-strip { grid-template-columns: repeat(2, 1fr); }
  .lp-landing .lp-video-grid { grid-template-columns: 1fr; }
  .lp-landing .lp-inst { grid-template-columns: 1fr; text-align: center; }
  .lp-landing .lp-inst-stats { justify-content: center; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-landing .lp-vcard,
  .lp-landing .lp-vcard-play,
  .lp-landing .lp-btn { transition: none !important; }
  .lp-landing .lp-vcard:hover { transform: none !important; }
}