/* 移动端专用样式覆盖（独立文件） */
/* 说明：统一将移动端布局调整集中于此，避免散落在模板中。 */

@media (max-width: 767.98px) {
  /* 基线整体缩放，统一收紧排版 */
  html { font-size: 14px; }
  body { line-height: 1.5; }

  /* 全局移动端内容左右边距变量（统一控制） */
  :root { --mobile-page-px: 1rem; }

  /* 容器内边距更紧凑（覆盖 Tailwind 的 px-4），统一所有页面容器左右边距 */
  .container.mx-auto, .container { 
    padding-left: var(--mobile-page-px) !important; 
    padding-right: var(--mobile-page-px) !important; 
  }
  /* 针对工具页面 main 容器补充上下内边距（不影响首页） */
  main.container { 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
  }

  /* 工具页标题与描述在移动端更小更紧凑 */
  .card .card-title { font-size: 1rem !important; }
  .card .card-desc { font-size: 0.75rem !important; }

  /* 顶部头部占位在移动端缩小，避免过多空白 */
  body > .h-16 { height: 3rem !important; }

  /* 首页：未包裹在 .container 的全宽区域在移动端增加左右边距 */
  #all-tools-container, 
  .ad-placeholder {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  /* 工具列表容器：缩小内边距，减少移动端左右空白 */
  section#all-tools .container {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  /* 首页 Hero 更紧凑：标题、描述与按钮（移动端优化） */
  /* 提升标题可读性、收紧描述字号 */
  /* 使用更具体的选择器，避免影响PC端 */
  #hero-container section.text-center { 
    margin-bottom: 0.5rem !important; 
    padding-left: 0.75rem !important; 
    padding-right: 0.75rem !important; 
  }
  #hero-container section.text-center > h1#hero-title { 
    font-size: 1.375rem !important; 
    margin-bottom: 0.375rem !important; 
    line-height: 1.3 !important;
  }
  #hero-container section.text-center > p#hero-desc { 
    font-size: 0.875rem !important; 
    margin-bottom: 0.5rem !important; 
    line-height: 1.6 !important;
    color: #6b7280 !important;
  }
  section.text-center a { padding: 0.5rem 0.75rem !important; font-size: 0.875rem !important; }
  section.text-center i { font-size: 0.875rem !important; }

  /* 移动端工具卡片整体更紧凑 */
  .card, .card-hover { 
    padding-top: 0.375rem !important; 
    padding-bottom: 0.375rem !important; 
    padding-left: 0.5rem !important; 
    padding-right: 0.5rem !important; 
  }
  .card-hover h3, .card .card-title { font-size: 0.9375rem !important; }
  .card-hover p, .card .card-desc { font-size: 0.8125rem !important; }
  .card-hover .w-10.h-10 { width: 1.75rem !important; height: 1.75rem !important; }
  .card-hover i { font-size: 0.875rem !important; }

  /* 工具表单区域间距更小：Tailwind space-y-4 的兼容覆盖 */
  .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }

  /* 按钮尺寸与文字缩小 */
  .btn { padding: 0.5rem 0.75rem !important; font-size: 0.875rem !important; }

  /* 移动菜单里的圆形按钮与输入框更紧凑 */
  #mobile-menu .w-12.h-12 { width: 2rem !important; height: 2rem !important; }
  #mobile-menu-button i { font-size: 1rem !important; }
  #mobile-menu input[type="text"] { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }

  /* 分类按钮更紧凑（保留样式） */
  #mobile-category-list .category-btn { font-size: 0.8125rem !important; padding: 0.375rem 0.625rem !important; }

  /* 移动端隐藏分类选择器（保持模板中的 hidden md:block 行为） */
  #category-filters-container { 
    display: none !important; 
  }

  /* 两列网格与更紧凑间距 */
  #all-tools #all-tools-grid,
  #all-tools #categories-sections > section > div.grid,
  #recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  /* 保证隐藏类能生效，避免首次进入被强制显示 */
  #recent-grid.hidden { display: none !important; }

  /* 徽章更精致小巧 */
  .badge { font-size: 0.625rem !important; padding: 0.15rem 0.3rem !important; }
}




@media (max-width: 767.98px) {
  /* 强制图标容器内部绝对居中（覆盖 flex，避免光学偏差） */
  .card-hover .w-10.h-10 {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .card-hover .w-10.h-10 i {
    display: block !important;
    margin: 0 !important;
    line-height: 0 !important;
    transform: translate(0, 0) !important;
    transform: translateY(13px) !important;
  }
}


@media (max-width: 767.98px) {
  /* 卡片内容区域：单独设置上下左右边距 */
  .card-hover { 
    padding-top: 0.8rem !important; 
    padding-bottom: 0.3rem !important; 
    padding-left: 1rem !important; 
    padding-right: 0.5rem !important; 
  }
  .card-hover .flex.items-center { margin-bottom: 0.125rem !important; }
  .card-hover .flex.items-center .card-textcol { margin-top: 0.25rem !important; }
  .card-hover p.mb-4 { margin-bottom: 0.25rem !important; }
}

@media (max-width: 767.98px) {
  /* 标题文字区域：减少上间距并保持字号 */
  .card-hover .flex.items-center .card-textcol { margin-top: 0.25rem !important; }
  .card-hover .flex.items-center > h3, .card-hover .card-textcol h3 { font-size: 0.9375rem !important; }
}

@media (max-width: 767.98px) {
  /* 再次明确：移动端标题行左对齐（覆盖此前居中设置） */
  .card-hover .flex.items-center { flex-direction: column !important; align-items: flex-start !important; }
  .card-hover .flex.items-center > h3 { align-self: flex-start !important; }
}

@media (max-width: 767.98px) {
  /* 移动端不显示卡片描述 */
  .card-hover p,
  .card .card-desc { display: none !important; }
}

@media (max-width: 767.98px) {
  /* 徽章显示在标题下方，采用正常流布局 */
  .card-hover .flex.items-center { position: static !important; padding-right: 0 !important; }
  .card-hover .card-tags {
    position: static !important;
    margin-top: 0.25rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    align-items: center !important;
    gap: 0.25rem !important;
    z-index: auto !important;
  }
}



@media (max-width: 767.98px) {
  /* 移动端将卡片左侧强调色条变细 */
  .card-hover .__accent_bar { width: 0.25rem !important; }
}








@media (max-width: 767.98px) {
  /* 描述区域：减少与标题的上间距、文字更小 */
  .card-hover .flex.items-center { margin-bottom: 0.1rem !important; }
  .card-hover p, .card .card-desc { font-size: 0.6875rem !important; }
}

@media (max-width: 767.98px) {
  /* 卡片标题与分类标签进一步缩小，提升信息层级清晰度 */
  .card-hover .flex.items-center > h3,
  .card-hover .card-textcol h3 { font-size: 0.875rem !important; font-weight: 500 !important; }
  .card-hover .card-tags .category-badge { font-size: 0.6875rem !important; padding: 0.2rem 0.4rem !important; }
}

@media (max-width: 767.98px) {
  /* 工具页面侧边栏布局：移动端统一为单列布局 */
  .grid.md\:grid-cols-\[1fr_320px\] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* 移动端隐藏侧边栏，保持与顶部菜单一致的体验 */
  .grid.md\:grid-cols-\[1fr_320px\] > aside {
    display: none !important;
  }
  
  /* 工具页面主内容区域在移动端占满宽度 */
  .grid.md\:grid-cols-\[1fr_320px\] > section {
    width: 100% !important;
  }
}