/* article.css — お知らせ記事のタイトル・本文内の見出し・引用
   Figma: h1 2048:16180 / h2 2048:16194 / h3 2048:16198 / quote 2048:16266
   本文（the_content）は .article__body で囲んで使う。要素間の余白はページ側で指定する */

/* h1（記事タイトル）------------------------------------------------------- */
.article__title {
  --article-title-width: 40rem; /* 640px */

  width: 100%;
  max-width: var(--article-title-width);
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  color: var(--color-black);
  word-break: break-word;
}

/* h2 ---------------------------------------------------------------------- */
/* Figma の線は内側に描かれるため、線幅ぶんを padding から引いて文字位置（左40px）を一致させる */
.article__body h2 {
  margin: 0;
  padding: var(--space-8) 0 var(--space-8) calc(var(--space-40) - var(--border-width-7));
  border-left: var(--border-width-7) solid var(--color-black);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  color: var(--color-black);
  word-break: break-word;
}

/* h3 ---------------------------------------------------------------------- */
/* 同上：下線2pxぶんを padding-bottom（12px）から引く */
.article__body h3 {
  margin: 0;
  padding: var(--space-8) 0 calc(var(--space-12) - var(--border-width-2));
  border-bottom: var(--border-width-2) solid var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-black);
  word-break: break-word;
}

/* リンク ------------------------------------------------------------------ */
/* 本文と同じ色＋下線のみ（ファイルブロックのダウンロードボタンはコアの装飾を優先） */
.article__body a:not(.wp-block-file__button) {
  color: inherit;
  text-decoration: underline;
}

/* 引用 -------------------------------------------------------------------- */
.article__body blockquote {
  --quote-icon-size: var(--space-40);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--quote-icon-size) + var(--space-24) * 2 + var(--border-width) * 2);
  margin: 0;
  padding: var(--space-24) var(--space-40);
  padding-left: calc(var(--space-40) + var(--quote-icon-size) + var(--space-24));
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  color: var(--color-black);
  word-break: break-word;
}

.article__body blockquote::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-40);
  width: var(--quote-icon-size);
  height: var(--quote-icon-size);
  background: url("../../images/icon-quote.svg") center / 100% 100% no-repeat;
  transform: translateY(-50%);
}

.article__body blockquote p {
  margin: 0;
}

/* 767px 以下（SP）：h2 は .heading の SP 表示に揃える（帯から文字まで 24px・タイトルサイズ）。
   ⚠ SPデザイン未確定のため仮の値。heading.css の SP 指定を変えたらこちらも合わせる */
@media (max-width: 767px) {
  .article__body h2 {
    padding-left: calc(var(--space-24) - var(--border-width-7));
    font-size: var(--font-size-h3-lg);
  }

  /* 引用：アイコン 40px＋左右 40px だと本文幅が足りないので、アイコンを小さくし余白を詰める。
     長文で縦に伸びるため、アイコンは中央ではなく1行目の高さに置く */
  .article__body blockquote {
    --quote-icon-size: var(--space-24);

    min-height: 0;
    padding: var(--space-16);
    padding-left: calc(var(--space-16) + var(--quote-icon-size) + var(--space-12));
  }

  .article__body blockquote::before {
    top: var(--space-16);
    left: var(--space-16);
    transform: none;
  }
}