:root {
  --srd-gap: 16px;
}

.srd-pm-grid {
  display: grid;
  gap: var(--srd-gap);
}

.srd-pm-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.srd-pm-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.srd-pm-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .srd-pm-grid.cols-3, .srd-pm-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .srd-pm-grid { grid-template-columns: 1fr !important; }
}

.srd-pm-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
}

.srd-pm-cover { position: relative; aspect-ratio: 16/9; background:#111; }
.srd-pm-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.srd-pm-logo-badge {
  position:absolute; left:12px; bottom:12px; width:48px; height:48px; border-radius:8px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

.srd-pm-title { font-size:1.1rem; margin:12px 16px 0 16px; }
.srd-pm-excerpt { color:#444; margin:8px 16px; }
.srd-pm-player { margin: 0 16px 12px 16px; }
.srd-pm-actions { display:flex; gap: 12px; padding: 12px 16px 16px; margin-top:auto; justify-content:flex-start; }
.srd-pm-actions a {
  background: #0ea5e9;
  color:#fff; text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:600;
}
.srd-pm-actions a.srd-pm-external { background:#f97316; }

/* Single */
.srd-pm-single { margin-bottom: 16px; }
.srd-pm-single-cover { position:relative; aspect-ratio: 16/9; background:#111; border-radius:16px; overflow:hidden; }
.srd-pm-single-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.srd-pm-logo-corner {
  position:absolute; left:12px; bottom:12px; width:56px; height:56px; border-radius:12px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:block;
}

/* Audio watermark */
.srd-pm-audio-wrap { position: relative; }
.srd-pm-audio-wrap audio { width: 100%; display: block; }
.srd-pm-audio-logo {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .28;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}