/* components/counter.css — 実績/数値カード（StatCard）
   手描き風カード枠（common/s03-card-bg.png）＋アイコン＋大きな数値＋ラベル。
   トップ（実績カウンター）・採用（数字で分かるippo）など複数ページで共通利用。
   見出し・セクションラッパーはページ側に置き、ここはカードグリッドのみ。 */

.c-counter__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  max-width: var(--layout-medium); /* 1040px */
  margin-inline: auto;
}

.c-counter__card {
  position: relative;
  /* 手描き風ラフ枠（common/card-border.png 654×402・角丸/かすれ込み）を border-image で枠化。
     fallback に solid を残す。中身は白塗り（border 内側＝padding-box まで）。 */
  background: var(--color-white);
  background-clip: padding-box;               /* 枠線の外側に白がはみ出さないように */
  border-image: url("../../images/common/card-border.png") 20 / 10px / 0 round;
  border-radius: var(--radius-md);            /* fallback 用 */
  /* Figma: カード高さ194px・内容は上下中央寄せ・padding上24/下32（アイコンは絶対配置で上に飛び出す）*/
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-24) var(--space-16) var(--space-24);
  text-align: center;
}

/* アイコン：カード上端から飛び出して配置（トップ・採用 共通）。
   Figma: 74px四方のアイコン枠を card上端から top:-45px に置く（＝枠中心は card上端から -8px）。
   書き出しPNGは枠の余白を含まないタイトクロップのため、枠中心(-8px)を基準に上下中央寄せして
   Figmaの飛び出し量に合わせる。縦横比はそのまま、@1x実寸相当の高さで揃える。 */
.c-counter__icon {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 62px;
  width: auto;
  object-fit: contain;
}

/* 数値の上に置く小ラベル（採用の「未経験からの入職率」等） */
.c-counter__eyebrow {
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-brown-text);
}

/* Figma: 数値ブロックは高さ110px・行間96px(=1.5)・下マージン-8px。
   ブロック高(110)が行間(96)より高い分＋(-8)で、直下のラベルとの間隔が決まる。 */
.c-counter__num {
  margin: 0 0 calc(var(--space-8) * -1);
  min-height: 110px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-brown-text);
  font-size: var(--font-size-large);
  white-space: nowrap;
}
/* 単位は2種類：記号「％」は大きめ（h1=42.667px）、文字単位「回+／教室」は小さめ（24px）。
   既定は％想定の大サイズ。文字単位は --sm 修飾子で小さくする（Figma 76:31215）。 */
.c-counter__num small { font-size: var(--font-size-h1); }
.c-counter__num small.c-counter__unit--sm { font-size: var(--font-size-unit); }

.c-counter__label {
  margin: calc(var(--space-12) * -1) 0 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-brown-text);
  flex: 1;
  display: grid;
  place-content: center;
}

/* カード内の小さな注記（採用の ※… ） */
.c-counter__card-note {
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  color: var(--color-brown-sub);
}

/* グリッド下の注記（トップのアンケート出典など） */
.c-counter__note {
  max-width: var(--layout-medium); /* 1040px */
  margin: var(--space-24) auto 0;
  text-align: right;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  color: var(--color-brown-text);
  text-align: center;
}

@media (max-width: 768px) {
  .c-counter__grid { grid-template-columns: 1fr; gap: var(--space-48); }
  .c-counter__note { text-align: left; }
  /* SP専用の手描き枠（common/card-border_sp.png 225×252・角丸が大きめ）に差し替え。
     角丸を欠かさないよう slice はやや大きめに取る。 */
  .c-counter__card {
    border-image: url("../../images/common/card-border_sp.png") 40 / 10px / 0 round;
  }
}