/* 移动端响应式优化 - 成都智慧旅游信息平台 */

/* ==================== 全局基础样式 ==================== */
@media screen and (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }
  
  html {
    font-size: 14px;
    overflow-x: hidden;
  }
  
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    background-color: #f5f5f5;
  }
  
  #app {
    min-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ==================== 导航栏移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .navbar {
    height: auto !important;
    min-height: 56px;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
  }
  
  .navbar-container {
    max-width: 100% !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    height: auto !important;
  }
  
  .navbar-brand {
    flex-shrink: 0 !important;
  }
  
  .brand-text {
    font-size: 1rem !important;
  }
  
  .navbar-center {
    display: flex !important; /* 保持显示 */
    order: 3 !important; /* 移到底部 */
    width: 100% !important;
    justify-content: center !important;
    padding-top: 8px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .nav-item {
    font-size: 13px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  .navbar-right {
    min-width: auto !important;
  }
}

/* ==================== 首页移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .home-page {
    padding-top: 64px !important;
  }
  
  /* Hero区域 */
  .hero-section {
    min-height: 50vh !important;
    padding: 60px 16px 40px !important;
  }
  
  .hero-title {
    font-size: 2rem !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 0 10px !important;
  }
  
  .hero-stats {
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 30px !important;
  }
  
  .stat-item {
    text-align: center !important;
  }
  
  /* 特色卡片区域 */
  .features-section {
    padding: 30px 16px !important;
  }
  
  .section-title {
    font-size: 1.75rem !important;
    margin-bottom: 24px !important;
  }
  
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .feature-card {
    padding: 20px !important;
  }
  
  /* 城市介绍区域 */
  .city-intro-section {
    padding: 30px 16px !important;
  }
  
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .intro-card {
    padding: 20px !important;
  }
  
  .intro-card h3 {
    font-size: 1.25rem !important;
  }
  
  .intro-card p {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
  
  .tag-list {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .tag-item {
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
  }
}

/* ==================== 景点列表页移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .attractions-page {
    padding-top: 70px !important;
    padding-bottom: 80px !important;
  }
  
  .page-header {
    padding: 20px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .page-title {
    font-size: 1.75rem !important;
  }
  
  /* 筛选器 */
  .filter-bar {
    flex-direction: column !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  
  .search-box {
    width: 100% !important;
  }
  
  .filter-selects {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .filter-select {
    width: 100% !important;
  }
  
  /* 景点网格 */
  .attractions-grid {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 16px !important;
  }
  
  .attraction-card {
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  
  .card-image-wrapper {
    height: 200px !important;
  }
  
  .card-image {
    object-fit: cover !important;
  }
  
  .card-content {
    padding: 16px !important;
  }
  
  .card-title {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }
  
  .card-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  
  .card-meta {
    font-size: 0.85rem !important;
  }
  
  /* 分页 */
  .pagination {
    justify-content: center !important;
    padding: 16px !important;
  }
}

/* ==================== 景点详情页移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .detail-page {
    padding-top: 70px !important;
  }
  
  .detail-hero {
    height: 250px !important;
  }
  
  .detail-content {
    padding: 20px 16px !important;
    margin-top: -40px !important;
  }
  
  .detail-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .detail-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  .detail-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  .detail-info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 20px 0 !important;
  }
  
  .info-card {
    padding: 12px !important;
  }
  
  .info-label {
    font-size: 0.85rem !important;
  }
  
  .info-value {
    font-size: 1rem !important;
  }
  
  /* 描述文本 */
  .description-section {
    padding: 20px 0 !important;
  }
  
  .section-heading {
    font-size: 1.25rem !important;
    margin-bottom: 12px !important;
  }
  
  .description-text {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }
  
  /* 图片画廊 */
  .gallery-section {
    padding: 20px 0 !important;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .gallery-image {
    height: 150px !important;
    border-radius: 8px !important;
  }
  
  /* 评论区域 */
  .comments-section {
    margin-top: 24px !important;
  }
  
  .comment-form {
    padding: 16px !important;
  }
  
  .comment-input {
    font-size: 1rem !important;
    padding: 12px !important;
  }
  
  .comment-list {
    padding: 0 !important;
  }
  
  .comment-item {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
}

/* ==================== 文化体验页面移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .culture-page {
    padding-top: 70px !important;
  }
  
  .culture-grid {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 16px !important;
  }
  
  .culture-card {
    border-radius: 12px !important;
  }
  
  .culture-image {
    height: 200px !important;
  }
  
  .culture-content {
    padding: 16px !important;
  }
  
  .culture-title {
    font-size: 1.1rem !important;
  }
  
  .culture-description {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }
}

/* ==================== 攻略页面移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .guides-page {
    padding-top: 70px !important;
  }
  
  .guide-list {
    padding: 16px !important;
  }
  
  .guide-card {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  
  .guide-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  
  .guide-cover {
    width: 100% !important;
    height: 200px !important;
    border-radius: 8px !important;
  }
  
  .guide-info {
    width: 100% !important;
  }
  
  .guide-title {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  .guide-meta {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .guide-content {
    padding: 16px !important;
  }
  
  .route-images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ==================== 用户中心页面移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .user-center {
    padding-top: 70px !important;
  }
  
  .user-profile-header {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 16px !important;
  }
  
  .user-avatar {
    width: 80px !important;
    height: 80px !important;
  }
  
  .user-details {
    margin-top: 16px !important;
  }
  
  .user-name {
    font-size: 1.5rem !important;
  }
  
  .user-stats {
    justify-content: center !important;
    margin-top: 16px !important;
  }
  
  .user-tabs {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px !important;
  }
  
  .user-tab {
    flex-shrink: 0 !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }
  
  .user-content {
    padding: 16px !important;
  }
  
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ==================== 登录/注册页面移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .auth-page {
    min-height: 100vh !important;
    padding: 20px 16px !important;
  }
  
  .auth-container {
    max-width: 100% !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
    margin: 20px auto !important;
  }
  
  .auth-logo {
    font-size: 2.5rem !important;
    margin-bottom: 16px !important;
  }
  
  .auth-title {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
  }
  
  .auth-form {
    margin-top: 24px !important;
  }
  
  .form-group {
    margin-bottom: 16px !important;
  }
  
  .form-label {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
  }
  
  .form-input {
    padding: 12px 16px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }
  
  .submit-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 1rem !important;
    margin-top: 20px !important;
  }
  
  .auth-links {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
    text-align: center !important;
  }
}

/* ==================== 收藏夹页面移动端优化 ==================== */
@media screen and (max-width: 768px) {
  .favorites-page {
    padding-top: 70px !important;
    padding: 16px !important;
  }
  
  .favorites-tabs {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px !important;
    gap: 8px !important;
  }
  
  .tab-btn {
    flex-shrink: 0 !important;
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
  }
  
  .favorites-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  
  .favorite-card {
    border-radius: 12px !important;
  }
}

/* ==================== 通用组件移动端优化 ==================== */
@media screen and (max-width: 768px) {
  /* 按钮 */
  .btn {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }
  
  .btn-primary {
    width: 100% !important;
  }
  
  /* 卡片通用样式 */
  .card {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  
  /* 表单元素 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* 防止iOS自动缩放 */
    border-radius: 8px !important;
  }
  
  /* 模态框 */
  .modal-dialog {
    margin: 10px !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 16px !important;
  }
  
  .modal-content {
    padding: 20px !important;
    border-radius: 16px !important;
  }
  
  .modal-header {
    padding: 16px 20px !important;
  }
  
  .modal-body {
    padding: 20px !important;
  }
  
  .modal-footer {
    padding: 16px 20px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* 提示消息 */
  .toast,
  .alert {
    margin: 0 16px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    padding: 12px 16px !important;
  }
  
  /* 加载动画 */
  .loading-spinner {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* 空状态 */
  .empty-state {
    padding: 40px 20px !important;
  }
  
  .empty-icon {
    font-size: 3rem !important;
    margin-bottom: 16px !important;
  }
  
  .empty-text {
    font-size: 1rem !important;
    color: #666 !important;
  }
  
  /* 返回顶部按钮 */
  .back-to-top {
    bottom: 80px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ==================== 平板设备适配（768px - 1024px）==================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .navbar-container {
    max-width: 90% !important;
    padding: 0 20px !important;
  }
  
  .nav-item {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  
  .hero-title {
    font-size: 2.5rem !important;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .attractions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .culture-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==================== 超小屏幕适配（< 480px）==================== */
@media screen and (max-width: 480px) {
  html {
    font-size: 13px;
  }
  
  .hero-section {
    min-height: 45vh !important;
    padding: 50px 12px 35px !important;
  }
  
  .hero-title {
    font-size: 1.75rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
  
  .section-title {
    font-size: 1.5rem !important;
  }
  
  .feature-card,
  .intro-card,
  .attraction-card,
  .culture-card,
  .guide-card {
    padding: 16px !important;
  }
  
  .card-image-wrapper,
  .culture-image,
  .guide-cover {
    height: 180px !important;
  }
  
  .detail-hero {
    height: 200px !important;
  }
  
  .detail-title {
    font-size: 1.5rem !important;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr !important;
  }
  
  .gallery-image {
    height: 200px !important;
  }
  
  .user-avatar {
    width: 70px !important;
    height: 70px !important;
  }
  
  .auth-container {
    padding: 20px 16px !important;
  }
  
  .auth-title {
    font-size: 1.35rem !important;
  }
}

/* ==================== 安全区域适配（iPhone X系列）==================== */
@supports (padding: max(0px)) {
  @media screen and (max-width: 768px) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .navbar {
      padding-top: env(safe-area-inset-top);
      height: calc(56px + env(safe-area-inset-top)) !important;
    }
    
    .home-page,
    .attractions-page,
    .detail-page,
    .culture-page,
    .guides-page,
    .user-center,
    .favorites-page {
      padding-top: calc(70px + env(safe-area-inset-top)) !important;
    }
    
    .back-to-top {
      bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}
}

/* ==================== 触摸交互优化 ==================== */
@media screen and (max-width: 768px) {
  a,
  button,
  input,
  textarea,
  select,
  [role="button"] {
    touch-action: manipulation;
  }
  
  .clickable {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* 点击反馈效果 */
  .clickable:active {
    transform: scale(0.98);
    opacity: 0.8;
    transition: all 0.1s ease;
  }
}

/* ==================== 滚动条隐藏（移动端）==================== */
@media screen and (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  
  * {
    scrollbar-width: none;
  }
}

/* ==================== 图片懒加载优化 ==================== */
@media screen and (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
  }
  
  .lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .lazy-load.loaded {
    opacity: 1;
  }
}

/* ==================== 文本选择优化 ==================== */
@media screen and (max-width: 768px) {
  .no-select {
    -webkit-user-select: none;
    user-select: none;
  }
  
  .text-selectable {
    -webkit-user-select: text;
    user-select: text;
  }
}