/* embed-card.css — the shared link-preview card.
 *
 * One component, two callers so far:
 *   .social-external-card  — Live page, data supplied by the Bluesky/Mastodon
 *                            embed on the post (js/social.js).
 *   .mn-embed-card         — comments on Home and /l/<id>, data resolved by the
 *                            server when the comment was posted (js/links.js).
 *
 * These rules used to live in social.css. They moved here rather than being
 * copied so the two can't drift; the Live page's markup is unchanged and still
 * uses its own class names, which are simply listed alongside. Anything genuinely
 * specific to one surface stays with that surface — Live keeps its own width
 * budget in social.css, comments their bubble fit in links.css.
 *
 * Only global tokens from base.css are used (--color-text, --border-color,
 * --hover-bg), so the card is safe to drop on any page.
 */

:root {
  --mn-embed-max: 460px;
}

.mn-embed-card,
.social-external-card {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.35rem;
  /* min() so a narrow column clamps the card instead of letting it overhang —
     a comment bubble is a lot tighter than a Live post. */
  max-width: min(var(--mn-embed-max), 100%);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
  transition: background 140ms ease, border-color 140ms ease;
}

.mn-embed-card:hover,
.mn-embed-card:focus-visible,
.social-external-card:hover,
.social-external-card:focus-visible {
  background: var(--hover-bg);
  border-color: color-mix(in srgb, var(--color-text) 24%, transparent);
}

.mn-embed-card-thumb,
.social-external-card-thumb {
  width: 96px;
  min-width: 96px;
  height: 72px;
  object-fit: cover;
  display: block;
}

.mn-embed-card-body,
.social-external-card-body {
  min-width: 0;
  padding: 0.55rem 0.7rem 0.55rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mn-embed-card-title,
.social-external-card-title {
  font-weight: 700;
  line-height: 1.25;
}

/* A title is whatever the linked site put in og:title, and plenty of sites put a
   bare URL or an unspaced string there — one unbreakable token, which nothing
   above was telling to wrap. word-wrap first as the fallback: Safari understood
   break-word long before it understood `anywhere`, and an unsupported value is
   dropped, leaving the older declaration standing.
   Scoped away from Live for the same reason as the padding rule below — its
   cards come from Bluesky and already render fine. */
.mn-embed-card-title,
.mn-embed-card-desc {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.mn-embed-card-desc,
.social-external-card-desc {
  font-size: 0.84rem;
  opacity: 0.78;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mn-embed-card-url,
.social-external-card-url {
  font-size: 0.76rem;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The body's padding assumes a thumbnail is holding the left edge open. Plenty
   of sites have no og:image, so a comment card often has none — without this
   the title would sit flush against the border. Scoped to .mn-embed-card on
   purpose: the same quirk exists on Live, but fixing it there would change how
   an existing page looks, which is not this change's business. */
.mn-embed-card > .mn-embed-card-body:first-child {
  padding-left: 0.7rem;
}