/* Phase 14: video reviews + social sharing on article pages */

.article-videos {
  max-width: 760px;
  margin: 32px auto 48px;
  padding: 0 20px;
}

/* Column layout (not grid) so videos of very different heights - a wide
   16:9 YouTube video next to a tall 9:16 TikTok/Facebook one - stack
   naturally without leaving large empty gaps the way a row-based grid
   would when row heights vary this much. */
.article-videos__grid {
  columns: 2 300px;
  column-gap: 20px;
}

.article-videos__grid .video-embed {
  break-inside: avoid;
  margin-bottom: 20px;
}

.video-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.video-embed--youtube {
  aspect-ratio: 16 / 9;
}

.video-embed--youtube iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Facebook's SDK embed auto-sizes its own iframe to match the actual
   video's real aspect ratio (portrait or landscape) - so this container
   just centers it and lets height be natural, no forced aspect-ratio. */
.video-embed--facebook {
  background: var(--color-off-white);
  display: flex;
  justify-content: center;
  padding: 4px;
}

.video-embed--facebook .fb-video,
.video-embed--facebook iframe {
  max-width: 100%;
}

.video-embed--tiktok {
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin: 0 auto;
  background: var(--color-off-white);
}

.video-embed--tiktok blockquote {
  margin: 0;
}

/* ---------- Share buttons ---------- */

.article-share {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 20px 20px 0;
  border-top: 1px solid var(--color-light-gray);
}

.article-share__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-charcoal-soft);
  margin-bottom: 10px;
}

.article-share__buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.article-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  color: var(--color-white);
  text-decoration: none;
}

.article-share__btn--facebook {
  background: #1877f2;
}

.article-share__btn--facebook:hover {
  background: #145dbf;
}

.article-share__btn--line {
  background: #06c755;
}

.article-share__btn--line:hover {
  background: #059f45;
}

.article-share__btn--twitter {
  background: #14171a;
}

.article-share__btn--twitter:hover {
  background: #000000;
}

.article-share__btn--copy {
  background: var(--color-charcoal-soft);
}

.article-share__btn--copy:hover {
  background: var(--color-charcoal);
}