/* detail-mobile.css - 移动端样式优化 */

/* 移动端通用样式调整 */
@media (max-width: 768px) {
  /* 顶部导航栏调整 */
  header .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  header h1 {
    font-size: 18px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 移动端隐藏返回概览文字 */
  header a span {
    display: none;
  }
  
  /* 主内容区域调整 */
  main {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  
  main .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  /* 行程概览部分调整 */
  .py-10.bg-white {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  
  .bg-\[\#FDF7F0\].rounded-lg.p-8 {
    padding: 16px;
  }
  
  .flex.flex-col.md\:flex-row.md\:items-center.md\:justify-between {
    gap: 16px;
  }
  
  .flex.flex-wrap.gap-4.mt-4 {
    margin-top: 12px;
    gap: 12px;
  }
  
  .flex.flex-wrap.gap-2 {
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  /* 行程导航部分调整 */
  .py-6.bg-white.border-t.border-b.border-gray-200 {
    padding-top: 16px;
    padding-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .flex.items-center.justify-between.overflow-x-auto.pb-2.gap-6 {
    justify-content: flex-start;
    gap: 24px;
    padding-bottom: 8px;
  }
  
  .flex.flex-col.items-center.min-w-max {
    min-width: 80px;
  }
  
  .w-12.h-12.flex.items-center.justify-center.bg-primary\/10.rounded-full.text-primary.mb-2 {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }
  
  /* 城市部分标题调整 */
  .flex.items-center.mb-8 {
    margin-bottom: 16px;
  }
  
  .w-16.h-16.flex.items-center.justify-center.bg-primary\/10.rounded-full.text-primary.mr-4 {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  .heading.text-3xl.font-semibold.text-gray-900 {
    font-size: 24px;
    line-height: 1.2;
  }
  
  /* 时间线调整 */
  .grid.grid-cols-1.lg\:grid-cols-3.gap-8.mb-12 {
    gap: 24px;
    margin-bottom: 32px;
  }
  
  .bg-white.rounded-lg.shadow-md.p-6 {
    padding: 16px;
  }
  
  .relative.timeline-item.pb-10 {
    padding-bottom: 24px;
  }
  
  .w-8.h-8.flex.items-center.justify-center.bg-primary.rounded-full.text-white {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  
  .ml-6 {
    margin-left: 16px;
  }
  
  .heading.text-xl.font-semibold.text-gray-900.mb-4 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .space-y-4 > * + * {
    margin-top: 16px;
  }
  
  /* 日程项目调整 */
  .flex.items-start {
    margin-bottom: 12px;
  }
  
  .w-16.text-gray-500.font-medium {
    width: 50px;
    flex-shrink: 0;
    font-size: 14px;
  }
  
  .text-gray-700.mb-2 {
    font-size: 15px;
    margin-bottom: 4px;
  }
  
  .text-gray-600.text-sm {
    font-size: 13px;
    line-height: 1.4;
  }
  
  /* 城市亮点卡片调整 */
  .bg-white.rounded-lg.shadow-md.overflow-hidden img {
    height: 160px;
  }
  
  .p-6 {
    padding: 16px;
  }
  
  .heading.text-xl.font-semibold.text-gray-900.mb-3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .space-y-3 > * + * {
    margin-top: 12px;
  }
  
  .w-6.h-6.flex.items-center.justify-center.text-primary.mt-0\.5.mr-2 {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
  }
  
  .mt-6.pt-6.border-t.border-gray-200 {
    margin-top: 16px;
    padding-top: 16px;
  }
  
  .font-medium.text-gray-900.mb-2 {
    font-size: 15px;
    margin-bottom: 8px;
  }
  
  .flex.justify-between.text-sm {
    font-size: 13px;
  }
  
  .text-sm.text-gray-600.mt-2 {
    font-size: 13px;
    margin-top: 8px;
  }
  
  /* 住宿和餐饮部分调整 */
  .grid.grid-cols-1.md\:grid-cols-2.gap-6 {
    gap: 16px;
  }
  
  .bg-white.rounded-lg.shadow-md.overflow-hidden.h-full {
    height: auto;
  }
  
  /* 费用说明部分调整 */
  .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
    gap: 24px;
  }
  
  .bg-white.rounded-lg.shadow-md.p-6.h-full {
    height: auto;
    padding: 16px;
  }
  
  /* 底部CTA调整 */
  .py-12.bg-primary\/10,
  .py-12.bg-\[\#FDF7F0\] {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  
  .text-center.max-w-3xl.mx-auto.px-6 {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .heading.text-3xl.md\:text-4xl.font-semibold.text-gray-900.mb-4,
  .heading.text-3xl.font-semibold.text-gray-900.mb-6 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  
  .text-lg.text-gray-700.mb-8,
  .text-gray-700.max-w-3xl.mx-auto.mb-8 {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  .inline-flex.items-center.justify-center.bg-primary.text-white.px-6.py-3.rounded-full,
  .bg-primary.text-white.px-8.py-3.\!rounded-button {
    padding: 12px 24px;
    width: 100%;
    max-width: 280px;
  }
  
  /* 底部行动区按钮组调整 */
  .flex.flex-wrap.justify-center.gap-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .bg-white.text-gray-800.border.border-gray-300.px-8.py-3.\!rounded-button {
    padding: 12px 24px;
    width: 100%;
    max-width: 280px;
  }
  
  /* 联系顾问弹窗调整 */
  #contactModal .bg-white.rounded-lg.p-8 {
    padding: 20px 16px;
    margin: 0 16px;
    max-width: calc(100% - 32px);
  }
  
  #contactModal .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
    gap: 24px;
  }
  
  #contactModal .w-32.h-32 {
    width: 120px;
    height: 120px;
  }
  
  #contactModal .text-xl.font-medium.text-gray-800.mb-2 {
    font-size: 18px;
  }
}

/* 超小屏幕设备优化 (小于480px) */
@media (max-width: 480px) {
  /* 顶部导航进一步优化 */
  header h1 {
    max-width: 140px;
  }
  
  /* 行程导航进一步优化 */
  .w-12.h-12.flex.items-center.justify-center.bg-primary\/10.rounded-full.text-primary.mb-2 {
    width: 36px;
    height: 36px;
  }
  
  .flex.flex-col.items-center.min-w-max span {
    font-size: 12px;
  }
  
  /* 时间线进一步优化 */
  .timeline-line.absolute.left-4.top-10.bottom-0.w-0\.5.bg-gray-200,
  .timeline-line.absolute.left-4.top-0.bottom-0.w-0\.5.bg-gray-200 {
    left: 15px;
  }
  
  .w-8.h-8.flex.items-center.justify-center.bg-primary.rounded-full.text-white {
    width: 30px;
    height: 30px;
  }
  
  .ml-6 {
    margin-left: 14px;
  }
  
  /* 日程项目进一步优化 */
  .w-16.text-gray-500.font-medium {
    width: 45px;
    font-size: 13px;
  }
  
  /* 图片高度调整 */
  .bg-white.rounded-lg.shadow-md.overflow-hidden img {
    height: 140px;
  }
  
  /* 底部行动区进一步优化 */
  .heading.text-3xl.font-semibold.text-gray-900.mb-6 {
    font-size: 22px;
  }
  
  .text-gray-700.max-w-3xl.mx-auto.mb-8 {
    font-size: 14px;
  }
  
  /* 联系顾问弹窗进一步优化 */
  #contactModal .grid.grid-cols-1.md\:grid-cols-2.gap-8 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  #contactModal .w-32.h-32 {
    width: 100px;
    height: 100px;
  }
  
  #contactModal .text-xl.font-medium.text-gray-800.mb-2 {
    font-size: 16px;
  }
  
  #contactModal .text-xs.text-gray-500 {
    font-size: 11px;
  }
  
  #contactModal .mt-6.pt-6.border-t.border-gray-200.text-center {
    margin-top: 12px;
    padding-top: 12px;
  }
}