/* ==========================================================================
   ブロックエディター用スタイル（閲覧画面 + 編集画面 共通）
   --------------------------------------------------------------------------
   a-blog CMS のブロックエディターが出力する HTML（2カラム/リンクボタン等）は
   システムの acms-editor.css だけでは見た目が完結しないため、テーマ側で用意する。

   - 閲覧画面: _entry.html の head-link で style.css の後に読み込む。
   - 編集画面: admin.html の @section("editor-css") で読み込む。
   - スコープは本文ラッパー .prose 配下（js/config.js の
     blockEditorConfig.editorProps.editorProps.attributes.class と一致）。
   ========================================================================== */

/* gap 用の CSS 変数フォールバック。
   システムは acms.css の :root で --unit-gap-x を定義しているが、
   このテーマのフロントでは読み込まれないためここで補う。 */
.prose {
  --unit-gap-x: 1.25rem;
}

/* --------------------------------------------------------------------------
   カラム（2カラム / 3カラム）
   出力例:
     <div class="layout-two-column" data-type="columns" data-layout="two-column">
       <div data-type="column">…</div>
       <div data-type="column">…</div>
     </div>
   -------------------------------------------------------------------------- */
.prose [data-type="columns"] {
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  gap: var(--unit-gap-x);
}

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

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

/* グリッドはみ出し防止（長文・画像対策） */
.prose [data-type="column"] {
  min-width: 0;
}

/* カラム内の先頭/末尾要素の余白を詰めて、各カラムの上端・下端を揃える
   （prose 等が段落へ付ける margin 対策） */
.prose [data-type="column"] > :first-child {
  margin-top: 0;
}
.prose [data-type="column"] > :last-child {
  margin-bottom: 0;
}

/* スマホでは縦積みにする（任意）。
   横並びのまま出したい場合はこの @media ブロックを削除する。
   編集画面（管理画面）は常に横並びで表示される点に注意。 */
@media (max-width: 767px) {
  .prose [data-type="columns"],
  .prose [data-type="columns"].layout-two-column,
  .prose [data-type="columns"].layout-three-column {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   リンクボタン
   出力例:
     <div class="link-button-block align-center" data-type="linkButton" data-align="center">
       <a class="link-button-block-link" data-type="button" href="…">ボタンテキスト</a>
     </div>
   ※ クラス名(.link-button-block 等)ではなく data-type / data-align 属性で判定する。
   ※ システム側にボタンの見た目 CSS は存在しないため、テーマ側で定義する。
   ※ デザインは www@acms の .p-top-hero-v32__btn.is-button(.is-download) に準拠。
     ブランドレッド #c40f32 = colors.$color-brand.red と同一値。
   -------------------------------------------------------------------------- */
.prose [data-type="linkButton"] {
  display: flex;
  margin-block: 1.5rem;
}

.prose [data-type="linkButton"][data-align="left"] {
  justify-content: flex-start;
}
.prose [data-type="linkButton"][data-align="center"] {
  justify-content: center;
}
.prose [data-type="linkButton"][data-align="right"] {
  justify-content: flex-end;
}

/* プライマリ（デフォルト）: is-download 相当。塗り潰し + ホバーで反転 */
.prose [data-type="linkButton"] [data-type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: 0.75rem 2rem;
  background-color: #c40f32;
  border: 2px solid #c40f32;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none; /* prose / テーマのリンク下線を打ち消す */
  border-radius: 999em;
  box-sizing: border-box;
  transition:
    background-color 0.2s ease-out,
    color 0.2s ease-out;
}

.prose [data-type="linkButton"] [data-type="button"]:hover,
.prose [data-type="linkButton"] [data-type="button"]:focus-visible {
  background-color: #fff;
  color: #c40f32;
  text-decoration: none;
}

/* セカンダリ: is-button（ダウンロード修飾子なし）相当。
   [data-type="linkButton"] に .is-secondary を付けると切り替わる。
   白地 + グレー枠、ホバーで反転（プライマリと対になる既存デザインを踏襲）。 */
.prose [data-type="linkButton"].is-secondary [data-type="button"] {
  background-color: #fff;
  border-color: #333;
  color: #333;
}

.prose [data-type="linkButton"].is-secondary [data-type="button"]:hover,
.prose [data-type="linkButton"].is-secondary [data-type="button"]:focus-visible {
  background-color: #333;
  border-color: #333;
  color: #fff;
}

/* --------------------------------------------------------------------------
   本文見出し（h2 / h3）
   とりいそぎの下線アクセント。ボタンと同じブランドレッド #c40f32 でトーンを統一。
   h2 = 全幅の太いライン、h3 = 薄いグレーの全幅ラインに短い赤アクセントを重ねて
   h2 より弱い階層であることを示す。
   -------------------------------------------------------------------------- */
.prose h2 {
  margin-top: 2em;
  padding-bottom: 0.5em;
  border-bottom: 3px solid #c40f32;
}

.prose h3 {
  position: relative;
  margin-top: 1.75em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid #e5e5e5;
}

.prose h3::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 3rem;
  max-width: 40%;
  height: 3px;
  background-color: #c40f32;
}

.prose div:has(> table) {
  margin-top: 2em;
  margin-bottom: 2em;
  overflow-x: auto;
}

.prose div:has(> table) > table {
  margin-top: 0;
  margin-bottom: 0;
}