/* ============================================================
   responsive.css —— 平板 / 手机自适应样式（所有页面最后加载）
   仅在窄屏下覆盖原布局，不影响电脑端原有效果
   ============================================================ */

/* ---------- 平板及以下（≤1199px）---------- */
@media screen and (max-width: 1199px) {

    /* 顶部栏、导航、页脚容器宽度自适应 */
    header .con,
    nav .nav_in,
    footer .foot {
        width: auto;
        padding: 0 12px;
        box-sizing: border-box;
    }
    header .con .left li { margin-right: 20px; }
    header .con .right li { margin-left: 20px; }
    nav ul li { margin-right: 25px; }
    nav .nav_in ol li { margin-left: 15px; }

    /* 各页面主体宽度自适应 */
    .content, .share, .list, .one {
        width: auto;
        margin-left: 12px;
        margin-right: 12px;
        box-sizing: border-box;
    }
    .content ul { width: 100%; }
    .content {
        height: auto;
        margin-top: 65px;
        overflow: hidden;   /* 包住内部浮动元素 */
    }
    .share { height: auto; overflow: hidden; }

    /* 视频自适应宽度 */
    .content video { width: 100%; height: auto; }

    /* 首页“最热视频” & 收藏页图片：弹性网格 */
    .content > a:has(> img) {
        width: calc(33.333% - 8px);
        height: auto;
        margin: 0 12px 12px 0;
        overflow: hidden;
    }
    .content > a:has(> img) img { width: 100%; height: auto; }
    .content > a:nth-of-type(1) { width: calc(100% - 12px); }
    .content a:nth-of-type(1) .cur { width: 100%; height: 100%; }
    .content a:nth-of-type(1):hover img { width: 100%; height: auto; }
    .content a .cur h3 { padding-top: 6%; font-size: 18px; }
    .content a .cur span { margin: 4% auto 0; }

    /* 首页“大咖推荐”两列 */
    .share a {
        width: calc(50% - 8px);
        height: auto;
        margin: 0 8px 16px 0;
    }
    .share a > img { width: 100%; height: auto; }

    /* 个人中心 */
    .one ul li { margin-right: 20px; }
    .content .left { width: 100%; float: none; }
    .content .left .top { height: auto; overflow: hidden; }
    .content .left a {
        width: calc(33.333% - 10px);
        height: auto;
        margin: 0 10px 10px 0;
    }
    .content .left a img { width: 100%; height: auto; }

    /* 视频播放页 */
    .list .left { width: 100%; float: none; height: auto; }
    .list .left a {
        width: calc(33.333% - 10px);
        height: auto;
        margin: 0 10px 10px 0;
        background-size: cover;
        background-position: center;
    }
    .list .left a img { width: 100%; height: auto; }
    .list .left .last { width: auto; padding: 15px; }
    .list .left .last textarea { width: 100%; box-sizing: border-box; }
    .list .right { width: 100%; float: none; height: auto; }
    .list .right section { width: 100%; height: auto; box-sizing: border-box; }
    .list .right img { width: 100%; height: auto; }

    /* 我的订阅 */
    .content figure { float: none; margin: 0 auto; }

    /* 注册页 */
    .content aside { float: none; padding-left: 0; text-align: center; }
    .content aside img { max-width: 100%; }
    .content .right {
        float: none;
        width: 100%;
        max-width: 400px;
        margin: 20px auto 0;
        box-sizing: border-box;
    }
    .content .right input,
    .content .right .button { width: 100%; box-sizing: border-box; }

    /* 论坛页 */
    .content .two { height: auto; }
    .content .two input { width: 100%; box-sizing: border-box; }
}

/* ---------- 手机（≤767px）---------- */
@media screen and (max-width: 767px) {
    body { font-size: 13px; }

    /* 顶部栏允许换行，高度自适应 */
    header { height: auto; }
    header .con { overflow: hidden; }
    header .con .left li  { height: 40px; line-height: 40px; margin-right: 10px; }
    header .con .right li { height: 40px; line-height: 40px; margin-left: 10px; }

    /* 导航：隐藏右侧装饰图标 */
    nav { height: 48px; }
    nav ul li { height: 48px; line-height: 48px; font-size: 16px; margin-right: 18px; }
    nav ul li:first-child a { height: 48px; }
    nav .nav_in ol { display: none; }

    /* 轮播图：铺满裁剪显示 */
    .banner { height: 420px; }
    .banner_pic {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .banner_pic img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
    }
    .banner p { width: 90%; font-size: 15px; top: 40%; opacity: 1; }
    .banner p:nth-of-type(2),
    body:hover .banner p:nth-of-type(2) { top: 56%; font-size: 15px; opacity: 1; }
    .sanjiao, body:hover .sanjiao { top: 78%; opacity: 1; }
    #button { top: 92%; }

    /* 标题字号缩小 */
    .content h2, .share h2 { font-size: 22px; line-height: 60px; }

    /* 首页视频卡片 / 收藏页照片：两列 */
    .content > a:has(> img) { width: calc(50% - 6px); margin: 0 0 10px 0; }
    .content > a:nth-of-type(1) { width: 100%; }

    /* “大咖推荐”单列，订阅信息直接显示 */
    .share a { width: 100%; margin: 0 0 14px 0; }
    .share a .cur,
    .share a:nth-of-type(2) .cur,
    .share a:nth-of-type(3) .cur,
    .share a:hover .cur,
    .share a:nth-of-type(2):hover .cur,
    .share a:nth-of-type(3):hover .cur {
        position: static !important;
        left: auto !important;
        width: 100%;
        height: auto;
        background: #fafafa;
    }
    .share a .cur img { padding: 15px 0 0 0; }
    .share a .cur span { float: none; margin: 15px auto 20px; }

    /* 个人中心缩略图两列 */
    .content .left a { width: calc(50% - 5px); }

    /* 视频页选集两列 */
    .list .left a { width: calc(50% - 5px); }

    /* 论坛分类标签 */
    .content ul li { margin: 0 8px 10px 0; font-size: 15px; }

    /* 注册页留白 */
    .content:has(> aside) { padding-top: 30px; }

    /* 页脚高度自适应，文字可换行 */
    footer { height: auto; padding: 15px 12px; box-sizing: border-box; margin-top: 40px; }
    footer .foot { height: auto; }
    footer p { line-height: 1.8; }
    footer span { left: 50%; margin-left: -29px; }
}

/* ---------- 小屏手机（≤480px）---------- */
@media screen and (max-width: 480px) {
    /* 卡片改为单列，更易观看 */
    .content > a:has(> img) { width: 100%; }
    .content .left a,
    .list .left a { width: 100%; margin-right: 0; }
    nav ul li { margin-right: 12px; }
}