/* ============================================================
   首页改版样式 home-v3.css（迁移自 index1.html）
   - 最后加载以覆盖旧主题样式
   - 图片已全部本地化到 homeimg/
   ============================================================ */
:root{--orange:#ed4b24;--paper:#f0ede8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:#393633;font-family:"Noto Serif SC","Songti SC",Georgia,serif;line-height:1.7}
img{display:block;width:100%;object-fit:cover}

/* ============================================================
   反制旧主题对 section id 的定位 / 裁剪 / 内边距规则
   （ccs_app.min.css: #section--introduction{position:fixed}
     ccs_tweaks.css: #section--introduction{height:400px!important}
     #section--luxurious-products{padding:75px 0;background:#dfd8d2}
     #section--making-history{padding:150px 0 / 75px 0}）
   ============================================================ */
#section--introduction.hero{height:auto !important;position:relative !important}
#section--luxurious-products.products{padding:54px 40px 70px;background:var(--paper)}
#section--making-history.about{padding:66px 24px 75px}
/* 右侧章节圆点导航与章节标记：与现行版式一致，保持隐藏（保留结构便于以后启用） */
#section-navigation{display:none !important}
#chapters{display:none !important}

/* ---------- 01 Banner ---------- */
/* dvh 渐进增强：避免 iOS/Android 地址栏伸缩导致 100vh 跳动；旧浏览器自动忽略 dvh 行 */
.hero{position:relative;min-height:100vh;min-height:100dvh;padding-top:50vh;padding-top:50dvh}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:100vh;height:100dvh;background:url('../homeimg/textilefactory.jpg') center/cover no-repeat;z-index:0}
.hero>*{position:relative;z-index:1}
/* 不用 backdrop-filter：滚动时需逐帧重采样模糊背景，低端设备掉帧明显；改用高不透明度底色近似观感 */
.hero-card{width:min(70%,1180px);margin:0 auto;padding:64px 34px 30px;background:rgba(255,255,255,.92)}
/* 标题分左右两栏：左=中文标题(title)，右=日文标题(jp_title)，与下方内容两栏对齐
   单行显示：字号随视口收缩（clamp），并禁止换行；超长标题由 home-v3.js 的 fitTitles() 继续缩字，
   保证中文/日文标题各自只占一行（min-width:0 防止 nowrap 撑开 1fr 栅格） */
.title-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:0 0 12px}
.title-columns .eyebrow{margin:0;min-width:0;white-space:nowrap}
.eyebrow{margin:0;color:#fa6748;font-size:clamp(16px,1.7vw,24px);line-height:1.3}
/* 公司名称(zhaiyao/h1)：字号加大，随视口用 clamp 微调；
   仍限 50% 宽保持与下方左栏对齐，超出时由 home-v3.js 的 fitTitles() 自动缩字 */
.hero-card h1{margin:10px 0 22px;width:50%;font:400 20px/1.4 "Noto Serif SC","Songti SC",Georgia,serif;color:#171717;}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:26px;font-size:14px;line-height:1.65;min-width:0}
.columns>div{min-width:0;overflow-wrap:break-word}
.columns p{margin:0 0 15px}
.more-row{margin:6px 0 12px}
.more-link{color:#444;font-size:13px;text-decoration:none}
.more-link:hover{color:var(--orange)}

/* 面板内图片切换（Swiper 自带箭头按钮，悬浮在图片两侧）
   固定为正方形：后台图片不必先裁剪，object-fit:cover 会居中裁切成 1:1 */
.banner-swiper{--swiper-navigation-color:#d85839;--swiper-navigation-size:38px;aspect-ratio:1/1}
/* 旧浏览器（iOS<15 等）不支持 aspect-ratio 时退化为图片自然高度，避免轮播塌陷 */
@supports not (aspect-ratio:1/1){.banner-swiper{height:auto}.slider img{height:auto}}
.slider{width:65%;margin:0 auto}
.slider .swiper{width:100%;margin:0}
.slider img{height:100%;min-width:0}

/* 面板内视频模块（video.js）：与上方图片切换同宽同高，视频画面裁切填满；
   上间隔 20px、下间隔由卡片 padding-bottom(30px) 构成，形成 12→20→30 的渐宽节奏 */
.video-module{width:80%;margin:20px auto 0}
.video-module .video-js{width:100%;height:246px}
/* 反制旧主题 ccs_app.min.css 的全屏视频居中规则
   （#video,.video-js .vjs-tech{top:58%;left:50%;transform:translateX(-50%) translateY(-50%)}），
   该 transform 会导致播放时画面向左上偏移半个宽高 */
.video-module .video-js video{position:absolute;top:0;left:0;width:100%;height:100%;min-width:100%;min-height:100%;transform:none;-webkit-transform:none;object-fit:cover}

/* ---------- 03 产品系列 ---------- */
/* 桌面 4 列：满宽（视口≥1440）时列宽约 323px、图高 380px。
   380px 固定高度仅作不支持 aspect-ratio 的旧浏览器兜底；
   现代浏览器按列宽等比缩放（见文件末尾 @supports），视口收窄时四列同步变小、比例不变 */
.products{max-width:1440px;margin:auto;padding:54px 40px 70px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.product{overflow:hidden;cursor:pointer}
.product img{height:380px;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.product h3{text-align:center;font-weight:400;margin:12px 0 0;font-size:18px;transition:color .3s ease}
.product a{display:block;color:inherit;text-decoration:none}
/* 悬停反馈（提示可点击）：图片轻微放大 + 标题变橙；键盘聚焦同样生效。
   用 hover:hover 包裹，避免触屏设备点按后 hover 状态残留 */
@media(hover:hover){
    .product:hover img{transform:scale(1.05)}
    .product:hover h3{color:var(--orange)}
}
.product a:focus-visible img{transform:scale(1.05)}
.product a:focus-visible h3,.product a:focus-visible{color:var(--orange)}
/* outline 内缩：.product 的 overflow:hidden 会裁掉外侧描边 */
.product a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.product a:active img{transform:scale(1.02)}

/* ---------- 04 About Us ---------- */
.about{background:#817c75;color:#FFF;padding:66px 24px 75px}
.about-inner{max-width:1140px;margin:auto}
.about h2,.contact h2{font:800 22px Impact,"Arial Narrow",sans-serif;color:#fff;line-height: 40px;}
.about-copy{display:grid;grid-template-columns:1.15fr .85fr;gap:58px;font-size:14px}
.about-copy>div{min-width:0;overflow-wrap:break-word}
.about-gallery{display:grid;margin-top:28px}
.about-gallery img{height:360px}

/* ---------- 05 Contact Us ---------- */
.contact{max-width:1240px;margin:auto;padding:64px 24px 45px;display:grid;grid-template-columns:1fr 1fr;gap:130px;font-size:13px}
.contact>div{min-width:0}
.contact h2{color:#4a4947;border-bottom:1px solid #777;padding-bottom:12px}
/* 不用 pre-line：后台富文本每个 <p> 尾部都带换行符，pre-line 会把尾部换行渲染成空行，导致每行文字双倍高、区块松散 */
.contact p{margin:0 0 6px}
.contact a{overflow-wrap:break-word}
.copyright{grid-column:1/-1;margin-top:35px;padding-top:16px;border-top:1px solid #d8d4cd;font-size:12px;color:#8a8681;text-align:center}
.copyright a{color:inherit;text-decoration:none;margin-right:12px}

/* ---------- 响应式 ---------- */
/* 中屏（平板竖屏～窄桌面）：联系区左右栏间距收窄，避免两栏被挤压 */
@media(max-width:1100px){
    .contact{gap:50px}
}
@media(max-width:900px){
    .hero-card{width:calc(100% - 32px);padding:50px 24px 26px}
    .columns,.title-columns,.about-copy,.contact{grid-template-columns:1fr}
    .contact{gap:25px}
    .about-gallery img{height:260px}
}
@media(max-width:560px){
    .hero-card{width:calc(100% - 24px);padding:42px 18px 22px}
    .columns,.title-columns{grid-template-columns:1fr}
    .slider{width:100%}
    .banner-swiper{--swiper-navigation-size:28px}
    .video-module{width:100%}
    .video-module .video-js{height:220px}
    .about-gallery{grid-template-columns:1fr}
    .contact{padding:45px 20px}
}

/* 产品系列 4 列 → 2 列 → 1 列：
   ≤1024 时四列列宽已不足 220px，放不下改为两列大图；
   ≤640（手机）改单列。各档固定高度仅作旧浏览器兜底，
   支持 aspect-ratio 的浏览器按列宽等比缩放，任何宽度下卡片比例一致 */
@media(max-width:1024px){
    .products{grid-template-columns:1fr 1fr}
    .product img{height:400px}
}
/* 双选择器抬升优先级：需盖过上方 #section--luxurious-products.products 的 padding（旧主题对同一 id 也有小屏 padding 规则） */
@media(max-width:640px){
    .products,#section--luxurious-products.products{grid-template-columns:1fr;padding:45px 18px}
    .product img{height:340px}
}
@supports (aspect-ratio:1/1){
    .product img{height:auto;aspect-ratio:6/7}               /* 4 列：满宽时约 323×377，与原 380px 观感一致 */
    @media(max-width:1024px){.product img{aspect-ratio:5/6}} /* 2 列：卡片放大为 5:6 竖版 */
    @media(max-width:640px){.product img{aspect-ratio:1/1}}  /* 1 列：近方形大图 */
}