/*
 * ボタン。 記事本文中で使うピル型リンクボタン。 core/button はインスペクタの
 * 色 / タイポグラフィ / 枠線パネルを classic theme (theme.json 無し) 環境で完全に
 * 抑制できず、入稿者がデザインを崩す余地が残ることから、lazyBlocks で
 * 独自ブロックとして実装している。 バリアントは 2 種:
 *   - is-style-secondary: 白背景 + 濃色文字 (デフォルト)
 *   - is-style-primary:   濃色背景 + 白文字
 * どちらもピル型 (radius-full)、右端に icon-arrow-right.svg を mask-image で
 * currentColor 追従表示する。 縦方向の外余白は theme style.css 側
 * `.entry-body [class*="wp-block-lazyblock-"]` の一律ルールで持たせるため、
 * ここでは中央寄せとリンク本体のジオメトリだけ扱う。
 *
 * `.entry-body` prefix は theme style.css の `section.single-* .entry-body a`
 * (下線 + 緑) に打ち勝つための specificity 稼ぎ。 (0,3,0) > (0,2,2)。
 *
 * repeater で複数ボタンを持てる。 1 個時は中央寄せ、2 個以上は flex-wrap で
 * 横並び中央寄せ (narrow viewport では自動的に縦積みに wrap)。
 *
 * Figma 参照:
 *   - secondary: 832:10780
 *   - primary:   832:10781
 */
.entry-body .lazyblock-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.entry-body .lazyblock-button .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 56px;
  max-width: 400px;
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-decoration: none;
  word-break: break-word;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.entry-body .lazyblock-button .button:hover,
.entry-body .lazyblock-button .button:focus-visible {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .entry-body .lazyblock-button .button {
    transition: none;
  }
  .entry-body .lazyblock-button .button:hover,
  .entry-body .lazyblock-button .button:focus-visible {
    transform: none;
  }
}

.entry-body .lazyblock-button .button .label {
  display: inline-block;
}

/*
 * 矢印はラベルの ::after。テーマ共通の .cta/.pill/.more と同じ方式で、ラベルが
 * 2 行に折り返しても最終行の文字のうしろに付いてくる。 flex アイテムにすると
 * 縦中央の右端に取り残される。 矢印だけが次行に落ちるのを塞ぐ inline + WORD
 * JOINER 方式は iOS Safari で崩れたため使っていない (詳細は style.css の
 * 同ブロックのコメント)。
 * サイト内リンクは →、外部リンク (.is-external) は ↗。
 */
.entry-body .lazyblock-button .button .label::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: var(--space-3);
  vertical-align: -0.15em;
  background-color: currentColor;
  mask: url('../../assets/images/icon-arrow-right.svg') no-repeat center / contain;
  -webkit-mask: url('../../assets/images/icon-arrow-right.svg') no-repeat center / contain;
}

.entry-body .lazyblock-button .button.is-external .label::after {
  mask-image: url('../../assets/images/icon-arrow-up-right.svg');
  -webkit-mask-image: url('../../assets/images/icon-arrow-up-right.svg');
}

.entry-body .lazyblock-button .button.is-style-secondary {
  background: var(--color-fill-light);
  color: var(--color-text-default);
}

.entry-body .lazyblock-button .button.is-style-primary {
  background: var(--color-fill-dark);
  color: var(--color-text-inverted);
}

/*
 * sticky モード (inspector の toggle で有効化)。 inner の `.lazyblock-button--sticky`
 * 修飾子を :has() で拾い、外側の LazyBlocks ラッパー (.wp-block-lazyblock-button)
 * 自体を `position: sticky` にする。 内側ではなく外側を sticky 化する理由は
 * sticky element が "自身の containing block" の bottom に達するまで張り付き
 * 続ける仕様のため。 内側だと親 (=ラッパー) の高さは自身と同じで即座に un-stick する。
 *
 * containing block を entry-body に固定するため `.entry-body:has(...)` 側で
 * `position: relative` を付ける。 これで entry-body を抜けた瞬間 (footer 領域や
 * ヘッダー上まで戻ったとき) 自動的に張り付きが解除される。
 *
 * 追従中は背景コンテンツと視覚的に切り分けるため軽い drop-shadow を足す。
 */
.entry-body:has(.lazyblock-button--sticky) {
  position: relative;
}

.entry-body .wp-block-lazyblock-button:has(> .lazyblock-button--sticky) {
  position: sticky;
  bottom: var(--space-4);
  z-index: 10;
}

.entry-body .lazyblock-button--sticky .button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}