/* ============================================================
   ブロックエディタのレイアウト（block-editor.css）

   ブロックエディタが出力する HTML（カラム・グループ）を組み立てるための
   最小限のスタイル。閲覧画面・編集画面のどちらにも同じものを当てる。

   なぜこのファイルが要るか
   ------------------------------------------------------------
   公式テーマ（site / beginner）は
   themes/system/src/scss/editor/_block-editor-layout.scss を
   dest/editor.css にビルドして、閲覧画面の head からも読み込んでいる。
   このテーマは Tailwind ベースでその SCSS を通していないため、
   カラムを横に並べる指定が閲覧画面に存在しなかった。
   結果、編集画面では2列に見えるのに公開ページでは縦に積まれていた。

   /css/acms-editor.min.css をまるごと読めば解決するが、本文リンクの色
   （青＋下線）など見た目まで持ち込まれる。レイアウトに必要なぶんだけ
   ここに置いて、本文の装飾は entry-style.css / editor-style.css に任せる。

   コアとセレクタが違う点
   ------------------------------------------------------------
   コアは :where() で包んで詳細度を 0 にしているが、このテーマでは
   そのままだと効かない。Tailwind のバンドルが head のこれより後ろで
   読み込まれるため、詳細度が同じ 0 だと後勝ちで打ち消されてしまう。
   そのため :where() を外して素のクラス・属性セレクタで書いている。
   テーマ側で上書きするときは、この詳細度（0,3,0 程度）を超えること。

   スコープは .acms-entry 配下。閲覧画面は include/entry/body.html の
   本文ラッパー、編集画面はブロックエディタ側に同じクラスが付く。
   ============================================================ */

/* 列同士の間隔。編集画面のブロックエディタが gap: 1rem を使っているので
   それに揃える。コアの CSS も var(--unit-gap-x) を参照するため、
   値を直接書かずカスタムプロパティとして持たせる。 */
.acms-entry {
  --unit-gap-x: 1rem;
}

/* カラム
   ------------------------------------------------------------ */
.acms-entry [data-type="columns"] {
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  gap: var(--unit-gap-x);
}

.acms-entry [data-type="columns"].layout-two-column {
  grid-template-columns: repeat(2, 1fr);
}

.acms-entry [data-type="columns"].layout-three-column {
  grid-template-columns: repeat(3, 1fr);
}

/* 1fr は minmax(auto, 1fr) なので、列の中身（原寸の大きい画像や入れ子の列）に
   最小幅が引っ張られ、列が親からはみ出す。min-width: 0 で中身によらず等分を保つ。 */
.acms-entry [data-type="columns"] > [data-type="column"] {
  min-width: 0;
}

/* 画像が列からはみ出さないようにする。
   width 属性（原寸）が残っているため、上限を決めておかないと
   min-width: 0 と相まって列の中で切れて見えることがある。 */
.acms-entry [data-type="column"] :is(img, video) {
  max-width: 100%;
  height: auto;
}

/* 列の中の先頭・末尾の余白を落として、列どうしの天地を揃える。
   prose（Tailwind Typography）が figure や p に上下マージンを付けるため、
   これが無いと左右の列で開始位置がずれる。 */
.acms-entry [data-type="column"] > :first-child {
  margin-top: 0;
}

.acms-entry [data-type="column"] > :last-child {
  margin-bottom: 0;
}

/* グループ（複数ブロックをまとめるラッパー）
   ------------------------------------------------------------
   背景色や内側余白の実体はプリセットの class 側に任せ、ここでは
   外側の余白と先頭・末尾の打ち消しだけを持たせる（コアと同じ方針）。 */
.acms-entry [data-type="group"] {
  box-sizing: border-box;
  margin-block: var(--unit-margin-top, 1rem) var(--unit-margin-bottom, 0);
}

.acms-entry [data-type="group"] > :first-child {
  margin-top: 0;
}

.acms-entry [data-type="group"] > :last-child {
  margin-bottom: 0;
}

/* カラーパレットで背景色を付けたグループの内側の余白 */
.acms-entry [data-type="group"][style*="background-color"] {
  padding: var(--unit-gap-x);
}