/* public/css/style.css
   朗空5号单品官网 - 前台样式
   风格：简洁、现代、留白、黑白灰为主色调
*/
:root{
  --black:#111111;
  --dark:#222222;
  --grey-700:#4A4A4A;
  --grey-500:#8A8A8A;
  --grey-200:#E4E4E4;
  --grey-100:#F4F4F3;
  --white:#FFFFFF;
  --line:#DCDCDC;
  --max:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color:var(--dark);
  background:var(--white);
  line-height:1.7;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* Header / Nav */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  z-index:40;
}
.nav{
  max-width:var(--max); margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{font-size:20px; font-weight:700; letter-spacing:.05em;}
.nav-links{display:flex; gap:26px; font-size:14px; flex-wrap:wrap;}
.nav-links a{color:var(--grey-700); padding:4px 0; border-bottom:2px solid transparent;}
.nav-links a:hover, .nav-links a.active{color:var(--black); border-color:var(--black);}

/* Hero */
.hero{
  padding:80px 0 56px;
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(28px,4vw,44px); margin:0 0 18px; font-weight:700; letter-spacing:-.01em;}
.hero .subtitle{font-size:16px; color:var(--grey-700); margin-bottom:28px;}
.hero-image{
  background:var(--grey-100);
  border:1px solid var(--line);
  aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-image img{width:100%; height:100%; object-fit:cover;}
.placeholder{color:var(--grey-500); font-size:13px; text-align:center; padding:20px;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; font-size:14.5px; font-weight:600;
  border:1px solid var(--black); border-radius:2px; cursor:pointer;
}
.btn-black{background:var(--black); color:var(--white);}
.btn-black:hover{background:var(--dark);}
.btn-outline{background:transparent; color:var(--black);}
.btn-outline:hover{background:var(--grey-100);}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

/* Sections */
.section{padding:64px 0;}
.section + .section{border-top:1px solid var(--line);}
.section-title{font-size:26px; font-weight:700; margin:0 0 8px;}
.section-sub{color:var(--grey-700); font-size:15px; margin:0 0 32px;}

/* Article cards */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:900px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.article-grid{grid-template-columns:1fr;}}
.article-card{
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
}
.article-card .thumb{
  aspect-ratio:16/10; background:var(--grey-100);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.article-card .thumb img{width:100%; height:100%; object-fit:cover;}
.article-card .body{padding:18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.article-card .cat{font-size:12px; color:var(--grey-500); letter-spacing:.03em;}
.article-card h3{font-size:16px; margin:0; font-weight:600; line-height:1.5;}
.article-card p{font-size:13.5px; color:var(--grey-700); margin:0; flex:1;}
.article-card .more{font-size:13px; font-weight:600; margin-top:6px;}

/* Category filter */
.category-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
.category-filter a{
  padding:8px 16px; border:1px solid var(--line); border-radius:20px; font-size:13.5px; color:var(--grey-700);
}
.category-filter a.active{background:var(--black); color:var(--white); border-color:var(--black);}

/* Table */
table.spec-table{width:100%; border-collapse:collapse; font-size:14.5px;}
table.spec-table th, table.spec-table td{
  text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top;
}
table.spec-table th{width:200px; color:var(--grey-700); font-weight:600; background:var(--grey-100);}

/* Article detail */
.article-detail-header{margin-bottom:28px;}
.article-detail-header .cat{font-size:13px; color:var(--grey-500);}
.article-detail-header h1{font-size:28px; margin:10px 0;}
.article-detail-header .meta{font-size:13px; color:var(--grey-500);}
.article-content{font-size:16px; line-height:1.9;}
.article-content h3{font-size:19px; margin:28px 0 12px;}
.article-content table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px;}
.article-content table th, .article-content table td{border:1px solid var(--line); padding:10px 12px;}
.article-content ol, .article-content ul{padding-left:22px;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-item h3{font-size:16.5px; margin:0 0 10px;}
.faq-item .content{font-size:14.5px; color:var(--grey-700);}

/* Compliance notice */
.compliance{
  font-size:13px; color:var(--grey-500); border-left:2px solid var(--grey-500);
  padding-left:12px; margin-top:20px;
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:48px;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.contact-list{list-style:none; padding:0; margin:0; font-size:15px;}
.contact-list li{padding:10px 0; border-bottom:1px solid var(--line); display:flex; gap:16px;}
.contact-list li span.label{width:110px; color:var(--grey-500); flex:none;}
.qr-box{
  width:160px; height:160px; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--grey-500);
  text-align:center;
}

/* Footer */
.site-footer{
  background:var(--black); color:var(--grey-200);
  padding:40px 0 24px;
}
.site-footer .wrap{display:flex; flex-direction:column; gap:14px;}
.site-footer .brand{font-size:16px; font-weight:700; color:var(--white);}
.site-footer .compliance{color:#B5B5B5; border-left-color:#555;}
.site-footer .copyright{font-size:12.5px; color:#777; margin-top:10px;}

/* Empty state */
.empty-state{color:var(--grey-500); font-size:14.5px; padding:40px 0; text-align:center;}