/* 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 !important; right:10px !important; top:10px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color:#fff !important; background:rgba(0,0,0,.35) !important;
  border:0 !important; border-radius:999px !important; padding:10px !important; cursor:pointer !important;
  backdrop-filter: blur(2px) !important; z-index: 10 !important; /* Ensure play button is on top */
}
.sht-play:hover{
  background:rgba(0,0,0,.5) !important; /* Ensuring the play button hover effect works */
}

/* Hide Play button after video starts */
.sht-play.hidden{
  display: none !important;
}

.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;
  z-index: 5; /* Ensures the player is behind the play button */
}
.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; } }