/* ============================================
   Entry Body — 記事本文の共通スタイル
   news-detail, activity-detail, events-detail 共通

   各要素間は flex + gap で 90rem に揃え、見出し直後の
   段落だけ負マージンで詰める（実質 50rem）。
   管理画面側 (Gutenberg) は editor-style.css で同じ仕様を再現する。

   配色方針:
   - hr / figcaption（反転なし）は currentColor 基準。本文色を
     上書きすれば追従する。
   - ボタン hover の色反転だけは currentColor だと :hover で
     値が巻き込まれて破綻するため、--color-black / --color-bg を
     直接使う。暗背景に置く場合は親側で両トークンを上書きする。
   ============================================ */

.entry-body {
  max-width: 720rem;
  margin: 0 auto;
  padding: 0 var(--padding-x);
  box-sizing: content-box;
  font-family: var(--font-ja);
  font-size: 21rem;
  font-weight: var(--font-weight-bold);
  line-height: 2.2;
  --entry-gap: 60rem;
  display: flex;
  flex-direction: column;
  gap: var(--entry-gap);

  :is(h2, h3, h4) {
    font-weight: var(--font-weight-bold);
    line-height: 1.6;
    margin: 0;
  }
  h2 { font-size: 42rem; }
  h3 { font-size: 32rem; }
  h4 { font-size: 30rem; }

  p { margin: 0; }

  /* 見出し直後の段落だけ詰める（gap 90rem → 実質 50rem） */
  :is(h2, h3, h4) + p {
    margin-top: -40rem;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  small {
    font-size: 14rem;
  }

  hr {
    color: inherit; /* UA スタイルの hr { color: gray } を打ち消し、本文色を継承させる */
    border: none;
    border-top: 1px solid currentColor;
    margin: 30rem 0;
  }

  /* 見出し直後の hr は gap を打ち消す（hr 本来の margin 30rem だけ残す） */
  :is(h2, h3, h4) + hr {
    margin-top: calc(30rem - var(--entry-gap));
  }
  /* 見出しが並んだ時は間隔を詰める */
  :is(h2, h3, h4)+ :is(h2, h3, h4) {
    margin-top: calc(var(--entry-gap) / -2);
  }

  :is(.wp-block-image) {
    margin: 30rem 0;
  }

  :is(.wp-block-button, .wp-block-buttons) {
    margin: 0;
  }
  /* ボタンが並んだ時は間隔を詰める */
  :is(.wp-block-button, .wp-block-buttons) + :is(.wp-block-button, .wp-block-buttons) {
    margin-top: calc(var(--entry-gap) / -2);
  }

  .wp-block-button {
    width: 100%;
  }

  .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18rem 10rem 27rem;
    border: 1px solid var(--color-black);
    border-radius: 110rem;
    background: transparent;
    color: var(--color-black);
    font-family: var(--font-ja);
    font-weight: var(--font-weight-bold);
    font-size: 30rem;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;

    &:hover {
      background-color: var(--color-black);
      color: var(--color-bg);
    }
  }

  :is(figcaption, .wp-element-caption, .is-style-caption) {
    font-size: 16.8rem;
    line-height: 2;
    /* currentColor の 50% の濃さ。transparent と混ぜることで
       背景色が何であっても同じ比率で薄くなる（白文字時も追従） */
    color: color-mix(in srgb, currentColor 50%, transparent);
    margin: 0;

    a {
      line-height: 2.3;
    }
  }
}

/* ============================================
   SP
   ============================================ */
@media (max-width: 700px) {
  .entry-body {
    gap: 44rem;
    font-size: 16rem;
    line-height: 1.9;

    h2 { font-size: 22rem; }
    h3 { font-size: 20rem; }
    h4 { font-size: 18rem; }

    :is(h2, h3, h4) + p {
      margin-top: -30rem; /* 55 - 25 = 30 */
    }

    .wp-block-button__link {
      font-size: 18rem;
      padding: 15rem 10rem 19rem;
    }

    :is(figcaption, .wp-element-caption, .is-style-caption) {
      font-size: 13rem;
      line-height: 1.9;
    }

    hr {
      margin: 10rem 0;
    }

    :is(.wp-block-image) {
      margin: 10rem 0;
    }
  }
}