@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════
   JEYA DECOR — Video Feed
   Direct iframe embed layout
═══════════════════════════════ */

.jdv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  font-family: 'Poppins', sans-serif;
  padding: 4px 0;
}
@media (max-width: 1100px) { .jdv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .jdv-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 420px)  { .jdv-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ── CARD ── */
.jdv-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  /* 9:16 portrait ratio */
  aspect-ratio: 9 / 16;
  background: linear-gradient(160deg, #1a1a2e 0%, #2d1f3d 55%, #1a1225 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,.28);
}

/* ── PLATFORM BADGE ── */
.jdv-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.jdv-badge svg { width: 15px; height: 15px; }

.jdv-badge-tiktok {
  background: rgba(0, 0, 0, .75);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.jdv-badge-instagram {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}

/* ── @HANDLE ── */
.jdv-handle {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 20;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3px 10px;
  border-radius: 100px;
  letter-spacing: .03em;
  pointer-events: none;
}

/* ── IFRAME EMBED ── */
.jdv-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  /* TikTok/IG iframes have their own UI so let them fill the card */
  background: #000;
}
.jdv-embed iframe {
  /* Fill the full card */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* Clip iframe's own rounded corners */
  border-radius: 18px;
}

/* ── FALLBACK (no embed ID) ── */
.jdv-no-embed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jdv-open-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition: color .2s;
}
.jdv-open-link:hover { color: #F5C518; }
.jdv-open-link svg {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 50%;
  padding: 12px;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .jdv-badge  { width: 26px; height: 26px; border-radius: 7px; }
  .jdv-badge svg { width: 13px; height: 13px; }
  .jdv-handle { font-size: 10px; padding: 2px 8px; bottom: 8px; left: 8px; }
}