/*
 * カード。 1 ブロック = 1 枚の囲みカードとして単体で使えるように作る汎用ブロック。
 * プログラム紹介 / 補足カード / 引用など幅広く使う想定。 複数並べたい場合は
 * ブロックを重ねて挿入するだけで OK。
 *
 * デザインは Figma 836:6516 (project) に準拠:
 *   - fill-base (#eeeeeb) の淡いグレー背景、radius 24
 *   - モバイル padding 16、デスクトップ padding 32
 *   - 画像 (任意) → text の 2 段。 画像と text の間は 24px、text 内 (name / body)
 *     は 8px の縦スタック
 *   - image は 3:2 で cover トリミング、radius 8
 *   - name (太字) → body (TinyMCE 由来の段落・リンク・強調)
 *
 * body は classic_editor 由来なので `<p>` 段落・`<a>` インラインリンク・強調が
 * そのまま入ってくる。 リンク色は Figma に合わせて緑テキスト (下線なし)、hover
 * / focus-visible で下線を出す。 `.entry-body a` の section 別汎用ルールが page
 * 側にはないので、ここで明示的に色を当てる。
 *
 * `.entry-body` プレフィックスで specificity 稼ぎ (0,3,0 以上)。 縦マージン
 * (隣接カード間の間隔含む) は entry-body owl ルール
 * ([class*="wp-block-lazyblock-"] MEDIA 分類) に一任し、ここでは内部レイアウト
 * だけを扱う。
 */
.entry-body .lazyblock-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-4);
  background: var(--color-fill-base);
  border-radius: var(--radius-default);
}

/* 横並びは viewport 1024px 以上でのみ発火。 プロジェクト標準の 769px だと
 * 狭いデスクトップウインドウで画像列が 100-150px 台に潰れて可読性が落ちる
 * ため、このブロック専用に閾値を上げる。 1024px は "画像列 33.3% で 300px 前後
 * を最低確保できる viewport" として設定 (article-layout の閾値と同じ)。 */
@media (min-width: 1024px) {
  .entry-body .lazyblock-card {
    flex-direction: row-reverse;
    align-items: flex-start;
    padding: var(--space-8);
  }

  /* 画像列 = min(33.3%, 320px)。 カード幅 960px を超えると 320px で頭打ちに
   * なるので、広い記事幅でも画像が肥大しすぎない。 aspect-ratio 3:2 由来の
   * 高さを保つため align-items: flex-start で伸長を止める。 */
  .entry-body .lazyblock-card .image {
    flex: 0 0 min(33.3333%, 320px);
  }

  /* text は残り幅を全部使う。 画像が無い場合 (.image 要素そのものが未出力) は
   * 唯一の flex child として 100% を占める。 */
  .entry-body .lazyblock-card .text {
    flex: 1 1 0;
    min-width: 0;
  }
}

.entry-body .lazyblock-card .image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-small);
}

.entry-body .lazyblock-card .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.entry-body .lazyblock-card .text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.entry-body .lazyblock-card .name {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.entry-body .lazyblock-card .body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  line-height: 1.75;
}

.entry-body .lazyblock-card .body p {
  margin: 0;
}

.entry-body .lazyblock-card .body a {
  color: var(--color-text-brand-primary-green);
  text-decoration: none;
}

.entry-body .lazyblock-card .body a:hover,
.entry-body .lazyblock-card .body a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}