/* cards.css — アイコン＋テキストの白カードとグリッド
   （Figma: QUESTIONカード 1976:9363 / USE CASESカード 1814:7099）
   実値: カード padding 24px radius 16px 影 10,10,25,5% gap 24px
         画像エリア高さ120px / テキスト 21.333px(question)・24px(value) */

.cards-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards-grid--gap-32 {
  gap: var(--space-32);
}

/* 4枚並び（Figma: 業務改善診断 USE CASES 2247:67715） */
.cards-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.cards-grid--4 .icon-card__text--lg {
  letter-spacing: 0.04em; /* Figma実値 0.96px/24px */
}

/* カード群背面のぼかし影（Figma: 1976:9362 #D5D8DA blur 50 multiply） */
.cards-grid--blur::before {
  content: "";
  position: absolute;
  top: 2.875rem;
  right: 2.8125rem;
  bottom: -.8125rem;
  left: 3.4375rem;
  background: var(--color-shadow-soft);
  filter: blur(50px);
  mix-blend-mode: multiply;
}

.icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.icon-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7.5rem;
}

/* QUESTIONカードは画像エリアに左右余白（Figma: px-40） */
.icon-card__icon--padded {
  padding: 0 var(--space-40);
}

.icon-card__icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* QUESTIONカード：21.333px / lh1.5 / 字間10% / 2行分確保 */
.icon-card__text {
  margin: 0;
  min-height: 4.75rem;
  width: 100%;
  color: var(--color-black);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

/* USE CASESカード：24px / lh1.6 / 字間なし */
.icon-card__text--lg {
  min-height: 0;
  font-size: var(--font-size-card);
  line-height: var(--line-height-body);
  letter-spacing: normal;
}

/* --- SP: アイコンカードは2カラム ---------------------------------------- */
@media (max-width: 767px) {
  .cards-grid,
  .cards-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }
  .icon-card {
    gap: var(--space-16);
    padding: var(--space-16);
  }
  .icon-card__icon {
    height: 5rem;
  }
  .icon-card__icon--padded {
    padding: 0 var(--space-16);
  }
  .icon-card__text {
    min-height: 0;
    font-size: var(--font-size-h5);
  }
  .icon-card__text--lg {
    font-size: var(--font-size-h3);
  }
}