/* study999-mobile-guest-category-title-v1 */

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

  /*
   识别课程类目页：
   顶部容器含有类目名称 h1，
   后面紧接的是带「开始学习」按钮的课文列表。
   不依赖已经删除的「返回课程库」按钮。
  */
  body:not(.study999-logged-nav)
  #app > section.card:has(> h1):has(
    ~ section.card > button[data-lesson]
  ) {
    box-sizing: border-box !important;

    display: block !important;

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

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

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

    border-radius: 9px !important;
  }

  /* 「中文课程 / 一年级」等标题紧贴容器显示。 */
  body:not(.study999-logged-nav)
  #app > section.card:has(> h1):has(
    ~ section.card > button[data-lesson]
  ) > h1 {
    display: block !important;

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

    margin: 0 !important;
    padding: 0 !important;

    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.2 !important;
  }

}


/* study999-guest-lesson-cards-compact-v2
   未登录手机版：压缩课程类目页中每篇课文的白色卡片。
   注意：这里调整的是第一课、第二课等卡片，
   不是最上方的「中文课程 / 一年级」标题栏。
*/

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

  /*
   通过顶部课程类目标题标识，限定当前页面。
   不依赖已删除的「返回课程库」按钮，
   也不依赖未登录时可能被隐藏的「开始学习」按钮。
  */
  html body:not(.study999-logged-nav)
  #app > section.study999-category-title-compact
  ~ section.card:has(> h2) {
    box-sizing: border-box !important;

    display: block !important;

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

    aspect-ratio: auto !important;

    flex: 0 0 auto !important;
    align-self: auto !important;
    align-content: normal !important;
    justify-content: flex-start !important;

    padding: 10px 12px !important;
    margin: 0 0 7px !important;

    border-radius: 10px !important;
  }

  /* 第一课、第二课等标题：缩小上下空白。 */
  html body:not(.study999-logged-nav)
  #app > section.study999-category-title-compact
  ~ section.card:has(> h2) > h2 {
    display: block !important;

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

    margin: 0 !important;
    padding: 0 !important;

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

  /* 如有课文介绍，减少间距但不删除文字。 */
  html body:not(.study999-logged-nav)
  #app > section.study999-category-title-compact
  ~ section.card:has(> h2) > p {
    height: auto !important;
    min-height: 0 !important;

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

}