/* ============================================================
   EKI-IVF 体验增强样式（独立文件，便于回滚）
   包含：卡片 hover 微交互（建议10）、详情页返回按钮（建议6）
   ============================================================ */

/* ---------- 建议10：卡片 hover 微交互统一 ---------- */
/* 给主要卡片统一"上浮 + 阴影"的微交互，强化可点击感知 */
.about-grid-item,
.package-card,
.doctor-card,
.service-block,
.news-card,
.blog-card,
.why-card,
.gallery-grid-item {
  transition: transform .28s ease, box-shadow .28s ease;
  will-change: transform;
}

.about-grid-item:hover,
.package-card:hover,
.doctor-card:hover,
.service-block:hover,
.news-card:hover,
.blog-card:hover,
.why-card:hover,
.gallery-grid-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(var(--theme-color1-rgb, 0, 84, 83), .18);
}

/* 图片随卡片轻微缩放，增强生动感（仅对带 img 的卡片生效） */
.about-grid-item:hover .about-grid-img img,
.package-card:hover .package-card-img img,
.doctor-card:hover .doctor-thumb img,
.news-card:hover .news-thumb img {
  transform: scale(1.06);
}

.about-grid-img img,
.package-card-img img,
.doctor-thumb img,
.news-thumb img {
  transition: transform .35s ease;
}

/* ---------- 建议6：详情页返回按钮 ---------- */
.article-back-bar {
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 28px 0;
}

.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-color1, #005453);
  background: #fff;
  border: 1px solid var(--theme-color4, #e0e7e5);
  border-radius: 999px;
  padding: 8px 18px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.article-back-link:hover {
  background: var(--theme-color1, #005453);
  color: #fff;
  border-color: var(--theme-color1, #005453);
}

.article-back-link i {
  font-size: 13px;
}

/* ---------- 锚点定位留白（修复导航二级菜单跳转动点不准） ---------- */
/* 顶部固定头在桌面约 80px、移动约 64px，统一用 scroll-margin-top 让原生锚点落点准确 */
.news-panel,
#news-anchor,
#success-cases,
#news-knowledge,
#services-content,
.anchor-target {
  scroll-margin-top: 96px;
}

@media (max-width: 1024px) {
  .news-panel,
  #news-anchor,
  #success-cases,
  #news-knowledge,
  #services-content,
  .anchor-target {
    scroll-margin-top: 72px;
  }
}

/* 新闻页 tab 区域上方的定位锚点，本身不占空间 */
.news-anchor {
  height: 0;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* ---------- 服务项目页 Hero 轮播：左文随右图联动切换 ---------- */
#serviceHeroContent {
  position: relative;
}
#serviceHeroContent .banner-slide-content {
  display: none;
}
#serviceHeroContent .banner-slide-content.active {
  display: block;
  animation: serviceHeroFade .4s ease;
}
@keyframes serviceHeroFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 复用 hero-card 已有的左文配色（sub-title/title/text 已在 services.blade 内联样式定义） */
#serviceHeroContent .banner-slide-content .sub-title {
  position: relative;
  font-size: 28px;
  font-weight: 500;
  color: var(--theme-color1, #005453);
  margin-bottom: 16px;
}
#serviceHeroContent .banner-slide-content .sub-title::before {
  content: "——";
  display: inline-block;
  margin-right: 6px;
  color: var(--theme-color1, #005453);
}
#serviceHeroContent .banner-slide-content .title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--theme-color1, #005453);
  margin-bottom: 20px;
}
#serviceHeroContent .banner-slide-content .text,
#serviceHeroContent .banner-slide-content .text p {
  color: var(--theme-color1, #005453) !important;
  font-size: 22px;
  line-height: 1.8;
  margin-bottom: 30px;
}
#serviceHeroContent .banner-slide-content .button-box .theme-btn.btn-style-four {
  background-color: var(--theme-color1, #005453);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 16px 36px;
  font-size: 22px;
  font-weight: 500;
  box-shadow: 0 10px 24px rgba(0, 84, 83, 0.28);
  transition: all 300ms ease;
}
#serviceHeroContent .banner-slide-content .button-box .theme-btn.btn-style-four:hover {
  box-shadow: 0 14px 32px rgba(0, 84, 83, 0.38);
  transform: translateY(-2px);
}

/* ============================================================
   FAQ 新样式：顶部突出胶囊 + 问题/箭头 + 底部"更多详情"
   ============================================================ */
.faq-card-new {
  position: relative;
  border-radius: 25px;
  background: #fff;
  margin-top: 30px; /* 与上方内容拉开间距 */
  padding: 34px 28px 22px; /* 顶部内边距加大，避免胶囊压到文字 */
}

/* 顶部突出胶囊 */
.faq-badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--theme-color1, #005453);
  color: #fff;
  font-size: var(--text-sub, 28px);
  font-weight: 700;
  padding: 10px 36px;
  border-radius: var(--radius-pill, 999px);
  letter-spacing: .04em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0, 84, 83, .22);
}

.faq-desc-new {
  font-size: var(--text-body, 22px);
  line-height: 1.6;
  color: #555;
  text-align: center; /* 与胶囊标题居中一致 */
  margin: 0;
  padding: 40px 0 30px; /* 副标题上间距加大到40px，下30px */
}

/* FAQ 手风琴：独立精致卡片条目 */
.faq-list-new {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
/* 3个class优先级 > 全局 .accordion-box .block（2个class），确保 padding/border 覆盖生效 */
.accordion-box .block.faq-item-new {
  position: relative;
  margin-bottom: 16px; /* 条目间距 */
  /* 折叠/展开态统一：上下左右padding都是20px */
  padding: 20px !important;
  background: #f7faf9; /* 极浅绿底 */
  border: 1px solid rgba(var(--theme-color1-rgb, 0, 84, 83), .12) !important; /* 覆盖全局 border-bottom:1px solid #xxx */
  /* 左侧主题色装饰竖条（代替 ::before + overflow:hidden 组合，避免JS动画裁剪padding） */
  border-left: 4px solid transparent !important;
  border-radius: var(--radius-md);
  overflow: visible; /* 关键：不再裁剪，保证卡片padding-bottom和答案底部留白完整可见 */
  transition: transform .28s ease, box-shadow .28s ease,
              background .28s ease, border-color .28s ease;
}
.accordion-box .block.faq-item-new:last-child { margin-bottom: 0 !important; }
/* 删除 ::before 伪元素，改由 border-left 实现装饰竖条 */
.accordion-box .block.faq-item-new::before { display: none !important; }
.accordion-box .block.faq-item-new:hover {
  background: #fff;
  border-color: rgba(var(--theme-color1-rgb, 0, 84, 83), .28) !important;
  border-left-color: var(--theme-color1, #005453) !important; /* hover：左侧竖条显现 */
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 84, 83, .10);
}
/* 展开态 */
.accordion-box .block.faq-item-new.active-block {
  background: #fff;
  border-color: rgba(var(--theme-color1-rgb, 0, 84, 83), .28) !important;
  border-left-color: var(--theme-color1, #005453) !important; /* 展开：左侧竖条常显 */
  /* 展开态 padding 统一为20px上下左右 */
  padding: 20px !important;
  box-shadow: 0 12px 28px rgba(0, 84, 83, .10);
}

/* 问题行 = 文字 + 右侧圆形箭头按钮 */
.accordion-box .block.faq-item-new .acc-btn.faq-q-new { /* 提高优先级，覆盖全局默认 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--text-body, 22px) !important;
  font-weight: 600;
  color: #0f5e55;
  line-height: 1.6;
  cursor: pointer;
  padding: 0 !important;
  padding-bottom: 20px !important; /* 问题下方留出间距，与分隔线形成层次 */
  margin: 0 !important;
  border: 0 !important; /* 覆盖全局 border-bottom:1px solid #fff */
  background: transparent !important;
  /* 问题与答案之间的分隔线 */
  border-bottom: 1px dashed rgba(var(--theme-color1-rgb, 0, 84, 83), .18) !important;
  transition: border-color .28s ease, padding-bottom .28s ease;
}
/* 折叠状态：隐藏分隔线，减少底部padding */
.faq-item-new:not(.active-block) .acc-btn.faq-q-new {
  border-bottom-color: transparent !important;
  padding-bottom: 0 !important;
}
.faq-q-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.faq-q-new .icon {
  display: none !important; /* 隐藏原圆形翻转图标 */
}

/* 右侧圆形箭头按钮 */
.faq-arrow-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dcebe6; /* 浅绿底 */
  color: var(--theme-color1, #005453);
  border-radius: 50%;
  transition: background .28s, color .28s, transform .38s cubic-bezier(.22,1,.36,1);
}
.faq-arrow-btn i {
  font-size: 16px;
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
/* hover：箭头按钮轻微放大 */
.faq-item-new:hover .faq-arrow-btn {
  background: var(--theme-color1, #005453);
  color: #fff;
}
/* 点击展开：深绿底 + 箭头旋转 */
.faq-q-new.active .faq-arrow-btn {
  background: var(--theme-color1, #005453);
  color: #fff;
  transform: rotate(180deg);
}
.faq-q-new.active .faq-arrow-btn i {
  transform: rotate(180deg);
}

/* 答案内容区域整体 */
.faq-a-new {
  display: block;
}
.faq-a-new .content {
  padding: 0;
  margin: 0;
}
/* 答案正文：与问题分隔明显 —— 高优先级选择器覆盖全局 !important */
.accordion-box .block.faq-item-new .acc-content.faq-a-new .content .text {
  /* 展开后的上下间距（上：距分隔线；下：距卡片底部边缘） */
  padding-top: 24px !important;
  padding-bottom: 24px !important; /* 关键：答案底部留白，防止最后一行贴卡片底 */
  padding-right: 62px; /* 给右侧箭头留空间，避免对齐错位 */
  /* 取消 padding-left:4px —— 与问题文字左起点完全对齐，保持同一竖线 */
  padding-left: 0;
  margin: 0 !important; /* 覆盖全局 margin-bottom:13px!important，避免与padding叠加 */
  /* 正文排版：22px 标准字号 + 宽松行高 */
  font-size: var(--text-body, 22px) !important;
  line-height: 2 !important;
  color: #4a4a4a !important;
  font-weight: 400;
}
/* 多段答案段落间距 */
.accordion-box .block.faq-item-new .acc-content.faq-a-new .content .text p {
  margin: 0 0 16px 0;
  font-size: var(--text-body, 22px);
  line-height: 2;
}
.accordion-box .block.faq-item-new .acc-content.faq-a-new .content .text p:last-child {
  margin-bottom: 0;
}

/* 右下角"更多详情"按钮 */
.faq-footer-new {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.faq-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 2px solid var(--theme-color1, #005453);
  border-radius: var(--radius-lg, 24px);
  color: var(--theme-color1, #005453);
  font-size: var(--text-btn, 22px);
  font-weight: 500;
  background: #fff;
  text-decoration: none;
  transition: all .2s;
}
.faq-more-btn:hover {
  background: var(--theme-color1, #005453);
  color: #fff;
}

/* 手机端微调 */
@media (max-width: 767.98px) {
  .faq-card-new { padding: 24px 18px 20px; }
  .faq-badge { top: -16px; padding: 8px 28px; font-size: 22px; }
  /* 手机端统一：折叠/展开态上下左右padding都是20px —— 3个class优先级覆盖全局默认 */
  .accordion-box .block.faq-item-new { padding: 20px !important; }
  .faq-q-new {
    gap: 14px;
    line-height: 1.5;
    padding-bottom: 16px !important;
  }
  .faq-arrow-btn { width: 38px; height: 38px; }
  .faq-a-new .content .text {
    padding-right: 0;
    padding-left: 0; /* 与问题文字左起点对齐 */
    padding-top: 18px;
    padding-bottom: 20px;
    line-height: 1.9;
  }
  .faq-a-new .content .text p {
    line-height: 1.9;
    margin-bottom: 12px;
  }
}

/* ===================== 移动端修复（v14） ===================== */
@media (max-width: 767.98px) {
  /* 问题1：服务轮播容器padding过大导致卡片被压窄 */
  .services-carousel-wrap {
    padding: 0 15px;
  }

  /* 问题2：适用人群标题 left:200px 在移动端裁切 */
  .tg-header {
    left: 0;
  }

  /* 问题6：logo 超出 header 底部，移动端缩小并修正垂直偏移 */
  .header-style-two {
    padding: 0;
  }
  .header-style-two .header-lower .main-box .logo-box img {
    max-height: 76px;
    width: auto;
  }
}

/* 问题3（方案A）：浮动窗口弹出层窄屏自动缩小 */
@media (max-width: 640px) {
  .popover {
    width: 380px;
    max-width: calc(100vw - 110px);
  }
}