/* ============================================
   c-heading-14 - Pill Background
   角丸ピル型の薄い背景 + プライマリカラーテキスト

   構造: <h2 class="c-heading-14">見出しテキスト</h2>
   ============================================ */
.c-heading-14 {
  display: inline-block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wide);
  background: var(--color-bg-sub);
  padding: var(--space-sm) var(--space-2-xl);
  border-radius: var(--radius-pill);
  margin-block-start: var(--space-7-xl) !important;
  margin-block-end: var(--space-4-xl) !important;
}

@container (max-width: 599px) {
  .c-heading-14 {
    font-size: var(--font-size-md);
    padding: var(--space-xs) var(--space-xl);
  }
}

/* --- entry-content 直下（バンド外）に置かれた時の左寄り対策 ---
   .s-base-02 .entry-content > * は max-width＋margin-inline:auto で中央列を作るが、
   inline-block には margin-inline:auto が効かず全幅文脈の左端へ逃げる。
   コンテンツ列の左端（gutter＋container-padding）へ明示的に揃える。 */
.s-base-02 .entry-content > .c-heading-14:not(.c-heading-14--band) {
  margin-inline-start: calc(max(0px, (100% - var(--width-inner)) / 2) + var(--container-padding));
  margin-inline-end: auto;
  padding-inline: var(--space-2-xl);
}

/* --- modifier: 全幅帯（Figma汎用コンテンツの小見出し: 薄ピンク帯・中央寄せ） --- */
.c-heading-14--band {
  display: block;
  text-align: center;
  border-radius: 0;
  background: var(--color-primary-lightest);
}

/* entry-content幅を基準に左端が残らないよう、alignfull帯をviewport端へ戻す。 */
.c-heading-14--band.alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw) !important;
}

/* カラム内はviewport全幅にせず、親カラム幅の帯として扱う。 */
.wp-block-column > .c-heading-14--band.alignfull {
  width: 100%;
  margin-inline: 0 !important;
}