/* newselastica 响应式样式 — 从旧站 layout-tablet.css + layout-mobile.css 迁移适配 */

/* ===== 面包屑横排 (所有屏幕尺寸) ===== */
.breadcrumbs ul, .breadcrumb ul, .breadcrumb ol, .mod-breadcrumbs {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center;
}
.breadcrumbs ul li, .breadcrumb ul li, .breadcrumb ol li, .mod-breadcrumbs li {
    display: inline-flex; align-items: center; white-space: nowrap;
}
.breadcrumb ol li::after, .mod-breadcrumbs li::after {
    content: " "; margin: 0 0.3em;
}
.breadcrumb ol li:last-child::after, .mod-breadcrumbs li:last-child::after { content: ""; }
.breadcrumb .divider, .mod-breadcrumbs .divider { display: none; }
.mod-breadcrumbs__here { font-weight: normal; }
.mod-breadcrumbs__here::after { content: ""; }

/* ===== 桌面窄屏断点 (max-width: 1235px) — 复刻旧站 layout-normal (960px) ===== */
@media screen and (max-width: 1235px) {
    .main { width: 960px !important; }
    #ja-content, .ja-frontpage #ja-content, .ja-mf #ja-content {
        width: 656px !important;
    }
    .grid-double { width: 304px !important; }
}

/* ===== 平板断点 (max-width: 985px) ===== */
@media screen and (max-width: 985px) {
    body { -webkit-text-size-adjust: 100%; }

    /* 主布局容器撑满 */
    .main { width: 100% !important; padding: 0 10px; box-sizing: border-box; }
    #ja-content, .ja-frontpage #ja-content {
        width: 100% !important; float: none !important; margin-right: 0 !important;
    }
    #ja-navhelper .main {
    padding: 0.5em;
}

    /* 侧边栏堆叠到下方 */
    .column { float: none !important; width: 100% !important; }
    #ja-left, #ja-right1, #ja-extra-col { width: 100% !important; margin-bottom: 1em; }

    /* Masonry 网格重置 */
    .grid-double, .grid-tripple { width: 100% !important; }

    /* 平板缩略图全宽 (对标旧站 layout-tablet) */
    .blog-item .img-intro-right, .blog-item .img-intro-left,
    .blog-featured .img-intro-right, .blog-featured .img-intro-left,
    .items-leading .img-intro-right, .items-leading .img-intro-left,
    .items-row .img-intro-right, .items-row .img-intro-left {
        float: none !important; width: 100% !important; margin: 0 0 1em 0 !important;
    }
    .blog-item .img-intro-right img, .blog-item .img-intro-left img,
    .blog-featured .img-intro-right img, .blog-featured .img-intro-left img,
    .items-leading .img-intro-right img, .items-leading .img-intro-left img,
    .items-row .img-intro-right img, .items-row .img-intro-left img {
        width: 100% !important; height: auto !important;
    }

    /* 平板卡片阴影 + 收紧间距 (对标旧站 layout-tablet) */
    .items-row, .item-page { box-shadow: 0 1px 1px rgba(0,0,0,.25); }
    .items-row .item .contentpaneopen { box-shadow: none; }
    .items-row .item, .blog-item { padding: 0 0 1em 0; }

    /* 导航栏撑满 */
    #ja-mainnav { float: none !important; width: 100% !important; }
    .ja-megamenu ul.level0 li.mega a.mega { padding: 0 .5em !important; }
    .ja-megamenu ul.level0 li.mega span.menu-title { font-size: 1em !important; }
    #ja-header { margin-bottom: 1em; }

    /* 侧栏堆叠后整宽: 页码按钮行 + 跳转行 整体居中 */
    .pagination.pagination-toolbar { justify-content: center; }
    .pagination.pagination-toolbar > .pagination__wrapper { margin: 0 auto; }
    .pag-goto { margin-left: 0; width: 100%; justify-content: center; }
    /* Logo 缩小 */
    h1.logo a img { width: 250px; }

    /* 搜索框适配 */
    #ja-search form.search { width: 180px; }
    #ja-search .inputbox { width: 140px; }
}

/* ===== 手机断点 (max-width: 590px) ===== */
@media screen and (max-width: 590px) {
    body { -webkit-text-size-adjust: 100%; font-size: 14px !important; }

    /* 移动端字号对齐旧站 ja_elastica/css/layout-mobile.css
       (不覆盖则文章标题仍为 2.25em≈36px, 手机上过大、换行破碎且溢出卡片, 即用户反馈的"字体变形") */
    h1 { font-size: 1.5em !important; }
    h2 { font-size: 1.25em !important; }
    h3 { font-size: 1.1em !important; }
    h4, h5 { font-size: 1em !important; }
    .contentheading { font-size: 1.2em !important; }
    .blog-featured .contentheading { font-size: 1.2em !important; }

    /* 全部容器撑满 */
    #ja-content, .column, #ja-left, #ja-right1 {
        width: 100% !important; float: none !important; margin: 0 0 1em 0 !important;
    }

    /* 缩略图全宽 */
    .img-intro-right, .img-intro-left {
        float: none !important; width: 100% !important; margin: 0 0 1em 0 !important;
    }
    .img-intro-right img, .img-intro-left img {
        width: 100% !important; height: auto !important;
    }

    /* 导航: 默认隐藏菜单列表只显示汉堡按钮, 点击后加 .rjd-active 展开 (实际渲染为 J6 mod_menu) */
    #ja-mainnav ul.mod-menu.nav { display: none !important; }
    #ja-mainnav ul.mod-menu.nav.rjd-active { display: block !important; }
    #ja-mainnav ul.mod-menu.nav.rjd-active > li.nav-item {
        float: none !important; width: 100% !important; height: auto !important;
        display: block !important; border-top: 1px solid #05496c;
    }
    #ja-mainnav ul.mod-menu.nav.rjd-active > li.nav-item > a {
        height: auto !important; line-height: 1.4 !important;
        padding: 0.8em 1em !important; display: block !important;
    }
    /* 手机上子菜单默认收起, 点击父级后(JS 加 .sub-open)展开二级分类 */
    #ja-mainnav ul.mod-menu.nav ul.mod-menu__sub { display: none !important; }
    #ja-mainnav ul.mod-menu.nav li.sub-open > ul.mod-menu__sub {
        display: block !important; position: static !important;
        width: 100% !important; min-width: 0 !important; border: 0 !important;
    }
    /* 有子菜单的父级: 链接收缩为文字宽度 → 点击文字=跳转; 整行其余空白(含右侧箭头区)=展开/收起 */
    #ja-mainnav ul.mod-menu.nav li.deeper { position: relative; cursor: pointer; }
    #ja-mainnav ul.mod-menu.nav.rjd-active > li.nav-item.deeper > a { display: inline-block !important; }
    /* 折叠指示三角: 画在 li 上, 盒子高度固定为父级那一行(3em = 上下 padding 0.8em*2 + 行高 1.4),
       所以二级展开后箭头仍居中在父级行右侧, 不会被拉到整块中间。
       ▸ = 已收起(点一下展开)  ▾ = 已展开(点一下收起) */
    #ja-mainnav ul.mod-menu.nav li.deeper::after {
        content: "\25B8";
        position: absolute; right: 0; top: 0; width: 3.2em; height: 3em;
        display: flex; align-items: center; justify-content: center;
        color: #fff; line-height: 1;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
        pointer-events: none;
    }
    #ja-mainnav ul.mod-menu.nav li.deeper.sub-open::after { content: "\25BE"; }
    /* mod_menu 自带的折叠按钮: 视觉隐藏但保留给键盘/读屏(箭头已由上面的 li::after 呈现) */
    #ja-mainnav ul.mod-menu.nav li.deeper > button.mod-menu__toggle-sub {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap; border: 0; background: none; pointer-events: none;
    }
    /* 展开的二级列表内部空白不作为折叠热区 */
    #ja-mainnav ul.mod-menu.nav li.deeper > ul.mod-menu__sub { cursor: default; }

    /* 顶部一行排列: 汉堡(左) — Logo(中) — 搜索放大镜(右); 上下留白收紧 */
    #ja-header { margin-bottom: 0.4em; }
    #ja-header .header { display: flex !important; align-items: center; gap: 4px; padding: 4px 0; }
    #ja-menu-button {
        display: block !important; order: 1; flex: 0 0 auto;
        color: #006599; font-size: 28px; line-height: 1;
        cursor: pointer; border-radius: 2px;
    }
    h1.logo { order: 2; flex: 1 1 auto; width: auto !important; height: auto !important; float: none; text-align: center; }
    h1.logo a { display: inline-block; padding: 0.2em 0; }
    #ja-top { order: 3; flex: 0 0 auto; float: none !important; width: auto !important; height: auto; }
    #ja-search { margin-top: 0; padding: 0; position: relative; }
    #ja-search form.search { width: auto !important; float: none; padding-top: 0; }
    /* 搜索只显示放大镜, 点击后展开输入框 (JS 加 .search-open) */
    #ja-search .inputbox { display: none; }
    #ja-search.search-open .inputbox {
        display: block !important; position: absolute; right: 0; top: 100%;
        width: 200px !important; z-index: 1000; background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,.25);
    }
    #ja-search .search-btn { float: none; }

    /* 文章间距收紧 */
    .items-row { margin: 0.5em 0 !important; }
    .item .contentpaneopen { padding: 0.8em !important; min-height: auto !important; }
    .item-page { padding: 1em !important; min-height: auto !important; }
    /* 手机上仍保留分页所需的卡片底部留白 (否则 padding:1em !important 会把分页压到正文上) */
    .item-page:has(ul.pagenav) { padding-bottom: 57px !important; }

    /* 旧站手机端隐藏 分类/作者/点击数, 只保留日期 (layout-mobile.css)
       注意不用旧站的 margin-top:-1em —— 本模板 DOM 里缩略图在日期上方, 负边距会把日期压到图下面 */
    dd.category-name, dd.createdby, dd.hits { display: none !important; }
    .article-tools { margin: 0 0 0.5em; }
    dl.article-info { width: 100%; }

    /* 分页简化 */
    .pagination ul li { display: none !important; }
    .pagination ul li.pagination-prev, .pagination ul li.pagination-next { display: inline-block !important; }

    /* 页脚简化 */
    .ja-copyright small:first-child, ul.actions { display: none !important; }
    .foot .foot-link, .foot1 .foot-link { float: none !important; width: 100% !important; padding-right: 0 !important; }

    /* 底部版权: 手机端显示 footer-mobile 类模块, 隐藏 footer-desktop 类模块
       (依赖模板覆盖 html/mod_custom/default.php 输出 moduleclass_sfx; 任何新模块填对类后缀即自动生效) */
    #ja-footer .footer-desktop { display: none !important; }
    #ja-footer .footer-mobile { display: block !important; }
    #ja-footer .foot-links { margin: 0 0 6px; }
    /* 隐藏附件 */
    .attachmentsContainer { display: none !important; }
    #ja-footer{padding: 0;}
}

/* ===== 返回顶部按钮 (元素由 js/backtotop.js 动态创建) =====
   默认 display:none: 桌面/平板完全不出现; 仅手机断点下由滚动方向加 .is-visible 淡入
   (上拉显示 / 下拉隐藏, 见 backtotop.js) */
.ja-backtotop {
    display: none;
    position: fixed;
    right: 12px;
    bottom: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* iPhone 底部安全区 */
    z-index: 9999;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 101, 153, .85);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.ja-backtotop svg { width: 22px; height: 22px; display: block; }
.ja-backtotop:active { background: rgba(0, 101, 153, 1); }

@media screen and (max-width: 590px) {
    .ja-backtotop { display: flex; }
    .ja-backtotop.is-visible { opacity: 1; visibility: visible; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ja-backtotop { transition: none; }
}

/* ===== 竖屏小手机 (max-width: 405px) ===== */
@media screen and (max-width: 405px) {
    #ja-search.search-open .inputbox { width: 160px !important; }
    .pagination .counter { font-size: 0.8em; }
}

/* ===== 底部版权双端切换: 默认(电脑端)隐藏手机版模块 =====
   用法: 模块 Advanced → Module Class Suffix 填 " footer-desktop"(电脑端显示) 或 " footer-mobile"(手机端显示), 前面带空格 */
#ja-footer .footer-mobile { display: none; }