/* =============================================================================
 * Beijing Visits —— pSEO 单体景点页 (/attractions/...)
 * Layer 1 原子化深度页: Hero + Quick Facts + 预约攻略 + 交通 + 亮点 + 历史
 *                        + 推荐动线 + 避坑 + 周边内链 + FAQ + 反向对比内链
 * 视觉沿用主题暗色品牌色: --bv-deep #0b2329 / --bv-bg #091d22 / 主色 --bv-yellow
 * ========================================================================== */

.bv-attr { padding: 56px 0 80px; }

/* 保留作者设定大小写 (Acronyms / Forbidden City 等) */
.bv-attr h1, .bv-attr h2, .bv-attr h3, .bv-attr h4 { text-transform: none; }

.bv-attr-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Hero --------------------------------------------------------------- */
.bv-attr-hero { margin-bottom: 28px; }
.bv-attr-hero--index { text-align: center; margin-bottom: 40px; }

.bv-attr-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.bv-attr-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bv-deep);
  background: var(--bv-yellow);
  padding: 5px 12px;
  border-radius: 999px;
}
.bv-attr-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bv-yellow);
  border: 1px solid rgba(255, 222, 47, 0.45);
  background: rgba(255, 222, 47, 0.08);
  padding: 4px 11px;
  border-radius: 999px;
}
.bv-attr-title {
  font-family: var(--bv-font);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.bv-attr-sub {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  line-height: 1.65;
}
.bv-attr-hero--index .bv-attr-sub { margin: 0 auto; }

/* Hero 大图 (图片来源: Wikimedia Commons, CC0 — 无需署名) */
.bv-attr-hero__media {
  margin: 24px 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bv-attr-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.bv-attr-credit {
  display: block;
  padding: 8px 14px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bv-attr-credit a { color: rgba(255, 255, 255, 0.72); text-decoration: underline; }
.bv-attr-credit a:hover { color: var(--bv-yellow); }

/* ---- 引言 --------------------------------------------------------------- */
.bv-attr-intro {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
  border-left: 4px solid var(--bv-yellow);
  padding: 4px 0 4px 20px;
  margin: 28px 0 8px;
}

/* ---- 通用小节 ----------------------------------------------------------- */
.bv-attr-block { margin-top: 48px; }
.bv-attr-block > h2 {
  font-family: var(--bv-font);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  color: #fff;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bv-attr-lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 20px;
}
.bv-attr-para {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.02rem;
  line-height: 1.85;
  margin: 0 0 18px;
}

/* ---- Quick Facts 网格 --------------------------------------------------- */
.bv-attr-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 0;
}
.bv-attr-fact {
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
}
.bv-attr-fact dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-yellow);
  margin-bottom: 8px;
}
.bv-attr-fact dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- 预约攻略: 步骤 + 提示 --------------------------------------------- */
.bv-attr-steps {
  list-style: none;
  counter-reset: bvstep;
  margin: 0;
  padding: 0;
}
.bv-attr-steps li {
  counter-increment: bvstep;
  position: relative;
  padding: 0 0 18px 46px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.01rem;
  line-height: 1.7;
}
.bv-attr-steps li::before {
  content: counter(bvstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bv-deep);
  background: var(--bv-yellow);
  border-radius: 50%;
}
.bv-attr-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: 2px;
  width: 1px;
  background: rgba(255, 222, 47, 0.22);
}
.bv-attr-note {
  margin-top: 8px;
  background: rgba(255, 222, 47, 0.07);
  border: 1px solid rgba(255, 222, 47, 0.28);
  border-radius: 12px;
  padding: 18px 20px;
}
.bv-attr-note__lbl {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bv-yellow);
  margin-bottom: 10px;
}
.bv-attr-note ul { margin: 0; padding-left: 20px; }
.bv-attr-note li {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 8px;
}
.bv-attr-note li:last-child { margin-bottom: 0; }

/* ---- 交通 --------------------------------------------------------------- */
.bv-attr-transport { display: grid; gap: 14px; }
.bv-attr-transport__row {
  display: flex;
  gap: 14px;
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
}
.bv-attr-transport__ico { font-size: 1.25rem; line-height: 1.4; }
.bv-attr-transport__lbl {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-yellow);
  margin-bottom: 6px;
}
.bv-attr-transport__row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.99rem;
  line-height: 1.65;
}
.bv-attr-maplink { margin: 16px 0 0; }
.bv-attr-maplink a { color: var(--bv-yellow); font-weight: 600; }

/* ---- 亮点卡片 ----------------------------------------------------------- */
.bv-attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.bv-attr-hl {
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--bv-yellow);
  border-radius: 12px;
  padding: 20px 22px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.bv-attr-hl:hover { border-color: rgba(255, 222, 47, 0.5); transform: translateY(-2px); }
.bv-attr-hl h3 {
  font-family: var(--bv-font);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--bv-yellow);
  margin: 0 0 10px;
}
.bv-attr-hl p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* ---- 相册 (每景点 3 张图 = 1 hero + N gallery) -------------------------- */
.bv-attr-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.bv-attr-gallery__item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bv-attr-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.bv-attr-gallery__item:hover img { transform: scale(1.03); }
.bv-attr-gallery__item figcaption {
  padding: 12px 16px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- 推荐动线 ----------------------------------------------------------- */
.bv-attr-route { list-style: none; margin: 0; padding: 0; }
.bv-attr-route li {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bv-attr-route li:last-child { border-bottom: 0; }
.bv-attr-route__title {
  font-weight: 700;
  color: var(--bv-yellow);
  font-size: 1rem;
}
.bv-attr-route__txt {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.99rem;
  line-height: 1.7;
}

/* ---- 避坑 --------------------------------------------------------------- */
.bv-attr-pitfalls { list-style: none; margin: 0; padding: 0; }
.bv-attr-pitfalls li {
  position: relative;
  padding: 12px 0 12px 30px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1rem;
  line-height: 1.7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bv-attr-pitfalls li:last-child { border-bottom: 0; }
.bv-attr-pitfalls li::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 15px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0b2329;
  background: var(--bv-yellow);
  border-radius: 50%;
}

/* ---- 周边联动 ----------------------------------------------------------- */
.bv-attr-nearby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.bv-attr-nearby__card {
  display: grid;
  gap: 6px;
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.2s ease;
}
a.bv-attr-nearby__card:hover { border-color: var(--bv-yellow); }
.bv-attr-nearby__name { font-weight: 700; color: var(--bv-yellow); font-size: 1rem; }
.bv-attr-nearby__note { color: rgba(255, 255, 255, 0.75); font-size: 0.94rem; line-height: 1.6; }
.bv-attr-nearby__card--soon { opacity: 0.62; }
.bv-attr-nearby__soon {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- FAQ --------------------------------------------------------------- */
.bv-attr-faq { display: grid; gap: 10px; }
.bv-attr-faq__item {
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.bv-attr-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 600;
  color: #fff;
  font-size: 1.01rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.bv-attr-faq__item summary::-webkit-details-marker { display: none; }
.bv-attr-faq__item summary::after {
  content: "+";
  color: var(--bv-yellow);
  font-weight: 700;
  flex: none;
}
.bv-attr-faq__item[open] summary::after { content: "–"; }
.bv-attr-faq__item p {
  margin: 0;
  padding: 0 20px 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.99rem;
  line-height: 1.75;
}

/* ---- 反向内链: 相关对比页 (卡片样式镜像 /compare/ 索引页) -------------- */
.bv-attr-relcmp {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 一行 3 个 */
  gap: 20px;
}
.bv-attr-relcmp > li { display: flex; }     /* li 高度跟随卡片，保证等高 */
.bv-attr-relcmp__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 14px;
  background: rgba(11, 35, 41, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.bv-attr-relcmp__card:hover {
  transform: translateY(-4px);
  border-color: var(--bv-yellow);
  background: rgba(11, 35, 41, 0.85);
}
.bv-attr-relcmp__thumb {
  display: block;
  width: 100% !important;
  max-width: none !important;   /* 解除主题全局 img{max-width:100%} 对满幅宽度的钳制 */
  aspect-ratio: 16 / 9;         /* 与对比页 16:9 源图一致 -> cover 零裁切 */
  height: auto;
  object-fit: cover !important;
  margin-bottom: 14px;
  border-radius: 14px 14px 0 0;
  background-color: #0b2329;    /* 加载前/失败兜底底色 */
}
.bv-attr-relcmp__cat {
  display: block;
  padding: 0 18px;
  margin-bottom: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-yellow);
}
.bv-attr-relcmp__title {
  display: block;
  padding: 0 18px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.bv-attr-relcmp__go {
  display: block;
  margin-top: auto;
  padding: 12px 18px 16px;
  color: var(--bv-yellow);
  font-weight: 600;
}
/* 响应式: 平板 2 列, 手机 1 列 */
@media (max-width: 880px) { .bv-attr-relcmp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bv-attr-relcmp { grid-template-columns: 1fr; } }

/* ---- 规划工具内链 ------------------------------------------------------- */
.bv-attr-guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 52px;
}
.bv-attr-guides__card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.97rem;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bv-attr-guides__card:hover { border-color: var(--bv-yellow); color: var(--bv-yellow); }

/* ---- 索引页: 分组导航 + 分组标题 ---------------------------------------- */
.bv-attr-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 46px;
}
.bv-attr-jump__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bv-attr-jump__link:hover { border-color: var(--bv-yellow); color: var(--bv-yellow); }
.bv-attr-jump__n {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bv-deep);
  background: var(--bv-yellow);
  border-radius: 999px;
  padding: 2px 7px;
}

/* 分组: 50 个景点拆成 5 个板块, 锚点跳转用 scroll-margin-top 让开吸顶导航 */
.bv-attr-group { margin-bottom: 58px; scroll-margin-top: 96px; }
.bv-attr-group:last-of-type { margin-bottom: 24px; }
.bv-attr-group__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--bv-font);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bv-attr-group__count {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  white-space: nowrap;
}

/* ---- 索引页: 景点卡片 --------------------------------------------------- */
/* auto-fill (非 auto-fit): 保留空轨道, 只有 1 个景点时卡片不会被拉成整屏宽 */
.bv-attr-grid--index {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.bv-attr-card {
  display: grid;
  gap: 8px;
  height: 100%;
  background: var(--bv-deep);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.bv-attr-card:hover { border-color: var(--bv-yellow); transform: translateY(-3px); }
.bv-attr-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* 图未就绪时的卡面占位：板块线条图标 + 极淡黄色光晕，避免出现一排空白卡 */
.bv-attr-card__thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 222, 47, 0.16) 0%, rgba(255, 222, 47, 0) 62%),
    var(--bv-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bv-attr-card__thumb--ph svg {
  width: 78px;
  height: 78px;
  fill: none;
  stroke: var(--bv-yellow);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.bv-attr-card:hover .bv-attr-card__thumb--ph svg { opacity: 0.6; }
.bv-attr-card__title,
.bv-attr-card__sub,
.bv-attr-card__tags,
.bv-attr-card__go { padding: 0 20px; }
/* 卡片首行与圆角留白：有缩略图时 title 紧跟图下方；无缩略图时 title 自己撑开顶部留白 */
.bv-attr-card__thumb + .bv-attr-card__title { margin-top: 16px; }
.bv-attr-card__title:first-child { margin-top: 18px; }
.bv-attr-card__title {
  font-family: var(--bv-font);
  font-size: 1.28rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.bv-attr-card__sub {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.97rem;
  line-height: 1.6;
}
.bv-attr-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bv-attr-card__go {
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 20px;
  color: var(--bv-yellow);
  font-weight: 600;
}
.bv-attr-card .bv-attr-tag { font-size: 0.72rem; padding: 3px 9px; }

/* ---- 共用: 让 go / relcmp 里的箭头文本不继承下划线 ---------------------- */
.bv-attr-relcmp__card .bv-attr-card__go { padding: 0; margin-top: 4px; }

/* ---- 响应式 ------------------------------------------------------------- */
@media (max-width: 760px) {
  .bv-attr { padding: 40px 0 64px; }
  .bv-attr-wrap { padding: 0 18px; }
  .bv-attr-block { margin-top: 38px; }
  .bv-attr-jump { margin-bottom: 34px; }
  .bv-attr-group { margin-bottom: 44px; scroll-margin-top: 76px; }
  .bv-attr-hero__media img { aspect-ratio: 16 / 10; }
  .bv-attr-gallery { grid-template-columns: 1fr; }
  .bv-attr-intro { padding-left: 16px; }
  .bv-attr-steps li { padding-left: 40px; }
  .bv-attr-facts { grid-template-columns: 1fr; }
}