/* ==========================================================
   ブロックエディタ用のボックス（functions.php の register_block_style で登録）
   「段落」か「グループ」ブロックを選び、右の設定欄の「スタイル」で選ぶ。
   見た目は css/style.css の .box（白の地＋左の色の罫）/ .box.supervisor と同じ。
   このファイルはサイトと編集画面の両方で読み込む（編集画面にはデザインの変数がないので色は直書き）
   左右の margin は指定しない（編集画面ではブロックが auto で中央に置かれるため）
   ========================================================== */

/* --- ボックス共通 --- */
:is(.article-body, .editor-styles-wrapper) :is(p, .wp-block-group):is(.is-style-yh-memo, .is-style-yh-point, .is-style-yh-caution, .is-style-yh-danger) {
  margin-top: 44px; margin-bottom: 0; padding: 22px 26px 22px 23px; font-size: 14.5px; line-height: 2;
  background: #FFFFFE; color: #2B2A26; border: 1px solid #E6E1D6; border-left: 4px solid #A79E82;
}
/* グループの中の段落・リスト */
:is(.article-body, .editor-styles-wrapper) .wp-block-group:is(.is-style-yh-memo, .is-style-yh-point, .is-style-yh-caution, .is-style-yh-danger) :is(p, ul, ol) {
  margin-top: 0; margin-bottom: 0; font-size: inherit; line-height: inherit;
}
:is(.article-body, .editor-styles-wrapper) .wp-block-group:is(.is-style-yh-memo, .is-style-yh-point, .is-style-yh-caution, .is-style-yh-danger) :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 12px;
}
:is(.article-body, .editor-styles-wrapper) .wp-block-group:is(.is-style-yh-memo, .is-style-yh-point, .is-style-yh-caution, .is-style-yh-danger) :is(ul, ol) {
  padding-left: 1.4em;
}

/* --- 役割ごとの罫の色 --- */
:is(.article-body, .editor-styles-wrapper) :is(p, .wp-block-group).is-style-yh-memo { border-left-color: #A79E82; }
:is(.article-body, .editor-styles-wrapper) :is(p, .wp-block-group).is-style-yh-point { border-left-color: #4E7A6B; }
:is(.article-body, .editor-styles-wrapper) :is(p, .wp-block-group).is-style-yh-caution { border-left-color: #BC6A41; }
:is(.article-body, .editor-styles-wrapper) :is(p, .wp-block-group).is-style-yh-danger { border-left-color: #E0BFA9; }

/* --- 監修（グループ）: 1行目に「監修」、左に丸い顔写真、右に名前・紹介文・リンク --- */
:is(.article-body, .editor-styles-wrapper) .wp-block-group.is-style-yh-supervisor {
  margin-top: 44px; margin-bottom: 0; padding: 20px 26px 22px; background: #EEF2FC; color: #2B2A26;
  border: 1px solid #C9D3F2; border-radius: 8px;
}
/* 並べ方（サイトでは内側に .wp-block-group__inner-container が入るので、両方に当てる） */
:is(.article-body, .editor-styles-wrapper) .wp-block-group.is-style-yh-supervisor:not(:has(> .wp-block-group__inner-container)),
:is(.article-body, .editor-styles-wrapper) .wp-block-group.is-style-yh-supervisor > .wp-block-group__inner-container {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start;
}
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor > *,
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor > .wp-block-group__inner-container > * {
  grid-column: 2; margin: 0; font-size: 13px; line-height: 1.8; color: #55524B;
}
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor .yh-sv-label {
  grid-column: 1 / -1; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #3F57B5;
}
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor .wp-block-image {
  grid-column: 1; grid-row: 2 / span 3; align-self: center; margin: 0;
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 1px solid #DDD6C6; background: #fff;
}
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor .wp-block-image img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block; margin: 0;
}
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor .yh-sv-name {
  font-family: 'Noto Serif JP', serif; font-weight: 700; font-size: 16px; line-height: 1.6; color: #2B2A26;
}
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor .yh-sv-name + * { margin-top: 4px; }
:is(.article-body, .editor-styles-wrapper) .is-style-yh-supervisor .yh-sv-link { margin-top: 4px; }

@media (max-width: 600px) {
  :is(.article-body, .editor-styles-wrapper) :is(p, .wp-block-group):is(.is-style-yh-memo, .is-style-yh-point, .is-style-yh-caution, .is-style-yh-danger) {
    padding: 18px 18px 18px 17px;
  }
  :is(.article-body, .editor-styles-wrapper) .wp-block-group.is-style-yh-supervisor { padding: 18px 18px 20px; }
}