/* 影音嵌入區塊基礎樣式 */
.video-embed {
  margin: 2em auto;
  max-width: 100%;
}

/* 響應式 iframe 容器 */
.video-embed__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000;
}

.video-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 16:9 橫式影片（Facebook 橫式） */
.video-embed__wrapper--16-9 {
  padding-bottom: 56.25%; /* 16:9 比例 */
}

/* 9:16 直式影片（長型卡片） */
.video-embed__wrapper--9-16 {
  padding-bottom: 177.78%; /* 9:16 比例 */
  width: 100%;
  margin: 0 auto;
}

/* 橫式影片 */
.video-embed--horizontal {
  max-width: 800px;
}

/* 直式影音（長型卡片） - 手機版預設 100% */
.video-embed--vertical {
  width: 100%;
}

/* 平板版調整（>= 640px, sm breakpoint） */
@media (min-width: 640px) {
  .video-embed--vertical {
    width: 300px;
  }

  .video-embed__wrapper--9-16 {
    width: 300px;
  }
}

/* 桌機版調整（>= 1024px, lg breakpoint） */
@media (min-width: 1024px) {
  .video-embed--vertical {
    width: 400px;
  }

  .video-embed__wrapper--9-16 {
    width: 400px;
  }
}

/* 手機版調整 */
@media (max-width: 768px) {
  .video-embed {
    margin: 1.5em auto;
  }

  /* 橫式影片在手機版保持 16:9 */
  .video-embed--horizontal {
    max-width: 100%;
  }
}

/* 小手機調整（寬度 < 480px） */
@media (max-width: 480px) {
  .video-embed {
    margin: 1em auto;
  }
}