/* ================================================================
   Lesson video — the explainer that sits at the top of a lesson page.
   Loads nothing until the learner presses play: the poster image is
   all that downloads on arrival, which matters on a slow connection.
   ================================================================ */

/* compact card: the poster sits beside the title, not above it; the card
   opens out to full width once the learner presses play */
.lv-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-areas: "frame head skip" "frame foot skip";
           gap: .2rem 1rem; align-items: center; margin: 0 0 1rem; padding: .6rem .8rem .6rem .6rem;
           background: var(--surface, #fff); border: 1px solid var(--border, #e6e2f5); border-radius: 18px;
           box-shadow: 0 8px 24px -18px rgba(124, 58, 237, .45); }
.lv-head { grid-area: head; align-self: end; }
.lv-frame { grid-area: frame; }
.lv-foot { grid-area: foot; align-self: start; }
.lv-skip { grid-area: skip; align-self: center; }
.lv-wrap.lv-playing { grid-template-columns: 1fr auto; grid-template-areas: "head skip" "frame frame" "foot foot"; padding: .85rem; max-width: 820px; margin-inline: auto; }
.lv-wrap.lv-playing .lv-frame { box-shadow: 0 18px 40px -24px rgba(124, 58, 237, .55); }

.lv-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 0; }
.lv-badge { width: 2rem; height: 2rem; border-radius: .65rem; display: grid; place-items: center;
            background: var(--module-grad, linear-gradient(135deg,#7c3aed,#ec4899)); color: #fff; font-size: 1.1rem; flex: none; }
.lv-title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.lv-sub   { font-size: .84rem; color: var(--text-muted); margin-top: 0; }

/* the frame keeps its 16:9 shape before anything loads, so nothing jumps */
.lv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
            background: var(--bg-soft, #f3f0ff); border: 1px solid var(--border, #e6e2f5);
            box-shadow: none; }
.lv-frame img, .lv-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

.lv-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
           background: transparent; display: grid; place-items: center; padding: 0; font-family: inherit; }
.lv-play::before { content: ''; position: absolute; inset: 0;
                   background: linear-gradient(180deg, rgba(20,10,45,.05), rgba(20,10,45,.45)); }
.lv-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
          background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(20,10,45,.35);
          transition: transform .2s ease; }
.lv-play:hover .lv-btn { transform: scale(1.08); }
.lv-btn svg { width: 20px; height: 20px; margin-left: 3px; fill: #7c3aed; }
.lv-playing .lv-btn { width: 76px; height: 76px; }
.lv-dur { position: absolute; right: .7rem; bottom: .7rem; padding: .2rem .55rem; border-radius: 8px;
          background: rgba(20,10,45,.72); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.lv-label { position: absolute; left: .7rem; bottom: .7rem; padding: .25rem .6rem; border-radius: 8px;
            background: rgba(255,255,255,.92); color: #1f1b3a; font-size: .78rem; font-weight: 700; }

.lv-foot { display: flex; align-items: center; gap: .9rem; margin-top: 0; flex-wrap: wrap; padding-left: 2.6rem; }
.lv-note { font-size: .8rem; color: var(--text-muted); }
.lv-skip { font-size: .84rem; font-weight: 600; color: var(--module, #7c3aed); background: var(--bg-soft, #f3f0ff); border: 1px solid var(--border, #e6e2f5);
           border-radius: 999px; cursor: pointer; padding: .45rem .9rem; font-family: inherit; min-height: 40px; white-space: nowrap; }
.lv-skip:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .lv-wrap { margin-bottom: 1rem; grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "frame frame" "foot skip"; gap: .5rem; }
  .lv-foot { padding-left: 0; }
  .lv-frame { border-radius: 14px; }
  .lv-btn { width: 60px; height: 60px; }
  .lv-btn svg { width: 24px; height: 24px; }
  .lv-title { font-size: .98rem; }
}

/* small poster: keep only the duration badge */
.lv-wrap:not(.lv-playing) .lv-label { display: none; }
.lv-wrap:not(.lv-playing) .lv-dur { right: .45rem; bottom: .45rem; font-size: .72rem; }

/* ---- in the hero, where the "Est. time" card used to be ---- */
@media (min-width: 768px) { .lv-herogrid { grid-template-columns: minmax(0, 1fr) 456px !important; align-items: start !important; } }
.lv-herogrid > :first-child { padding-top: .25rem; }   /* text column starts level with the top of the poster */
.lv-herogrid.lv-playing { grid-template-columns: 1fr !important; }
.lv-herogrid.lv-playing .lv-hero { max-width: 820px; width: 100%; margin: 0 auto; }
.lv-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; width: 100%; }
.lv-hero .lv-frame { grid-area: auto; width: 100%; box-shadow: 0 18px 40px -24px rgba(124, 58, 237, .55); border-radius: 16px; }
.lv-hero .lv-cap { grid-area: auto; }
.lv-hero .lv-dur { right: .7rem; bottom: .7rem; font-size: .78rem; }
.lv-hero .lv-btn { width: 56px; height: 56px; }
.lv-hero .lv-btn svg { width: 24px; height: 24px; }
.lv-hero .lv-label { display: inline-block; }
.lv-cap { display: flex; align-items: center; gap: .6rem; }
.lv-cap .lv-title { font-size: .98rem; }
.lv-cap .lv-sub { font-size: .8rem; }
/* the time and XP that were on the card, now a chip row under the intro */
.lv-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.lv-meta span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px;
                background: var(--surface, #fff); border: 1px solid var(--border, #e6e2f5);
                font-size: .84rem; font-weight: 600; color: var(--text, #1f1b3a); }