/*
 * 囲み。 複数のブロックを白いカードにまとめ、中の見出しに丸いビュレットを付ける。
 *
 * Figma 参照:
 *   - セクション: 715:10368 (about-desktop)
 *   - 囲み: 842:6512 / 842:6513 / 843:6513 (group)
 *
 * デザイン準拠点:
 *   - 白背景 (background/ultra-light) + radius 24 + padding 32
 *   - 中身の基本の縦間隔は 32px (Figma の 見出し→段落→段落→カード→カード)
 *   - 上余白を殺すのは先頭要素だけ。 見出しの前は entry-body と同じ考え方で
 *     1 段広げて 64px にする (囲みの中に節が複数入るケースがあるため)
 *   - ビュレットは 16x16 の正円、見出しとの間隔 8px
 *   - ビュレット色は囲み単位で #00A0F0 → #008714 → #FFD200 の循環
 *   - 囲み同士の間隔は 32px
 *
 * 中身の縦リズムを自前で組んでいる理由:
 *   style.css の owl ルールはすべて `.entry-body >` の子結合子なので囲みの中には
 *   届かない。 一方でグローバルリセット (h1-h6, p, ul, ol, dl, figure, hr の
 *   margin: 0) は効くため、何もしないと中身の間隔がゼロになる。 特に
 *   lazyblock/card 同士は entry-body 直下では 64px 空いていたぶんが 0 になる。
 *
 * セレクタに `.entry-body` を前置していない理由:
 *   ブロックエディタのキャンバス (iframe) には `.entry-body` が存在しないため、
 *   前置するとエディタで囲みが囲みに見えない。 フロント固有の文脈が必要な
 *   ルール (囲み同士の間隔) だけ例外的に前置している。
 */
.lazyblock-frame {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-4);
  background: var(--color-background-ultra-light);
  border-radius: var(--radius-default);

  /* ビュレットは見出しを flex 化せず、テキストの先頭にインラインで差し込む。
   * flex にすると 2 行になったときに行間の高さの中央へ寄ってしまい、1 行目の
   * 行頭に付かない。 */
  & > :is(h2, h3, h4)::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: var(--space-2);
    vertical-align: middle;
    border-radius: 50%;
    /* 単独で置かれた場合 (エディタでの新規挿入直後など) は 1 番目の色。 */
    background: var(--frame-bullet, var(--color-brand-primary-blue));
  }

  /* 見出しの前は gap に 1 段足して 64px。 entry-body の「見出しの前は 2x」と
   * 同じ考え方で、囲みの中に節が複数入っても切れ目が読める。 */
  & > :is(h2, h3, h4) {
    margin-top: var(--space-8);
  }

  /* 上余白を殺すのは先頭要素だけ。 */
  & > :first-child {
    margin-top: 0;
  }

  /* ここから 3 つはエディタ限定 (.wp-block はキャンバスにしか存在しない)。
   * キャンバスにはテーマの margin リセットが効かず、WP 既定のブロック余白 (縦) と
   * 本文幅揃えの margin-inline: auto (flex column の中では中央寄せとして効く) が
   * 乗ってフロントとずれる。 一度全部消してから、上の 2 つと同じ値を
   * .wp-block ぶんの specificity で当て直す。 */
  & > .wp-block {
    margin: 0;
  }

  & > .wp-block:is(h2, h3, h4) {
    margin-top: var(--space-8);
  }

  & > .wp-block:first-child {
    margin-top: 0;
  }

  /* Figma に about-mobile のこのセクションが無いため、内側余白は blocks/card の
   * 前例 (モバイル 16 / デスクトップ 32) に合わせる。 */
  @media (min-width: 769px) {
    padding: var(--space-8);
  }
}

/*
 * ビュレット色の循環。 兄弟のうち囲みだけを数えたいので :nth-child() の of 構文を
 * 使う。 :nth-of-type だと div 全般を数えてしまい、間に段落や見出しが挟まると
 * 番号がずれる。
 */
.wp-block-lazyblock-frame:nth-child(3n + 1 of .wp-block-lazyblock-frame) {
  --frame-bullet: var(--color-brand-primary-blue);
}

.wp-block-lazyblock-frame:nth-child(3n + 2 of .wp-block-lazyblock-frame) {
  --frame-bullet: var(--color-brand-primary-green);
}

.wp-block-lazyblock-frame:nth-child(3n + 3 of .wp-block-lazyblock-frame) {
  --frame-bullet: var(--color-brand-primary-yellow);
}

/*
 * エディタのキャンバスは背景も白なので、白い囲みのままだと境界が見えず
 * 「グルーピングされている」ことが伝わらない。 編集時だけ罫線を出す。
 * .editor-styles-wrapper はキャンバスの body に付くクラスなのでフロントには
 * 影響しない。
 *
 * 手法と色は Lazy Blocks 自身のブロック枠 (`.lazyblock { box-shadow: 0 0 0 1px
 * #e6e6e6 }`) に合わせてある。 他のブロックと同じ見え方にするのが目的なので、
 * ここはテーマトークンではなく plugin 側の値をそのまま使う。 box-shadow なら
 * 内側の寸法をフロントと揃えたまま、角丸にも追従する。
 */
.editor-styles-wrapper .lazyblock-frame {
  box-shadow: 0 0 0 1px #e6e6e6;
}

/*
 * 囲み同士は 32px。 entry-body の owl では lazyblock 同士は MEDIA + MEDIA 扱いで
 * 64px になるが、Figma は 32px。 :where() を使わず素の子結合子で specificity を
 * 稼ぎ、スタイルシートの読み込み順に依存しない形で上書きする。
 * 見出し→囲み (32px) と囲み→見出し (64px) は既存 owl のままで Figma と一致する。
 */
.entry-body > .wp-block-lazyblock-frame + .wp-block-lazyblock-frame {
  margin-top: var(--entry-body-gap);
}