/*
 * News chip スタイル(.news-item / .news-segment / .news-category /
 * .news-federation / .news-tag / .news-date / .news-title)。
 * public/news index, show, public/pages top, admin/news show / index で
 * 共通利用する shared partial として独立。
 *
 * Phase 2.5 (PR #61) で welcome.scss から削除した際の集約先として
 * `_news_index.css` のみに移植され `_news_show.css` / admin.css へは未追加
 * だった移植漏れを補完するため、`_news_index.css` から chip 部分のみ
 * 切り出して 4 頁から共通参照する設計に変更。
 */

/* =====================================================
    News / List Item
===================================================== */
.news-item .news-item-head {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.news-item .news-item-head .news-date {
  color: rgb(175, 175, 175);
  position: relative;
  margin-right: 1rem;
  font-size: 14px;
  white-space: nowrap;
}

.news-item .news-item-head .news-date::after {
  content: "";
  border-right: 1px solid rgb(175, 175, 175);
  position: absolute;
  top: 50%; left: 100%;
  transform: translateY(-50%);
  height: 65%;
  padding-left: .75rem;
}

.news-item .news-item-head .news-segment {
  display: flex;
  flex-wrap: wrap;
  row-gap: .2rem;
}

.news-item .news-item-head .news-segment .news-category,
.news-item .news-item-head .news-segment .news-federation,
.news-item .news-item-head .news-segment .news-tag { font-weight: 700; }

.news-item .news-item-head .news-segment .news-category {
  min-width: 5.25rem;
  text-align: center;
  margin-left: .5rem;
  padding: .1rem .2rem;
  border-radius: 1rem;
  background: rgb(75, 75, 75);
  font-size: 9px;
  color: rgb(245, 245, 245);
}

.news-item .news-item-head .news-segment .news-federation {
  min-width: 5.25rem;
  text-align: center;
  margin-left: .5rem;
  padding: .1rem .2rem;
  border-radius: 1rem;
  background: rgb(245, 245, 245);
  font-size: 9px;
  color: rgb(75, 75, 75);
  border: 1px solid rgb(75, 75, 75);
}

.news-item .news-item-head .news-segment .news-tag {
  display: flex;
  align-self: center;
  margin-left: .75rem;
  font-size: 10px;
  gap: 0;
}
.news-item .news-item-head .news-segment .news-tag::before {
  content: '#';
}

.news-item .news-item-body .news-title { font-size: 18px; }

/* --- モバイル向け縮小 --- */
@media (max-width: 519px) {
  .news-item .news-item-head {
    margin-left: .2rem;
  }

  .news-item .news-item-head .news-date { font-size: 10px; }

  .news-item .news-item-head .news-segment .news-category { min-width: 4rem; font-size: 7px; }
  .news-item .news-item-head .news-segment .news-federation { min-width: 4rem; font-size: 7px; }
  .news-item .news-item-head .news-segment .news-tag {
    margin-left: .5rem;
    font-size: 8px;
    gap: .15rem;
  }
  .news-item .news-item-head .news-segment .news-tag::before { content: '#'; margin-right: -.15rem; }

  .news-item .news-item-body .news-title { font-size: 15px; }
}