/* [vd-split] media-card — extracted verbatim from videos/css/video.css. Tokens (--vd-*) come from .vd in video.css. */
.vd-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 620px) { .vd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vd-grid { grid-template-columns: repeat(3, 1fr); } }
.vd-grid-related { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

.vd-card { display: flex; flex-direction: column; text-decoration: none; color: var(--vd-ink); border: 1px solid var(--vd-line); border-radius: var(--vd-radius); overflow: hidden; background: #fff; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.vd-card:hover { transform: translateY(-2px); box-shadow: var(--vd-shadow); border-color: #cfd4d9; }
/* 16:9 box via padding (definite height) so the absolutely-filled <img> and the
   injected preview <iframe> can't blow the card out of the grid. */
.vd-card-media { position: relative; display: block; width: 100%; padding-top: 56.25%; background: #000; overflow: hidden; }
.vd-card-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-card-duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.82); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.vd-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s ease; }
.vd-card:hover .vd-card-play { opacity: 1; }
.vd-card-play .vd-icon {
  /* play badge: the triangle SVG inset (border-box padding) on a translucent
     disc. Asymmetric padding optically centres the right-leaning triangle. */
  box-sizing: border-box;
  width: 54px; height: 54px; padding: 13px 11px 13px 15px;
  color: #fff; background: rgba(0, 0, 0, .6); border-radius: 50%;
}

/* lazy muted preview iframe (fills the 16:9 media box, click still hits the link) */
.vd-card-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none; z-index: 1;
}
.vd-card.is-previewing .vd-card-duration { z-index: 2; }
.vd-card.is-previewing .vd-card-play { opacity: 0; }

/* sound toggle — only on the previewing card, above the preview iframe */
.vd-card-sound {
  position: absolute; top: 8px; right: 8px; z-index: 3; display: none;
  width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .62); color: #fff; align-items: center; justify-content: center;
  pointer-events: auto; transition: background-color .15s ease;
}
.vd-card-sound:hover { background: rgba(0, 0, 0, .82); }
.vd-card-sound[aria-pressed="true"] { background: var(--vd-primary); }
.vd-card-sound .vd-icon { font-size: 20px; }
.vd-card.is-previewing .vd-card-sound { display: flex; }
/* type badge overlaid on the thumbnail */
.vd-card-typebadge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0, 0, 0, .72); color: #fff; font-weight: 800; font-size: 11px;
  letter-spacing: .03em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
}
.vd-card.is-previewing .vd-card-typebadge { opacity: 0; }

.vd-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.vd-card-title { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--vd-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--vd-muted); font-size: 13px; font-weight: 600; }
.vd-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.vd-card-meta .vd-icon { font-size: 16px; }
.vd-card-excerpt { color: var(--vd-body); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vd-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.vd-card-pest { background: var(--vd-chip-bg); color: #2b3038; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.vd-card-products { display: inline-flex; align-items: center; gap: 4px; color: var(--vd-primary-dark); font-weight: 700; font-size: 12.5px; }
.vd-card-products .vd-icon { font-size: 16px; }