/* 施工の記録（一覧）
   デザインの正は brand/design-system.md と home-v2/home.css。
   ここには «一覧ページにしか無いもの» だけを書く（カードの見え方はトップの事例と揃える）。
   🚨 WordPress（SWELL）の CSS には依存しない。 */

/* ── 見出し ───────────────────────────────────────────── */
.page-head h1 {
  margin: 10px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 29px);
  letter-spacing: .08em;
  line-height: 1.6;
  white-space: nowrap;
}

/* ── 絞り込み ─────────────────────────────────────────── */
.filter {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.filter-btn {
  appearance: none;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--ink-faint);
  font-family: var(--jp);
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.8;
  cursor: pointer;
}
.filter-btn.is-on { color: var(--ink); }

/* 何で絞っているかを、軸ごとに «タイトル» で示す（Ry 指示 2026-10-19）。
   文字の下に短い罫線を添える。選んでいるものに下線は付けない（Ry 指示 2026-10-19） */
.filter-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--jp);
  font-size: 12px;
  letter-spacing: .14em;
  text-align: center;
}
.filter-title::after {
  content: "";
  display: block;
  width: 28px;
  margin: 10px auto 0;
  border-top: 1px solid var(--ink);
}
.filter-title--col { margin-top: 26px; }
.filter-count {
  margin: calc(var(--gap-sp) / 2) 0 0;
  color: var(--ink-faint);
  font-family: var(--jp);
  font-size: 12px;
  letter-spacing: .1em;
  text-align: center;
}

/* ── カード ───────────────────────────────────────────── */
.w-grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap-sp) * 1.4);
}
@media (min-width: 720px) {
  .w-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.w-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.w-card figure {
  margin: 0;
}
/* 🚨 事例の写真は «横長» で固定して切り取る（Ry 指示: 施工の記録は横長写真オンリー）。
   トップのカルーセル（home.css の .r-car__item figure img）と同じ 4:3 に揃える。
   ここだけ 3:4（縦長）になっていて、SP で一覧だけ縦に伸びていた（2026-10-18 修正）。 */
.w-card figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.w-cap {
  margin-top: calc(var(--gap-sp) / 2.4);
}
.w-cap .cap-kind {
  margin: 0 0 2px;
  color: var(--ink-faint);
  font-family: var(--jp);
  font-size: 11px;
  letter-spacing: .1em;
}
.w-cap h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .06em;
  line-height: 1.7;
}
.w-cap .w-desc {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-family: var(--jp);
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 2;
}
.w-cap .cap-price {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-family: var(--jp);
  font-size: 13px;
  letter-spacing: .04em;
  text-align: right;
}
.w-cap .cap-who {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-family: var(--jp);
  font-size: 12px;
  letter-spacing: .08em;
  text-align: right;
}

.w-note {
  margin: var(--gap-sp) 0 0;
  color: var(--ink-faint);
  font-family: var(--jp);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 2;
  text-align: center;
}

/* 中古 / 賃貸 / ペット のタグ（Ry 指示 2026-10-18）
   中古＝黒、賃貸＝白、ペット＝ベージュ。角は丸めない（renovy は四角） */
.w-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  font-family: var(--jp);
  font-size: 11px;
  letter-spacing: .12em;
  line-height: 1;
}
.w-tag--used { background: var(--ink); color: var(--bg); }
.w-tag--rent { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); }
.w-tag--pet  { background: #e4dbcd; color: var(--ink); }

/* コレクションの絞り込みは 2 行目。分類より一段弱く見せる */
.filter--col {
  margin-top: 0;
  flex-wrap: wrap;
  gap: 18px;
}
.filter--col .filter-btn { font-size: 13px; }

/* 🚨 一覧の余白を詰める（Ry 指示 2026-10-18）。
   トークンの --block-sp 168px は «読み物» 向けで、一覧には広すぎた。
   このページだけ狭める（他のページのトークンは触らない）。 */
.band { padding-block: 72px; }
.band-soft { padding-block: 44px; }
/* 2026-10-19: 0 → 上だけ空ける。ヘッダー直下でタイトルが詰まって見えたため（Ry 指示） */
.page-head { padding-block: 40px 0; }
.w-grid { gap: 56px; }
.filter-count { margin-top: 20px; }
.w-note { margin-top: 40px; }

@media (hover: hover) and (pointer: fine) {
  .page-head { padding-block: 64px 0; }
  /* 一覧の写真帯だけ読み幅を広げる。見出し・絞り込み・相談帯は共通幅のまま */
  .band[aria-label="事例一覧"] > .block {
    width: min(1120px, calc(100% - var(--pad) * 2));
  }
}

/* 読み込み中 / 読めなかった / 公開が無い を出す場所。
   🚨 «読めていない» と «0 件» を同じ見た目にしない（文で分ける） */
.w-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--gap, 20px) 0;
  text-align: center;
  font-family: var(--jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
}
.w-state small { display: inline-block; margin-top: 4px; opacity: .6; font-size: 12px; }
.w-state .filter-btn { margin-top: 12px; }