/* ===== 首页 / 列表页 / 内容页（窑变蓝 · 陶灰 · 釉白 · 陶土橙） ===== */

/* Banner轮播 */
.hero { position: relative; height: 100vh; min-height: 540px; overflow: hidden; }
.banner, .banner-slide { position: absolute; inset: 0; }
.banner-slide { opacity: 0; transition: opacity 1.2s ease; }
.banner-slide.on { opacity: 1; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(1.05); }
.banner-fallback { background: radial-gradient(ellipse 90% 70% at 50% 30%, #3A5A8C 0%, #171310 72%); }
.banner-dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 3; }
.banner-dots i { width: 22px; height: 2px; background: rgba(251, 247, 240, .3); transition: background .3s; }
.banner-dots i.on { background: var(--orange); }
.hero-text {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.hero-text h1 { font-size: 40px; letter-spacing: .28em; text-indent: .28em; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
.hero-text p { margin: 18px 0 34px; color: var(--title); opacity: .82; letter-spacing: .2em; font-size: 15px; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }

/* 通用区块 */
.sec { padding: 70px 0; }
.sec-alt { background: rgba(58, 90, 140, .14); border-top: 1px solid rgba(58, 90, 140, .28); border-bottom: 1px solid rgba(58, 90, 140, .28); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.sec-head h2 { font-size: 24px; letter-spacing: .18em; display: flex; align-items: center; gap: 12px; }
.sec-head h2::before { content: ''; width: 4px; height: 22px; background: var(--orange); border-radius: 1px; flex-shrink: 0; }
.sec-sub { margin-top: 6px; font-size: 13px; }
.sec-more { font-size: 13px; color: var(--text); border-bottom: 1px solid var(--orange); padding-bottom: 2px; transition: color .25s; }
.sec-more:hover { color: var(--orange-lt); }
.brand-text { max-width: 720px; font-size: 15px; line-height: 2; }

/* 作品卡片网格 */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.work-card { background: var(--card); border-radius: 6px; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.work-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.card-cover { aspect-ratio: 4 / 3; overflow: hidden; background: #171310; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; filter: saturate(1.03); }
.work-card:hover .card-cover img { transform: scale(1.05); }
.cover-fallback { display: flex; align-items: center; justify-content: center; }
.cover-fallback span { font-size: 44px; color: var(--orange); opacity: .45; font-weight: 300; }
.work-info { padding: 16px 18px 20px; }
.work-info h3 { font-size: 16px; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-info p { margin-top: 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 定制流程 */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step { background: var(--card); border-radius: 6px; padding: 26px 22px; }
.step-no { font-size: 26px; color: var(--orange); opacity: .85; font-weight: 300; }
.step h3 { margin: 10px 0 8px; font-size: 16px; letter-spacing: .12em; }
.step p { font-size: 13px; line-height: 1.8; }

/* 故事卡片 */
.story-list { display: flex; flex-direction: column; gap: 22px; }
.story-card { display: flex; gap: 22px; background: var(--card); border-radius: 6px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.story-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.story-cover { flex: 0 0 240px; aspect-ratio: 16 / 10; }
.story-info { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.story-info h3 { font-size: 17px; }
.story-info p { margin-top: 8px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-link { margin-top: 12px; font-size: 12px; color: var(--orange); letter-spacing: .15em; }
/* 专栏卡片 · 内容摘要（替代原“阅读专栏”链接） */
.story-info p.story-summary { margin-top: 10px; line-height: 1.7; opacity: .75; -webkit-line-clamp: 3; }

/* 私域引流区块 */
.sec-cta { padding-bottom: 90px; }
.cta-box { background: var(--card); border-radius: 8px; padding: 46px 44px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-left h2 { font-size: 24px; letter-spacing: .15em; }
.cta-left p { margin: 12px 0 26px; font-size: 14px; }
.cta-qr-box { text-align: center; flex-shrink: 0; }
.cta-qr-box img { width: 130px; height: 130px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.cta-qr-box span { display: block; margin-top: 10px; font-size: 12px; }

/* 列表页网格 */
.list-grid { padding-top: 6px; }
.list-page { padding-top: 6px; }

/* ===== 专栏分类 Tab ===== */
.cat-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 4px;
}
.cat-tab {
  padding: 8px 26px;
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all .25s ease;
}
.cat-tab:hover { color: var(--title); border-color: var(--orange); }
.cat-tab.on {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--title);
}

/* ===== 专栏卡片上的分类小标签 ===== */
.card-cat-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 2px 10px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--orange);
  border: 1px solid rgba(192, 99, 47, .55);
  border-radius: 3px;
  background: rgba(192, 99, 47, .08);
}

/* 内容页 */
.content-page { max-width: 760px; }
.contact-grid { margin-top: 36px; display: flex; gap: 40px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.contact-info p { margin-bottom: 10px; font-size: 14px; }
.contact-info p span { display: inline-block; width: 3.5em; opacity: .55; }

/* 响应式 */
@media (max-width: 900px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero { height: 88vh; min-height: 480px; }
  .hero-text h1 { font-size: 26px; }
  .hero-text p { font-size: 13px; }
  .sec { padding: 48px 0; }
  .sec-head { margin-bottom: 24px; }
  .sec-head h2 { font-size: 20px; }
  .works-grid { grid-template-columns: 1fr; gap: 18px; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step { padding: 20px 18px; }
  .story-card { flex-direction: column; gap: 0; }
  .story-cover { flex: none; width: 100%; }
  .cta-box { flex-direction: column; text-align: center; padding: 34px 24px; }
  .cta-left h2 { font-size: 20px; }
  .cat-tab { padding: 7px 18px; font-size: 13px; }
}