/* ========================================
   宠王子·PetKing 首页视觉优化样式
   覆盖 / 增强 css/style.css
   ======================================== */

/* ---- 主题变量 ---- */
.is-home {
  /* 主色调：红色（占页面 70-80%） */
  --pk-primary: #E7161A;
  --pk-primary-light: #F0524C;
  --pk-primary-soft: #FADCD9;
  --pk-primary-dark: #B51B16;
  /* 辅助色调：金黄（占页面 20-30%） */
  --pk-secondary: #CC853C;
  --pk-secondary-light: #E8A96A;
  --pk-secondary-soft: #F5D9B8;
  --pk-secondary-dark: #A6682E;
  --pk-ink: #241C16;
  --pk-ink-2: #4A4038;
  --pk-muted: #8A8075;
  --pk-cream: #FBF7F1;
  --pk-cream-2: #F5EFE6;
  --pk-surface: #FFFFFF;
  --pk-border: #EBE4DA;
  --pk-shadow: 0 24px 60px rgba(36, 28, 22, 0.10);
  --pk-shadow-sm: 0 4px 16px rgba(36, 28, 22, 0.06);
  --pk-radius: 22px;
  --pk-ease: cubic-bezier(0.16, 1, 0.3, 1);

  color: var(--pk-ink);
  background: var(--pk-cream);
}

/* ---- 顶部导航：未滚动透明 -> 滚动后红色实体 ---- */
.is-home .site-header {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  transition: background 0.4s var(--pk-ease), border-color 0.4s var(--pk-ease), box-shadow 0.4s var(--pk-ease);
}

.is-home .site-header.scrolled {
  background: #E7161A;
  border-bottom-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 18px rgba(124, 17, 13, 0.35);
}

/* 两种状态下文字均反白为白色（透明背景 / 红色背景上均清晰） */
.is-home .site-header .brand-name {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.is-home .site-header .brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* 导航链接 / 语言切换：白色文字 */
.is-home .site-header .nav-link,
.is-home .site-header .lang-switch {
  color: rgba(255, 255, 255, 0.92);
}

.is-home .site-header .nav-link:hover,
.is-home .site-header .nav-link:focus,
.is-home .site-header .nav-link.active,
.is-home .site-header .lang-switch:hover,
.is-home .site-header .lang-switch:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.is-home .site-header .hamburger-bar {
  background: #fff;
}

.is-home .site-header .nav-toggle:hover,
.is-home .site-header .nav-toggle:focus {
  background: rgba(255, 255, 255, 0.16);
}

/* 移动端菜单展开后，恢复深色文字以确保在白色菜单背景上可读 */
.is-home .site-header .nav-menu.open .nav-link,
.is-home .site-header .nav-menu.open .lang-switch {
  color: var(--text-secondary);
}

.is-home .site-header .nav-menu.open .nav-link:hover,
.is-home .site-header .nav-menu.open .nav-link:focus,
.is-home .site-header .nav-menu.open .nav-link.active,
.is-home .site-header .nav-menu.open .lang-switch:hover,
.is-home .site-header .nav-menu.open .lang-switch:focus {
  color: var(--pk-primary);
  background: var(--pk-cream);
}

.is-home .site-header .nav-toggle[aria-expanded="true"] .hamburger-bar {
  background: var(--text);
}

/* ---- Hero：本地视频 videos/1.mp4 作为第一屏背景，AI 图作为兜底 ---- */
.is-home .section-hero {
  padding: 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.is-home .video-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #3b0c09;
  animation: none;
}

.is-home .video-background::before {
  display: none;
}

.is-home .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.is-home .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
  z-index: 0;
}

/* 移动端不播放视频：隐藏 <video>，改用静态背景图（优先移动端背景图 --hero-poster-mobile，其次桌面端封面图 --hero-poster，均无时走内置兜底图） */
@media (max-width: 980px) {
  .is-home .hero-video {
    display: none;
  }
  .is-home .video-background {
    background-image: var(--hero-poster-mobile, var(--hero-poster, url("/images/i.webp")));
    background-size: cover;
    background-position: center;
  }
}

/* .is-home .video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(36, 28, 22, 0.25) 0%, rgba(36, 28, 22, 0.55) 70%),
    linear-gradient(180deg, rgba(36, 28, 22, 0.35) 0%, rgba(36, 28, 22, 0.55) 60%, rgba(36, 28, 22, 0.68) 100%);
} */

.is-home .video-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
}

.is-home .hero-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-height-mobile) + var(--space-10)) var(--space-5) var(--space-12);
}

.is-home .hero-tag {
  padding: 0.55rem 1.25rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  backdrop-filter: blur(6px);
  margin-bottom: var(--space-6);
}

.is-home .hero-title {
  font-size: clamp(1.6rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: var(--space-5);
}

.is-home .hero-title .sep {
  color: var(--pk-secondary-light);
  margin: 0 0.04em;
}

.is-home .hero-subtitle {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-8);
  opacity: 0.92;
}

.is-home .hero-values {
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.is-home .value-pill {
  padding: 0.55rem 1.35rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  backdrop-filter: blur(4px);
  transition: transform 0.25s var(--pk-ease), background 0.25s, border-color 0.25s;
}

.is-home .value-pill:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

.is-home .hero-cta {
  padding: var(--space-4) var(--space-8);
  background: var(--pk-primary);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: 0 10px 30px rgba(231, 22, 26, 0.4);
  transition: transform 0.25s var(--pk-ease), box-shadow 0.25s, background 0.25s;
}

.is-home .hero-cta:hover,
.is-home .hero-cta:focus {
  transform: translateY(-3px);
  background: var(--pk-primary-light);
  box-shadow: 0 14px 38px rgba(231, 22, 26, 0.5);
}

.is-home .scroll-hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  bottom: var(--space-6);
}

.is-home .scroll-hint .mouse {
  width: 20px;
  height: 32px;
  border-color: #E7161A;
}

.is-home .scroll-hint .mouse::after {
  background: #E7161A;
}

/* ---- 公共区块标题优化 ---- */
.is-home .section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--pk-primary);
  margin-bottom: var(--space-3);
}

.is-home .section-title {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--pk-primary);
  margin-bottom: var(--space-4);
}

.is-home .section-subtitle {
  font-size: 1.05rem;
  color: var(--pk-muted);
  max-width: 52ch;
  line-height: 1.7;
}

/* ---- 关于我们 ---- */
/* ---- 我们是谁：大图全幅背景 + 文字叠加，视觉更充实 ---- */
.is-home .section-about {
  position: relative;
  overflow: hidden;
  background: #1a130c;
  color: #fff;
}

.is-home .section-about::before {
  content: "";
  position: absolute;
  inset: 0;
  /* --about-bg 由模板根据后台 about.img 注入；无配置时回落内置图 */
  background-image: var(--about-bg, url("../images/h2/who-we-are.webp"));
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.is-home .about-content {
  align-items: center;
  gap: var(--space-10);
  position: relative;
  z-index: 2;
}

.is-home .about-text {
  position: relative;
  max-width: 620px;
  padding: var(--space-6);
}

/* 遮罩只在文案区域显示，不再铺满整个区块 */
.is-home .about-text::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-3) * -1);
  z-index: 0;
  border-radius: var(--radius-lg, 16px);
  background:
    linear-gradient(120deg, rgba(58, 44, 30, 0.72) 0%, rgba(58, 44, 30, 0.52) 60%, rgba(58, 44, 30, 0.3) 100%);
  pointer-events: none;
}

.is-home .about-text > * {
  position: relative;
  z-index: 1;
}

.is-home .section-about .section-eyebrow {
  color: var(--pk-primary);
}

.is-home .section-about .section-title {
  color: var(--pk-primary);
}

.is-home .section-about .section-desc {
  color: rgba(255, 255, 255, 0.9);
}

.is-home .section-about .section-link {
  color: #fff;
}

.is-home .section-about .section-link:hover,
.is-home .section-about .section-link:focus {
  color: var(--pk-secondary-light);
}

.is-home .about-text .section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--pk-primary);
  border-radius: 2px;
  margin-top: var(--space-4);
}

.is-home .section-desc {
  color: var(--pk-ink-2);
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: var(--space-5);
}

.is-home .section-desc.secondary {
  color: var(--pk-muted);
  font-size: 0.98rem;
}

.is-home .about-card {
  background: var(--pk-surface);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow);
  overflow: hidden;
  width: 100%;
  max-width: 560px;
  position: relative;
}

.is-home .about-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(231, 22, 26, 0.15);
  border-radius: calc(var(--pk-radius) - 10px);
  pointer-events: none;
  z-index: 1;
}

.is-home .about-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.is-home .about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--pk-ease);
}

.is-home .about-card:hover .about-image img {
  transform: scale(1.05);
}

.is-home .about-card-caption {
  padding: var(--space-6) var(--space-8);
  gap: var(--space-1);
}

.is-home .about-card-caption strong {
  font-size: 1.1rem;
  color: var(--pk-ink);
}

.is-home .about-card-caption span {
  font-size: 0.85rem;
  color: var(--pk-muted);
  letter-spacing: 0.04em;
}

/* 桌面端：关于我们图片仍走 ::before 全幅背景（沉浸感）；
   此处隐藏 <figure>，避免重复加载并确保桌面布局零回归。 */
.is-home .about-photo {
  display: none;
}

/* 移动端：把关于我们图片从全幅 cover 背景改为真实 <img> 卡片，
   避免 16:9 横图在竖屏被 cover 大幅裁掉左右两侧的建筑主体。 */
@media (max-width: 980px) {
  .is-home .section-about::before {
    display: none;
  }
  .is-home .section-about {
    min-height: auto;
    /* 与其它区块拉开层次：用品牌浅金→浅暖奶油的渐变底，
       既消除“黑屏”，又避免与下方“我们的优势”纯奶油底重复、连成一片 */
    background: linear-gradient(180deg, var(--pk-secondary-soft) 0%, var(--pk-cream-2) 100%);
  }
  .is-home .about-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--pk-radius);
    overflow: hidden;
    box-shadow: var(--pk-shadow);
  }
  .is-home .about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .is-home .about-text {
    max-width: none;
    padding: 0;
  }
  /* 移动端文字下方无全幅图，去掉深色卡片遮罩，保持干净 */
  .is-home .about-text::after {
    display: none;
  }
  /* 浅色底上恢复深色文字，保证可读性（覆盖桌面端为深色背景设的白字） */
  .is-home .section-about .section-desc {
    color: var(--pk-ink-2);
  }
  .is-home .section-about .section-link {
    color: var(--pk-primary);
  }
}

/* ---- 我们的优势 ---- */
.is-home .section-advantages {
  background: var(--pk-cream);
}

.is-home .section-advantages .section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.is-home .section-advantages .section-subtitle {
  margin: 0 auto;
}

/* 我们的优势 —— 4 张图片背景卡片（手风琴：鼠标移入该卡片展开，其余收缩） */
.is-home .advantages-grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}

.is-home .advantage-card {
  position: relative;
  flex: 1 1 0;
  border-radius: var(--pk-radius);
  overflow: hidden;
  min-height: 380px;
  background: transparent;
  box-shadow: var(--pk-shadow);
  transform: translateZ(0);
  cursor: pointer;
  outline: none;
  transition: flex-grow 0.3s linear, box-shadow 0.6s var(--pk-ease);
}

.is-home .advantage-card:hover,
.is-home .advantage-card:focus-visible,
.is-home .advantage-card.is-active {
  flex-grow: 3;
}

.is-home .advantage-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.is-home .advantage-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(58, 44, 30, 0.12) 0%, rgba(58, 44, 30, 0.38) 60%, rgba(58, 44, 30, 0.6) 100%);
  z-index: 1;
}

.is-home .advantage-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: var(--space-6);
  color: #fff;
}

.is-home .advantage-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
}

.is-home .advantage-desc {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height 1.5s var(--pk-ease), opacity 1.2s var(--pk-ease), transform 1.2s var(--pk-ease);
}

.is-home .advantage-card:hover .advantage-desc,
.is-home .advantage-card:focus-visible .advantage-desc,
.is-home .advantage-card.is-active .advantage-desc {
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
}

.is-home .advantage-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: var(--space-5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.9s var(--pk-ease), transform 0.9s var(--pk-ease), background 0.3s;
}

.is-home .advantage-arrow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.is-home .advantage-card:hover .advantage-arrow,
.is-home .advantage-card:focus-visible .advantage-arrow,
.is-home .advantage-card.is-active .advantage-arrow {
  opacity: 1;
  transform: translateX(0);
  background: rgba(255, 255, 255, 0.22);
}

/* 移动端：纵向堆叠，内容常显（关闭手风琴展开逻辑） */
@media (max-width: 980px) {
  .is-home .advantages-grid {
    flex-direction: column;
    gap: var(--space-4);
  }
  .is-home .advantage-card,
  .is-home .advantage-card:hover,
  .is-home .advantage-card:focus-visible,
  .is-home .advantage-card.is-active {
    flex: none;
    min-height: 300px;
    box-shadow: var(--pk-shadow);
  }
  .is-home .advantage-card-content {
    min-height: 300px;
  }
  .is-home .advantage-desc,
  .is-home .advantage-card:hover .advantage-desc,
  .is-home .advantage-card:focus-visible .advantage-desc,
  .is-home .advantage-card.is-active .advantage-desc {
    max-height: none;
    opacity: 1;
    transform: none;
  }
  .is-home .advantage-arrow,
  .is-home .advantage-card:hover .advantage-arrow,
  .is-home .advantage-card:focus-visible .advantage-arrow,
  .is-home .advantage-card.is-active .advantage-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ---- 产业基地 ---- */
/* 产业基地：整块大背景图 + 底部玻璃信息卡 */
.is-home .section-bases {
  position: relative;
  background-color: #1a130c;
  background-image: var(--base-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 双背景层：切换基地时交叉淡化 + 轻微放大入场，形成平滑的背景过渡 */
.is-home .bases-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s ease, transform 0.7s ease;
  z-index: 0;
  pointer-events: none;
}

.is-home .bases-bg.visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .is-home .bases-bg {
    transition: none;
  }
}

.is-home .section-bases::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 左侧加深以承载 tab 文字，整体压暗保证对比度（解决靠色） */
  background:
    linear-gradient(90deg,
      rgba(12, 8, 5, 0.9) 0%,
      rgba(12, 8, 5, 0.62) 46%,
      rgba(12, 8, 5, 0.36) 100%),
    linear-gradient(180deg,
      rgba(12, 8, 5, 0.5) 0%,
      rgba(12, 8, 5, 0.22) 30%,
      rgba(12, 8, 5, 0.58) 100%);
  pointer-events: none;
  /* 遮罩须盖住背景层（z-index: 0），再让内容盖住遮罩 */
  z-index: 1;
}

.is-home .section-bases > .section-content {
  position: relative;
  z-index: 2;
}

.is-home .section-bases .section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.is-home .section-bases .section-eyebrow {
  color: var(--pk-primary);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.is-home .section-bases .section-title {
  color: var(--pk-primary);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.is-home .section-bases .section-subtitle {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.is-home .section-bases .section-subtitle {
  margin: 0 auto;
}

.is-home .bases-layout {
  display: grid;
  align-items: stretch;
  gap: var(--space-6);
}

/* 左侧：深色玻璃侧栏，文字始终高对比（解决靠色） */
.is-home .bases-tabs {
  gap: var(--space-2);
  padding: var(--space-5);
  background: rgba(14, 10, 6, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--pk-radius) + 4px);
  box-shadow: var(--pk-shadow);
}

.is-home .bases-tabs-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--pk-secondary-light);
  padding: 0 var(--space-2) var(--space-2);
  text-transform: uppercase;
}

.is-home .base-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--pk-ease);
}

/* 编号（01–08）：桌面端位于标题左、移动端置于胶囊顶部 */
.is-home .base-tab-index {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s;
}

.is-home .base-tab-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap; /* 基地名称不换行，超出省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.is-home .base-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background 0.25s;
}

.is-home .base-tab:hover,
.is-home .base-tab:focus {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateX(3px);
  outline: none;
}

.is-home .base-tab.active {
  background: rgba(231, 22, 26, 0.24);
  border-color: rgba(231, 22, 26, 0.65);
  color: #fff;
  font-weight: 700;
}

.is-home .base-tab.active::before {
  background: var(--pk-primary);
}

.is-home .base-tab.active .base-tab-index {
  color: var(--pk-secondary-light);
}

/* 右侧：详情玻璃卡，填满列高（解决右侧奇怪留白） */
.is-home .base-panels {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 0;
  background: transparent;
}

.is-home .base-panel {
  position: relative;
  display: none;
  background: transparent;
}

.is-home .base-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.is-home .base-panel-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* 标题组与正文之间的主留白，建立清晰层次 */
  gap: var(--space-6);
  width: 100%;
  height: 100%;
  /* 修复此前 --space-7 未定义导致 padding 整体退化为 0 的问题，改为舒展内边距 */
  padding: var(--space-8) var(--space-10);
  background: rgba(18, 13, 10, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: calc(var(--pk-radius) + 4px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.is-home .base-panel-head {
  display: flex;
  flex-direction: column;
}

/* 标题下方的品牌色短分隔线，强化标题与正文的间距层次 */
.is-home .base-panel-head::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--pk-primary);
  margin: var(--space-4) auto 0;
}

.is-home .base-panel-title {
  margin: 0;
  padding: 0;
  border: none;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  /* 标题居中显示 */
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.is-home .base-panel-text p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.96rem;
  line-height: 1.9;
  /* 正文两端对齐，仅首段首行缩进2字符 */
  text-align: justify;
  margin-bottom: var(--space-4);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.is-home .base-panel-text p:first-child {
  text-indent: 2em;
}

.is-home .base-panel-text p:last-child {
  margin-bottom: 0;
}

/* 移动端产业基地：4×2 编号宫格，一屏内全展示、无需横滑
   - 8 个基地以 4 列 × 2 行网格全部呈现，点选即切下方面板
   - 宫格项显示编号 + 名称（两行截断），面板回显完整名称
   - 面板正文左对齐，紧凑易读 */
@media (max-width: 980px) {
  .is-home .bases-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .is-home .bases-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: var(--space-3);
    background: rgba(14, 10, 6, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--pk-radius) + 4px);
    overflow: visible;
  }
  .is-home .bases-tabs::-webkit-scrollbar {
    display: none;
  }
  .is-home .bases-tabs-label {
    display: none; /* 移动端隐藏副标题，节省空间 */
  }

  .is-home .base-tab {
    width: auto;
    min-height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 12px;
    transform: none; /* 移动端宫格不做左移位移 */
  }
  .is-home .base-tab:hover,
  .is-home .base-tab:focus {
    transform: none;
  }
  .is-home .base-tab::before {
    display: none; /* 移动端隐藏左侧红色竖条，避免与宫格窄高冲突 */
  }
  .is-home .base-tab-index {
    font-size: 0.74rem;
    margin: 0;
  }
  .is-home .base-tab-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal; /* 覆盖桌面端不换行省略，移动端保留两行截断 */
    font-size: 0.64rem;
    line-height: 1.25;
    text-align: center;
  }

  .is-home .base-panels {
    min-height: auto;
  }
  .is-home .base-panel-inner {
    padding: var(--space-5);
    gap: var(--space-4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .is-home .base-panel-title {
    font-size: 1.1rem;
    text-align: left;
  }
  .is-home .base-panel-head::after {
    margin: var(--space-3) 0 0;
  }
  .is-home .base-panel-text p {
    font-size: 0.92rem;
    line-height: 1.85;
    text-align: left; /* 移动端取消两端对齐，避免窄屏字间距过大 */
  }
}

/* ---- 新闻中心 ---- */
/* 干净奶油底色，不再叠全幅背景图，避免与下方救助横幅靠色 / 重叠 */
.is-home .section-news {
  padding: 0;
  background: var(--pk-cream);
}

.is-home .news-content {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-height-mobile) + var(--space-10)) var(--space-5) var(--space-10);
}

.is-home .news-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* 移动端：新闻中心标题与"查看全部"链接垂直排列，靠左显示（置于定义之后，确保覆盖生效） */
@media (max-width: 980px) {
  .is-home .news-top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* 移动端：grid 轨道用 minmax(0,1fr) 约束列宽，防止 nowrap 长文本把网格撑破（否则 ellipsis 不生效） */
  .is-home .news-layout,
  .is-home .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .is-home .news-card {
    min-width: 0;
  }

  /* 移动端：摘要单行显示，超出省略号 */
  .is-home .news-card-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 杂志式两栏：左特色大卡 + 右新闻列表 */
.is-home .news-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* 特色新闻卡片 —— 竖向大图 + 文字，编辑风格 */
.is-home .news-featured {
  display: flex;
  flex-direction: column;
  background: var(--pk-surface);
  border-radius: var(--pk-radius);
  overflow: hidden;
  box-shadow: var(--pk-shadow);
  margin-bottom: 0;
  transition: transform 0.4s var(--pk-ease), box-shadow 0.4s var(--pk-ease);
  border: 1px solid var(--pk-border);
}

.is-home .news-featured:hover,
.is-home .news-featured:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 32px 72px rgba(36, 28, 22, 0.14);
}

.is-home .news-featured-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.is-home .news-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 9, 0.15) 0%, rgba(20, 14, 9, 0.55) 100%);
}

.is-home .news-featured-visual .news-tag {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 2;
}

.is-home .news-tag {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--pk-primary);
  color: #fff;
}

.is-home .news-tag--primary {
  background: var(--pk-primary);
  box-shadow: 0 4px 14px rgba(231, 22, 26, 0.35);
}

.is-home .news-featured-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.is-home .news-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.is-home .news-featured-meta time {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pk-primary);
  letter-spacing: 0.03em;
}

.is-home .news-category {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pk-muted);
  padding: 0.2rem 0.65rem;
  background: var(--pk-cream);
  border-radius: 999px;
}

.is-home .news-featured-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.is-home .news-featured-body h3 a {
  color: var(--pk-ink);
  transition: color 0.2s;
}

.is-home .news-featured-body h3 a:hover,
.is-home .news-featured-body h3 a:focus {
  color: var(--pk-primary);
}

.is-home .news-excerpt {
  font-size: 0.92rem;
  color: var(--pk-muted);
  line-height: 1.7;
  margin: 0;
}

/* 新闻网格 —— 单列堆叠（桌面端置于右栏上下排列） */
.is-home .news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.is-home .news-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border-radius: var(--pk-radius);
  border: 1px solid var(--pk-border);
  padding: var(--space-6);
  transition: transform 0.3s var(--pk-ease), box-shadow 0.3s, border-color 0.3s, background 0.3s;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.is-home .news-card:hover,
.is-home .news-card:focus-within {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--pk-shadow-sm);
  border-color: var(--pk-primary-soft);
}

.is-home .news-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.is-home .news-card-header time {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pk-primary);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.is-home .news-card .news-tag {
  background: transparent;
  color: var(--pk-primary);
  border: 1px solid var(--pk-border);
  font-size: 0.68rem;
  padding: 0.22rem 0.7rem;
}

.is-home .news-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.55;
  /* 单行超出省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-home .news-card h3 a {
  color: var(--pk-ink);
  transition: color 0.2s;
}

.is-home .news-card h3 a:hover,
.is-home .news-card h3 a:focus {
  color: var(--pk-primary);
}

.is-home .news-card-desc {
  font-size: 0.88rem;
  color: var(--pk-muted);
  line-height: 1.65;
  margin: 0;
  /* 单行超出省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 底部栏样式已统一收敛至 style.css（全站共用，与首页一致） ---- */

/* ---- 右侧导航点 ---- */
.is-home .scroll-dot {
  border-color: rgba(231, 22, 26, 0.45);
}

.is-home .scroll-dot::before {
  background: var(--pk-primary);
}

.is-home .scroll-dot.is-active {
  border-color: var(--pk-primary);
}

.is-home .scroll-dot-label {
  color: var(--pk-primary);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--pk-shadow-sm);
}

/* ---- 链接与按钮 ---- */
.is-home .section-link {
  color: var(--pk-primary);
  font-weight: 700;
}

.is-home .section-link:hover,
.is-home .section-link:focus {
  color: var(--pk-primary);
}

/* ---- 响应式：平板 ---- */
@media (min-width: 980px) {
  .is-home .hero-content {
    padding: calc(var(--header-height) + var(--space-12)) var(--space-8) var(--space-16);
  }

  .is-home .hero-values {
    gap: var(--space-5);
  }

  .is-home .value-pill {
    padding: 0.65rem 1.6rem;
    font-size: 0.9rem;
  }

  .is-home .about-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-14);
  }

  .is-home .section-advantages .section-header,
  .is-home .section-bases .section-header {
    margin-bottom: var(--space-12);
  }

  .is-home .bases-layout {
    grid-template-columns: 320px 1fr;
    gap: var(--space-8);
  }

  .is-home .news-content {
    padding: calc(var(--header-height) + var(--space-10)) var(--space-8) var(--space-12);
  }

  /* 平板：特色卡图略增高，保持竖向编辑式排版（不挤成双栏） */
  .is-home .news-featured-visual {
    min-height: 220px;
  }

  .is-home .news-featured-body {
    padding: var(--space-5) var(--space-6);
  }

  .is-home .news-featured-body h3 {
    font-size: 1.2rem;
  }
}

/* ---- 响应式：桌面 ---- */
@media (min-width: 1024px) {
  .is-home .section {
    padding: calc(var(--header-height) + var(--space-10)) var(--space-12) var(--space-20);
  }

  /* 底部栏：保持自身单独定义的上下间距，避免被上方 .is-home .section 规则覆盖 */
  .is-home .section-footer {
    padding: var(--footer-space-top) var(--space-12) var(--footer-space-bottom);
  }

  .is-home .section-hero,
  .is-home .section-news {
    padding: 0;
  }

  .is-home .hero-title {
    font-size: clamp(2.6rem, 6vw, 5.2rem);
  }

  .is-home .about-content {
    gap: var(--space-20);
  }

  .is-home .bases-layout {
    grid-template-columns: 360px 1fr;
    gap: var(--space-10);
  }

  /* 新闻屏：与宠物救助条幅同屏锁定 100vh */
  .is-home .section-news {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* 新闻内容：不再拉伸铺满，收缩为自然高度（约3行），节省空间给救助条幅 */
  .is-home .news-content {
    margin: 10px auto 22px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-height) + var(--space-4)) var(--space-12) var(--space-2);
  }

  .is-home .news-top {
    margin-bottom: var(--space-3);
  }

  /* 两栏：左特色横向卡 + 右两则新闻卡，等高紧凑 */
  .is-home .news-layout {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    gap: var(--space-4);
  }

  .is-home .news-featured {
    flex-direction: row;
    margin-bottom: 0;
  }

  .is-home .news-featured-visual {
    flex: 0 0 44%;
    min-height: 0;
    height: 100%;
  }

  .is-home .news-featured-body {
    flex: 1 1 auto;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1);
  }

  .is-home .news-featured-body h3 {
    font-size: 1.1rem;
  }

  .is-home .news-grid {
    grid-template-rows: 1fr 1fr;
    gap: var(--space-3);
  }

  .is-home .news-card {
    min-height: 0;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
  }
}

/* ---- 大屏 ---- */
@media (min-width: 1280px) {
  .is-home .bases-layout {
    grid-template-columns: 400px 1fr;
  }
}

/* ---- 动画 ---- */
@keyframes hero-kenburns {
  0% { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1%, -1%); }
}

/* 产业基地详情面板切换：淡入 + 轻微上移，提升 Tab 切换体验 */
@keyframes base-panel-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.is-home .base-panel.active .base-panel-inner {
  animation: base-panel-enter 0.55s var(--pk-ease) both;
}

/* 减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .is-home .hero-image {
    animation: none;
    transform: scale(1);
  }
  /* 低动画偏好：关闭产业基地面板切换动画 */
  .is-home .base-panel.active .base-panel-inner {
    animation: none;
  }
  /* 低动画偏好：关闭手风琴展开效果，描述与箭头常显 */
  .is-home .advantage-desc,
  .is-home .advantage-card:hover .advantage-desc,
  .is-home .advantage-card:focus-visible .advantage-desc,
  .is-home .advantage-card.is-active .advantage-desc {
    max-height: none;
    opacity: 1;
    transform: none;
  }
  .is-home .advantage-arrow,
  .is-home .advantage-card:hover .advantage-arrow,
  .is-home .advantage-card:focus-visible .advantage-arrow,
  .is-home .advantage-card.is-active .advantage-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ---- 宠物救助 · 我们一直在行动 ---- */
.is-home .section-rescue {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background-color: #1a130c;
  background-image: url("../images/rescue-bg.webp");
  /* background-image: url("../images/rescue-bg-original.webp"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* 固定背景 */
}

.is-home .section-rescue::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 14, 9, 0.55) 0%, rgba(20, 14, 9, 0.42) 50%, rgba(20, 14, 9, 0.62) 100%);
  z-index: 0;
}

.is-home .rescue-content {
  position: relative;
  z-index: 1;
  padding: var(--space-16) var(--space-5);
  max-width: 1000px;
}

.is-home .rescue-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pk-secondary-light);
  margin: 0 0 var(--space-5);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.is-home .rescue-heading {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}

/* 移动端：关闭固定背景，避免抖动 */
@media (max-width: 980px) {
  .is-home .section-rescue {
    background-attachment: scroll;
    min-height: 42vh;
  }

  .is-home .rescue-heading {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
  }
}

/* ========================================
   桌面端 ≥1024px · 新闻屏与救助条幅（同屏）
   - 新闻中心：height:100vh 整屏锁定，内容紧凑（约3行高度）
   - 宠物救助：弹性填充剩余空间（flex:1），比原来更高，与新闻区正好1屏
   ======================================== */
@media (min-width: 1024px) {
  /* 救助条幅：弹性填充剩余空间，紧贴新闻内容下方，同屏显示 */
  .is-home .section-rescue {
    flex: 1 1 auto;
    min-height: 40vh;
    margin-top: 0;
    /* 恢复固定背景视差动画效果（随页面滚动产生位移） */
    background-attachment: fixed;
  }

  .is-home .rescue-content {
    padding: var(--space-8) var(--space-5);
  }

  .is-home .rescue-heading {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
  }
}

/* ========================================
   矮视口适配（宽屏但高度不足，如 1440×900 / 1280×720）
   - "产业基地"屏（左侧 8 个 Tab）与"我们的优势"屏（卡片 380px）
     在 ~800px 视口高度下内容总高超出 100vh，
     整屏吸附后底部被裁，表现为"显示不是一屏"
   - 压缩区块上下留白与 Tab 行高，使各屏内容收进一屏
   ======================================== */
@media (min-width: 1024px) and (max-height: 900px) {
  /* 排除 hero / news / footer：hero 与 news 必须保持 padding:0（news 内的救助条幅需 100% 宽），footer 有自身专用间距 */
  .is-home .section:not(.section-hero):not(.section-news):not(.section-footer) {
    padding: calc(var(--header-height) + var(--space-4)) var(--space-12) var(--space-8);
  }

  .is-home .section-advantages .section-header,
  .is-home .section-bases .section-header {
    margin-bottom: var(--space-6);
  }

  /* 优势卡片：高度跟随视口收缩，保证整屏不溢出 */
  .is-home .advantage-card,
  .is-home .advantage-card-content {
    min-height: min(380px, calc(100vh - 300px));
  }

  /* 产业基地：压缩 Tab 内边距与侧栏留白，8 个 Tab 整体收进一屏 */
  .is-home .bases-tabs {
    padding: var(--space-4);
  }

  .is-home .base-tab {
    padding: var(--space-2) var(--space-4);
  }
}