/**
 * property-service-card.css — 详情页侧边栏服务卡（专属顾问/在线客服）公共组件
 *
 * 设计（2026-08-28）：
 * - 标题改为品牌蓝渐变色块 + 白色文字（用户指定）
 * - 卡片/按钮统一样式：圆角、阴影、hover 微动效
 * - PC 端生效（≥768px），移动端样式不变
 *
 * 覆盖范围：property / sale / building / creative / coworking / oldhouse 详情页侧边栏。
 * 注意：本文件经 _footer_content.php 全站最后加载，配合 body 前缀 + !important 覆盖
 *       各页面内联 .property-service-* 规则及 typography-unify.css / pc-responsive.css。
 */

@media (min-width: 768px) {
  /* ---- 卡片容器 ---- */
  body .property-service-card {
    background: var(--white, #fff) !important;
    border: 1px solid #e3ecf5 !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 6px 18px rgba(32, 56, 85, .08) !important;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
    /* 宽度自适应：detail-tags.css 给本卡片设了 `margin: 0 12px 16px`，
       而卡片宽度在别处被固定为 300px（与侧栏 .detail-right 同宽），
       300 + 12×2 = 324 > 300，导致整页横向溢出 12px、出现横向滚动条。
       改为 auto 后卡片自动撑满侧栏剩余宽度（300 - 12×2 = 276px）。 */
    width: auto !important;
    max-width: 100%;
  }

  @media (hover: hover) and (pointer: fine) {
    body .property-service-card:hover {
      box-shadow: 0 10px 26px rgba(32, 56, 85, .15) !important;
      transform: translateY(-2px);
    }
  }

  /* ---- 标题：品牌蓝渐变色块 + 白字 ---- */
  body .property-service-title {
    background: linear-gradient(135deg, #00A0E9 0%, #2f80ed 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 13px 18px !important;
    border-bottom: none !important;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0, 60, 120, .25);
  }

  /* 标题前的白色小竖条（原为蓝色，深底上改为白色） */
  body .property-service-title::before {
    content: '' !important;
    display: inline-block !important;
    width: 4px !important;
    height: 15px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    margin-right: 9px !important;
    vertical-align: -2px !important;
    box-shadow: 0 1px 3px rgba(0, 60, 120, .3);
  }

  /* ---- 卡片主体 ---- */
  body .property-service-body {
    padding: 18px 18px 20px !important;
    text-align: center;
  }

  body .property-service-body p {
    color: #7a8491;
    margin: 0 0 14px;
  }

  /* ---- 操作按钮：品牌蓝渐变胶囊 ---- */
  body .property-service-body .property-service-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    border-radius: 21px !important;
    background: linear-gradient(135deg, #00A0E9 0%, #2f80ed 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 14px rgba(0, 140, 233, .28);
    transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
  }

  body .property-service-body .property-service-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 18px rgba(0, 140, 233, .36);
    transform: translateY(-1px);
  }
}