/* 资源分类固定在标题下方，从左侧开始换行，不向右溢出。 */
.resource-mode .heading-main {
  display: grid;
  justify-content: initial;
  gap: 14px;
}

.resource-mode .resource-subnav {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}

/* 中等宽度开始将搜索框收成图标，避免覆盖分类按钮。 */
/* 提前收起完整搜索框，给“免费资源”保留完整可见宽度。 */
@media (max-width: 1360px) {
  .top-toolbar input {
    display: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  .mobile-search-toggle {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid #3a423b;
    border-radius: 12px;
    background: #282d29;
    color: #d8ded6;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-search-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .top-toolbar.search-open nav {
    display: none;
  }

  .top-toolbar.search-open input {
    display: block;
  }

  .top-toolbar.search-open .mobile-search-toggle {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* 标题在左、排序在右；发生换行时排序仍靠右。 */
  .heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 18px;
  }

  .heading-main {
    min-width: 0;
  }

  .catalog-filters {
    grid-column: 2;
    justify-self: end;
    margin-left: auto;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .heading {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .heading-main,
  .catalog-filters {
    grid-column: 1;
  }

  .catalog-filters {
    justify-self: end;
  }

  .resource-mode .resource-subnav {
    width: 100%;
    gap: 7px;
  }
}