/* ==========================================================================
   rows.css — 罫線で区切った «行» の一覧
   --------------------------------------------------------------------------
   このサイトの基本の一覧形式。カード（角丸＋枠線の箱）を使わない代わりに、
   1px の横罫で行を区切る。トップページの «勝ち筋モデル» の一覧
   （b1-method.css の .method__list）と同じ骨格を汎用化したもの。

   1 行の中身：番号（任意） ｜ 欧文キー（任意） ｜ 見出し ｜ 本文
   変種：
     .rows            縦に積む（既定）
     .rows--cols      900px 以上で «番号 ｜ 見出し ｜ 本文» の 3 列に割る
     .rows--grid-2    768px 以上で 2 列のグリッド。各セルは上の罫だけ持つ
     .rows--grid-3    同 3 列
   状態：
     .rows__item.is-key   強調する行。上の罫を太くする（塗らない。塗るとカードになる）
   反転面：.on-inverse の中では罫・番号の色が自動で切り替わる
   ========================================================================== */

.rows {
  border-top: var(--border-width) solid var(--color-border);
}

.rows__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* 番号が無い行は 1 列 */
.rows__item:not(:has(.rows__no)) {
  grid-template-columns: minmax(0, 1fr);
}

/*
  番号。«読ませる» ものではなく位置の目印なので、色を落として見出しより後ろに置く。
  ★落とせる下限は navy-400。navy-300 は白地で 1.91:1 しかなく、大きい文字の 3:1 に
    届かない（実測）。navy-400 は 3.21:1。
  ★太さは 700。--text-2xl（22→26px）は bold なら WCAG の «大きい文字» に当たり 3:1 で足りる。
    500 にすると 22px は通常文字扱いになって 4.5:1 が要り、navy-400 では足りなくなる。
*/
.rows__no {
  color: var(--navy-400);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}

.on-inverse .rows__no {
  color: var(--navy-300); /* navy-800 の上で 9.35:1 */
}

.rows__key {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

.rows__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  word-break: auto-phrase;
  /*
    ★行を均す。原稿の項目名は長さがまちまちで、SP（1 列・使える幅 320px）では
      «行末に 2 文字だけ残る» 折れ方が出る。実測（/reason/ のポリシー 10 条件・375px）：
        「経営者と同じ目線で対等に議論を｜行う」   17 字 / 20.3px = 345px 必要
        「経営者のモチベーションを上げる｜存在」   同上
      auto-phrase だけでは «入るだけ入れて残りを落とす» ので 15 + 2 になる。
      balance を足すと 9 + 8 前後に割れ、孤立が消える（実測で 2 件とも解消）。
    ★サイズで解いていないのは、同じ一覧に 13〜20 字が混在するため。
      いちばん長い 20 字に合わせると 15.5px となり、本文 17px を下回る。
    ★b1 は .rows を使っていないので影響ゼロ（1425 / 375px とも差分なしを実測）。
    ★b1 の .method__q / .method__body でも同じ手を使っている。新しい手ではない。
  */
  text-wrap: balance;
}

/* 見出しの下に添える一行（«こんなとき：…» など）。行動を促す色 */
.rows__sub {
  margin-bottom: var(--space-3);
  color: var(--color-action);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.on-inverse .rows__sub {
  color: var(--color-text-on-inverse-muted);
}

.rows__body {
  max-width: var(--measure);
  color: var(--color-text);
}

.rows__item.is-key {
  border-top: var(--border-width-thick) solid var(--color-border-accent);
  margin-top: -1px; /* 上の行の罫と重ねて二重線にしない */
}

/* --------------------------------------------------------------------------
   .rows--cols — 900px 以上で 3 列
   番号 ｜ 欧文キー＋見出し ｜ 本文
   .rows__main で «キー＋見出し＋本文» を包み、display: contents で列に流す
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .rows--cols .rows__item {
    grid-template-columns: 4rem minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .rows--cols .rows__item:not(:has(.rows__no)) {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }

  .rows--cols .rows__main {
    display: contents;
  }

  .rows--cols .rows__key {
    grid-column: -3;
    grid-row: 1;
    margin-bottom: 0;
  }

  .rows--cols .rows__title {
    grid-column: -3;
    grid-row: 2;
    margin-bottom: 0;
  }

  /* キーが無ければ見出しが 1 行目から */
  .rows--cols .rows__main:not(:has(.rows__key)) .rows__title {
    grid-row: 1 / span 2;
  }

  .rows--cols .rows__sub {
    grid-column: -2;
    grid-row: 1;
    margin-bottom: 0;
  }

  .rows--cols .rows__body {
    grid-column: -2;
    grid-row: 2;
  }

  .rows--cols .rows__main:not(:has(.rows__sub)) .rows__body {
    grid-row: 1 / span 2;
  }
}

/* --------------------------------------------------------------------------
   .rows--grid-2 / .rows--grid-3 — グリッド
   各セルは «上の罫» だけを持つ。下の罫は持たない（列によって行数が揃わないため）
   -------------------------------------------------------------------------- */
.rows--grid-2,
.rows--grid-3 {
  display: grid;
  gap: var(--space-8);
  border-top: 0;
}

.rows--grid-2 .rows__item,
.rows--grid-3 .rows__item {
  display: block;
  padding-block: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: 0;
}

.rows--grid-2 .rows__no,
.rows--grid-3 .rows__no {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
  line-height: 1;
}

.rows--grid-2 .rows__title,
.rows--grid-3 .rows__title {
  font-size: var(--text-xl);
}

@media (min-width: 768px) {
  .rows--grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-10);
  }

  .rows--grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10) var(--space-8);
  }
}