/* ==========================================================================
   stats.css — 実績帯（FV 直下）
   「実績を大きく見せる」方針の中核。数値は tabular-nums で桁を揃える。
   数値の定義は includes/config.php の glcl_stats()。ここにベタ書きしない。
   ========================================================================== */

/* 実績帯。FV 直後に置き、反転させて面で押さえる。
   マークアップは includes/stats-band.php に共通化してある。 */
.stats-band {
  padding-block-start: clamp(3rem, 6vw, 5rem);
  padding-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

/*
  「実績」。
  ★大きさ・色は変えない。--text-sm と --color-text-muted は
    このプロジェクトで「ラベル」に割り当てている値で、そこは合っている。

  問題は別のところにあった。項目のラベル（累計支援実績・顧客満足度…）も
  まったく同じ 15px / --color-text-muted なので、「実績」が
  セクションの目印ではなく5つ目のラベルとして読めてしまっていた。

  そこで、この役割にすでにあるパターン（.sec-head__label / .fv1__eyebrow の
  「短い罫 ＋ ラベル」）に揃える。装飾を足したのではなく、
  同じ役割の要素で1つだけ形が違っていたのを揃えた。

  中央寄せにはしない。CLAUDE.md の「セクション見出しを中央寄せしない」
  （才流との差別化）に加えて、数字が中央揃えなので、見出しまで中央に置くと
  2列目の真上に乗り、行全体の見出しではなくその列の見出しに見えてしまう。
*/
.stats-band__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}

/* 罫は紺。紺地の帯（案A・案B）では .on-inverse が白に振る */
.stats-band__title::before {
  content: "";
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--border-width-thick);
  background-color: var(--color-border-accent);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) 0;
}

.stats__item {
  padding-inline: var(--space-5);
  border-inline-start: var(--border-width) solid var(--color-border);
  text-align: center;
}

/* 2 カラム時は各行の左端だけ罫線を消す */
.stats__item:nth-child(odd) {
  border-inline-start: 0;
}

.stats__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.stats__value {
  display: flex;
  /* 中央揃え。数字と単位はベースラインで揃えたいので flex のまま中央に寄せる */
  justify-content: center;
  align-items: baseline;
  gap: 0.15em;
  color: var(--color-text-strong);
  /* 実績を大きく見せる方針。--text-5xl から一段上げた。
     最大 68px のとき Oswald の「1,330」は約 146px。
     4 カラム時の 1 枠は約 216px なので単位を足しても収まる。 */
  font-size: var(--text-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.stats__unit {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
}

.stats__note {
  margin-top: var(--space-4);
  text-align: end;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  /* 4 カラムでは先頭だけ罫線なし。odd の指定を打ち消す */
  .stats__item:nth-child(odd) {
    border-inline-start: var(--border-width) solid var(--color-border);
  }

  .stats__item:first-child {
    border-inline-start: 0;
  }

  .stats__item {
    padding-inline: var(--space-8);
  }
}

/* 白地の実績帯を上下の罫で区切る。導入直後で使う場合は余白も揃える。 */
.stats-band--ruled {
  padding-block-start: var(--space-10);
  padding-block-end: var(--space-6);
  border-block: 1px solid var(--color-border);
}

.page-intro:has(+ .stats-band--ruled) {
  padding-bottom: var(--space-20);
}

/* 3項目用。SPは1列、768px以上は3列で表示する。 */
.stats-band--cols-3 .stats {
  grid-template-columns: minmax(0, 1fr);
}

.stats-band--cols-3 .stats__item {
  border-inline-start: 0;
}

@media (min-width: 768px) {
  .stats-band--cols-3 .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-band--cols-3 .stats__item {
    border-inline-start: var(--border-width) solid var(--color-border);
  }

  .stats-band--cols-3 .stats__item:first-child {
    border-inline-start: 0;
  }
}