/* =============================================================
   道如意心理官网 · 内页移动端专属样式（精致版）
   目标：让 about / services / team / cases / blog / contact 等内页
         在手机端拥有与首页 mobile-v2.css 一致的设计质感——
         圆角卡片、柔和阴影、衬线大标题、强调色、留白节奏。
   仅在 <=768px 生效；不影响桌面端。
   加载顺序：main.css → responsive.css → mobile-inner.css（最后，覆盖基础样式）
   ============================================================= */

@media (max-width: 768px) {
  /* ---------- 基础重置 / 设计令牌覆盖 ---------- */
  :root {
    --inner-card-radius: 18px;
    --inner-card-shadow: 0 4px 18px rgba(31, 58, 82, 0.06);
    --inner-card-border: 1px solid rgba(212, 230, 235, 0.6);
    --inner-section-py: 52px;
  }

  .container { padding: 0 20px; }
  body:not(.home-landing) { overflow-x: hidden; }
  .section { padding: var(--inner-section-py) 0; }
  .section-white, .section-light { padding: var(--inner-section-py) 0; }

  /* ---------- 内页 HERO（排除首页 v3 banner） ---------- */
  .hero:not(.hero--v2) {
    padding: 92px 0 40px !important;
  }
  .hero:not(.hero--v2) .hero-inner { text-align: left; max-width: 100%; }
  .hero:not(.hero--v2) .page-h1,
  .hero:not(.hero--v2) h1 {
    font-family: var(--font-serif);
    font-size: 28px !important;
    line-height: 1.35;
    font-weight: 700;
    text-align: left !important;
    margin-bottom: 12px;
  }
  .hero:not(.hero--v2) .hero-inner p {
    font-size: 14px !important;
    line-height: 1.7;
    color: var(--color-text-body);
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .hero:not(.hero--v2) .eyebrow { font-size: 12px; }

  /* ---------- 区块标题：左对齐 + 衬线大标题 ---------- */
  .section-header {
    text-align: left !important;
    margin-bottom: 32px;
  }
  .section-header h2 {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .section-header p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-body);
    max-width: 100%;
  }
  .section-header .eyebrow { font-size: 12px; }

  /* ---------- 服务卡 / 使命愿景（about + services） ---------- */
  .section-light .services-grid,
  .section-white .services-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .service-card {
    background: #fff;
    border: var(--inner-card-border);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    padding: 22px 18px;
    text-align: left;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .service-card:active { transform: scale(0.985); }
  .service-card .icon,
  .service-icon {
    width: 46px; height: 46px;
    font-size: 22px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(122, 174, 192, 0.14);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
  }
  .service-card h3 {
    font-family: var(--font-serif);
    font-size: 16px; font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
  }
  .service-card p { font-size: 13px; line-height: 1.65; color: var(--color-text-body); }

  /* ---------- 服务详情卡（services.html） ---------- */
  .service-detail-card {
    background: #fff;
    border: var(--inner-card-border);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    padding: 22px 18px;
    text-align: left;
  }
  .service-detail-card .icon { font-size: 28px; margin-bottom: 12px; }
  .service-detail-card h3 {
    font-family: var(--font-serif);
    font-size: 17px; font-weight: 600; margin-bottom: 10px;
  }
  .service-detail-card p { font-size: 13px; line-height: 1.7; color: var(--color-text-body); }

  /* ---------- 服务流程（services.html 5 步） ---------- */
  .process-flow { flex-wrap: wrap; gap: 14px 10px; justify-content: flex-start; }
  .process-step {
    flex: 0 0 calc(33.333% - 7px);
    min-width: 90px;
    padding: 14px 8px;
    text-align: center;
    background: #fff;
    border: var(--inner-card-border);
    border-radius: 14px;
    box-shadow: var(--inner-card-shadow);
  }
  .process-num {
    width: 36px; height: 36px; font-size: 16px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
  }
  .process-arrow { display: none; }
  .process-step h4 { font-size: 13px; margin-bottom: 4px; color: var(--color-text); }
  .process-step p { font-size: 11px; line-height: 1.5; color: var(--color-text-body); }

  /* ---------- 创始人区（about + team） ---------- */
  .founder-grid,
  #founderArea.founder-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .founder-img,
  #founderArea.founder-img {
    max-width: 280px;
    margin: 0 auto;
    border-radius: var(--inner-card-radius);
    min-height: 240px;
    background-size: cover; background-position: center;
  }
  .founder-info { text-align: left; }
  .founder-info h2 {
    font-family: var(--font-serif);
    font-size: 22px; font-weight: 700; margin-bottom: 8px;
  }
  .founder-info p,
  .founder-info .role {
    font-size: 13px; line-height: 1.7;
    color: var(--color-text-body);
    overflow-wrap: break-word; word-break: break-word;
  }
  .founder-info .role { color: var(--color-primary); font-weight: 500; margin-bottom: 14px; }

  /* ---------- 团队卡片（team.html） ---------- */
  #teamGrid.blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .team-card {
    background: #fff;
    border: var(--inner-card-border);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    overflow: hidden;
    margin: 0;
  }
  .team-avatar {
    width: 100%;
    height: 200px;
    aspect-ratio: auto;
    background-size: cover; background-position: center;
  }
  .team-info { padding: 14px 14px 16px; text-align: left; }
  .team-info h3 {
    font-family: var(--font-serif);
    font-size: 16px; font-weight: 600; margin-bottom: 4px;
  }
  .team-info .title,
  .team-info .role {
    font-size: 12px; color: var(--color-primary);
    margin-bottom: 8px !important;
  }
  .team-info p {
    font-size: 12px; line-height: 1.6; color: var(--color-text-body);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .team-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
  .team-tag {
    font-size: 11px; padding: 3px 9px;
    background: rgba(122, 174, 192, 0.12);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
  }

  /* ---------- 案例卡片（cases.html） ---------- */
  .case-card {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: #fff;
    border: var(--inner-card-border);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    overflow: hidden;
    margin-bottom: 16px;
  }
  .case-img {
    width: 100%;
    min-height: 180px !important;
    height: 180px;
    background-size: cover; background-position: center;
  }
  .case-body { padding: 18px 18px 20px !important; text-align: left; }
  .case-body h3 {
    font-family: var(--font-serif);
    font-size: 18px; font-weight: 600; line-height: 1.4;
    margin-bottom: 8px;
    overflow-wrap: break-word; word-break: break-word;
  }
  .case-body .case-cat {
    display: inline-block;
    font-size: 11px; padding: 3px 11px;
    background: rgba(122, 174, 192, 0.12);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
  }
  .case-body p {
    font-size: 13px; line-height: 1.7; color: var(--color-text-body);
    overflow-wrap: break-word; word-break: break-word;
  }
  .testimonial {
    background: #fff;
    border: var(--inner-card-border);
    border-left: 3px solid var(--color-primary-light);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    padding: 20px 18px 20px 22px;
    margin-bottom: 14px;
  }
  .testimonial::before { display: none; }
  .testimonial p {
    font-size: 14px; line-height: 1.8; color: var(--color-text);
    padding-left: 0 !important; margin-bottom: 12px;
  }
  .testimonial-author { padding-left: 0 !important; font-size: 12px; color: var(--color-text-muted); }

  /* ---------- 资讯列表（blog.html） ---------- */
  .filter-bar {
    display: flex !important; flex-wrap: wrap !important;
    gap: 8px; padding: 12px; overflow-x: visible !important;
    background: #fff;
    border: var(--inner-card-border);
    border-radius: 14px;
    box-shadow: var(--inner-card-shadow);
    margin-bottom: 18px;
  }
  .filter-btn {
    padding: 6px 13px; font-size: 12px; flex: 0 0 auto;
    border-radius: var(--radius-pill);
  }
  .search-box {
    flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
    padding: 9px 12px; font-size: 13px; box-sizing: border-box;
    border: 1px solid var(--color-border); border-radius: 10px;
  }
  .blog-grid { gap: 16px; }
  .blog-card {
    background: #fff;
    border: var(--inner-card-border);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    overflow: hidden;
    max-width: 100%;
  }
  .blog-card-cover {
    max-width: 100%;
    height: 180px;
    background-size: cover; background-position: center;
  }
  .blog-card-body { padding: 16px 18px 20px; text-align: left; }
  .blog-card-cat {
    display: inline-block; font-size: 11px; padding: 3px 11px;
    background: rgba(122, 174, 192, 0.12); color: var(--color-primary);
    border-radius: var(--radius-pill); margin-bottom: 10px;
  }
  .blog-card h3 {
    font-family: var(--font-serif);
    font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .blog-card p {
    font-size: 12px; line-height: 1.65; color: var(--color-text-body); margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .blog-card-meta { font-size: 11px; color: var(--color-text-muted); }
  .pagination { gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
  .pagination button { padding: 7px 11px; font-size: 12px; min-width: 34px; }

  /* ---------- 联系我们（contact.html） ---------- */
  .contact-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-card {
    background: #fff;
    border: var(--inner-card-border);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    padding: 22px 18px; text-align: center;
  }
  .contact-icon {
    font-size: 28px; margin-bottom: 10px;
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(122, 174, 192, 0.14);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-primary);
  }
  .contact-card h3 { font-family: var(--font-serif); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
  .contact-card p { font-size: 13px; line-height: 1.6; color: var(--color-text-body); }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .form-card {
    background: #fff;
    border: var(--inner-card-border);
    border-radius: var(--inner-card-radius);
    box-shadow: var(--inner-card-shadow);
    padding: 22px 18px;
  }
  .form-group { margin-bottom: 14px; }
  .form-group label { font-size: 13px; margin-bottom: 6px; display: block; color: var(--color-text); }
  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 11px 12px; font-size: 14px; width: 100%; box-sizing: border-box;
    border: 1px solid var(--color-border); border-radius: 10px;
  }
  .form-card button {
    padding: 13px; font-size: 14px; width: 100%;
    border-radius: var(--radius-pill); font-weight: 600;
  }
  .map-card { min-height: 220px; border-radius: var(--inner-card-radius); overflow: hidden; }
  .map-placeholder { font-size: 13px; padding: 16px; }

  /* ---------- CTA 区块 ---------- */
  .cta-section { padding: 52px 0; }
  .cta-section h2 { font-size: 22px; margin-bottom: 12px; }
  .cta-section p { font-size: 13px; line-height: 1.7; margin-bottom: 24px; }
  .cta-section .btn { width: 100%; max-width: 280px; padding: 14px; font-size: 15px; }

  /* ---------- 页脚 ---------- */
  .footer { padding: 40px 0 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; margin-bottom: 26px; }
  .footer-brand { grid-column: span 2; }
  .footer-brand h3 { font-family: var(--font-serif); font-size: 18px; }
  .footer-col h4 { font-size: 13px; margin-bottom: 12px; color: #fff; }
  .footer-col a { font-size: 12px; line-height: 1.9; color: rgba(232, 245, 249, 0.7); }
  .footer-bottom { font-size: 11px; padding-top: 18px; }
}

/* ============================================================
   超小屏 (<=380px) 兜底
   ============================================================ */
@media (max-width: 380px) {
  .hero:not(.hero--v2) .page-h1,
  .hero:not(.hero--v2) h1 { font-size: 25px !important; }
  .section-header h2 { font-size: 22px; }
  .service-card { padding: 18px 14px; }
  .process-step { flex: 0 0 calc(50% - 5px); }
  #teamGrid.blog-grid { grid-template-columns: 1fr !important; }
  .team-avatar { height: 220px; }
  .case-img { height: 160px !important; }
  .contact-card { padding: 18px 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}