/* jct-simple-post-image.css — JCT 文章圖片連結區塊 v1.0.0 */
/*
 * 這個區塊本來沒有樣式表，對齊完全交給佈景主題的 .aligncenter。
 * 結果是兩件事都不成立：
 *
 *   1. <figure> 是區塊元素、寬度 100%，margin-inline:auto 對它沒有意義，
 *      裡面的 <img> 照樣靠左——按了置中看起來什麼都沒發生。
 *   2. WordPress 6.3 起編輯器畫布是 iframe，佈景主題的前台樣式不會自動
 *      進去（Jannah 是傳統主題）。所以編輯器裡連主題那份都吃不到。
 *
 * 這個檔案同時註冊成 style 與 editor_style，前台與編輯器畫布共用同一份，
 * 「編輯器看到的」才會等於「發布後的」。
 */

.jct-simple-post-image {
	margin: 0 0 1.5em;
}

.jct-simple-post-image img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

/* ── 置中 ──────────────────────────────────────────────
   **關鍵在 <img> 被行內樣式指定了 display:block**
   （render_block_php() 的 $style_attr）。區塊元素不受 text-align
   影響，所以只加 text-align:center 會完全沒有反應——按了置中什麼
   都沒發生，原因就在這裡。

   display:block 的圖片要靠 margin-inline:auto 置中。行內樣式沒有
   宣告 margin，所以這條規則蓋得過去，不必去動 PHP 那串 style。

   圖片是取代元素（replaced element），沒指定寬度時用的是自身的
   原始寬度、不會像 div 那樣撐滿，所以 margin auto 在「圖比容器窄」
   時就會生效；比容器寬時它本來就滿版，置不置中沒有差別。

   text-align:center 仍然留著：figcaption 與任何非 block 的內容
   （例如佈景主題改寫過的 img）都靠它。 */
.jct-simple-post-image.aligncenter {
	text-align: center;
	margin-inline: auto;
}

.jct-simple-post-image.aligncenter img {
	margin-inline: auto;
}

/* ── 左右浮動 ───────────────────────────────────────────
   浮動時 figure 必須收成內容寬度，否則它仍佔滿整行，
   文字繞不進旁邊——那就等於只是把圖片往上推了一行。
   max-width 50% 是上限，避免一張大圖把整段文字擠成一條。 */
.jct-simple-post-image.alignleft,
.jct-simple-post-image.alignright {
	max-width: 50%;
}

.jct-simple-post-image.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.jct-simple-post-image.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}


/* 窄螢幕不浮動：50% 寬的圖片在手機上兩邊都太窄，
   文字會變成一條一條的。改成滿版置中。 */
@media (max-width: 600px) {
	.jct-simple-post-image.alignleft,
	.jct-simple-post-image.alignright {
		float: none;
		max-width: 100%;
		margin: 0 0 1.5em;
		text-align: center;
	}

	/* 圖片仍是 display:block，取消浮動之後同樣要靠 margin auto 才會置中 */
	.jct-simple-post-image.alignleft img,
	.jct-simple-post-image.alignright img {
		margin-inline: auto;
	}
}

.jct-simple-post-image figcaption {
	text-align: center;
}

/* ── 編輯器畫布 ─────────────────────────────────────────
   ServerSideRender 會把 PHP 的輸出包進自己的 div，那層是
   display:block、寬度 100%，所以外層 wrapper 上的 aligncenter
   傳不到裡面的 figure。對齊一律以 figure 自己的 class 為準
   （上面那些規則），這裡只補浮動後的高度塌陷。 */
.editor-styles-wrapper .jct-simple-post-image.alignleft,
.editor-styles-wrapper .jct-simple-post-image.alignright {
	/* 編輯器裡區塊之間需要能點選，浮動會讓點擊區域錯位，
	   所以保留浮動但確保自己是 BFC 的一部分 */
	position: relative;
	z-index: 1;
}