/* 作品列表：竖屏、横屏分组排，避免两种比例混在一张网格里高低错落。 */

.works-page { padding: calc(var(--header-h) + 96px) 0 var(--sp-section); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-lg); }

.chip {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.chip:hover { color: var(--c-text-strong); }
.chip.is-active { color: var(--c-text-strong); border-color: var(--c-primary); background: var(--c-primary-subtle); }

.works-group { margin-top: var(--sp-xl); }
.works-group[hidden] { display: none; }
.group-title { font-size: 15px; font-weight: 500; letter-spacing: 0.2em; color: var(--c-text-4); }

.works-grid { display: grid; gap: 20px; margin-top: var(--sp-md); }
.works-grid.is-portrait { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.works-grid.is-landscape { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* 网格里按宽度定尺寸（作品墙里按行高定尺寸） */
.works-grid .work-card { height: auto; width: 100%; }
.works-grid .work { min-width: 0; }

.works-empty { margin-top: var(--sp-xl); color: var(--c-text-3); }

@media (max-width: 560px) {
  .works-grid.is-portrait { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .works-grid.is-landscape { grid-template-columns: 1fr; }
}