/* =========================================================
   GIJA 桔家官网 · 设计系统样式
   依据 UI设计规范-桔家官网.md（Design System）
   Token / 全局组件 / 响应式（>1024 / ≤1024 / ≤768 / ≤640）
   ========================================================= */

:root{
  /* 1.1 色彩 Color */
  --navy:#1A237E;
  --red:#D32F2F;
  --orange:#E64A19;
  --lightblue:#B8BBE0;
  --gray444:#444444;
  --gray666:#666666;
  --gray999:#999999;
  --border:#E8E8E8;
  --green:#7CB342;
  --img-gray:#EDEDED;
  --form-bg:#F8F8F8;
  --white:#FFFFFF;

  /* 平台品牌色 */
  --p-xhs:#FF2442; --p-shipinhao:#FF6600; --p-weixin:#07C160;
  --p-xcx:#2BA245; --p-douyin:#111111; --p-feimo:#7C4DFF;

  /* 1.2 字体 */
  --font:"Sarasa Gothic SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;

  /* 1.3 间距 / 1.4 圆角 (见组件) */
  --page-pad:clamp(20px,18.75vw,270px);
  --sec-pad-y:clamp(40px,5.56vw,80px);
  --sec-gap:clamp(24px,3vw,40px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:#e9e9ec;}
body{
  font-family:var(--font);color:var(--gray444);
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:28px;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;}

html{scroll-behavior:smooth;}

/* 锚点滚动时预留固定导航高度 */
#profile,#timeline,#media,
#custom-cabinetry,#soft-furnishings,#stone,
#apply,#message,#outlets{scroll-margin-top:80px;}

.app{position:relative;width:100%;background:#fff;overflow:visible;min-height:100vh;}

/* ---------- 2.1 顶部导航 Header ---------- */
.header{
  height:72px;background:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 clamp(20px,4.17vw,60px);flex-wrap:wrap;position:sticky;top:0;z-index:50;
}
.logo-area{display:flex;flex-direction:column;gap:2px;cursor:pointer;width:121px;}
.logo-img{width:121px;height:39px;object-fit:contain;background:#f5f5f7;border-radius:4px;}
.logo-tag{font-size:12px;color:var(--gray666);line-height:15px;}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,2.78vw,40px);}
.nav-item{font-size:15px;color:var(--navy);cursor:pointer;transition:color .15s;white-space:nowrap;}
.nav-item:hover{color:var(--red);}
.nav-item.active{color:var(--red);font-weight:700;}
.header-divider{height:1px;background:var(--border);}
@media(max-width:768px){
  .header{height:auto;padding:12px 20px;}
  .nav{gap:12px;justify-content:center;width:100%;}
}

/* ---------- 2.2 页脚 Footer ---------- */
.footer{background:var(--navy);padding:60px var(--page-pad);display:flex;flex-direction:column;gap:40px;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:flex-start;}
.footer-links{display:flex;flex-wrap:wrap;gap:40px;}
.footer-brand .brand-logo{color:#fff;font-size:24px;font-weight:700;}
.footer-brand .brand-desc{color:#fff;opacity:.7;font-size:13px;margin-top:10px;max-width:280px;line-height:22px;}
.link-col .lt{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;}
.link-col .ll{display:block;color:#fff;opacity:.7;font-size:13px;line-height:26px;cursor:pointer;}
.link-col .ll:hover{text-decoration:underline;}
.footer-divider{height:1px;background:rgba(255,255,255,.2);}
.footer-bottom{color:#fff;opacity:.6;font-size:12px;line-height:20px;}

/* ---------- 2.3 区块标题 Section Title ---------- */
.section{background:#fff;padding:var(--sec-pad-y) var(--page-pad);display:flex;flex-direction:column;gap:var(--sec-gap);}
.sec-title{display:flex;flex-direction:column;gap:8px;}
.sec-cn{font-size:clamp(24px,3.4vw,32px);font-weight:700;color:var(--navy);}
.sec-en{font-size:14px;color:var(--gray999);}
.sec-en.navy{color:var(--navy);}
.sec-desc{font-size:15px;color:var(--gray666);line-height:28px;max-width:880px;}

/* ---------- 2.4 按钮 Button ---------- */
.submit-btn{background:var(--red);color:#fff;font-size:16px;font-weight:700;height:52px;border-radius:6px;padding:0 32px;transition:opacity .15s;}
.submit-btn:hover{opacity:.92;}
.submit-btn:disabled{opacity:.6;cursor:not-allowed;}
.join-cta{background:var(--orange);color:#fff;font-size:16px;font-weight:700;height:51px;border-radius:6px;padding:0 32px;transition:opacity .15s;}
.join-cta:hover{opacity:.9;}
.search-btn{background:var(--navy);color:#fff;font-size:14px;font-weight:700;height:40px;border-radius:6px;padding:0 24px;}
.map-btn{background:#fff;color:var(--navy);font-size:14px;height:36px;border-radius:18px;border:1px solid var(--navy);padding:0 18px;}

/* ---------- 2.5 Tab ---------- */
.cab-tabs,.stone-tabs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tab{height:44px;display:flex;align-items:center;padding:0 28px;border-radius:22px;font-size:15px;cursor:pointer;white-space:nowrap;transition:all .15s;}
.cab-tabs .tab.active{background:var(--navy);color:#fff;font-weight:700;}
.cab-tabs .tab:not(.active){background:#fff;color:var(--gray444);border:1px solid var(--border);}
.stone-tabs .tab{color:#fff;font-weight:400;}
.stone-tabs .tab.active{font-weight:700;}

/* ---------- 2.6 卡片 ---------- */
.card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;}
/* 图片容器：真实图与占位统一撑满父级固定高度 */
.ph-img{width:100%;height:100%;object-fit:cover;display:block;}
.img-ph{width:100%;height:100%;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--img-gray);color:var(--gray999);}
.img-ph svg{width:40px;height:40px;opacity:.5;}

/* ---------- 2.7 表单 Form ---------- */
.form-card{background:var(--form-bg);border-radius:8px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:24px;}
.form-row{display:flex;gap:24px;flex-wrap:wrap;}
.form-field{flex:1 1 240px;display:flex;flex-direction:column;gap:8px;}
.form-field label{font-size:14px;color:var(--gray444);}
.form-field .req{color:var(--red);margin-left:2px;}
.form-field input,.form-field textarea,.dd{
  width:100%;border:1px solid var(--border);border-radius:6px;padding:0 16px;font-size:14px;
  color:var(--gray444);background:#fff;height:48px;font-family:inherit;transition:border-color .15s;
}
.form-field textarea{height:140px;resize:none;padding:12px 16px;line-height:24px;}
.form-field input:focus,.form-field textarea:focus,.dd:focus{outline:none;border-color:var(--navy);}
.form-field input.err,.form-field textarea.err{border-color:var(--red);}
.field-err{color:var(--red);font-size:12px;min-height:14px;}
.form-msg{font-size:14px;padding:10px 14px;border-radius:6px;margin-bottom:16px;}
.form-msg.ok{background:#E8F5E9;color:#2E7D32;}
.form-msg.bad{background:#FFEBEE;color:var(--red);}

/* ---------- 2.8 分页 Pagination ---------- */
.pagination{display:flex;justify-content:center;flex-wrap:nowrap;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px;}
.pg{height:36px;min-width:36px;padding:0 12px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--gray666);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.pg.active{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700;}
.pg:hover:not(.active){border-color:var(--navy);color:var(--navy);}
.pg.disabled{opacity:.4;cursor:not-allowed;}

/* ---------- 2.9 筛选条 Filter Bar ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.filter-bar .search-btn{margin-left:20px;}
.dd{width:auto;height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--gray666);padding:0 12px;}
.dd.w180{width:180px;}.dd.w140{width:140px;}
.dd .arrow{width:14px;height:14px;stroke:var(--navy);}
@media(max-width:768px){.dd,.search-btn{width:100%;}.filter-bar .search-btn{margin-left:0;}}

/* ---------- 2.10 地图占位 Map ---------- */
.map-box{background:#EAEAEA;border-radius:8px;min-height:360px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--gray666);}
.map-box .map-text{font-size:15px;}
.map-box .map-ic{width:48px;height:48px;opacity:.5;}

/* ---------- 2.11 图标 Icon (内联SVG) ---------- */
.ic{width:24px;height:24px;stroke-width:2;fill:none;}

/* 通用网格 */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr;}}

.hidden{display:none!important;}
.center{text-align:center;}

/* =========================================================
   移动端适配（≤768 / ≤640）
   注：各页面特有规则在 pages.css 末尾补充
   ========================================================= */

/* 小屏收紧页面左右留白，让内容区更宽、更易读 */
@media(max-width:640px){
  :root{
    --page-pad:20px;
    --sec-pad-y:40px;
  }
  /* 页脚纵向堆叠 */
  .footer{padding:40px 20px;gap:28px;}
  .footer-top{flex-direction:column;gap:12px;}
  .link-col{flex:1 1 100%;}
}

/* 表单提交按钮在手机端占满宽度 */
@media(max-width:768px){
  .submit-btn{width:100%;}
}

/* 资讯列表数据来源标识（验证 CMS 对接） */
.src-tip{display:inline-block;font-size:12px;color:#888;padding:2px 10px;border:1px solid #e3e3e3;border-radius:10px;margin-bottom:16px;}
.src-tip.cms{color:var(--navy);border-color:#c5cae9;background:#f4f5fc;}