/* ============================================================
   DiagMyPCHub — media page styles
   The topic toolbar, filter, grid and topic-card base styles are
   reused from css/hardware.css (loaded on this page too).
   This file only adds the media placeholder area.
   ============================================================ */

/* Placeholder area for future media.
   When content is ready, replace the placeholder icon/label inside
   .media-thumb with an <img> or <video> — both are already styled. */
.media-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  color: var(--ink-3);
  overflow: hidden;
}
.media-thumb-label {
  font: 500 0.68rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
/* Future content — drop-in ready */
.media-thumb img,
.media-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}