/* ================================================
   hzliuyan.html 合作留言表单页 移动端响应式样式
   - 仅 @media only screen and (max-width: 767px) 生效
   - 全站唯一断点 767px，无平板过渡样式
   - 顶部导航/页脚公共部分见 css/responsive/common-responsive.css
   - 适配要点：Banner 压缩、表单卡片 100% 宽、
     动态 mdiy 表单（element-ui 组件）多列改单列、
     输入/下拉/文本域/按钮 100% 自适应、
     触控目标 ≥44px、字号 16px 防 iOS 聚焦放大、
     图片 max-width:100% 防横向溢出
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 顶部导航汉堡按钮对齐修复 ----------
       公共 header.html 的 DOM 顺序为 logo → nav → 汉堡 → 搜索表单，
       flex space-between 下汉堡不会自动靠右，而是悬在中间偏左；
       首页（index.css）给汉堡设置了 margin-left:auto 使其靠右。
       此处复刻首页写法：margin-left:auto 把汉堡推到最右，
       右侧间距与首页完全一致。 */
    header .nav-toggle,
    .header .nav-toggle {
        margin-left: auto !important;
    }

    /* 强制导航容器 flex 两端对齐（覆盖各内页自身 header 布局差异） */
    header,
    .header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* 清除 Logo 区多余左内边距，保证左右视觉对齐 */
    header .logo-area,
    .header .logo-area {
        padding-left: 0 !important;
    }

    /* ---------- Banner ---------- */
    /* 内联 background-size:100% 需 !important 覆盖 */
    .news-banner {
        height: 180px !important;
        background-size: cover !important;
    }
    .banner-title-box {
        left: 20px !important;
        border-left: 3px solid #fff !important;
        padding-left: 12px !important;
    }
    .banner-title-en {
        font-size: 22px !important;
        line-height: 1.2;
        letter-spacing: 1px;
    }
    .banner-title-cn {
        font-size: 24px !important;
        line-height: 1.2;
    }

    /* ---------- 表单卡片容器 ---------- */
    .paper-form-container {
        max-width: 100%;
        margin: 20px 12px !important;
        padding: 24px 16px 32px !important;
        border-radius: 24px !important;
        box-sizing: border-box;
    }

    #myform,
    #formModel {
        width: 100%;
    }

    /* ---------- 动态表单（mdiy 渲染的 element-ui 表单） ---------- */
    /* 表单项：标签在上、控件在下，单列布局 */
    .paper-form-container .el-form-item {
        margin-bottom: 20px !important;
    }
    .paper-form-container .el-form-item__label {
        display: block !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        text-align: left !important;
        padding: 0 0 6px !important;
        line-height: 1.4;
        font-size: 15px !important;
        letter-spacing: 0.5px;
    }
    .paper-form-container .el-form-item__content {
        display: block !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 多列字段（el-row/el-col）改单列 */
    .paper-form-container .el-row {
        width: 100%;
        margin: 0 !important;
    }
    .paper-form-container .el-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 12px;
    }

    /* 输入类控件：宽度 100%，高度 ≥44px，字号 16px 防 iOS 聚焦放大 */
    .paper-form-container .el-input,
    .paper-form-container .el-select,
    .paper-form-container .el-textarea,
    .paper-form-container .el-input-number,
    .paper-form-container .el-cascader,
    .paper-form-container .el-date-editor,
    .paper-form-container .el-autocomplete {
        width: 100% !important;
        max-width: 100%;
    }
    .paper-form-container .el-select .el-input,
    .paper-form-container .el-input-number .el-input {
        width: 100% !important;
    }
    .paper-form-container .el-input__inner {
        width: 100% !important;
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 16px !important;
        font-size: 16px !important;
        border-radius: 20px !important;
        box-sizing: border-box;
    }
    .paper-form-container .el-input__icon {
        line-height: 44px !important;
    }

    /* 文本域 */
    .paper-form-container .el-textarea__inner {
        width: 100% !important;
        min-height: 100px;
        padding: 12px 16px !important;
        font-size: 16px !important;
        line-height: 1.5;
        border-radius: 20px !important;
        box-sizing: border-box;
    }

    /* 输入框组（验证码 / 前缀后缀等） */
    .paper-form-container .el-input-group {
        width: 100% !important;
    }
    .paper-form-container .el-input-group__prepend,
    .paper-form-container .el-input-group__append {
        padding: 0 10px;
        font-size: 15px;
    }

    /* 单选 / 复选：可换行，触控目标 ≥44px */
    .paper-form-container .el-radio-group,
    .paper-form-container .el-checkbox-group {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 8px;
    }
    .paper-form-container .el-radio,
    .paper-form-container .el-checkbox {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-right: 20px;
        white-space: nowrap;
    }
    .paper-form-container .el-radio__label,
    .paper-form-container .el-checkbox__label {
        font-size: 16px;
    }

    /* 上传组件：宽度 100%，图片防溢出 */
    .paper-form-container .el-upload {
        width: 100%;
        max-width: 100%;
    }
    .paper-form-container .el-upload-dragger {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .paper-form-container .el-upload-list {
        width: 100%;
    }
    .paper-form-container .el-upload-list img {
        max-width: 100%;
        height: auto;
    }

    /* 验证码 / 图片类字段：内容区图片不溢出、可换行 */
    .paper-form-container .el-form-item__content img {
        max-width: 100% !important;
        height: auto;
        vertical-align: middle;
    }

    /* ---------- 提交按钮（整行可点，触控高度 ≥44px） ---------- */
    .paper-form-container .submit-item {
        margin-top: 8px !important;
    }
    .paper-form-container .submit-item .el-form-item__content {
        width: 100% !important;
        margin-left: 0 !important;
        text-align: center;
    }
    .paper-form-container .el-button--primary {
        width: 100% !important;
        min-height: 48px;
        padding: 14px 0 !important;
        font-size: 17px !important;
        letter-spacing: 2px;
        border-radius: 48px !important;
        box-sizing: border-box;
    }
}