/* 抖音视频容器基础样式 */
.typecho-douyin-video {
  container-type: inline-size; /* 在父容器上定义容器类型 */
  container-name: douyin-video; /* 可选，为容器命名 */
  width: 100%; /* 确保父容器有宽度 */
}

.typecho-douyin-video-wrapper {
  container-type: inline-size;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 20px auto;
  padding: 0;
  background: #000;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  min-height: 0;
}

/* 容器查询 - 当父容器.douyin-video的宽度大于等于730px时 */
@container douyin-video (min-width: 730px) {
  .typecho-douyin-video-wrapper {
    width: min(730px, 100%);
    aspect-ratio: 146 / 89;
  }
}

/* 容器查询 - 当父容器.douyin-video的宽度小于730px时 */
@container douyin-video (max-width: 729px) {
  .typecho-douyin-video-wrapper {
    width: min(324px, 100%);
    aspect-ratio: 27 / 56;
  }
}

/* iframe样式 */
.typecho-douyin-video-wrapper iframe {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  align-self: flex-start;
  z-index: 2;
  transition: height 0.3s ease;
  -ms-overflow-style: none;
  scrollbar-width: none;
}