/* SHT – Media Cards (Event / Video) */
.sht-mc{
  --mc-cols: 3;
  --mc-gap: 22px;
  --mc-media-h: 220px;
  display:grid;
  grid-template-columns: repeat(var(--mc-cols), minmax(0,1fr));
  gap: var(--mc-gap);
}

.sht-mc-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 24px rgba(2,6,23,.12);
  overflow:hidden;
  display:flex; flex-direction:column;
}

.sht-mc-media{
  position:relative;
  height: var(--mc-media-h);
  overflow:hidden;
}
.sht-mc-media > img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.sht-badge{
  position:absolute; top:10px; left:10px;
  color:#fff; font-weight:800; font-size:12px; line-height:1;
  padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.sht-badge.event{ background:#16a34a; }
.sht-badge.video{ background:#2563eb; }

.sht-play{
  position:absolute; right:10px; top:10px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(0,0,0,.35);
  border:0; border-radius:999px; padding:6px; cursor:pointer;
  backdrop-filter: blur(2px);
}
.sht-play:hover{ background:rgba(0,0,0,.5); }

/* clickable overlay for Event */
.sht-media-link{
  position:absolute; inset:0; display:block;
}

/* Body */
.sht-mc-body{
  background:#fff;
  padding:16px 18px 18px;
}
.sht-mc-title{
  margin:0 0 6px; font-size:20px; font-weight:900; color:#0f172a;
}
.sht-mc-desc{
  margin:0; font-size:16px; line-height:1.5; color:#111827;
}

/* Player overlay */
.sht-mc-player{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.sht-mc-player iframe,
.sht-mc-player video{
  width:100%; height:100%; border:0; display:block;
  object-fit:cover;
}
.sht-mc-player .sht-close{
  position:absolute; top:8px; right:8px;
  border:0; background:rgba(0,0,0,.45); color:#fff;
  border-radius:999px; padding:6px; cursor:pointer;
}

/* Responsive */
@media (max-width: 980px){ .sht-mc{ --mc-cols: 2; } }
@media (max-width: 640px){ .sht-mc{ --mc-cols: 1; } }
