/* assets/css/components/news.css
   Mobile-first: variables.css の定義を参照する形に統一
*/

/* ---------------------------
   Base (mobile-first)
   --------------------------- */

/* ニュース一覧（リストリセット） */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 各ニュースアイテム（縦積み、モバイル向け余白） */
.news-item {
  padding: 12px 12px;
  border-bottom: 1px solid var(--color-divider);
  display: block;
  transition: background-color 0.12s ease;
}

/* 最後のアイテムの下線を消す */
.news-list .news-item:last-child {
  border-bottom: none;
}

/* メタ情報（日時・カテゴリ） — モバイルでは縦並び寄せ */
.news-item__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  color: var(--color-muted);
  font-size: 0.9rem;
  flex-wrap: wrap;
}

/* 日付 */
.news-item__date {
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* カテゴリ（初期は非表示） */
.news-item__category {
  display: inline-block;
  padding: 4px 8px;
  background: transparent;                  /* 背景透明 */
  color: #f38d2e;               /* テキスト色 */
  border: 1px solid #f38d2e;    /* 枠線 */
  border-radius: 0;
  font-size: 0.75rem;
  line-height: 1;
}


/* 非表示ユーティリティ（必要時に外す） */
/*
.is-hidden {
  display: none !important;
}


/* タイトル */
.news-item__title {
  margin: 0;
  font-size: 14px;
  color: var(--color-ink);
  font-weight: 450;
  line-height: 1.4;
}

/* 行ホバー（タッチ端末では無視されるがデスクトップで有効） */
.news-item:hover {
  background-color: var(--news-item-hover);
}

/* コンパクト表示（トップ等） */
.news-list--compact .news-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-divider);
}
.news-list--compact .news-item:last-child {
  border-bottom: none;
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .news-item { transition: none !important; }
}

/* ---------------------------
   Pagination (mobile-first)
   --------------------------- */

.pagination {
  margin-top: 16px;
  margin-bottom: calc(var(--gap) * 1.5); /* 例: 24px * 1.5 = 36px */
  text-align: center;
  padding: 8px 0;
}

.pagination__list {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
}

/* 構造用フック（必要なら margin を追加） */
.pagination__item {}

/* ページ番号リンク（丸ボタン） — モバイル基準の小さめサイズ */
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 999px;
  background-color: #f2f2f2;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

/* ホバー/フォーカス */
.pagination__link:hover,
.pagination__link:focus {
  background-color: var(--color-accent);
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}

/* フォーカス時の下線を消し、代替の視覚的フォーカスを表示 */
.pagination__link,
.pagination__link:link,
.pagination__link:visited {
  text-decoration: none;
}

.pagination__link:focus,
.pagination__link:focus-visible {
  text-decoration: none;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.18);
  border-radius: 6px;
}

/* アクティブページ */
.pagination__link.is-active,
.pagination__link[aria-current="page"] {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* 次へリンクはテキスト風（モバイルでは幅自動） */
.pagination__next .pagination__link {
  width: auto;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* ドット（省略） */
.pagination__dots {
  color: var(--color-muted);
  padding: 0 6px;
}

/* prefers-reduced-motion for pagination */
@media (prefers-reduced-motion: reduce) {
  .pagination__link { transition: none !important; transform: none !important; }
}

/* ---------------------------
   Larger screens (min-width breakpoints)
   --------------------------- */

/* タブレット以上 */
@media (min-width: 768px) {
  .news-item {
    padding: 16px 18px;
  }
  .news-item__title {
    font-size: 1.05rem;
  }
  .news-item__meta {
    gap: 12px;
    font-size: 0.95rem;
  }
  .pagination {
    margin-top: 24px;
  }
  .pagination__link {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .pagination__next .pagination__link {
    padding: 8px 12px;
  }
}

/* デスクトップ大画面 */
@media (min-width: 1024px) {
  .news-item {
    padding: 18px 24px;
  }
  .news-item__title {
    font-size: 1.1rem;
  }
}