/* ===== React 迁移补充样式（原站依赖 layui 表单 / jQuery 内联事件的替代） ===== */

/* ---- 服务条目：原站用 onmouseover 改 paddingLeft，这里改成 CSS 悬停 ---- */
.service-list > div {
    transition: padding-left 0.3s ease, background-color 0.3s ease;
}
.service-list > div:hover {
    padding-left: 0.2rem;
}

/* ---- 联系表单：替代 layui-form / layui-input / layui-textarea ----
   按原站实测值复刻（layui 风格）：控件无四边框、只有 1px 下边线、直角、14px、高 38px；
   条目间距固定 15px，末项保证金间隔 0.4rem；按钮整行宽。别改回圆角描边输入框——
   原站是"下划线填空"的语言，加了四边框会与整站线条风格打架。 */
.contact-form {
    display: block;
}

.contact-field {
    display: block;
    margin-bottom: 15px;
}

.contact-field:last-child {
    margin-bottom: 0;
}

.contact-input {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 0 0 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    line-height: 38px;
    appearance: none;
    transition: border-color 0.3s ease;
}

/* 下拉框原站走 layui 的富渲染，是四边描边的小方框（唯一一个带边框的控件），照原样保留 */
select.contact-input {
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 0 30px 0 10px;
    background-color: #fff;
    line-height: normal;
}

.contact-input::placeholder {
    color: var(--gray);
}

.contact-input:focus {
    outline: none;
    border-color: var(--accent);
}

.contact-textarea {
    height: 100px;
    min-height: 100px;
    padding: 6px 10px;
    line-height: 1.6;
    resize: vertical;
}

.contact-actions {
    margin-top: 0.4rem;
}

.contact-actions .btn-luxury {
    width: 100%;
    /* 原站按钮由 layui 给的是 line-height:normal，这里显式压回，否则会比原站高 2px */
    line-height: normal;
}

.contact-note {
    margin-top: 12px;
    font-size: 0.13rem;
    color: var(--gray);
}

@media screen and (max-width: 768px) {
    .service-list > div:hover {
        padding-left: 0;
    }

    /* 移动端表单控件不得小于 16px，否则 iOS 聚焦会自动放大页面。
       只放大字号与行高，下划线式版式（无四边框 / 直角 / 下边线）保持不变。 */
    .contact-input {
        height: 44px;
        font-size: 16px;
        line-height: 44px;
    }

    select.contact-input {
        line-height: normal;
    }

    .contact-textarea {
        height: 120px;
        min-height: 120px;
        line-height: 1.6;
    }

    .contact-note {
        font-size: 13px;
    }

    /* 联系页左右两栏在窄屏堆叠：原站 390 下两栏各占一半，表单被压到 ~150px，
       "提交申请"竖排折行。右栏改成上边线，与左栏形成分隔。 */
    .il-0ba205 {
        flex-direction: column;
        gap: 0.5rem;
    }

    .il-1e4406 {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--line);
        padding-top: 0.4rem;
    }
}

/* ---- 联系页左右两栏（由内联 flex 转换而来）：flex 子项默认 min-width:auto，
        表单控件与长邮箱会把它撑出容器，必须显式允许收缩 ---- */
.il-49cdf8,
.il-1e4406 {
    min-width: 0;
}

/* 关注我们：三个社交标签在窄栏里换行，避免把栏目撑出容器 */
.il-748129 {
    flex-wrap: wrap;
}

.il-5dd6ac {
    white-space: nowrap;
}

/* 后台把「联系方式」模块拖到表单前面时，右栏的分隔线要跟着换到另一侧；
   窄屏两栏改成堆叠，分隔线改为挂在第二块（表单）的顶部。 */
.il-0ba205.is-flipped .il-1e4406 {
    border-left: 0;
    padding-left: 0;
    border-right: 1px solid var(--line);
    padding-right: 1rem;
}

/* 后台隐藏了其中一块后只剩单栏，分隔线不能悬在那里 */
.il-0ba205.is-solo .il-1e4406 {
    border-left: 0;
    padding-left: 0;
    border-right: 0;
    padding-right: 0;
}

@media screen and (max-width: 768px) {
    .il-0ba205.is-flipped .il-1e4406 {
        border-right: 0;
        padding-right: 0;
        border-top: 0;
        padding-top: 0;
    }

    .il-0ba205.is-flipped .il-49cdf8 {
        border-top: 1px solid var(--line);
        padding-top: 0.4rem;
    }
}

/* ===== 新闻模块（后台内容驱动的列表 / 详情） ===== */

/* 加载中 / 空态 / 错误态 */
.site-state {
    padding: 0.6rem 0;
    text-align: center;
    color: var(--gray);
    font-size: 0.16rem;
    line-height: 1.9;
}

/* 无封面的资讯卡占位（保持卡片高度一致） */
.news-card-blank {
    aspect-ratio: 3 / 2;
    background: var(--bg-alt);
}

/* 详情页面包屑 */
.news-crumb {
    margin-bottom: 0.4rem;
    font-size: 0.13rem;
    letter-spacing: 0.02em;
    color: var(--gray);
}

.news-crumb a:hover {
    color: var(--accent);
}

.news-crumb span {
    color: var(--text);
}

.news-detail {
    max-width: 11rem;
    margin: 0 auto;
}

.news-detail-title {
    font-family: var(--font-title);
    font-size: 0.34rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
    margin-bottom: 0.2rem;
}

.news-detail-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.18rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.13rem;
    color: var(--gray);
}

.news-detail-cover {
    width: 100%;
    margin: 0.4rem 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* 正文排版：后台富文本输出，标签不可控，这里统一兜住 */
.news-body {
    font-size: 0.16rem;
    line-height: 2;
    color: var(--gray);
}

.news-body > * + * {
    margin-top: 0.2rem;
}

.news-body h2,
.news-body h3,
.news-body h4 {
    font-family: var(--font-title);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
}

.news-body h2 { font-size: 0.26rem; }
.news-body h3 { font-size: 0.22rem; }
.news-body h4 { font-size: 0.18rem; }

.news-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.03rem;
}

.news-body img {
    width: 100%;
    height: auto;
    margin: 0.24rem 0;
}

.news-body blockquote {
    padding: 0.18rem 0.24rem;
    border-left: 2px solid var(--accent);
    background: var(--bg-alt);
    color: var(--text);
    font-family: var(--font-title);
}

.news-body ul,
.news-body ol {
    padding-left: 0.26rem;
}

.news-body ul li { list-style: disc; }
.news-body ol li { list-style: decimal; }

.news-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.14rem;
}

.news-body th,
.news-body td {
    border: 1px solid var(--line);
    padding: 0.1rem 0.12rem;
    text-align: left;
}

.news-body details {
    border: 1px solid var(--line);
    border-radius: var(--radius-img-sm);
    padding: 0.14rem 0.18rem;
}

.news-body summary {
    cursor: pointer;
    color: var(--text);
}

.news-detail-foot {
    margin-top: 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line);
}

@media screen and (max-width: 768px) {
    .site-state {
        padding: 40px 0;
        font-size: 14px;
    }

    .news-crumb {
        margin-bottom: 24px;
        font-size: 12px;
        line-height: 1.8;
    }

    .news-detail-title {
        font-size: 21px;
        margin-bottom: 14px;
    }

    .news-detail-meta {
        gap: 10px;
        padding-bottom: 16px;
        font-size: 12px;
    }

    .news-body {
        font-size: 15px;
        line-height: 1.95;
    }

    .news-body h2 { font-size: 19px; }
    .news-body h3 { font-size: 17px; }
    .news-body h4 { font-size: 16px; }

    .news-body table {
        font-size: 13px;
        display: block;
        overflow-x: auto;
    }

    .news-detail-foot {
        margin-top: 32px;
        padding-top: 24px;
    }
}

/* ---- 长英文串（邮箱、网址、系列名）不得撑破栏宽 ---- */
.site-root {
    overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════
   品牌介绍页（/about）· 极简版式
   2026-11-10 重排：砍掉「4 排双语 + 大段介绍」，只留 2–4 字标题与 8 字广告语；
   右栏留给「1874 / NORDMANN」大字静态展示，图片改成 1 大 + 6 小，
   大图占 3×2 格、右侧 2 小、底排 4 小 —— 整块刚好填满，不再一张横图独大。
   ══════════════════════════════════════════════════════════════ */

/* ---- ① 引言：左文案 / 右年份 · 姓氏 ---- */
.ab-lead {
    padding: 1.3rem 0 1rem;
}

.ab-lead-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem;
}

/* inline-flex 收缩包裹：盒子宽度 = 标题宽度，分隔线再 stretch 到同宽 */
.ab-lead-copy {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    /* 不能让它被挤压，否则分隔线会短于标题 */
    flex: 0 0 auto;
}

.ab-eyebrow {
    font-size: 0.13rem;
    letter-spacing: 0.18rem;
    color: var(--gray);
    text-transform: uppercase;
}

.ab-heading {
    margin-top: 0.18rem;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.04rem;
}

.ab-slogan {
    margin-top: 0.18rem;
    font-size: 0.22rem;
    letter-spacing: 0.08rem;
    color: var(--gray);
}

/* 分隔线：2px，长度跟随标题（与首页 .section-title .line 同一套逻辑） */
.ab-rule {
    display: block;
    height: 2px;
    margin-top: 0.34rem;
    background: var(--accent);
}

/* 静态展示：每个只有「大字 + 一行说明」两排 */
.ab-marks {
    display: flex;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
}

.ab-mark {
    text-align: right;
}

.ab-mark-value {
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01rem;
    font-variant-numeric: tabular-nums;
}

.ab-mark-label {
    margin: 0.16rem 0 0;
    font-size: 0.13rem;
    letter-spacing: 0.06rem;
    color: var(--gray);
}

/* ---- ② 图片组：1 大 + 6 小 ---- */
.ab-gallery-section {
    padding-bottom: 0.2rem;
}

.ab-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 2.77rem × 2 行 + gap = 5.7rem，正好是 3 列宽（11.4rem）的 2:1 —— 大图按原比例整幅呈现，
       不做横切，创始人肖像不会被裁掉半张脸 */
    grid-auto-rows: 2.77rem;
    grid-auto-flow: dense;
    gap: 0.16rem;
}

.ab-shot {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-img);
    background: var(--bg-alt);
}

/* 容器裁切，图片本身不再叠一层圆角 */
.ab-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.6s ease;
}

.ab-shot:hover img {
    transform: scale(1.03);
}

/* 大图占前三列 × 前两行（1140×496 @1920），右侧两小竖排在第四列 */
.ab-shot--main {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.ab-shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.14rem 0.16rem;
    font-size: 0.13rem;
    letter-spacing: 0.08rem;
    color: #ffffff;
    background: linear-gradient(to top, rgba(6, 6, 6, 0.62) 0%, rgba(6, 6, 6, 0) 100%);
}

/* ---- ③ 收尾：8 字信念 + 胶囊按钮 + 折叠长文 ---- */
.ab-coda {
    padding: 1.1rem 0 1.4rem;
    text-align: center;
}

.ab-coda-text {
    font-size: 0.34rem;
    letter-spacing: 0.2rem;
    /* 字距会在末字右侧留白，右移半格补回视觉居中 */
    text-indent: 0.2rem;
}

.ab-coda .btn-luxury {
    margin-top: 0.42rem;
}

/* 长文收进折叠：默认只有一行小字，页面保持极简 */
.ab-story {
    max-width: 9rem;
    margin: 0.7rem auto 0;
    text-align: left;
}

.ab-story summary {
    text-align: center;
    font-size: 0.13rem;
    letter-spacing: 0.08rem;
    color: var(--gray);
    cursor: pointer;
    list-style: none;
}

.ab-story summary::-webkit-details-marker {
    display: none;
}

.ab-story summary:hover {
    color: var(--text);
}

.ab-story p {
    margin-top: 0.22rem;
    font-size: 0.14rem;
    line-height: 2.1;
    color: var(--gray);
}

/* ---- 窄屏（750 稿）：引言改单列，图组满宽大图 + 两列小图 ---- */
@media screen and (max-width: 768px) {
    .ab-lead {
        padding: 0.6rem 0 0.5rem;
    }

    .ab-lead-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .ab-eyebrow {
        font-size: 11px;
        letter-spacing: 0.14rem;
    }

    .ab-heading {
        margin-top: 12px;
        font-size: 34px;
        letter-spacing: 0.02rem;
    }

    .ab-slogan {
        margin-top: 10px;
        font-size: 14px;
        letter-spacing: 0.06rem;
    }

    .ab-rule {
        margin-top: 18px;
    }

    /* 窄屏两列等分：1874 与 NORDMANN 各占一半，说明文字允许折行，不再挤成一坨 */
    .ab-marks {
        width: 100%;
        gap: 16px;
    }

    .ab-mark {
        flex: 1 1 0;
        min-width: 0;
        text-align: left;
    }

    .ab-mark-value {
        /* 半屏宽放得下 8 个字符的 NORDMANN，不再折成 NORDMAN / N */
        font-size: 21px;
        letter-spacing: 0.06rem;
    }

    .ab-mark-label {
        margin-top: 8px;
        font-size: 11px;
        letter-spacing: 0.04rem;
    }

    .ab-gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ab-shot {
        flex: 1 1 calc(50% - 4px);
        aspect-ratio: 4 / 3;
    }

    .ab-shot--main {
        flex-basis: 100%;
        aspect-ratio: 3 / 2;
    }

    .ab-shot figcaption {
        padding: 8px 10px;
        font-size: 11px;
        letter-spacing: 0.06rem;
    }

    .ab-coda {
        padding: 0.6rem 0 0.8rem;
    }

    .ab-coda-text {
        font-size: 22px;
        letter-spacing: 0.16rem;
        text-indent: 0.16rem;
    }

    .ab-coda .btn-luxury {
        margin-top: 28px;
    }

    .ab-story {
        margin-top: 32px;
    }

    .ab-story summary {
        font-size: 12px;
    }

    .ab-story p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.95;
    }
}

/* ══════════════════════════════════════════════════════════════
   品牌历史（/history）· 大事记标题的分隔线与竖线
   分隔线换成与首页同款的 2px 实线、长度跟随标题；
   大事记左侧竖线 2px → 4px（加粗一倍），高度随条目自然长于年份标题。
   ══════════════════════════════════════════════════════════════ */
.ab-tl-headwrap {
    text-align: center;
    margin-bottom: 0.6rem;
}

.ab-tl-head {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0.6rem;
}

.ab-tl-head .il-0681b6 {
    margin-bottom: 0.14rem;
}

.ab-tl-line {
    display: block;
    height: 2px;
    background: var(--accent);
}

.il-ebf9bc {
    border-left-width: 4px;
}

@media screen and (max-width: 768px) {
    .ab-tl-headwrap {
        margin-bottom: 30px;
    }

    .il-ebf9bc {
        border-left-width: 3px;
        padding-left: 16px;
    }
}

/* 大事记年份再放大一档（0.3rem → 0.42rem），与加粗后的竖线成比例 */
.il-c62e49 {
    font-size: 0.42rem;
}

@media screen and (max-width: 768px) {
    .il-c62e49 {
        font-size: 26px;
    }
}

/* ══════════════════════════════════════════════════════════════
   品牌形象（/brand-image）
   2026-11-10：文案从 4 排压到「4 字标题 + 8 字广告语 + 一句注脚」；
   图库从 2 张竖图改成 3 列 2 行（6 张），竖图不再一张占满一屏。
   ══════════════════════════════════════════════════════════════ */
.brand-image-gallery.il-278144 {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem 0.24rem;
}

.brand-image-gallery .gallery-item img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .brand-image-gallery.il-278144 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   富文本正文（后台正文改用内容编辑器后的输出）
   Tailwind preflight 把 ul/ol 的 list-style、margin、padding 全清零，
   这里只在 .rt-body 范围内恢复；段落仍然吃各页面原有的 `.xxx p` 规则，
   不重复定义字号行距，避免和原样式打架。
   ══════════════════════════════════════════════════════════════ */
.rt-body > p + p {
    margin-top: 0.12rem;
}

.rt-body ul,
.rt-body ol {
    margin: 0.08rem 0 0.14rem;
    padding-left: 0.3rem;
}

/* site.css 里有 `ul, li { list-style: none }` —— 直接写在 li 上，
   光给 ul 设 list-style 会被 li 上的显式值压掉（继承打不过直接声明），必须在 li 上再声明一次 */
.rt-body ul,
.rt-body ul > li {
    list-style: disc;
}

.rt-body ol,
.rt-body ol > li {
    list-style: decimal;
}

.rt-body li {
    line-height: inherit;
    margin-bottom: 0.06rem;
}

.rt-body li::marker {
    color: var(--gray);
}

.rt-body strong,
.rt-body b {
    font-weight: 600;
    color: var(--text);
}

.rt-body em,
.rt-body i {
    font-style: italic;
}

.rt-body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.04rem;
}

.rt-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.12rem 0;
    border-radius: var(--radius-img);
}

.rt-body h2,
.rt-body h3,
.rt-body h4 {
    margin: 0.16rem 0 0.08rem;
    font-size: 1.08em;
    font-weight: 600;
    color: var(--text);
}

.rt-body blockquote {
    margin: 0.14rem 0;
    padding-left: 0.18rem;
    border-left: 2px solid var(--line);
    color: var(--gray);
}

@media screen and (max-width: 768px) {
    .rt-body ul,
    .rt-body ol {
        padding-left: 22px;
    }
}