/**
 * Beacon visual system for OneNav's existing resource card contracts.
 * The OneNav class names remain as markup/behavior hooks; Beacon owns these
 * components' surface, typography, focus, and color-mode presentation.
 *
 * @package BeaconMap
 */

.posts-item,
.url-card,
.card.sites-item {
  min-width: 0;
  border: 1px solid var(--bc-hairline);
  border-radius: var(--bc-rounded-sm);
  background: var(--bc-canvas);
  color: var(--bc-ink);
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.posts-item:hover,
.url-card:hover,
.card.sites-item:hover {
  border-color: var(--bc-body);
  box-shadow: none;
  transform: none;
}

.posts-item .item-title,
.sites-item .item-title,
.posts-item .item-title a,
.sites-item .item-title a {
  color: var(--bc-ink);
  font-family: var(--bc-font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.app-item .app-v {
  color: var(--bc-body);
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0;
}

.posts-item .item-title a,
.sites-item .sites-body {
  text-decoration: none;
}

.posts-item .item-body,
.sites-item .item-body,
.app-item .item-body,
.book-item .item-body {
  min-width: 0;
}

.posts-item .item-media,
.sites-item .item-media {
  overflow: hidden;
  background: var(--bc-canvas);
}

.posts-item .item-image img,
.sites-item .item-image img {
  transition: transform 180ms ease;
}

.posts-item .item-image img[data-ll-status="error"],
.posts-item .item-image img.error {
  visibility: hidden;
}

.posts-item:hover .item-image img,
.sites-item:hover .item-image img {
  transform: scale(1.025);
}

.posts-item .text-muted,
.sites-item .text-muted,
.sites-item .sites-tags,
.sites-item .is-views,
.posts-item .item-meta {
  color: var(--bc-body);
}

.sites-item .sites-icon img {
  border-radius: var(--bc-rounded-xs);
}

.posts-item a:focus-visible,
.sites-item a:focus-visible {
  outline: 2px solid var(--bc-semantic-color-border-focus);
  outline-offset: 3px;
}

html.io-black-mode:not(#_) .posts-item,
html.io-black-mode:not(#_) .url-card,
html.io-black-mode:not(#_) .card.sites-item {
  border-color: var(--bc-surface-dark-soft) !important;
  background: var(--bc-canvas-dark) !important;
  color: var(--bc-on-dark);
}

html.io-black-mode:not(#_) .posts-item:hover,
html.io-black-mode:not(#_) .url-card:hover,
html.io-black-mode:not(#_) .card.sites-item:hover {
  border-color: var(--bc-body-on-dark) !important;
}

html.io-black-mode:not(#_) .posts-item .item-title,
html.io-black-mode:not(#_) .sites-item .item-title,
html.io-black-mode:not(#_) .posts-item .item-title a,
html.io-black-mode:not(#_) .sites-item .item-title a {
  color: var(--bc-on-dark) !important;
}

html.io-black-mode:not(#_) .app-item .app-v {
  color: var(--bc-body-on-dark);
}

html.io-black-mode:not(#_) .posts-item .item-media,
html.io-black-mode:not(#_) .sites-item .item-media {
  background: var(--bc-surface-dark-soft);
}

html.io-black-mode:not(#_) .posts-item .text-muted,
html.io-black-mode:not(#_) .sites-item .text-muted,
html.io-black-mode:not(#_) .sites-item .sites-tags,
html.io-black-mode:not(#_) .sites-item .is-views,
html.io-black-mode:not(#_) .posts-item .item-meta {
  color: var(--bc-body-on-dark) !important;
}

@media (prefers-reduced-motion: reduce) {
  .posts-item,
  .url-card,
  .card.sites-item,
  .posts-item .item-image img,
  .sites-item .item-image img {
    transition: none;
  }
}