/* Lidkeys guide clips — shared by lidkeys/index.html and lidkeys/guide/. Builds on assets/style.css tokens. */

.ld-clips { display: grid; gap: 22px; margin-top: 26px; }
.ld-clips .ld-clips { margin-top: 0; }
.ld-clips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ld-clips-lead { color: var(--muted, #a1a1a8); max-width: 680px; margin: 0; }

.ld-clip { margin: 0; min-width: 0; }
.ld-clip-stage { position: relative; border-radius: 16px; overflow: hidden; background: #17132d;
  border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 20px 56px rgba(0, 0, 0, .45); }
.ld-clip video, .ld-clip-stage img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar-d, auto);
  background: #17132d; object-fit: cover; }
.ld-clip--big .ld-clip-stage { border-radius: 20px; }
.ld-clip--hero { max-width: 992px; margin: 34px auto 8px; }
.ld-clip figcaption { margin-top: 12px; color: var(--muted, #a1a1a8); font-size: 15px; line-height: 1.55; }
.ld-clip figcaption strong { color: var(--text, #f5f5f7); font-weight: 600; }
.ld-clip-detail { display: block; margin-top: 4px; color: var(--faint, #6e6e76); font-size: 13px; }

/* pause / play: shows on hover and keyboard focus, always on touch screens and while paused */
.ld-clip-toggle { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(16, 16, 22, .55); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  opacity: 0; transition: opacity .2s ease; }
.ld-clip-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.ld-clip-toggle .i-play { display: none; margin-left: 2px; }
.ld-clip[data-state="paused"] .ld-clip-toggle .i-play { display: block; }
.ld-clip[data-state="paused"] .ld-clip-toggle .i-pause { display: none; }
.ld-clip-stage:hover .ld-clip-toggle, .ld-clip-toggle:focus-visible,
.ld-clip[data-state="paused"] .ld-clip-toggle { opacity: 1; }
.ld-clip-toggle:focus-visible { outline: 2px solid var(--accent, #8fb6ff); outline-offset: 2px; }
@media (hover: none) { .ld-clip-toggle { opacity: 1; } }
.ld-clip.is-blocked .ld-clip-toggle, .ld-clip[data-state="paused"] .ld-clip-toggle { width: 40px; height: 40px; }

/* badges (.ld-pro matches the homepage's own definition) */
.ld-pro, .ld-touch, .ld-new { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 6px; vertical-align: 1px; }
.ld-pro { border: 1px solid rgba(143, 182, 255, .35); color: var(--accent, #8fb6ff); }
.ld-touch { border: 1px solid rgba(155, 231, 176, .35); color: #9be7b0; }
.ld-new { border: 1px solid rgba(255, 179, 64, .40); color: #ffc46b; }

/* not recorded yet (local builds only) */
.ld-clip-missing { aspect-ratio: var(--ar-d, 2 / 1); display: grid; place-items: center;
  background: radial-gradient(120% 140% at 30% 0%, #2b2357, #15122a 70%); color: var(--faint, #6e6e76); font-size: 13px; }

/* stills: one image, or a few side by side */
.ld-still-row { display: grid; gap: 10px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.ld-still-row .ld-clip-stage { box-shadow: none; }

.ld-clip-links { margin: 16px 0 0; color: var(--muted, #a1a1a8); font-size: 15px; }
.ld-clip-more { margin: 26px 0 0; }
.ld-pro-clips { margin-top: 40px; }
.ld-pro-clips h3 { font-size: 20px; margin-bottom: 4px; }

/* guide page */
.ld-guide-hero { padding: 64px 0 24px; }
.ld-guide-hero h1 { font-size: clamp(34px, 6vw, 58px); }
.ld-guide-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.ld-guide-nav a { font-size: 14px; padding: 6px 12px; border-radius: 999px; color: var(--text, #f5f5f7);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line, rgba(255, 255, 255, .09)); }
.ld-guide-nav a:hover { text-decoration: none; border-color: rgba(255, 255, 255, .25); }
.ld-guide-group { scroll-margin-top: 64px; }
.ld-guide-group .ld-clip { scroll-margin-top: 72px; }
.ld-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.ld-tip { border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 16px 18px; background: rgba(255, 255, 255, .035);
  scroll-margin-top: 72px; }
.ld-tip h3 { font-size: 16px; margin: 0 0 6px; }
.ld-tip h3 a { color: var(--text, #f5f5f7); }
.ld-tip p { margin: 0; color: var(--muted, #a1a1a8); font-size: 14px; line-height: 1.55; }
.ld-note { color: var(--muted, #a1a1a8); font-size: 13px; margin-top: 14px; }

@media (max-width: 760px) {
  .ld-clips-2, .ld-tips { grid-template-columns: minmax(0, 1fr); }
  .ld-clip video, .ld-clip-missing { aspect-ratio: var(--ar-m, var(--ar-d, 2 / 1)); }
  .ld-clip-stage, .ld-clip--big .ld-clip-stage { border-radius: 14px; }
  .ld-clip--hero { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-clip-toggle { transition: none; }
}