/* Topic-only presentation. Existing Theme tokens and Single item component own the design. */
.pv-topic-page .pv-topic-media { padding: 0 0 34px; }
.pv-topic-page .pv-topic-media h2,
.pv-topic-page #pv-topic-content-title { margin: 0 0 18px; color: var(--ex-ink); font-size: 24px; line-height: 1.6; }
.pv-topic-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.pv-topic-media-card { overflow: hidden; background: #fff; border: 1px solid var(--ex-line); border-radius: var(--ex-radius-lg); box-shadow: var(--ex-shadow); }
.pv-topic-media-card > a { display: block; }
.pv-topic-media-image { position: relative; aspect-ratio: 16/9; background: var(--pv-soft); overflow: hidden; }
.pv-topic-media-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-topic-media-card h3 { margin: 0; padding: 14px 16px; color: var(--ex-ink); font-size: 16px; line-height: 1.8; }
.pv-topic-media-card a:hover h3 { color: var(--pv-blue); }
.pv-topic-play { position: absolute; inset-inline-start: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--pv-blue); display: grid; place-items: center; }
.pv-topic-play svg { width: 22px; height: 22px; }
@media (max-width:900px) { .pv-topic-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } }
@media (max-width:600px) {
  .pv-topic-media-grid { grid-template-columns: 1fr; }
  .pv-topic-page .pv-topic-media h2, .pv-topic-page #pv-topic-content-title { font-size: 20px; }
  .pv-topic-media-card h3 { font-size: 14px; }
}