/*
 * The /live-card gallery, on top of the Last Table tokens and components. Reads only --lt- tokens.
 * Each card is a 3:4 still with its loop over it, then the fact, the source and the downloads. The list clip is the
 * same at 9:16, beside its text on a wide screen and above it on a phone.
 */
.lc-actions { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); margin: var(--lt-space-5) 0 var(--lt-space-2); }
.lc-address { margin: 0; color: var(--lt-text-2); font-size: var(--lt-step--1); overflow-wrap: anywhere; }
.lc-wrap { max-width: var(--lt-page-max); }
.lc-grid {
  display: grid;
  gap: var(--lt-space-6) var(--lt-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.lc-card { display: flex; flex-direction: column; gap: var(--lt-space-4); scroll-margin-top: var(--lt-space-9); }
.lc-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-3);
}
.lc-media img,
.lc-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.lc-media img:not([src]) { visibility: hidden; }
/* The loop stays clear until its first frame, so the still under it never flashes while the video loads. */
.lc-media video { opacity: 0; transition: opacity var(--lt-dur-slow) var(--lt-ease); }
.lc-media.is-playing video { opacity: 1; }
.lc-body { display: flex; flex-direction: column; gap: var(--lt-space-2); }
.lc-body p { margin: 0; }
.lc-index { color: var(--lt-text-3); }
.lc-title { margin: 0; font: 600 var(--lt-step-1) / 1.25 var(--lt-font-display); }
.lc-fact { color: var(--lt-text-2); }
.lc-source,
.lc-made { color: var(--lt-text-3); font-size: var(--lt-step--1); }
.lc-downloads,
.lc-template { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-2) var(--lt-space-4); }
.lc-downloads a span { color: var(--lt-text-3); font-size: var(--lt-step--1); }
.lc-template .lt-btn { min-height: 36px; padding: 0 var(--lt-space-4); font-size: var(--lt-step--1); }
.lc-copy[data-copied] { color: var(--lt-success); border-color: var(--lt-success); }
.lc-clip { display: grid; gap: var(--lt-space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.lc-media.lc-tall { aspect-ratio: 9 / 16; width: min(100%, 320px); margin: 0; }
@media (min-width: 760px) {
  .lc-clip { grid-template-columns: 320px minmax(0, 1fr); gap: var(--lt-space-6); }
}