/* study999-mobile-category-title-height-v1
   仅调整手机版课程类目页的「中文课程 / 一年级」等标题容器。
*/

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

  /* 标题所在白色容器：压缩上下留白。 */
  #app > section.card.study999-category-title-compact {
    box-sizing: border-box !important;

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

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

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

    border-radius: 9px !important;
  }

  /* 类目名称紧凑显示，不再占用额外高度。 */
  #app > section.card.study999-category-title-compact
  > 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-category-title-fixed-height-v2
   只处理手机版课程类目页最上方的分类标题栏。
*/

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

  /*
   如果 #app 使用 Grid 或 Flex 布局，
   避免顶部标题卡片被自动拉高。
  */
  html body #app:has(
    > section.study999-category-title-compact
  ) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    align-content: start !important;
    align-items: start !important;
  }

  /*
   课程类目标题容器固定为 38px 高。
   不再仅依靠减少 padding 来压缩高度。
  */
  html body #app
  > section.card.study999-category-title-compact {
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 38px !important;

    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

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

    overflow: hidden !important;
    border-radius: 9px !important;
  }

  /* 标题居中于 38px 高的容器内。 */
  html body #app
  > section.card.study999-category-title-compact
  > h1 {
    display: block !important;
    flex: 0 1 auto !important;

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

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

    font-size: clamp(16px, 4.5vw, 19px) !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

}