/* study999-mobile-category-list-v1
   仅压缩手机版「中文课程 / 一年级」等章节课程列表。
   不影响课文阅读页、课程库首页和电脑版。
*/

@media screen and (max-width: 720px) {

  /*
   章节课程列表带有 #catalog-back 返回按钮。
   使用这个标识，避免误改其他页面的 .card。
  */

  /* 每一课的白色容器：减少上下留白。 */
  #app:has(#catalog-back) > section.card {
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    margin-bottom: 7px !important;
    border-radius: 10px !important;
  }

  /* 页面顶部「中文课程 / 一年级」标题。 */
  #app:has(#catalog-back)
  > section.card h1 {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.2 !important;
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  /* 每一课的标题：缩小标题上下占用的空间。 */
  #app:has(#catalog-back)
  > section.card h2 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  /* 课程简介：保留全部内容，缩小行距及留白。 */
  #app:has(#catalog-back)
  > section.card p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
  }

  /* 开始学习、返回课程库：
     保留原有颜色及功能，缩小多余的外边距。 */
  #app:has(#catalog-back)
  > section.card button {
    box-sizing: border-box !important;
    min-height: 34px !important;
    height: auto !important;
    margin: 2px 0 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

}