/* ==========================================================================
   移动端响应式适配层
   说明：仅做窄屏覆盖，不改动 style.css 原有 PC 样式。
   断点：1024px（平板）/ 640px（手机），与 canonical alternate 标注保持一致。
   ========================================================================== */

/* ---------- 基础：防止移动端字体放大与横向溢出 ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- 平板：1024px 以下放开固定宽度 ---------- */
@media (max-width: 1024px) {
    #header .main,
    .main {
        width: auto;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }
}

/* ---------- 手机：640px 以下 ---------- */
@media (max-width: 640px) {

    /* 顶部主容器 */
    #header .main {
        width: auto;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* 导航栏改为两行：第一行 logo + 搜索，第二行菜单横向滚动 */
    #header .navbar {
        display: block;
        overflow: visible;
    }

    #header .navbar .nav-logo {
        float: none;
        height: 50px;
        display: flex;
        align-items: center;
    }

    #header .navbar .nav-logo img {
        height: 40px;
        width: 90px;
        object-fit: contain;
    }

    /* 菜单：横向滚动，不换行，不占满屏幕高度 */
    #header .nav-list {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -12px;
        padding: 0 12px;
    }

    #header .nav-list::-webkit-scrollbar {
        display: none;
    }

    #header .nav-list a.nav-item {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        margin: 0 10px 0 0;
        padding: 0 4px;
    }

    /* 搜索框：整行铺满，触控区域足够大 */
    #header .weather-search {
        margin-top: 8px;
        margin-bottom: 8px;
        border-radius: 18px;
    }

    #header .search-input {
        width: calc(100% - 90px);
        height: 22px;
        line-height: 22px;
        font-size: 15px;
        padding: 8px 0 8px 16px;
        box-sizing: border-box;
        float: none;
        display: inline-block;
        vertical-align: middle;
    }

    #header .search-btn {
        width: 70px;
        height: 40px;
        line-height: 40px;
        float: none;
        display: inline-block;
        vertical-align: middle;
    }

    #header .search-btn i {
        font-size: 22px;
    }

    /* 二维码、收藏按钮在手机上隐藏，避免挤压与误触 */
    #header .qr-code,
    #header .collection {
        display: none !important;
    }

    /* 城市选择面板改为全宽，避免超出屏幕 */
    #header .select-city-wrap {
        width: 100% !important;
        left: 0 !important;
        box-sizing: border-box;
    }

    /* 通用内容区约束，防止任何子元素撑破视口 */
    .main,
    .wrapper,
    .container,
    .content {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 表格在窄屏允许横向滚动，而不是撑破布局 */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 触控目标最小尺寸，提升移动端可用性 */
    a,
    button,
    .btn {
        min-height: 32px;
    }
}

/* ---------- 超小屏：375px 以下微调 ---------- */
@media (max-width: 375px) {
    #header .nav-list a.nav-item {
        font-size: 14px;
        margin-right: 8px;
    }

    #header .search-input {
        width: calc(100% - 80px);
    }

    #header .search-btn {
        width: 60px;
    }
}

/* ==========================================================================
   首页（index/index.html）适配
   说明：home-modern.css 已有部分 768px 断点，此处补齐遗漏项。
   核心问题：.hm-top-cols 使用 flex-wrap:nowrap 且无移动端覆盖，窄屏被横向挤压。
   ========================================================================== */

@media (max-width: 992px) {
    /* 顶部两栏卡片改为纵向堆叠 */
    #content .hm-top-cols {
        flex-wrap: wrap;
    }

    #content .hm-top-cols > .layui-col-md4,
    #content .hm-top-cols > .layui-col-md8 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        float: none;
    }
}

@media (max-width: 768px) {
    /* 栅格全部单列 */
    #content .layui-col-md4,
    #content .layui-col-md8,
    #content .layui-col-md12,
    #content .layui-col-md2,
    #content .layui-col-md3,
    #content .layui-col-md6 {
        width: 100% !important;
        float: none !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #content {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    #content .page-h1 {
        font-size: 20px;
        line-height: 1.4;
        margin: 10px 0;
    }

    /* 顶部当前天气卡：温度与描述缩小，避免溢出 */
    #content .banner-weather-temp {
        font-size: 46px;
        line-height: 1.1;
    }

    #content #position {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 14px;
    }

    /* 温度/紫外线/湿度三项改为纵向或换行，防止横向挤压 */
    #content .banner-weather-list dl {
        display: flex;
        flex-wrap: wrap;
    }

    #content .banner-weather-list dl dd {
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* 未来一周：标题与右侧链接换行 */
    #content .banner-box-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    #content .banner-box-title-links {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 7天预报列表：两列网格 */
    #content .banner-box-con-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    #content .banner-box-con-list .banner-box-con-list-item {
        border-right: none !important;
        padding: 10px 6px;
        box-sizing: border-box;
    }

    /* 24小时天气：横向滚动，不换行 */
    #content .hours24-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap !important;
    }

    #content .hours24-list > li {
        flex: 0 0 auto;
    }

    /* 24小时容器标题区换行 */
    #content .banner-hours24Box-title {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #content .banner-hours24Box-title-r {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* 下辖/周边地区：每行两个 */
    #content .panel-jurisdiction-list {
        display: flex;
        flex-wrap: wrap;
    }

    #content .panel-jurisdiction-list > .layui-col-md4 {
        flex: 0 0 50%;
        width: 50% !important;
        max-width: 50% !important;
    }

    /* 全国城市列表：每行三个 */
    #content .panel-city-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    #content .panel-city-list > a.layui-col-md2 {
        flex: 0 0 calc(33.333% - 4px);
        width: calc(33.333% - 4px) !important;
        max-width: calc(33.333% - 4px) !important;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 标签页标题允许横向滚动 */
    #content .layui-tab-title {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    #content .layui-tab-title li {
        float: none;
        display: inline-block;
        font-size: 14px;
        padding: 0 10px;
    }

    /* 预警列表文字截断，避免长标题撑破 */
    #content .panel-alerts-list a span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    /* 友情链接换行 */
    #content .panel-box-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #content .panel-box-list .friend-link {
        flex: 0 0 auto;
        font-size: 13px;
    }
}

@media (max-width: 375px) {
    #content .banner-weather-temp {
        font-size: 38px;
    }

    #content .panel-city-list > a.layui-col-md2 {
        flex: 0 0 calc(50% - 3px);
        width: calc(50% - 3px) !important;
        max-width: calc(50% - 3px) !important;
    }
}

/* ==========================================================================
   详情页通用适配（weather/read.html、article/read.html 等）
   说明：33 个页面共用 home-modern.css，此处补齐正文区块窄屏规则。
   ========================================================================== */

@media (max-width: 768px) {

    /* 面包屑：允许换行，避免长路径撑破 */
    #content .bread-crumb,
    #content .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        line-height: 1.6;
        white-space: normal;
        overflow: hidden;
    }

    /* 文章标题与正文 */
    #content .article-title,
    #content .article-Info,
    #content .article-info {
        font-size: 20px;
        line-height: 1.45;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    #content .article-content {
        font-size: 16px;
        line-height: 1.8;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* 正文内图片、表格、视频不溢出 */
    #content .article-content img,
    #content .article-content video,
    #content .article-content iframe {
        max-width: 100%;
        height: auto;
    }

    #content .article-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 正文内长链接与代码块换行 */
    #content .article-content pre,
    #content .article-content code {
        white-space: pre-wrap;
        word-break: break-all;
    }

    /* 文章标签换行 */
    #content .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* 上一篇/下一篇：纵向堆叠 */
    #content .detail-prev-next {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #content .detail-prev-next a,
    #content .detail-prev-next .prev,
    #content .detail-prev-next .next {
        width: 100%;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* 天气详情：24小时区标题换行 */
    #content .banner-hours24Box-title {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    #content .banner-hours24Box-title-l,
    #content .banner-hours24Box-title-r {
        float: none;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    /* 生活指数列表：每行两个 */
    #content .article-life-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #content .article-life-list .article-life-item {
        flex: 0 0 calc(50% - 4px);
        width: calc(50% - 4px);
        box-sizing: border-box;
    }

    /* 天气描述与温度区防溢出 */
    #content .banner-weather,
    #content .banner-weather-info,
    #content .banner-weather-desc,
    #content .banner-box-desc {
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
    }

    /* layui 容器在窄屏取消固定宽度 */
    #content .layui-container {
        width: auto !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #content .layui-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 375px) {
    #content .article-title {
        font-size: 18px;
    }

    #content .article-content {
        font-size: 15px;
    }

    #content .article-life-list .article-life-item {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* ==========================================================================
   致命覆盖：解除 PC 固定宽度约束
   问题：style.css 中 #content{width:1200px}、#dynamic{min-width:1200px}
        会强制页面最小 1200px，导致手机端必然横向滚动、呈现"电脑版"。
   ========================================================================== */
@media (max-width: 1200px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 核心：解除内容区固定宽度 */
    #content {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
        margin: 10px auto 0;
        overflow: visible;
    }

    /* 背景装饰层不再撑宽 */
    #dynamic {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* 头部容器 */
    #header .main,
    .main {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 页脚容器 */
    #footer .layui-container,
    .layui-container {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 栅格统一盒模型，防止 padding 撑破 */
    [class*="layui-col-"] {
        box-sizing: border-box;
    }
}

/* ==========================================================================
   最终修正层（加载顺序最后 + !important，确保覆盖 style.css / home-modern.css）
   针对实机截图问题：页头导航不可见、按钮溢出、下辖列表单列过宽
   ========================================================================== */
@media (max-width: 768px) {

    /* ---------- 页头：改为蓝色渐变背景，让白色导航文字可见 ---------- */
    #header {
        height: auto !important;
        line-height: normal !important;
        background: linear-gradient(135deg, #2f8fef 0%, #5eb0f7 100%) !important;
        border-bottom: none !important;
        padding-bottom: 10px !important;
    }

    #header .main {
        display: block !important;
        width: 100% !important;
        padding: 10px 12px 0 !important;
        box-sizing: border-box;
    }

    #header .navbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        overflow: visible !important;
        clear: none !important;
    }

    #header .navbar .nav-logo {
        float: none !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 10px 6px 0 !important;
    }

    #header .navbar .nav-logo img {
        height: 30px !important;
        width: auto !important;
        max-width: 105px !important;
        object-fit: contain !important;
    }

    /* 导航菜单：换行铺满，白字可见 */
    #header .nav-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 14px !important;
        width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .nav-list a.nav-item {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        line-height: 1.7 !important;
        font-size: 14px !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        opacity: .95;
    }

    #header .nav-list a.nav-item:hover,
    #header .nav-list a.nav-item.active {
        font-weight: 700 !important;
        opacity: 1;
    }

    /* 搜索框：整行铺满 */
    #header .weather-search {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        border-radius: 20px;
    }

    #header .search-input {
        width: calc(100% - 60px) !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 15px !important;
        padding: 0 0 0 16px !important;
        float: none !important;
        display: inline-block !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    #header .search-btn {
        width: 60px !important;
        height: 40px !important;
        line-height: 40px !important;
        float: none !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* 二维码、收藏按钮在手机上隐藏 */
    #header .qr-code,
    #header .collection {
        display: none !important;
    }

    /* ---------- 标题栏与按钮组：允许换行，避免右侧被截断 ---------- */
    #content .panel-box-title {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px;
    }

    #content .panel-box-title .location {
        float: none !important;
        flex: 1 1 100%;
    }

    #content .panel-box-title .mess-box,
    #content .panel-box-title .mess-box.fr {
        float: none !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px;
        margin: 4px 0 0 !important;
    }

    #content .panel-box-title .mess-box .layui-btn,
    #content .panel-box-title .mess-box .mess-button {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px !important;
        padding: 0 10px !important;
        height: 32px !important;
        line-height: 32px !important;
        margin: 0 !important;
    }

    /* ---------- 当前天气卡片：信息行换行，避免湿度被截断 ---------- */
    #content .banner-weather-list dl {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 0;
    }

    #content .banner-weather-list dl dd {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #content .banner-weather-list .text {
        padding-left: 25px !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    #content #position {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center;
        line-height: 1.6;
    }

    #content #position #publishTime,
    #content #position .fr {
        float: none !important;
        font-size: 12px;
    }

    /* ---------- 下辖/周边地区：两列，避免单列过长 ---------- */
    #content .panel-jurisdiction-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px;
    }

    #content .panel-jurisdiction-list > .layui-col-md4 {
        flex: 0 0 calc(50% - 4px) !important;
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        float: none !important;
        box-sizing: border-box;
    }

    #content .panel-jurisdiction-item {
        padding: 8px 8px !important;
    }

    #content .panel-jurisdiction-item span {
        font-size: 13px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 60%;
        vertical-align: middle;
    }

    /* ---------- 24小时天气：保持横向滚动 ---------- */
    #content .hours24-data-tb {
        overflow: hidden !important;
        position: relative;
    }

    #content .hours24-list {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    #content .hours24-list > li {
        flex: 0 0 auto !important;
    }
}

@media (max-width: 375px) {
    #content .panel-jurisdiction-list > .layui-col-md4 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}