/* ==========================================================================
   试管之家 chushirensheng.com.cn — 移动端/图片适配增强补丁
   生成于 2026-10-24 ｜ 方案 B
   说明：本文件只做「覆盖」，不修改原始打包 CSS，删除本文件即可完全回退。
   ========================================================================== */

/* ---------- 1. 移动端：右下角悬浮咨询区改为底部双按钮条 ---------- */
/* 原设计是竖排「微信二维码卡 + 电话咨询 + 在线留言」，手机上二维码自己扫不了、
   还占了右侧 1/3 屏幕，是移动端最影响阅读的地方。 */
@media (max-width: 767px) {
  div[class*="bottom-24"][class*="right-3"] {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    flex-direction: row;
    gap: 8px;
  }
  /* 隐藏手机端的微信二维码卡片 */
  div[class*="bottom-24"][class*="right-3"] > div:first-child {
    display: none !important;
  }
  /* 电话 / 在线留言 平分宽度，按钮高度不小于 44px 便于点按 */
  div[class*="bottom-24"][class*="right-3"] > a,
  div[class*="bottom-24"][class*="right-3"] > button {
    flex: 1 1 0;
    justify-content: center;
    min-height: 46px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0 6px 20px rgba(15, 45, 45, .18);
  }
  div[class*="bottom-24"][class*="right-3"] > a span,
  div[class*="bottom-24"][class*="right-3"] > button span {
    font-size: 14px;
  }
  /* 页面底部留出固定条高度的空白，避免最后一张卡片被遮住 */
  body::after {
    content: "";
    display: block;
    height: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- 2. 移动端：数据统计卡由竖排 4 行改为 2×2 ---------- */
@media (max-width: 639px) {
  div[class*="sm:grid-cols-2"][class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
    gap: 14px 12px;
  }
}

/* ---------- 3. 移动端：筛选栏与排序在窄屏更好点按 ---------- */
@media (max-width: 767px) {
  /* 筛选抽屉里的选项按钮高度 36px → 44px，避免误触 */
  button[class*="h-9"][class*="w-full"][class*="rounded-btn"] {
    min-height: 44px;
  }
  /* 列表页顶部「共找到 N 家」与排序行允许换行，不产生横向溢出 */
  .no-scrollbar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- 4. 图片适配兜底：卡片封面图不被拉伸变形 ---------- */
.rounded-img > img {
  max-height: 100%;
}

/* ---------- 5. 移动端：正文行高与段间距微调，提升长文可读性 ---------- */
@media (max-width: 767px) {
  .text-body,
  .line-clamp-2 {
    line-height: 22px;
  }
}

/* ---------- 6. 刘海屏 / 全面屏安全区 ---------- */
@supports (padding: env(safe-area-inset-left)) {
  header[class*="sticky"] > div:first-child {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ==========================================================================
   7. 医院库列表页：桌面版式重排
   --------------------------------------------------------------------------
   原状：卡片区是「2 列网格 + 封面图固定 280px」，1280px 屏上每列只有约 450px，
        图片吃掉 280px 后文字区不足 120px，标题被挤成一字一行、卡片被拉到 500px 高。
   做法：列表一律单列（信息条式），封面图定宽 240px（1024~1279 用 200px），
        文字区至少 400px；侧栏 280 → 216px；右侧给悬浮咨询让出通道。
   ========================================================================== */

@media (min-width: 640px) {
  /* 7.1 卡片容器：任何宽度都单列，彻底消除「图片挤文字」的结构性原因 */
  .grid.gap-5.xl\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  /* 网格项 / 文字列都允许收缩，避免长机构名把卡片撑破 */
  .grid.gap-5.xl\:grid-cols-2 > div,
  .grid.gap-5.xl\:grid-cols-2 article.group > div {
    min-width: 0;
  }
  /* 7.2 封面图：定宽 240px、纵向撑满卡片，代替原来被拉长的 16:9 竖条 */
  .grid.gap-5.xl\:grid-cols-2 article.group > a:first-child {
    width: 240px !important;
    flex: 0 0 240px !important;
    aspect-ratio: auto !important;
    align-self: stretch;
    min-height: 176px;
  }
}

/* 7.3 中等桌面（侧栏仍在）：图片收到 200px，给标题留足长度 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .grid.gap-5.xl\:grid-cols-2 article.group > a:first-child {
    width: 200px !important;
    flex: 0 0 200px !important;
  }
}

@media (min-width: 1024px) {
  /* 7.4 左侧筛选栏收窄：280 → 216px，主内容区多出 64px */
  aside.w-sidebar {
    width: 216px !important;
    flex: 0 0 216px !important;
  }
  /* 窄栏里内边距 20 → 16，选项行距收紧，视觉上更轻盈 */
  aside.w-sidebar > div {
    padding: 16px !important;
  }
  aside.w-sidebar h2 {
    font-size: 15px;
    line-height: 22px;
  }
  /* 7.5 顶部四项数据条：内边距与数字收一档，不与下方列表抢视觉重心 */
  div[class*="mb-8"][class*="gap-4"][class*="lg:grid-cols-4"] {
    padding: 18px 20px !important;
    gap: 16px 12px !important;
  }
  div[class*="mb-8"][class*="gap-4"][class*="lg:grid-cols-4"] p[class*="text-h2"] {
    font-size: 22px;
    line-height: 28px;
  }
}

/* 7.6 右侧让位：悬浮咨询（二维码 168px + 边距）在 1024~1759px 会压在卡片文字上，
   给容器留出 200px 通道；更宽的屏幕容器居中后天然有余量，不再预留。 */
@media (min-width: 1024px) and (max-width: 1759px) {
  div[class*="max-w-[1280px]"][class*="py-10"] {
    padding-right: 200px !important;
  }
}