/* ============================================
   北韵旅游 · 攻略详情页样式（杂志风长文）
   ============================================ */

.article-page {
  background: var(--color-surface-soft);
}

/* ===== 文章 Hero ===== */
.article-hero {
  padding: 56px 0 ;
  background: #fff;
  border-bottom: 1px solid var(--color-line);
}
.article-hero-inner { max-width: 880px; }
.article-hero .breadcrumb {
  margin-bottom: 22px;
  font-size: 13px; color: var(--color-muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.article-hero .breadcrumb a { color: var(--color-muted); }
.article-hero .breadcrumb a:hover { color: var(--color-primary); }
.article-hero .breadcrumb strong { color: var(--color-ink); font-weight: 700; }

.article-meta-top {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 18px;
  font-size: 13px; color: var(--color-muted);
}
.article-cat {
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
}

.article-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.3; color: var(--color-ink);
  font-weight: 800; letter-spacing: -0.005em;
}
.article-lead {
  margin: 0 0 32px;
  font-size: 17px; color: var(--color-muted);
  line-height: 1.85;
}
.article-cover {
  margin: 0 -24px;
  border-radius: var(--radius-large);
  overflow: hidden;
  background: #ddd;
}
.article-cover img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 8; object-fit: cover;
}
.article-cover figcaption {
  padding: 12px 18px;
  font-size: 12.5px; color: var(--color-muted);
  background: var(--color-surface-soft);
  letter-spacing: 0.02em;
}

/* ===== 文章主体 + 侧栏布局 ===== */
.article-body-section { padding: 56px 0 64px; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}

/* ===== 文章正文 ===== */
.article-body {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-ink);
}
.article-body h2 {
  margin: 56px 0 18px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
  font-size: 24px; line-height: 1.35;
  color: var(--color-primary-deep);
  font-weight: 800;
  scroll-margin-top: 100px;
}
.article-body h2:first-of-type { margin-top: 0; }
.article-body h3 {
  margin: 32px 0 12px;
  font-size: 19px; color: var(--color-ink); font-weight: 800;
}
.article-body p {
  margin: 0 0 18px;
}
.article-body b { color: var(--color-ink); font-weight: 800; }
.article-body em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, var(--color-accent-soft) 60%);
  padding: 0 2px; font-weight: 700;
}
.article-body ul, .article-body ol {
  margin: 0 0 22px; padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px; line-height: 1.85;
}
.article-body li::marker { color: var(--color-primary); }
.article-body a {
  color: var(--color-primary);
  border-bottom: 1px dotted rgba(47,110,96,0.4);
}
.article-body a:hover { color: var(--color-primary-deep); border-bottom-style: solid; }

/* 文章里的钩子句和披露句使用 common.css 全站样式 */
.article-body .hook-line,
.article-body .disclose-line {
  margin: 28px 0;
}

/* 月份 / 人群匹配表 */
.picker-table {
  margin: 24px 0 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
}
.picker-row {
  display: grid;
  grid-template-columns: 200px 200px 1fr;
  gap: 16px;
  padding: 14px 22px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-line);
}
.picker-row:last-child { border-bottom: 0; }
.picker-row--head {
  background: var(--color-surface-soft);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--color-primary-deep);
  letter-spacing: 0.04em;
}
.picker-row span:nth-child(2) {
  color: var(--color-accent-warm);
  font-weight: 700;
}
.picker-row span:nth-child(3) {
  color: var(--color-muted);
  font-size: 13.5px;
}

.article-divider {
  margin: 40px 0;
  border: 0;
  border-top: 1px dashed var(--color-line);
}

.article-end-line {
  padding: 22px 24px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-card);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-primary-deep);
}

/* ===== 侧栏 ===== */
.article-side {
  position: sticky;
  top: 100px;
  display: flex; flex-direction: column;
  gap: 18px;
}

.article-toc {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.article-toc h3 {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 900;
  color: var(--color-primary-deep);
  letter-spacing: 0.12em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
.article-toc ul { margin: 0; padding: 0; list-style: none; }
.article-toc a {
  display: block;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.article-toc a:hover {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}
.article-toc a.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-weight: 700;
}

.article-side-card {
  padding: 26px 24px;
  background:
    linear-gradient(135deg, rgba(15,41,38,0.96), rgba(22,67,59,0.92)),
    url("../assets/images/web/large/scenic-cattle-lake.jpg") no-repeat center / cover;
  border-radius: var(--radius-card);
  color: #fff;
}
.side-card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #2a1d05;
  font-size: 11.5px; font-weight: 900;
  letter-spacing: 0.04em;
}
.article-side-card h3 {
  margin: 12px 0 8px;
  font-size: 19px; font-weight: 800;
  line-height: 1.4;
}
.article-side-card p {
  margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.7;
  color: rgba(255,255,255,0.82);
}
.article-side-card .button-hero {
  width: 100%; height: 48px; font-size: 14.5px;
}
.side-card-note {
  margin-top: 14px !important;
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.6) !important;
  text-align: center;
}

/* ===== 相关阅读 ===== */
.related-section {
  padding: 56px 0;
  background: #fff;
  border-top: 1px solid var(--color-line);
}
.related-title {
  margin: 0 0 24px;
  font-size: 22px;
  color: var(--color-ink);
  font-weight: 800;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.related-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.related-card figure {
  margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd;
}
.related-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease;
}
.related-card:hover img { transform: scale(1.05); }
.related-card .guide-card-cat {
  display: inline-block;
  margin: 14px 16px 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em;
}
.related-card h3 {
  margin: 0 16px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== 底部转化（复用同款） ===== */
.detail-conversion {
  padding: 80px 0;
  background:
    linear-gradient(135deg, rgba(15,41,38,0.92), rgba(22,67,59,0.86)),
    url("../assets/images/web/large/moments-sunset-crowd.jpg") no-repeat center / cover;
  color: #fff;
}
.conversion-inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px; align-items: center;
}
.conversion-copy span {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--color-accent); color: #2a1d05;
  font-size: 12px; font-weight: 900; letter-spacing: 0.06em;
}
.conversion-copy h2 {
  margin: 0 0 16px; font-size: clamp(26px,2.6vw,38px);
  line-height: 1.3; font-weight: 700;
}
.conversion-copy p {
  margin: 0 0 24px; color: rgba(255,255,255,0.82);
  font-size: 15px; line-height: 1.75;
}
.conversion-points { margin: 0; padding: 0; list-style: none; }
.conversion-points li {
  position: relative; padding: 8px 0 8px 26px;
  font-size: 14.5px; color: rgba(255,255,255,0.92);
}
.conversion-points li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--color-accent); font-weight: 800;
}
.conversion-form {
  padding: 32px;
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius-large);
  color: var(--color-ink);
  box-shadow: 0 24px 56px rgba(0,0,0,0.22);
}
.conversion-form form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.conversion-form label { display: grid; gap: 6px; }
.conversion-form-phone { grid-column: span 2; }
.conversion-form label span {
  font-size: 12.5px; font-weight: 800;
  color: #465154; letter-spacing: 0.02em;
}
.conversion-form input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: #fbfcf8; color: var(--color-ink); outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.conversion-form input:focus {
  border-color: rgba(47,110,96,0.48); background: #fff;
  box-shadow: 0 0 0 4px rgba(47,110,96,0.08);
}
.conversion-form button {
  grid-column: span 2; width: 100%; height: 50px; border-radius: 999px;
}
.conversion-direct {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px dashed var(--color-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.conversion-direct a strong {
  display: block; color: var(--color-primary-deep);
  font-size: 22px; font-weight: 800; letter-spacing: 0.02em;
}
.conversion-direct a span {
  display: block; margin-top: 2px; color: var(--color-muted); font-size: 12.5px;
}
.conversion-qr { display: flex; align-items: center; gap: 12px; }
.conversion-qr img {
  width: 64px; height: 64px; border-radius: 8px;
  background: #fff; padding: 4px; border: 1px solid var(--color-line);
}
.conversion-qr p { margin: 0; font-size: 12.5px; color: var(--color-muted); line-height: 1.5; }

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; gap: 40px; }
  .article-side { position: static; }
  .related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .conversion-inner { grid-template-columns: 1fr !important; gap: 40px; }
  .picker-row { grid-template-columns: 1fr !important; gap: 4px; }
  .picker-row span:nth-child(1) { font-weight: 800; color: var(--color-ink); }
}

@media (max-width: 720px) {
  .article-hero { padding: 32px 0 0; }
  .article-hero h1 { font-size: 26px; }
  .article-lead { font-size: 15px; }
  .article-cover { margin: 0; border-radius: 12px; }
  .article-body { font-size: 15.5px; line-height: 1.85; }
  .article-body h2 { font-size: 21px; margin: 40px 0 14px; }

  .related-grid { grid-template-columns: 1fr; }
  .conversion-form { padding: 22px; }
  .conversion-form form { grid-template-columns: 1fr; }
  .conversion-form-phone { grid-column: span 1; }
  .conversion-direct { flex-direction: column; align-items: flex-start; }
}