/* ============================================================
   KHAN WATCH — shared lightbox styles
   Branded Watch band (button, never a bare thumbnail) + white
   lightbox with lazy youtube-nocookie embed. Used by every unit
   page; per the khan-videos loop spec (loops/khan-videos.md).
   ============================================================ */

/* ---------- the band ---------- */
.kw-band { background: var(--sand-100); }
.kw-videos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px; max-width: 940px;
}
.kw-video {
  display: flex; align-items: center; gap: 16px; text-align: left;
  font: inherit; cursor: pointer;
  background: #FFFDF6; border: 1.5px solid rgb(13 13 17 / 0.1);
  border-radius: 18px; padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s, box-shadow 0.22s;
}
.kw-video:hover { transform: translateY(-3px); border-color: var(--iris-500); box-shadow: var(--shadow-card-hover); }
.kw-video:focus-visible { outline: 2px solid var(--iris-500); outline-offset: 2px; }
.kw-play {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber-500); color: #FFFDF6;
  font-size: 17px; padding-left: 4px; /* optical center for the glyph */
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.4, 1), background 0.25s;
}
.kw-video:hover .kw-play { transform: scale(1.1); background: var(--iris-500); }
.kw-meta { flex: 1; min-width: 0; }
.kw-name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink-900);
}
.kw-sub {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-300);
}
.kw-chip {
  flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--iris-500); border: 1px solid rgb(91 84 214 / 0.35);
  padding: 5px 10px; border-radius: 999px;
}
.kw-note {
  margin-top: 20px; max-width: 940px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  color: var(--ink-300);
}

/* ---------- the lightbox ---------- */
.kw-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgb(13 13 17 / 0.82);
  padding: clamp(12px, 3vw, 40px);
  opacity: 0; transition: opacity 0.25s ease;
}
.kw-overlay.open { opacity: 1; }
.kw-card {
  position: relative; width: min(880px, 100%);
  background: #FFFDF6; border-radius: var(--radius);
  padding: 14px 14px 12px;
  box-shadow: 0 30px 90px -20px rgb(13 13 17 / 0.6);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.28s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.kw-overlay.open .kw-card { transform: translateY(0) scale(1); }
.kw-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #08080C; border-radius: 14px; overflow: hidden;
}
.kw-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kw-close {
  position: absolute; top: -16px; right: -10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--ink-900); color: var(--sand-50);
  font-size: 22px; line-height: 1;
  transition: background 0.2s, transform 0.2s;
}
.kw-close:hover { background: var(--amber-500); transform: rotate(90deg); }
.kw-close:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.kw-cap {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 12px 6px 2px;
}
.kw-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--ink-900); letter-spacing: -0.01em;
}
.kw-dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.kw-cap a {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px; color: var(--iris-500);
  text-decoration: none; border-bottom: 1px dashed rgb(91 84 214 / 0.5);
}
.kw-cap a:hover { color: var(--amber-500); border-color: var(--amber-500); }
.kw-cap a + a { margin-left: 0; }

/* ---------- responsive / motion ---------- */
@media (max-width: 640px) {
  .kw-videos { grid-template-columns: 1fr; }
  .kw-cap a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kw-overlay, .kw-card { transition: none; }
}