/* CricketWindies Rich Link Previews — see inc/plugins/windies_link_previews.php.
   A bare pasted link (any site not already claimed by Media Embeds' own
   YouTube/Twitter/image handling) becomes one of these instead of plain
   blue text, once its background fetch has resolved. */

.link-preview { display: flex; overflow: hidden; margin: 10px 0; max-width: 500px; color: inherit; text-decoration: none; background: var(--surface, #fff); border: 1px solid var(--border, #e4dfd9); border-radius: 8px; transition: border-color .15s ease; }
.link-preview:hover { color: inherit; text-decoration: none; border-color: var(--maroon, #54102b); }
/* --maroon is a fixed brand color, never redefined for dark mode -- fine as
   a solid background fill, but a dark-maroon BORDER against this theme's
   own dark --surface goes near-illegible (see maroon-dark-mode-contrast
   memory). --gold is the theme's existing dark-mode swap for this exact
   case elsewhere (shout-reply-bar, footer links, etc.). */
[data-theme="dark"] .link-preview:hover { border-color: var(--gold); }
.link-preview__image { flex: none; width: 110px; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--surface-hover, #f1ede8); }
.link-preview__body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px 12px; gap: 3px; }
.link-preview__domain { overflow: hidden; color: var(--soft-muted, #7d8490); font-size: 11px; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.link-preview__title { display: -webkit-box; overflow: hidden; color: var(--ink, #253247); font-size: 14px; font-weight: 700; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.link-preview__desc { display: -webkit-box; overflow: hidden; color: var(--soft-muted, #7d8490); font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 600px) {
  .link-preview__image { width: 84px; }
}