/* ==========================================================================
   demo/b1-media.css — 中小企業のミカタメディア
   --------------------------------------------------------------------------
   比較デモ demo/media/2/（02 / COVER）から採用（三嶋指示）。
   クラス名も向こうと同じにしてある（後で差分を取りやすくするため）。
   ★向こうは紺地だったが、本実装は**地を白のまま**にする指示。
     色だけ明面へ移し、構造は同じ。

   ★役割は «次に読むものの入口»。本編の主張ではない。
     形も «短い帯» にして、読み飛ばしても筋が通るようにしている。

   ★配色の実測（地 = navy-50 #f6f5fa）：
       見出し・カテゴリ名  navy-800    16.50:1
       本文・説明          gray-600     5.23:1
       番号                navy-500      5.97:1
     いずれも基準（本文 4.5:1 ／ 大きい文字 3:1）を満たす。
     番号は装飾ではなく «並び順» を示す情報なので、
     navy-400（2.96:1）ではなく navy-500 を使っている。
   ========================================================================== */

/*
  地は --color-bg-tint（navy-50）。新しい色を足したのではなく、
  実績・グローカルとは が既に使っている面をそのまま使っている。
  白地のサービス／大切にしていること とは区別が付き、
  直前の支援実績（navy-800 の反転面）とは明暗で切り替わる。
*/
.media {
  background: var(--color-bg-tint);
}

/* ==========================================================================
   上段 — キービジュアル ＋ リード
   ========================================================================== */

.cover__top {
  display: grid;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: center;
}

/*
  ★キービジュアルを主役にするので 1.5 : 1。文章より画を大きく取る。
  ★実素材は 1900 × 760（2.5 : 1）の横長バナー。
    実測（1440px・コンテナ 1200px）：左の画像 696 × 278px、
    右のリード 2 段落＋ボタンが 302px。差 24px で釣り合っている。
    ★素材は一度 1920 × 684（2.8 : 1）で入り、差し替えで 2.5 : 1 になった。
      そのぶん画像が 248 → 278px に伸び、左右の差が 54 → 24px に縮んで
      むしろ釣り合いが良くなっている。
    ★16:9（1.78 : 1）まで縦が伸びると左が 391px になり、右（302px）を超えて
      «画が主役» が崩れる。**素材の比が変わったらこの比率も測り直すこと。**
*/
@media (min-width: 900px) {
  .cover__top {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}

/*
  ★画像もリンクにしている（三嶋指示）。
    画像は既定だとカーソルの形しか変わらず «押せる» ことが伝わらないので、
    hover で少し沈ませて手掛かりにする。
    フォーカスリングは base.css の :focus-visible が効くので、ここでは足さない。
  ★<a> を block にしないと、画像の下に行のディセンダぶんの隙間が出る。
*/
.cover__kv-link {
  display: block;
  transition: opacity 240ms ease;
}

.cover__kv-link:hover {
  opacity: 0.85;
}

.cover__kv {
  display: block;
  width: 100%;
  height: auto;
}

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

.cover__copy p {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  line-break: strict;
}

.cover__copy p + p {
  margin-top: var(--space-4);
}

.cover__action {
  margin-top: var(--space-6);
}

/* ==========================================================================
   下段 — 4 分類
   ========================================================================== */

.cover__cats {
  display: grid;
  gap: var(--space-8);
  margin: clamp(var(--space-10), 5vw, var(--space-16)) 0 0;
  padding: 0;
  list-style: none;
}

/*
  ★4 列に割るのは 900px 以上。
    説明文が 38〜41 字あり、1200px の内寸を 4 分割すると 1 列 282px。
    15px で 1 行 17 字前後 → 3 行に収まる（実測で 4 項目とも 3 行）。
    768〜899px では 1 列 170px 台になり 6 行を超えるので、2 列に落とす。
*/
@media (min-width: 600px) {
  .cover__cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }
}

@media (min-width: 900px) {
  .cover__cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/*
  上の罫が列の頭を示す。新聞のコラム見出しと同じ役割で、
  4 つが «並んだ 1 組» であることを罫の高さで揃えている。
  ★下や左右に罫を足さないこと。囲うとカードになり、
    «目次» ではなく «4 つの商品» に見える。
*/
.cover__cats li {
  padding-top: var(--space-5);
  border-top: var(--border-width-thick) solid var(--navy-800);
}

.cover__no {
  display: block;
  color: var(--navy-500);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.02em;
}

.cover__cats h3 {
  margin-top: var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}

.cover__cats p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-wrap: pretty;
  line-break: strict;
}