/* ==========================================================================
   demo/b1-news.css — お知らせ
   --------------------------------------------------------------------------
   ★この節は «読ませる» ものではなく «更新されている証拠»。
     だから見出しに面積を割かず、一覧を主にする。
     左 1 : 右 2.6 で、右の一覧が明らかに主に見える比率にしている。

   ★配色（地 = 白）
       見出し・記事タイトル navy-800  17.90:1
       日付・カテゴリ       gray-600   5.68:1
     いずれも基準（本文 4.5:1）を満たす。

   ★地は白。直前の採用・パートナーが紺のベタなので明暗で切り替わる。
     （ミカタメディア navy-50 → 採用・パートナー navy-800 → ここ 白 → フッター紺）
   ========================================================================== */

.news {
  background: var(--color-bg);
}

.news__layout {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-12));
}

/*
  ★左右に割るのは 900px 以上。
    それ未満だと右の一覧が痩せて、記事タイトル（28〜46 字）が 4 行を超える。
*/
@media (min-width: 900px) {
  .news__layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.news__head {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/*
  見出し。原稿に添える一文が無いので «お知らせ» だけ。
  ★他の節の .sec-head__label と同じ «短い罫» を頭に付けて、
    見出しの家族に見えるようにしている。ただしサイズは h2 相当。
*/
.news__title {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text-strong);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.news__title::before {
  width: var(--space-8);
  height: var(--border-width-thick);
  content: "";
  background-color: var(--navy-800);
}

.news__more a {
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.news__more {
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   一覧
   ========================================================================== */

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

.news__list li {
  border-bottom: var(--border-width) solid var(--color-border);
}

.news__list a {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  text-decoration: none;
  transition: background-color 240ms ease;
}

/* 各列の開始位置を動かさず、背景色だけで選択状態を伝える。 */
.news__list a:hover,
.news__list a:focus-visible {
  background: var(--color-bg-tint);
}

/*
  ★日付・カテゴリの列は 13rem 固定。
    «プレスリリース»（7 字）がいちばん長く、13px で 91px。
    日付 88px ＋ 隙間 12px ＋ 91px = 191px ≒ 12rem に対し、余裕を見て 13rem。
    auto にすると行ごとに列幅が変わり、タイトルの頭が揃わない。
*/
@media (min-width: 768px) {
  .news__list a {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* 十分な横幅がある画面では、日付・カテゴリ・記事名を各1行で見せる。 */
@media (min-width: 1200px) {
  .news__meta,
  .news__text {
    white-space: nowrap;
  }
}

.news__meta {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}

/* 日付の字幅に左右されず、カテゴリの開始位置を揃える。 */
.news__meta time {
  width: 5rem;
}

/* カテゴリ。枠線の箱にはしない（カード UI を使わない方針）。面の塗りだけ */
.news__cat {
  padding: 1px var(--space-2);
  color: var(--navy-700);
  background: var(--navy-100);
  text-align: center;
  white-space: nowrap;
}

.news__text {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  line-break: strict;
}

@media (prefers-reduced-motion: reduce) {
  .news__list a {
    transition: none;
  }
}