/* study999-mobile-catalog-compact-v1
   仅压缩手机版课程库首页的大分类与内部类目。
   不修改章节课文列表和课文阅读页。
*/

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

  /*
   课程库中的大分类具有以下结构：
   section.card
     h2（中文课程、英文课程）
     div（内部课程分类网格）

   通过该结构识别课程库大分类，
   不使用通用的 .card 选择器。
  */

  /* 中文课程、英文课程的大容器。 */
  #app > section.card:has(
    > h2 ~ div[style*="grid-template-columns"]
  ) {
    box-sizing: border-box !important;

    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 9px 10px !important;
    margin: 0 0 8px !important;

    align-content: start !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;

    border-radius: 11px !important;
  }

  /* 中文课程、英文课程标题：靠近容器顶部。 */
  #app > section.card:has(
    > h2 ~ div[style*="grid-template-columns"]
  ) > h2 {
    display: block !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    font-size: 17px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  /* 内部课程分类区域紧跟标题，不留大块空白。 */
  #app > section.card:has(
    > h2 ~ div[style*="grid-template-columns"]
  ) > div[style*="grid-template-columns"] {
    box-sizing: border-box !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    gap: 7px !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: start !important;
  }

  /* 一年级、二年级等内部分类卡片。 */
  #app > section.card:has(
    > h2 ~ div[style*="grid-template-columns"]
  ) > div[style*="grid-template-columns"]
  > section.card {
    box-sizing: border-box !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 9px 10px !important;
    margin: 0 !important;

    align-self: start !important;
    align-content: start !important;
    justify-content: flex-start !important;

    border-radius: 9px !important;
  }

  /* 内部分类标题：减少上下空白。 */
  #app > section.card:has(
    > h2 ~ div[style*="grid-template-columns"]
  ) > div[style*="grid-template-columns"]
  > section.card > h3 {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  /* 内部分类介绍文字。 */
  #app > section.card:has(
    > h2 ~ div[style*="grid-template-columns"]
  ) > div[style*="grid-template-columns"]
  > section.card > p {
    margin: 2px 0 5px !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* 内部分类操作按钮：保持原有功能和配色。 */
  #app > section.card:has(
    > h2 ~ div[style*="grid-template-columns"]
  ) > div[style*="grid-template-columns"]
  > section.card > button {
    box-sizing: border-box !important;

    min-height: 32px !important;
    height: auto !important;

    margin: 3px 0 !important;
    padding: 5px 10px !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
  }
}