/* ============================================
   c-card-16 — 効果カード（チェック+タイトル+説明）
   2x2 subgrid: Row 1 = チェック+タイトル, Row 2 = 説明
   ============================================ */

/* --- WP block margin reset --- */
:is(.c-card-16 *) {
  margin: 0;
}

/* --- Card container (subgrid) --- */
.c-card-16 {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2-xl) var(--space-2-xl);
}

@container (min-width: 600px) {
  .c-card-16 {
    padding: var(--space-3-xl) var(--space-3-xl);
  }
}

/* --- Row 1: Check icon + Title --- */
.c-card-16 .c-card-16__header,
.c-card-16__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

/* Check icon（Figma: 赤枠チェックボックス型） */
.c-card-16 .c-card-16__icon,
.c-card-16__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-none);
}

/* Title */
.c-card-16__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

/* --- Row 2: Description --- */
.c-card-16__desc {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  padding-top: var(--space-md);
}

@container (min-width: 600px) {
  .c-card-16__desc {
    font-size: var(--font-size-md);
  }
}

/* ============================================
   イラスト入りバリエーション（__image を内包する場合）
   上部に角丸4:3イラスト（見出しピルを内包）＋テキスト見出し（✓＋タイトル）＋説明文。
   サムネイル内の見出しに加え、テキスト見出しも表示する。
   ============================================ */
.s-card-11__grid:has(.c-card-16__image) {
  grid-template-rows: none;
  align-items: stretch;
}

.c-card-16:has(.c-card-16__image) {
  grid-template-rows: none;
  grid-row: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.c-card-16__image {
  margin: 0;
}

.c-card-16__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--color-bg-sub);
}

/* テキスト見出し（✓＋タイトル）：画像直下に余白付きで表示 */
.c-card-16:has(.c-card-16__image) .c-card-16__header {
  padding: var(--space-2-xl) var(--space-2-xl) var(--space-md);
}

.c-card-16:has(.c-card-16__image) .c-card-16__desc {
  padding: var(--space-md) var(--space-2-xl) var(--space-2-xl);
  flex: 1;
}

@container (min-width: 600px) {
  .c-card-16:has(.c-card-16__image) .c-card-16__header {
    padding: var(--space-3-xl) var(--space-3-xl) var(--space-md);
  }

  .c-card-16:has(.c-card-16__image) .c-card-16__desc {
    padding: var(--space-md) var(--space-3-xl) var(--space-3-xl);
  }
}