/* ==================== EMBEDS DE REDES SOCIALES ==================== */

/* Twitter/X Embeds */
.twitter-tweet {
  margin: var(--spacing-xl) auto !important;
  max-width: 550px !important;
  width: 100% !important;
}

/* Instagram Embeds */
.instagram-media {
  margin: var(--spacing-xl) auto !important;
  max-width: 540px !important;
  min-width: 326px !important;
  width: 100% !important;
  border-radius: 3px;
}

/* TikTok Embeds */
.tiktok-embed {
  margin: var(--spacing-xl) auto !important;
  display: block !important;
}

/* Forzar ancho completo en iframe de TikTok */
.tiktok-embed > div,
.tiktok-embed > section {
  width: 100% !important;
  max-width: 100% !important;
}

.tiktok-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Contenedor general para embeds */
.post-content .twitter-tweet,
.post-content .instagram-media,
.post-content .tiktok-embed {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Dark mode - solo ajustar sombras */
[data-theme="dark"] .post-content .twitter-tweet,
[data-theme="dark"] .post-content .instagram-media,
[data-theme="dark"] .post-content .tiktok-embed {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* YouTube Embeds */
.youtube-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: var(--spacing-xl) 0;
  background: #000;
  border-radius: 8px;
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contenedor general para embeds */
.post-content .twitter-tweet,
.post-content .instagram-media,
.post-content .tiktok-embed,
.post-content .youtube-embed {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Dark mode - solo ajustar sombras */
[data-theme="dark"] .post-content .twitter-tweet,
[data-theme="dark"] .post-content .instagram-media,
[data-theme="dark"] .post-content .tiktok-embed,
[data-theme="dark"] .post-content .youtube-embed {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .twitter-tweet,
  .instagram-media,
  .tiktok-embed,
  .youtube-embed {
    max-width: 100% !important;
    width: 100% !important;
    margin: var(--spacing-lg) 0 !important;
  }

  /* Asegurar que los iframes de YouTube se vean bien en móvil */
  .youtube-embed {
    padding-bottom: 56.25% !important;
    min-height: 200px;
  }
}