/* =========================================================
   吹き出しブロック（sucb/balloon）
   機能：
   - 左右レイアウト
   - 画像（丸）＋サイズは inline
   - 余白（mt/mb）は inline
   - 枠線 ON/OFF（1px固定）
   - 影（inline）
   - しっぽ（三角）背景＋枠線 1px 対応
========================================================= */

/* --- レイアウト共通 --- */
.su-balloon-block {
	display: flex;
	align-items: flex-start;
	gap: 1em;
}

/* 右配置 */
.su-balloon-block.is-right {
	flex-direction: row-reverse;
}

/* 発言者画像 */
.su-balloon-block .balloon-image {
	display: block;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* 吹き出し本体 */
.su-balloon-block .balloon-text {
	position: relative;
	line-height: 1.6;
	word-break: break-word;

	/* しっぽサイズ（好みで調整） */
	--sucb-tail: 7px;
}

/* =========================================================
   しっぽ（三角）
   after  = 背景
   before = 枠線（ONの時だけ表示）
   縦位置は中央で安定
========================================================= */

/* ---------- 左向き（画像が左） ---------- */
.su-balloon-block.is-left .balloon-text::before,
.su-balloon-block.is-left .balloon-text::after {
	content: "";
	position: absolute;
	top: 24px;
	transform: translateY(-50%);
	border-style: solid;
	pointer-events: none;
}

/* 枠線（三角・外側） */
.su-balloon-block.is-left .balloon-text::before {
	border-width: calc(var(--sucb-tail) + 1px) calc(var(--sucb-tail) + 1px) calc(var(--sucb-tail) + 1px) 0;
	border-color: transparent var(--sucb-balloon-border-color, transparent) transparent transparent;
	left: calc(-1 * var(--sucb-tail) - 1.5px);
}

/* 背景（三角・内側） */
.su-balloon-block.is-left .balloon-text::after {
	border-width: var(--sucb-tail) var(--sucb-tail) var(--sucb-tail) 0;
	border-color: transparent var(--sucb-balloon-bg, #f5f5f5) transparent transparent;
	left: calc(-1 * var(--sucb-tail));
}

/* ---------- 右向き（画像が右） ---------- */
.su-balloon-block.is-right .balloon-text::before,
.su-balloon-block.is-right .balloon-text::after {
	content: "";
	position: absolute;
	top: 24px;
	transform: translateY(-50%);
	border-style: solid;
	pointer-events: none;
}

.su-balloon-block.is-right .balloon-text::before {
	border-width: calc(var(--sucb-tail) + 1px) 0 calc(var(--sucb-tail) + 1px) calc(var(--sucb-tail) + 1px);
	border-color: transparent transparent transparent var(--sucb-balloon-border-color, transparent);
	right: calc(-1 * var(--sucb-tail) - 1.5px);
}

.su-balloon-block.is-right .balloon-text::after {
	border-width: var(--sucb-tail) 0 var(--sucb-tail) var(--sucb-tail);
	border-color: transparent transparent transparent var(--sucb-balloon-bg, #f5f5f5);
	right: calc(-1 * var(--sucb-tail));
}

/* 枠線OFFなら、三角の枠（before）を確実に消す */
.su-balloon-block .balloon-text.no-border::before {
  display: none;
}

/* 枠線ONなら、三角の枠（before）を表示 */
.su-balloon-block .balloon-text.has-border::before {
  display: block;
}

/* =========================================================
   モバイル微調整（任意）
========================================================= */
@media (max-width: 600px) {
	.su-balloon-block {
		gap: 0.5em;
	}
}


/* =========================
   HEADING BOX BLOCK
========================= */

.su-heading-box {
    margin: auto;
}

.su-heading-box .hb-heading {
	padding: .6em 1.25em .5em;
    line-height: 1.5;
}

.su-heading-box .hb-body {
	padding: 1.25em;
    border-top: none;
    border-radius: 0 0 4px 4px;
    line-height: 1.7;
}

.su-heading-box p:first-child {
	margin-top: 0;
}

.su-heading-box p:last-child {
	margin-bottom: 0;
}

/* ─────────────
   左寄せ：枠線の上に見出しが乗る
───────────── */
.wp-block-sucb-heading-box.is-style-frame-top {
  position: relative;
}
.wp-block-sucb-heading-box.is-style-frame-top .hb-body {
  margin-top: -1px; /* 見出しと枠の境目を詰める */
}
.wp-block-sucb-heading-box.is-style-frame-top .hb-heading {
  width: fit-content;
}

/* ─────────────
   枠線上：枠線の角に見出しが被る（少し内側）
───────────── */
.wp-block-sucb-heading-box.is-style-frame-top2 {
  position: relative;
}
.wp-block-sucb-heading-box.is-style-frame-top2 .hb-heading {
  width: fit-content;
  margin-left: 10px;
  transform: translateY(50%);
}
.wp-block-sucb-heading-box.is-style-frame-top2 .hb-body {
  padding-top: 2em; /* 被り分の余白 */
}
.wp-block-sucb-heading-box.is-style-frame-top2 .hb-heading {
  border-bottom-left-radius: var(--sucb-hb-radius, 0px) !important;
  border-bottom-right-radius: var(--sucb-hb-radius, 0px) !important;
}

.wp-block-sucb-heading-box.is-style-frame-top2 .hb-body {
  border-top-left-radius: var(--sucb-hb-radius, 0px) !important;
  border-top-right-radius: var(--sucb-hb-radius, 0px) !important;
}


/* ─────────────
   浮きあがり：ボックス全体をカード風に
───────────── */
.wp-block-sucb-heading-box.is-style-floating {
	margin: 2em 1em;
}
.wp-block-sucb-heading-box.is-style-floating .hb-body {
  border: 0 !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.wp-block-sucb-heading-box.is-style-floating .hb-heading {
  justify-content: center; /* 添付画像っぽく中央寄せ */
}