/* ============================================
   s-intro-02 — リード（写真＋テキストの2カラム）
   wp:columns に className="s-intro-02" を付与して使用
   写真が縦長でもテキスト量とバランスするよう高さを抑える
   ============================================ */
.s-intro-02.wp-block-columns {
  align-items: center;
  gap: var(--space-5-xl);
}

.s-intro-02 .wp-block-image {
  margin: 0;
}

/* 写真は 3:2 にトリミングして高さを抑える（縦長原版でも横位置の見せ場を中央に） */
.s-intro-02 .wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 70%;
  border-radius: var(--radius-md);
}

/* --- 解説図バリエーション（--diagram）---
   インフォグラフィック等、端のラベルが切れる図版用。
   高さを暴走させないため box は 4:3 で固定しつつ object-fit:contain で
   トリミングせず全体を見せる（白背景の図版なのでレターボックスは目立たない）。 */
.s-intro-02--diagram .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
}

/* メッセージ見出し（リード右カラム） */
.s-intro-02__heading {
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-3-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  line-height: var(--line-height-tight);
}

/* 名前のふりがな（__heading 内に置く小さめの読み） */
.s-intro-02__reading {
  margin-left: var(--space-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
  letter-spacing: var(--letter-spacing-wide);
}

/* 院長署名 */
.s-intro-02__sign {
  margin-top: var(--space-xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  line-height: var(--line-height-tight);
}

.s-intro-02__sign-title {
  display: block;
  margin-top: var(--space-3-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
}

/* 院長プロフィールへのリンク */
.s-intro-02__profile-link {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
}

.s-intro-02__profile-link a {
  color: var(--color-primary);
  text-decoration: none;
}

.s-intro-02__profile-link a:hover {
  opacity: 0.7;
}

/* 型セクション（写真＋「改善に向く施術：」）の直後に来るバッジリストとの間に
   余白を確保する。写真カラムが背高だとバッジが画像下端へ密着して見えるため。 */
.s-intro-02 + .c-list-02 {
  margin-block-start: var(--space-6-xl);
}