/* 11 お知らせ —— このページ専用の差分 */

/* ===== ページ見出し =====
   リード文がない見出し帯なので、共通 .page-head の下余白だけ詰める */
.news-head { padding-bottom: 40px; }

/* ===== カテゴリの絞り込み =====
   遷移せずその場で絞り込むので <a> ではなく <button>。処理は js/nav.js。 */
.news-filter { padding: 40px var(--gutter) 24px; }
.news-filter__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* li は器としてだけ置き、ボタン自体を並びの子にする */
.news-filter__list > li { display: contents; }
.news-filter__item {
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-body);
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 20px;
  cursor: pointer;
  appearance: none;
}
.news-filter__item:hover { color: var(--gold); border-color: var(--gold); }
.news-filter__item--current,
.news-filter__item--current:hover {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

/* ===== 一覧 =====
   共通の .news-list / .news-item を、一覧ページ用に少しだけ広げる */
.news-archive { padding: 16px var(--gutter) 56px; }

.news-list--archive .news-item {
  grid-template-columns: minmax(0, 130px) minmax(0, 170px) minmax(0, 1fr);
  gap: 28px;
  padding: 26px 0;
}
/* 一覧の上端と下端は太めの罫（--border）で締める。
   上端の罫は器側に持たせる。絞り込みで先頭行が消えても罫が残るようにするため。 */
.news-list--archive { border-top: 1px solid var(--border); }
.news-list--archive .news-item:last-child { border-bottom-color: var(--border); }

/* 絞り込みで隠した行。.news-item の display 指定に勝たせる必要がある */
.news-list--archive .news-item[hidden] { display: none; }

.news-list--archive .news-item__date { font-size: 12.5px; }
.news-list--archive .news-item__tag { padding: 6px 0; }
.news-list--archive .news-item__title { font-size: 15px; }

/* ===================== タブレット ===================== */
@media (max-width: 1024px) {
  .news-head { padding-bottom: 32px; }
  .news-filter { padding: 32px var(--gutter) 20px; }
  .news-archive { padding: 16px var(--gutter) 48px; }
  .news-list--archive .news-item { gap: 20px; padding: 22px 0; }
}

/* ===================== スマホ =====================
   SPアートボードでは絞り込みが見出し帯の中に入っているため、
   見出し帯の下罫を消して絞り込みの下に送る。 */
@media (max-width: 767px) {
  .news-head {
    padding-bottom: 16px;
    border-bottom: none;
  }

  .news-filter {
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--border-light);
  }
  .news-filter__list { gap: 8px; }
  .news-filter__item { font-size: 11.5px; padding: 7px 14px; }
  .news-filter__item--current { font-size: 11.5px; padding: 8px 14px; }

  .news-archive { padding: 20px 20px 32px; }

  .news-list--archive { gap: 0; border-top: 1px solid var(--border); }
  /* responsive.css は行の上に罫を引くが、絞り込みがあるので下罫方式に揃える */
  .news-list--archive .news-item {
    gap: 8px;
    padding: 18px 0;
    border-top: none;
    border-bottom: 1px solid var(--border-light);
  }
  .news-list--archive .news-item:last-child { border-bottom: 1px solid var(--border); }
  .news-list--archive .news-item__date { font-size: 11px; }
  .news-list--archive .news-item__tag { padding: 0; }
  .news-list--archive .news-item__title { font-size: 13.5px; line-height: 1.8; }
}