/* ==========================================================================
   /clips/ — grid of embedded short-form video (TikTok + YouTube Shorts).
   ========================================================================== */

.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

.clip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.clip-card__source {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.clip-card__creator { color: var(--ink); font-weight: 500; }
.clip-card__platform { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.clip-card__note { color: var(--ink-dim); font-size: var(--step--1); margin: 0; }
.clip-card__note a { color: inherit; }

/* TikTok's official widget ships a hard-coded 325–605px inline width on the
   blockquote; override it so the embed fills its grid cell instead of
   floating at a fixed size regardless of column width. */
.tiktok-embed {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 620px) {
  .clip-grid { grid-template-columns: 1fr; }
}

/* Tighter padding for the vertical Shorts embeds, which are already narrow. */
.video-embed--compact { padding: var(--sp-2); }