/* 展览展示样式 */
.exhibition-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    background-color: var(--secondary-color);
    padding-top: 1rem ;
    padding-bottom: 1rem;
}

.booth-image {
    width: 100%;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contact-info h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* ✅ 改成更宽且自适应 */
.contact-info {
  background-color: #fff;
  /* padding 做成自适应：小屏不挤，大屏更舒展 */
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  text-align: center;

  /* 关键：放大最大宽度，并允许随视口变化 */
  width: 100%;
  max-width: clamp(720px, 70vw, 1200px);  /* 最小 720，常态占 70vw，最大 960 */
  margin-inline: auto;                   /* 居中 */
}

/* 可选：把标题和正文稍微放大一点，跟着卡片一起“变大” */
.contact-info h3 { 
  font-size: clamp(1.1rem, 1.2vw + .9rem, 1.6rem);
  margin-bottom: .75rem;
  
}
.contact-details, .contact-info p {
  font-size: clamp(.95rem, .4vw + .85rem, 1.1rem);
  line-height: 1.7;
  text-align: center;
}


.contact-details {
    margin-top: 1.5rem;
    text-align: left;
    text-align: center;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background-color: var(--light-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    color: var(--secondary-color);
    
}

.contact-text {
    flex: 1;
}

.contact-label {
    font-weight: 500;
    color: var(--primary-color);
}

.contact-value {
    color: var(--text-color);
}

.booth-types {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.price-row {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    min-width: 200px;
}

.booth-type h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.booth-price {
    font-size: 1.5rem;
    color: var(--secondary-color);
    font-weight: bold;
    margin: 1rem 0;
}

.booth-features {
    list-style-type: none;
    padding-left: 0;
    text-align: left;
}

.booth-features li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    font-size: 1.25rem; /* 标题稍大 */
    margin-bottom: 0.2rem;
}

.booth-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}




/* 横向排列两组价格 */
.price-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3rem; /* 调整间距 */
  margin-bottom: 1.5rem;
}

/* 每个价格块单独居中 */
.price-card {
  text-align: center;
}


.booth-price {
  font-size: 1.8rem; /* 金额更显眼 */
  color: #4a8fe7;    /* 如果你想保留蓝色 */
  font-weight: bold;
}

/* 响应式：小屏幕时自动竖排 */
@media (max-width: 640px) {
   .price-row {
    gap: 1rem;                    /* 减小卡片间距 */
    flex-wrap: wrap;              /* 允许换行但尽量横排 */
    justify-content: center;
  }

  .price-card {
    flex: 1 1 45%;                /* 两卡各占 ~45%，留出间隙 */
    min-width: 140px;             /* 更小，防止太宽 */
    max-width: 180px;             /* 限制最大宽度，防止撑满 */
    padding: 1rem;                /* 收紧内边距 */
  }
  .booth-header { 
    gap: .5rem; 
  }

  .booth-price {
    font-size: 1.4rem !important; /* 金额稍小 */
  }

  .price-card h4 {
    font-size: 1rem;              /* 标题稍小 */
    margin-bottom: 0.4rem;
  }


  /* 【只在小屏生效】联系卡片缩小，露出蓝色背景 */
  .contact-info {
    max-width: 90vw;              /* 占屏幕 90%，左右各留 5% 蓝色 */
    padding: 1.2rem;
    margin-inline: auto;
  }

  /* 可选：文字稍小，防止溢出 */
  .contact-info h3 {
    font-size: 1.1rem;
  }
  .contact-details, .contact-info p {
    font-size: 0.9rem;
  }
}

/* === Booth 双图横向切换 & 图片尺寸控制 === */

/* 2) 顶部切换按钮：居中 + 悬停引导（自定义提示） */
.booth-header {
  /* 原来是 inline-flex；改成 flex 并居中 */
  display: flex;
  justify-content: center;  /* ✅ 居中 */
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.booth-tab {
  position: relative;
  border: 0;
  background: none;
  padding: .1rem .25rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  opacity: .8;
  transition: color .2s ease, opacity .2s ease;
}

/* 悬停引导 下方灰色小细线在选定时是否一直保持有颜色*/
.booth-tab.is-active { color: var(--secondary-color); opacity: 1; }


/* 悬停引导：颜色微变 + 下划线动画 */
.booth-tab:hover,
.booth-tab:focus-visible {
  opacity: 1;
  color: var(--secondary-color, #2a7ae2);
}
.booth-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.booth-tab:hover::after,
.booth-tab:focus-visible::after,
.booth-tab.is-active::after {
  transform: scaleX(1);
}

.booth-divider {
  opacity: .45;
  user-select: none;
}

/* 可视区域：固定弹性高度，避免图片占满整屏 */
.booth-viewport {
  /* 原来是 clamp(340px, 62vh, 720px) 偏高，改小一些 */
  height: clamp(260px, 48vh, 640px);
  max-width: 1200px;       /* 可选：限制最大宽度 */
  margin-inline: auto;     /* 让视口在容器中水平居中 */
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
}


/* 横向滑动轨道：两个面板各占 100% 宽 */
.booth-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform .45s ease;
  transform: translateX(0%); /* 默认显示第1张 */
}
/* 切到“展位尺寸”时左移一个面板宽度 */
#booth.show-size .booth-track {
  transform: translateX(-100%);
}

/* 图片完整显示且不被裁切；始终居中 */
.booth-pane {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.booth-pane img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* 保证整张图展示，不拉伸不裁切 */
  object-position: center;  /* 如需偏左/偏上可改成 left center / center top */
}

/* 让图片在视口内“尽可能大但不超边界”，保证整张图完整显示 */
.booth-pane img {
  display: block;            /* 去掉内联图片底部空白 */
  max-width: 100%;
  max-height: 100%;
  width: auto;               /* 不强行拉满宽 */
  height: auto;              /* 不强行拉满高 */
  object-fit: contain;       /* 保险：即使浏览器忽略 max- 也不裁切 */
  object-position: center;
}

/* 可选：底部小图标行 */
.booth-icons {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}
.booth-icon {
  border: 0;
  background: #f3f6ff;
  padding: .4rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.booth-icon:hover { background: #e8f0ff; transform: translateY(-1px); }
  

/* 更克制的可视高度：大屏不夸张，小屏不压扁 */
#booth .booth-viewport {
  height: auto;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
}

/* —— 收紧“图标-文字”间距 —— */
.contact-details { 
  text-align: left;       /* 覆盖之前的 text-align:center，让文字靠近图标 */
}

.contact-item {
  justify-content: center;/* 整行在卡片内居中 */
  align-items: center;
  gap: .6rem;             /* ✅ 用 gap 精准控制图标与文字的距离 */
  padding: .25rem 0;      /* 竖向也稍微紧凑一点，可按需调 */
}

.contact-icon {
  width: 32px;            /* 可选：图标略小更精致 */
  height: 32px;
  margin-right: 0;        /* ✅ 不再用 margin-right，交给 gap 控制 */
}

.contact-text {
  flex: 0 1 auto;         /* ✅ 取消占满整行，文字紧跟在图标后面 */
}

/* === 收费标准：放宽容器 + 让卡片自适应占位 === */

/* 1) 放宽‘收费标准’整个区域的有效宽度并居中 */
.booth-types{
  width: min(1200px, 90vw); /* 目标：最大 1200px，常态占 90% 视口宽 */
  margin-inline: auto;      /* 居中 */
  gap: 2rem;                /* 保留你的间距 */

  width: 100%;
  display: flex;
  justify-content: center; /* 左右拉开 */
  align-items: stretch;
  gap: 2rem;
  background: transparent;  /* 覆盖你之前给 price-row 的白色背景 */
  padding: 0;               /* 容器不再是卡片，所以去掉内边距 */
  box-shadow: none;
  min-width: 0;             /* 防止被旧的 min-width 顶住 */
}

/* 3) 真正的白色卡片样式给每个 price-card，自适应增宽 */
.price-card{
  flex: 1 1 0;              /* 两张卡平均分容器宽度 */
  min-width: 280px;         /* 避免太窄；按需调整 */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
  padding: 1.5rem;
  text-align: center;
}

/* 4) 第二排‘配置清单’那块也做成宽卡片（如果你希望它也是白底整块） */
.booth-types .price-row + .price-row{
  justify-content: center;  /* 这一排只有一个列表，居中即可 */
}
.booth-types .price-row + .price-row .booth-features{
  width: 100%;
  max-width: 1200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,.06);
  padding: 1.5rem 1.75rem;
  margin: 0;                /* 覆盖可能的外边距 */
}




/* 放大遮罩层（与 hotel 同款） */
.img-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.img-overlay.active { display: flex; }

.img-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* 给可放大图片一个光标提示 */
.is-zoomable { cursor: zoom-in; }


/* === Booth: 让容器根据图片自适应高度，避免大空白 === */
#booth .booth-viewport,
.booth-viewport {
  height: auto;            /* 关键：不再固定为 vh */
  max-height: none;        /* 取消上限，按内容自适应 */
  overflow: hidden;        /* 保留原本的圆角/阴影效果 */
}

/* 图片保持等比完整展示 */
.booth-pane {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.booth-pane img {
  display: block;          /* 去掉行内图片底部空隙 */
  width: 100%;
  height: auto;            /* 等比缩放，不拉伸 */
  object-fit: contain;     /* 保险：确保完整显示 */
  object-position: center;
}

.section-title h2{
    padding-top: 3rem;
}