@charset "utf-8";
/* =========================================
   導入実績の一覧（archive-works.php）
   株式会社スリーエス

   ・見出しと本文枠は page-header.css / page.css と共通です
   ・カードは works.css の .works-card をそのまま流用しています
     （同じ指定を二重に書かないため、ここには書いていません）
   ・PC（1920-1440）を基準に記述
   ・デバイス区分は 1439 / 1199 / 700 / 349 のまま（増やしていません）
   ・色は :root の既存カラーのみ（新規カラーなし）
========================================= */

/* =========================================
   絞り込み
========================================= */
.works-filter {
  display: grid;
  gap: var(--space-20);
  margin-bottom: var(--space-40);
  padding: var(--space-20) var(--space-30);
  border-radius: 10px;
  background: var(--color-surface);
}

.works-filter__group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-20);
}

.works-filter__label {
  flex: 0 0 auto;
  color: var(--color-text-strong);
  font-size: var(--font-size-caption);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.works-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  min-width: 0;
}

/*
 * ボタンの見た目は common.css の .ts-chip です
 * （よくあるご質問の絞り込みと共通。ここには書きません）。
 * もう一度押すと解除されます。
 */

/* =========================================
   件数
========================================= */
.works-archive__count {
  margin-bottom: var(--space-20);
  color: var(--color-text-mute);
  font-size: var(--font-size-caption);
}

/* =========================================
   一覧（トップとは違い、スライドではなく並べます）
========================================= */
.works-archive__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-30);
}

.works-archive__item {
  min-width: 0;
}

/* =========================================
   該当なし
========================================= */
.works-archive__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-20);
  padding: var(--space-60) var(--space-20);
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
  color: var(--color-text-mute);
  text-align: center;
}

/* =========================================
   ページ送り
   WordPressが出力する .pagination / .page-numbers に当てています
========================================= */
.works-archive__list + .navigation.pagination,
.page-body .navigation.pagination {
  margin-top: var(--space-40);
}

.page-body .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
}

.page-body .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-base);
  font-size: var(--font-size-caption);
  font-weight: 700;
  line-height: 1;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.page-body a.page-numbers:hover,
.page-body a.page-numbers:focus-visible {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.page-body .page-numbers.current {
  border-color: var(--color-teal);
  background: var(--color-teal);
  color: var(--color-white);
}

.page-body .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* 「ページ」という読み上げ用の見出しは画面に出しません */
.page-body .pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================
   1199px以下：タブレット → 2列
========================================= */
@media screen and (max-width: 1199px) {
  .works-archive__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-20);
  }
}

/* =========================================
   700px以下：スマートフォン → 1列
========================================= */
@media screen and (max-width: 700px) {
  .works-filter {
    padding: var(--space-20);
  }

  /* 見出しとボタンが横に並ぶと窮屈なので、縦に積みます */
  .works-filter__group {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }

  .works-archive__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .works-archive__empty {
    padding: var(--space-40) var(--space-20);
  }

  .page-body .page-numbers {
    min-width: 40px;
    height: 40px;
  }
}

/* =========================================
   349px以下：mini SP
========================================= */
@media screen and (max-width: 349px) {
  .works-filter {
    padding: var(--space-10);
  }

  .works-filter__chip {
    padding: 6px var(--space-10);
  }
}