/*
 * KoloPlus — widgets/posts/post_card · v1.1.3.002 "Warm Paper"
 *
 * Borderless feed-style cards: розділення між постами тільки через тонку лінію.
 * Аватар 40px з gradient. Все 15px, ієрархія через вагу.
 * Media grid — clean, rounded, без неонових ефектів.
 *
 * Class names збережені (.post-widget, .post-header, etc) для PHP/JS compat.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   POST WIDGET (article container) — borderless
   ═══════════════════════════════════════════════════════════════════════════ */

.post-widget {
  position: relative;
  padding: var(--n-s-5) 0 var(--n-s-4);
  border-bottom: 1px solid var(--n-line-soft);
  transition: background var(--n-dur-base) var(--n-ease);
}
.post-widget:last-child { border-bottom: none; }
.post-widget:hover { /* no aggressive hover — kept clean */ }

.post-widget__repost-banner {
  display: flex;
  align-items: center;
  gap: var(--n-s-2);
  margin-bottom: var(--n-s-2);
  color: var(--n-text-mute);
  font-weight: var(--n-w-med);
}
.post-widget__repost-original-author {
  color: var(--n-accent);
  font-weight: var(--n-w-sem);
  text-decoration: none;
}
.post-widget__repost-original-author:hover { color: var(--n-accent-hover); }


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER (avatar + meta + actions)
   ═══════════════════════════════════════════════════════════════════════════ */

.post-header {
  display: flex;
  align-items: center;
  gap: var(--n-s-3);
  margin-bottom: var(--n-s-3);
}

.post-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--n-accent), color-mix(in oklab, var(--n-accent) 60%, var(--n-warn)));
  text-decoration: none;
  position: relative;
}
.post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-avatar.is-fallback img { display: none; }
.post-avatar.is-fallback::before {
  content: attr(data-fallback-letter);
  color: #fff;
  font-weight: var(--n-w-bold);
  font-size: var(--n-fs);
  line-height: 1;
}

.post-user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.post-author {
  font-weight: var(--n-w-sem);
  color: var(--n-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-author a {
  color: inherit;
  text-decoration: none;
  transition: color var(--n-dur-fast) var(--n-ease);
}
.post-author a:hover { color: var(--n-accent); }

.post-date {
  color: var(--n-text-mute);
  font-weight: var(--n-w-reg);
  display: flex;
  align-items: center;
  gap: var(--n-s-2);
}
.post-views-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--n-text-mute);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACTIONS DROPDOWN (top-right …)
   ═══════════════════════════════════════════════════════════════════════════ */

.post-actions-dropdown-wrapper {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kp-post-menu-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--n-text-mute);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--n-dur-base) var(--n-ease),
              color var(--n-dur-base) var(--n-ease);
}
.kp-post-menu-btn:hover {
  background: var(--n-bg-hover);
  color: var(--n-text);
}

.post-actions-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--n-bg-2);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-md);
  box-shadow: var(--n-sh-lg);
  padding: 6px;
  display: none;
  z-index: var(--n-z-popover);
}
.post-actions-dropdown.is-open { display: block; animation: kp-dropIn var(--n-dur-base) var(--n-ease); }
.post-actions-dropdown a,
.post-actions-dropdown button {
  display: flex;
  align-items: center;
  gap: var(--n-s-2);
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--n-r-sm);
  border: none;
  background: transparent;
  color: var(--n-text);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font-weight: var(--n-w-med);
  transition: background var(--n-dur-fast) var(--n-ease);
}
.post-actions-dropdown a:hover,
.post-actions-dropdown button:hover {
  background: var(--n-bg-hover);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT TEXT
   ═══════════════════════════════════════════════════════════════════════════ */

.post-content,
.post-text {
  color: var(--n-text-soft);
  line-height: var(--n-lh);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.post-text {
  margin-bottom: var(--n-s-3);
}
.post-text strong {
  color: var(--n-text);
  font-weight: var(--n-w-sem);
}
.post-text a {
  color: var(--n-accent);
  text-decoration: none;
  transition: color var(--n-dur-fast) var(--n-ease);
}
.post-text a:hover {
  color: var(--n-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA GRID — clean rounded, без неонів
   ═══════════════════════════════════════════════════════════════════════════ */

.post-media-grid {
  display: grid;
  gap: 4px;
  border-radius: var(--n-r-md);
  overflow: hidden;
  margin-bottom: var(--n-s-3);
}
.post-media-grid__item {
  position: relative;
  background: var(--n-bg-hover);
  overflow: hidden;
  aspect-ratio: 1;
}
.post-media-grid--1 .post-media-grid__item {
  aspect-ratio: 16 / 10;
  max-height: 480px;
}
.post-media-grid__item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.post-media-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--n-dur-slow) var(--n-ease);
}
.post-media-grid__item a:hover img { transform: scale(1.02); }

/* Layouts */
.post-media-grid--1 { grid-template-columns: 1fr; }
.post-media-grid--2 { grid-template-columns: repeat(2, 1fr); }
.post-media-grid--3 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.post-media-grid--3 > .post-media-grid__item:nth-child(1) {
  grid-row: span 2;
  aspect-ratio: auto;
}
.post-media-grid--4 { grid-template-columns: repeat(2, 1fr); }
.post-media-grid--5 { grid-template-columns: repeat(6, 1fr); }
.post-media-grid--5 > .post-media-grid__item:nth-child(1),
.post-media-grid--5 > .post-media-grid__item:nth-child(2) { grid-column: span 3; }
.post-media-grid--5 > .post-media-grid__item:nth-child(n+3) { grid-column: span 2; }
.post-media-grid--6,
.post-media-grid--7,
.post-media-grid--8,
.post-media-grid--9,
.post-media-grid--10 { grid-template-columns: repeat(3, 1fr); }

/* Video play overlay */
.post-media-grid__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.post-media-grid__play svg {
  width: 24px;
  height: 24px;
}
.post-media-grid__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--n-r-sm);
  font-weight: var(--n-w-med);
  font-size: var(--n-fs);
  pointer-events: none;
}
.post-media-grid__duration-inline {
  display: inline-flex;
  margin-left: 6px;
  color: var(--n-text-mute);
}

.post-media-grid__item--video { position: relative; }

/* Placeholder (broken/missing media) */
.post-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--n-fs);
  color: var(--n-text-mute);
  background: var(--n-bg-hover);
}
.post-media-placeholder--video,
.post-media-placeholder--audio {
  flex-direction: column;
  gap: 6px;
}

/* "+N more" overlay on last item */
.post-media-more {
  position: relative;
}
.post-media-more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.post-media-more__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--n-w-bold);
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LINK PREVIEW CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.post-link-previews {
  display: flex;
  flex-direction: column;
  gap: var(--n-s-2);
  margin-bottom: var(--n-s-3);
}

/* v1.1.3.887: видалено duplicate .link-preview-card definition (pre-v879 era).
   Активне визначення — нижче у v879 section з rich image variants. */


/* ═══════════════════════════════════════════════════════════════════════════
   ACTIONS ROW (♥ comment share)
   ═══════════════════════════════════════════════════════════════════════════ */

.post-actions {
  display: flex;
  align-items: center;
  gap: var(--n-s-5);
  margin-top: var(--n-s-3);
  color: var(--n-text-mute);
  font-weight: var(--n-w-med);
}
.post-actions--compact {
  gap: var(--n-s-3);
}
.post-actions__spacer { flex: 1; }
.post-actions-sep {
  width: 1px;
  height: 14px;
  background: var(--n-line);
}

.kp-post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin: 0 -4px;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--n-fs);
  font-weight: var(--n-w-med);
  cursor: pointer;
  border-radius: var(--n-r-sm);
  text-decoration: none;
  transition: color var(--n-dur-base) var(--n-ease),
              background var(--n-dur-base) var(--n-ease);
}
.kp-post-action-btn:hover {
  color: var(--n-accent);
  background: var(--n-accent-soft);
}
.kp-post-action-btn.is-active {
  color: var(--n-accent);
}

.post-action-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
}
.post-action-icon svg {
  width: 100%;
  height: 100%;
}

.post-action-count {
  font-weight: var(--n-w-med);
}


/* ═══════════════════════════════════════════════════════════════════════════
   REPOST EMBEDDED ORIGINAL
   ═══════════════════════════════════════════════════════════════════════════ */

.post-widget__embedded-original {
  display: block;
  margin: var(--n-s-3) 0;
  padding: var(--n-s-3);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-md);
  background: var(--n-bg-soft);
  text-decoration: none;
  color: inherit;
  transition: background var(--n-dur-base) var(--n-ease);
}
.post-widget__embedded-original:hover {
  background: var(--n-bg-hover);
}
.post-widget__embedded-head {
  display: flex;
  align-items: center;
  gap: var(--n-s-2);
  margin-bottom: var(--n-s-2);
  color: var(--n-text-mute);
  font-weight: var(--n-w-med);
}
.post-widget__embedded-body {
  color: var(--n-text-soft);
}


/* ═══════════════════════════════════════════════════════════════════════════
   FALLBACK CARDS (referral, contest)
   ═══════════════════════════════════════════════════════════════════════════ */

.post-referral-fallback,
.post-contest-fallback {
  display: flex;
  align-items: center;
  gap: var(--n-s-3);
  padding: var(--n-s-3);
  border-radius: var(--n-r-md);
  background: var(--n-accent-soft);
  margin-bottom: var(--n-s-3);
}
.post-contest-fallback__badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--n-warn-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.post-contest-fallback__title {
  font-weight: var(--n-w-sem);
  color: var(--n-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .post-widget { padding: var(--n-s-4) 0 var(--n-s-3); }
  .post-actions { gap: var(--n-s-3); }
  .post-avatar { width: 36px; height: 36px; }
  .post-media-grid--1 .post-media-grid__item { max-height: 320px; }
}

/* ════════════════════════════════════════════════════════
 * v1.1.3.876 — Text truncation + read-more + link cards + audio inline player
 * ════════════════════════════════════════════════════════ */

/* Collapsible text + Read More button */
.post-content--collapsible .post-text {
  max-height: 10.5em;            /* ~7 lines залежно від line-height */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  transition: max-height 0.3s ease;
}
.post-content--collapsible.is-expanded .post-text {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.post-content__readmore {
  margin-top: 6px;
  border: none;
  background: transparent;
  color: var(--n-accent);
  font-size: 0.85rem;
  font-weight: var(--n-w-sem, 600);
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-content__readmore::after {
  content: "▾";
  font-size: 0.7em;
  transition: transform 0.2s ease;
}
.post-content--collapsible.is-expanded .post-content__readmore::after {
  transform: rotate(180deg);
}
.post-content__readmore:hover {
  text-decoration: underline;
}

/* Inline link preview cards (под текстом) */
.post-link-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.post-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-md, 12px);
  background: var(--n-bg-soft);
  text-decoration: none;
  color: var(--n-text);
  transition: background var(--n-dur-fast, .15s) ease,
              border-color var(--n-dur-fast, .15s) ease;
}
.post-link-card:hover {
  background: var(--n-bg-hover);
  border-color: color-mix(in oklab, var(--n-accent) 40%, var(--n-line));
}
.post-link-card__favicon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex: 0 0 32px;
  background: var(--n-bg-2);
}
.post-link-card__meta {
  flex: 1;
  min-width: 0;
}
.post-link-card__host {
  font-size: 0.85rem;
  font-weight: var(--n-w-sem, 600);
  color: var(--n-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-link-card__url {
  font-size: 0.72rem;
  color: var(--n-text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-link-card__arrow {
  font-size: 1.1rem;
  color: var(--n-text-mute);
  flex: 0 0 auto;
}

/* Inline audio player (replaces placeholder icon) */
.post-media-grid__item--audio {
  /* override grid sizing — audio гнучкі по висоті */
  aspect-ratio: auto;
  min-height: auto;
}
.post-media-audio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--n-bg-soft);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-md, 12px);
  width: 100%;
}
.post-media-audio__title {
  font-size: 0.82rem;
  font-weight: var(--n-w-sem, 600);
  color: var(--n-text);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-media-audio__title i {
  color: var(--n-accent);
}
.post-media-audio__player,
.post-media-audio > audio {
  width: 100%;
  height: 36px;
  outline: none;
  /* v1.1.3.898: dark UI tweak — audio control native styling
     не виглядає сильно з Cyber Glow, але filter інверсію не робимо
     щоб preserve native browser controls UX. */
}
.post-media-audio > audio::-webkit-media-controls-panel {
  background: var(--n-bg-2);
}
/* When multiple audio items — vertical playlist look */
.post-media-grid__item--audio + .post-media-grid__item--audio .post-media-audio {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1px; /* merge borders */
}

/* Audio item — займає всю ширину rows у grid, без ламання photo layout вище */
.post-media-grid__item--audio {
  grid-column: 1 / -1; /* span all columns у grid row */
}

/* ════════════════════════════════════════════════════════
 * v1.1.3.877 — Embed iframes (YouTube/Vimeo/SoundCloud/Spotify) + file UI
 * ════════════════════════════════════════════════════════ */

/* Embed wrapper — replaces link-card для supported providers */
.post-embed {
  position: relative;
  width: 100%;
  background: var(--n-bg-soft);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-md, 12px);
  overflow: hidden;
  margin: 8px 0;
}
.post-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Fixed-height embeds (audio: soundcloud/spotify) — iframe takes full height of wrapper */
.post-embed--soundcloud,
.post-embed--spotify {
  /* parent has style.height set inline */
  padding-bottom: 0;
}
.post-embed--soundcloud iframe,
.post-embed--spotify iframe {
  position: relative;
  inset: auto;
  height: 100%;
}

/* File/doc placeholder — повноцінна download card */
.post-media-grid__item--file {
  grid-column: 1 / -1;  /* full-width row у grid */
}
.post-media-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--n-bg-soft);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-md, 12px);
  cursor: pointer;
  transition: background var(--n-dur-fast, .15s) ease,
              border-color var(--n-dur-fast, .15s) ease;
}
.post-media-file:hover {
  background: var(--n-bg-hover);
  border-color: color-mix(in oklab, var(--n-accent) 40%, var(--n-line));
}
.post-media-file__ext {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 6px 8px;
  background: var(--n-accent);
  color: var(--n-on-accent, #fff);
  font-size: 0.72rem;
  font-weight: var(--n-w-bold, 700);
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.5px;
}
.post-media-file__meta {
  flex: 1;
  min-width: 0;
}
.post-media-file__name {
  font-size: 0.88rem;
  font-weight: var(--n-w-sem, 600);
  color: var(--n-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-media-file__size {
  font-size: 0.72rem;
  color: var(--n-text-mute);
  margin-top: 2px;
}
.post-media-file__download {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--n-bg-2);
  color: var(--n-text);
  font-size: 1rem;
  transition: background var(--n-dur-fast, .15s) ease, color var(--n-dur-fast, .15s) ease;
}
.post-media-file:hover .post-media-file__download {
  background: var(--n-accent);
  color: var(--n-on-accent, #fff);
}

/* Currently-playing audio — accent border (для visual hint у multi-audio пості) */
.post-media-grid__item--audio:has(audio:not([paused])) .post-media-audio {
  border-color: var(--n-accent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--n-accent) 25%, transparent);
}

/* ════════════════════════════════════════════════════════
 * v1.1.3.879 — Rich link preview cards з og:image
 *
 * 2 layouts:
 *   - .link-preview-card (no image) — horizontal: [favicon | title + desc]
 *   - .link-preview-card--has-image — vertical: [media] / [body]
 *
 * YouTube has play button overlay on media.
 * ════════════════════════════════════════════════════════ */

.post-link-previews {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

/* v1.1.3.898: коли 2+ link previews — переключити на CSS Grid 2 cols.
   3 YouTube embeds raніше займали ~1500px вертикально — кожен 16:9 full-width.
   Тепер 2-col grid → ~750px total (half each, з aspect-ratio preserved). */
.post-link-previews:has(> .link-preview-card:nth-child(2)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* На vary narrow screens (≤480px) — single col regardless */
@media (max-width: 480px) {
  .post-link-previews:has(> .link-preview-card:nth-child(2)) {
    grid-template-columns: 1fr;
  }
}
/* У grid mode rich cards стають compact: smaller image, smaller text */
.post-link-previews:has(> .link-preview-card:nth-child(2)) .link-preview-card--has-image .link-preview-card__media {
  aspect-ratio: 16 / 10;
}
.post-link-previews:has(> .link-preview-card:nth-child(2)) .link-preview-card__title {
  font-size: 0.85rem;
  -webkit-line-clamp: 2;
}
.post-link-previews:has(> .link-preview-card:nth-child(2)) .link-preview-card__site {
  font-size: 0.7rem;
}

.link-preview-card {
  display: flex;
  align-items: stretch;
  /* v1.1.3.887: видалено border — bg + radius достатньо для visual separation.
     Раніше border створював heavy frame look (Vasyl: "багато рамок").
     Hover state — accent border-color (subtle indication). */
  border: 1px solid transparent;
  border-radius: var(--n-r-md, 12px);
  background: var(--n-bg-soft);
  text-decoration: none;
  color: var(--n-text);
  overflow: hidden;
  transition: background var(--n-dur-fast, .15s) ease,
              border-color var(--n-dur-fast, .15s) ease;
}
.link-preview-card:hover {
  background: var(--n-bg-hover);
  border-color: color-mix(in oklab, var(--n-accent) 40%, var(--n-line));
}

/* Without image — horizontal compact */
.link-preview-card:not(.link-preview-card--has-image) {
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.link-preview-card__favicon-box {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--n-bg-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.link-preview-card__favicon-box img {
  width: 28px;
  height: 28px;
}

/* With image — vertical stacked, image on top */
.link-preview-card--has-image {
  flex-direction: column;
}
.link-preview-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--n-bg-2);
}
.link-preview-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.link-preview-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--n-accent) 90%, transparent);
  color: var(--n-on-accent, #fff);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  pointer-events: none;
}
.link-preview-card--has-image .link-preview-card__body {
  padding: 10px 12px;
}

.link-preview-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.link-preview-card__site {
  font-size: 0.72rem;
  color: var(--n-text-mute);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: var(--n-w-med, 500);
}
.link-preview-card__site-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.link-preview-card__title {
  font-size: 0.92rem;
  font-weight: var(--n-w-sem, 600);
  color: var(--n-text);
  line-height: 1.35;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-card__title--url {
  font-weight: var(--n-w-med, 500);
  color: var(--n-text-soft);
  word-break: break-all;
}
.link-preview-card__desc {
  font-size: 0.8rem;
  color: var(--n-text-soft);
  line-height: 1.4;
  margin-top: 4px;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* YouTube-specific brand tint on play button */
.link-preview-card--youtube .link-preview-card__play {
  background: rgba(255, 0, 0, 0.85);
}

/* Mobile — smaller play button */
@media (max-width: 480px) {
  .link-preview-card__play {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
  .link-preview-card__title {
    font-size: 0.88rem;
  }
  .link-preview-card__desc {
    -webkit-line-clamp: 1;
  }
}