/* FILE: assets/css/page-news.css
   NEWS 一覧（/news/）・NEWS 詳細（/news/{slug}/）・トップの NEWS セクション

   ★サムネイルの高さを揃えるルールは base.css の「サムネイルの共通枠」に集約している。
     ここで比率や枠線を重ねて指定しないこと。 */

/* =========================================================
   NEWS 一覧（トップの抜粋と共用）
   ========================================================= */

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--line-width) solid var(--color-line);
}

.news-list__item {
  border-bottom: var(--line-width) solid var(--color-line);
}

/* 日付とタイトルを2カラムで並べ、日付の幅を固定して行頭を揃える。
   ★padding を 0 にしないこと。行が詰まって読みにくくなる */
.news-list__link {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) var(--space-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}

.news-list__link:hover,
.news-list__link:focus-visible {
  background-color: var(--color-surface);
}

.news-list__date {
  font-size: var(--fs-sm);
  color: var(--color-ink-sub);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.news-list__title {
  font-size: var(--fs-base);
  line-height: 1.7;
  overflow-wrap: break-word;
}

.news-list__link:hover .news-list__title,
.news-list__link:focus-visible .news-list__title {
  text-decoration: underline;
}

/* トップページの抜粋。一覧より少しだけ行を詰める */
.news-list--compact .news-list__link {
  padding-block: var(--space-sm);
}

.news-more {
  margin-top: var(--space-lg);
}

/* 狭い画面では日付を上、タイトルを下の2行にする */
@media (max-width: 767px) {
  .news-list__link {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
  }
}

/* =========================================================
   NEWS 詳細
   ========================================================= */

.news-article {
  background-color: var(--color-surface);
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  max-width: 860px;
}

.news-article__date {
  font-size: var(--fs-sm);
  color: var(--color-ink-sub);
  letter-spacing: 0.02em;
}

.news-article__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  margin-top: var(--space-xs);
  padding-bottom: var(--space-sm);
  border-bottom: var(--line-width) solid var(--color-ink);
}

/* 画像は入る記事と入らない記事があるため、余白は画像側に持たせる。
   画像が無い記事でも本文の始まりがズレないよう、本文側の上余白は固定 */
.news-article__media {
  margin-top: var(--space-lg);
}

.news-article__body {
  margin-top: var(--space-lg);
}

.news-article__body p + p {
  margin-top: var(--space-md);
}

.news-article__back {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--line-width) solid var(--color-line);
}

@media (max-width: 767px) {
  .news-article {
    padding: var(--space-md);
  }
  .news-article__title {
    font-size: var(--fs-lg);
  }
  .news-article__back {
    margin-top: var(--space-lg);
  }
  .news-article__back .bar-label {
    display: block;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}