/*
======================================================================
  EMBED 模块样式
  包含：视频嵌入内容块样式
======================================================================
*/

/* 嵌入视频内容块样式 */
.embed-block-wrapper {
  width: 100%;                     /* 宽度占满容器 */
  max-width: 100%;                 /* 最大宽度为100%，防止溢出 */
  margin: 1rem 0;                  /* 上下边距1rem，与其他内容保持间距 */
}

/* 响应式嵌入容器 */
.embed-responsive {
  position: relative;              /* 相对定位，为子元素绝对定位提供参考 */
  display: block;                  /* 块级元素显示 */
  height: 0;                       /* 高度设为0，通过padding-bottom控制实际高度 */
  padding: 0;                      /* 内边距为0 */
  overflow: hidden;                /* 隐藏溢出内容 */
}

/* 嵌入内容项通用样式 */
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;              /* 绝对定位 */
  top: 0;                          /* 顶部对齐 */
  bottom: 0;                       /* 底部对齐 */
  left: 0;                         /* 左侧对齐 */
  width: 100%;                     /* 宽度占满容器 */
  height: 100%;                    /* 高度占满容器 */
  border: 0;                       /* 无边框 */
}

/* 16:9宽高比设置 */
.embed-responsive-16by9 {
  padding-bottom: 56.25%;          /* 16:9比例计算：9/16 = 56.25% */
}

/* 段落中嵌入内容的响应式样式 */
.block-paragraph_block div[data-embed] .embed-responsive {
  margin: 1rem 0;                  /* 上下边距1rem */
  width: 100%;                     /* 宽度占满容器 */
  max-width: 100%;                 /* 最大宽度100% */
}

/*
======================================================================
  WECHAT 模块样式
  包含：微信二维码悬停展示样式
======================================================================
*/

/* 微信容器 */
.footer__icon.wechat-container {
  position: relative;                /* 相对定位 */
  display: inline-block;             /* 行内块显示 */
}

/* 微信二维码悬停显示样式 */
.footer__icon.wechat-container {
  position: relative;                /* 相对定位 */
  display: inline-block;             /* 行内块显示 */
}

/* 微信二维码弹窗 */
.footer__icon.wechat-container .wechat-qr-popup {
  position: absolute;                /* 绝对定位 */
  bottom: 100%;                      /* 距离底部100%，即显示在图标上方 */
  left: 50%;                         /* 距离左侧50% */
  transform: translateX(-50%);       /* 水平居中 */
  width: 200px;                      /* 宽度200px */
  padding: 10px;                     /* 内边距 */
  background-color: #fff;            /* 背景色 */
  border: 1px solid #ddd;            /* 边框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
  z-index: 1000;                     /* 层级 */
  display: none;                     /* 默认隐藏 */
  margin-bottom: 10px;               /* 与下方图标的间距 */
}

/* 微信二维码悬停显示 */
.footer__icon.wechat-container:hover .wechat-qr-popup {
  display: block;                    /* 显示 */
}

/* 微信二维码弹窗箭头 */
.footer__icon.wechat-container .wechat-qr-popup::before {
  content: "";                       /* 内容为空 */
  position: absolute;                /* 绝对定位 */
  top: 100%;                         /* 距离顶部100%，即箭头指向下方 */
  left: 50%;                         /* 距离左侧50% */
  transform: translateX(-50%);       /* 水平居中 */
  border: 5px solid transparent;     /* 透明边框 */
  border-bottom-color: #ddd;         /* 底部边框颜色，指向图标 */
}

/* 微信二维码弹窗箭头内部 */
.footer__icon.wechat-container .wechat-qr-popup::after {
  content: "";                       /* 内容为空 */
  position: absolute;                /* 绝对定位 */
  top: 100%;                         /* 距离顶部100% */
  left: 50%;                         /* 距离左侧50% */
  transform: translateX(-50%);       /* 水平居中 */
  border: 5px solid transparent;     /* 透明边框 */
  border-bottom-color: #fff;         /* 底部边框颜色，指向图标 */
  margin-top: -1px;                  /* 微调位置，确保箭头显示正确 */
  z-index: 1001;                     /* 层级 */
}

/*
======================================================================
  CATEGORY 模块样式
  包含：页面分类的CSS样式显示
======================================================================
*/

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 语言选择面板样式 */
.logo-with-language {
    position: relative;
    display: inline-block;
}

.language-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 150px;
    padding: 15px;
}

.language-panel h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 16px;
}

.language-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-list li {
    margin-bottom: 8px;
}

.language-list li:last-child {
    margin-bottom: 0;
}

.language-list a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.language-list a:hover {
    background-color: #f5f5f5;
}

/* 当面板显示时的样式 */
.language-panel.show {
    display: block;
}

/*
======================================================================
ImageParagraphBlock 样式
包含：图片和段落并排显示的样式，支持左右布局
======================================================================
*/
.full-width-figure {
    width: 100%;
    margin: 0;
}

.full-width-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.full-width-figure figcaption {
    text-align: left;
    margin: 0;
    display: block;
}

.image-paragraph-block {
    margin: 1rem 0;
}

.image-paragraph-block .image-paragraph-block__image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-paragraph-block .image-paragraph-block__paragraph {
    display: flex;
    align-items: center;
}

.image-paragraph-block img {
    max-width: 100%;
    height: auto;
}

/*
 * 响应式设计 - 在小屏幕上堆叠显示
 */
@media (max-width: 767px) {
    .image-paragraph-block .row {
        flex-direction: column;
    }
    
    .image-paragraph-block--left .image-paragraph-block__image,
    .image-paragraph-block--right .image-paragraph-block__image {
        margin-bottom: 1rem;
    }
    
    .image-paragraph-block--left .image-paragraph-block__paragraph,
    .image-paragraph-block--right .image-paragraph-block__paragraph {
        margin-bottom: 1rem;
    }
}

/* 
 * 列宽适配 - 桌面端
 * 使用方式示例: 
 * <div class="image-paragraph-block__image image-paragraph-block__image--width-30">
 * <div class="image-paragraph-block__paragraph image-paragraph-block__paragraph--width-70">
 */
@media (min-width: 768px) {
    /* 20%/80% 宽度比例 */
    .image-paragraph-block__image--width-20 {
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    .image-paragraph-block__paragraph--width-80 {
        flex: 0 0 80%;
        max-width: 80%;
    }
    
    /* 25%/75% 宽度比例 */
    .image-paragraph-block__image--width-25 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .image-paragraph-block__paragraph--width-75 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    /* 30%/70% 宽度比例 */
    .image-paragraph-block__image--width-30 {
        flex: 0 0 30%;
        max-width: 30%;
    }
    
    .image-paragraph-block__paragraph--width-70 {
        flex: 0 0 70%;
        max-width: 70%;
    }
    
    /* 40%/60% 宽度比例 */
    .image-paragraph-block__image--width-40 {
        flex: 0 0 40%;
        max-width: 40%;
    }
    
    .image-paragraph-block__paragraph--width-60 {
        flex: 0 0 60%;
        max-width: 60%;
    }
}