/*
 * TikTok and Instagram posts in blog articles. Linked from a post page by
 * scripts/new-post.mjs when its body has one; behavior in /blog-social.js.
 */

.social-embed {
  --se-panel: var(--panel, #121017);
  --se-line: var(--line, rgba(236, 234, 242, 0.09));
  --se-text: var(--text, #eceaf2);
  --se-muted: var(--muted, #908da1);
  --se-accent: #6cd6e8;
  width: 100%;
  max-width: 340px;
  margin: 28px auto 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.social-embed[data-platform="tiktok"] { --se-accent: #25f4ee; }
.social-embed[data-platform="instagram"] { --se-accent: #e1306c; }

.social-embed-play {
  width: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  background: var(--se-panel);
  border: 1px solid var(--se-line);
  border-top: 3px solid var(--se-accent);
  border-radius: 14px;
  color: var(--se-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.social-embed-play:hover { border-color: var(--se-accent); }
.social-embed-play:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 3px; }
.social-embed-app { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--se-accent); }
.social-embed-label { font-size: 17px; font-weight: 700; line-height: 1.3; }
.social-embed-label::before {
  content: '';
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--se-accent) no-repeat center / 20px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a0a0a' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.social-embed-note { font-size: 12.5px; color: var(--se-muted); }

.social-embed iframe {
  width: 100%;
  height: 740px;
  border: 0;
  border-radius: 14px;
  background: var(--se-panel);
}
.social-embed[data-platform="instagram"] iframe { height: 700px; }
.social-embed.is-loaded { max-width: 400px; }

:root .social-embed-open { font-size: 13px; color: var(--se-muted); text-decoration: underline; }
:root .social-embed-open:hover { color: var(--se-text); }

@media (prefers-reduced-motion: reduce) {
  .social-embed-play { transition: none; }
}