/* ============================================================
   礼莫愁礼品 · 内页样式（栏目页 / 内容页）
   依赖 style.css（头部/页脚/卡片/网格等基础样式）
   ============================================================ */

/* ---------- 内页 Banner ---------- */
.page-hero{
  background:
    radial-gradient(circle at 85% 20%,rgba(201,168,106,.20),transparent 45%),
    linear-gradient(135deg,#1A1A1A,#3a1416);
  color:#fff;padding:54px 0 46px;
}
.page-hero__title{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.25}
.page-hero__sub{margin-top:12px;color:#e7d9c5;font-size:16px;max-width:680px}

/* ---------- 面包屑 ---------- */
.breadcrumb{margin-top:18px;font-size:14px;color:#cbb89a;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumb a{color:#e7d9c5}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb span{opacity:.6}

/* ---------- 两栏布局（主内容 + 侧边栏） ---------- */
.layout{display:grid;grid-template-columns:1fr 320px;gap:40px;padding-top:48px;padding-bottom:56px;align-items:start}
.layout__main{min-width:0}

.block{margin-bottom:40px}
.block__title{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:18px;padding-left:14px;border-left:4px solid var(--red);line-height:1.3}
.intro{font-size:16px;color:var(--ink-2);margin-bottom:26px;line-height:1.9}

/* ---------- 侧边栏 ---------- */
.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--header-h) + 16px)}
.side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.side-card h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav a{padding:9px 12px;border-radius:8px;color:var(--ink-2);font-size:14.5px;transition:.2s}
.side-nav a:hover{background:var(--bg-alt);color:var(--red)}
.side-nav a.is-cur{background:var(--red);color:#fff;font-weight:600}
.side-list{display:flex;flex-direction:column;gap:10px}
.side-list a{color:var(--ink-2);font-size:14px;line-height:1.5;padding-left:14px;position:relative}
.side-list a::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.side-list a:hover{color:var(--red)}
.side-contact{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border:none}
.side-contact h4{color:#fff;border-color:rgba(255,255,255,.25)}
.side-contact__tel{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;margin-bottom:8px}
.side-contact__tel .ic{font-size:20px}
.side-contact__desc{font-size:13.5px;opacity:.9;margin-bottom:14px;line-height:1.6}

/* ---------- 详情头部 ---------- */
.detail-head{display:grid;grid-template-columns:320px 1fr;gap:30px;margin-bottom:36px;align-items:center}
.detail-head__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.detail-head__info h2{font-size:24px;font-weight:800;margin-bottom:12px;line-height:1.35}
.detail-head__info>p{color:var(--ink-2);margin-bottom:18px}
.detail-meta{display:grid;gap:10px;margin-bottom:20px}
.detail-meta li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-2);padding:10px 14px;background:var(--bg-alt);border-radius:10px}
.detail-meta li span{flex:none;width:74px;color:var(--gold-deep);font-weight:700}

/* ---------- 步骤（内联） ---------- */
.steps--inline{grid-template-columns:repeat(4,1fr)}

/* ---------- 相关/推荐 卡片复用 .product / .case ---------- */

/* ---------- 行动条 ---------- */
.cta-band{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-radius:var(--radius);
  padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:10px}
.cta-band h3{font-size:20px;font-weight:700;margin-bottom:6px}
.cta-band p{font-size:14.5px;opacity:.92;max-width:560px}

/* ---------- 联系页 ---------- */
.contact{padding-top:48px;padding-bottom:56px}
.contact__map{margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.contact__notes{display:flex;flex-wrap:wrap;gap:24px;margin-top:30px;padding-top:24px;border-top:1px dashed var(--line)}
.contact__notes li{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:500}
.contact__notes .ic{color:var(--red);font-size:20px;background:var(--bg-alt);border-radius:50%;padding:4px;box-sizing:content-box}

/* ---------- 新闻列表（栏目页） ---------- */
.news-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.news-tab{border:1px solid var(--line);background:#fff;color:var(--ink-2);padding:8px 18px;border-radius:999px;cursor:pointer;font-size:14.5px;font-weight:600;transition:.2s}
.news-tab:hover{border-color:var(--red);color:var(--red)}
.news-tab.is-active{background:var(--red);color:#fff;border-color:var(--red)}

.news-list{display:flex;flex-direction:column;gap:0}
.news-item{border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:none}
.news-item__link{display:flex;gap:18px;padding:20px 6px;transition:.2s}
.news-item__link:hover{background:var(--bg-alt)}
.news-item__date{flex:none;width:64px;text-align:center;background:var(--bg-alt);border-radius:12px;padding:10px 0}
.news-item__date strong{display:block;font-size:26px;font-weight:800;color:var(--red);line-height:1}
.news-item__date span{font-size:12px;color:var(--gray)}
.news-item__cat{display:inline-block;font-size:12px;font-weight:700;color:var(--red);background:rgba(200,22,29,.08);padding:2px 10px;border-radius:999px;margin-bottom:8px}
.news-item__body h3{font-size:18px;font-weight:700;color:var(--ink);line-height:1.5;margin-bottom:6px}
.news-item__link:hover h3{color:var(--red)}
.news-item__body p{font-size:14px;color:var(--gray);line-height:1.6}

/* ---------- 分页 ---------- */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:34px;align-items:center}
.pagination a,.pagination__cur{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink-2);font-weight:600;font-size:15px;transition:.2s}
.pagination a:hover{border-color:var(--red);color:var(--red)}
.pagination__cur{background:var(--red);color:#fff;border-color:var(--red)}
.pagination__next .ic{margin-left:4px}

/* ---------- 文章（内容页） ---------- */
.article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.article__head{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.article__cat{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--red);padding:3px 12px;border-radius:999px;margin-bottom:12px}
.article__title{font-size:26px;font-weight:800;line-height:1.4;color:var(--ink)}
.article__meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--gray)}
.article__meta span,.article__meta time{display:inline-flex;align-items:center;gap:5px}
.article__meta .ic{color:var(--gold-deep);font-size:15px}
.article__body{font-size:16px;line-height:1.95;color:var(--ink-2)}
.article__body h2{font-size:20px;font-weight:800;color:var(--ink);margin:26px 0 12px}
.article__body p{margin-bottom:14px}
.article__body ul{margin:0 0 16px 22px;list-style:disc}
.article__body li{margin-bottom:8px}
.article__body blockquote{margin:18px 0;padding:16px 20px;border-left:4px solid var(--gold);background:var(--bg-alt);border-radius:0 10px 10px 0;color:var(--ink);font-style:italic}
.article__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.article__tags span{background:var(--bg-alt);color:var(--ink-2);font-size:13px;padding:5px 14px;border-radius:999px}

/* ==================== 响应式 ==================== */
@media (max-width:1024px){
  .layout{grid-template-columns:1fr;gap:30px}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .sidebar .side-card{flex:1 1 240px}
  .detail-head{grid-template-columns:1fr;gap:20px}
  .detail-head__media{max-width:360px}
  .steps--inline{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .page-hero{padding:40px 0 34px}
  .cta-band{flex-direction:column;align-items:flex-start}
  .cta-band .btn{width:100%}
  .article{padding:22px 18px}
  .article__title{font-size:22px}
  .sidebar .side-card{flex:1 1 100%}
}
@media (max-width:480px){
  .news-item__link{flex-direction:column;gap:10px}
  .news-item__date{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
  .news-item__date strong{font-size:20px}
}