/**
 * EX POSTRiA — managed gallery layout adjustments
 *
 * EX POSTRiA が生成 / 差し替えする core/gallery にだけ効くように、
 * 全ギャラリーに付与する `.postria-gallery` クラスでスコープする。
 * サイトの他のギャラリーには一切影響しない。テーマ非依存。
 */

/* ------------------------------------------------------------------
 * (1) 固定カラム + 画像の高さを実画像に一致させる
 *
 * ・flex-grow:0  … core の flex-grow:1 を打ち消し、最終行(枚数 < columns)で
 *   画像が引き伸ばされるのを防ぐ。columns-N の幅(例 columns-5 → 20%)を維持。
 * ・align-self:flex-start … core はギャラリー行内で figure を行の高さまで
 *   縦に引き伸ばす(stretch)。すると is-cropped で画像が縦中央に置かれ、上側に
 *   余白ができ、そこに Lightbox 拡大アイコンが浮いてしまう。stretch を解除して
 *   figure の高さ = 画像の高さ にする。
 *   ※ core の該当ルールは `:not(#individual-image)` を含み ID レベルの詳細度
 *     (1,4,1) を持つため、クラスのみのセレクタでは勝てない。!important で上書きする。
 * ・is-cropped の img(height:100%/flex:1/object-fit:cover)を解除し、画像を
 *   自然な縦横比で表示。これで figure が画像にぴったり一致し、アイコンが必ず
 *   画像の右上角に乗る。
 * ------------------------------------------------------------------ */
.postria-gallery.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
	align-self: flex-start !important;
	position: relative !important;
	aspect-ratio: var(--postria-gallery-ratio, 3 / 2);  /* 比率は設定で切替(inline CSS が --postria-gallery-ratio を注入)。既定 3:2 */
	height: auto !important;
	overflow: hidden;             /* 角丸でのクリップ + はみ出し防止 */
}
/* 画像をセルいっぱいに敷き詰める。figure と img のボックスが完全一致するので、
 * 拡大アイコン(figure 基準の絶対配置)が必ず画像の右上角に乗る。 */
.postria-gallery.wp-block-gallery.has-nested-images figure.wp-block-image > img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	margin: 0 !important;
	max-width: none !important;
}

/* ------------------------------------------------------------------
 * (2) 角丸を控えめに (テーマの大きい border-radius を上書き)。0 で角丸なし。
 * ------------------------------------------------------------------ */
.postria-gallery figure.wp-block-image,
.postria-gallery figure.wp-block-image img {
	border-radius: 4px !important;
}

/* ------------------------------------------------------------------
 * (3) Lightbox 拡大アイコンを画像右上の角に固定
 *     (JS が動的計算する top/right を !important で上書き)
 * ------------------------------------------------------------------ */
.postria-gallery .wp-lightbox-container > button.lightbox-trigger {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	left: auto !important;
	bottom: auto !important;
}

/* ------------------------------------------------------------------
 * (4) Lightbox オーバーレイの背景を黒の半透明に
 *     (コアの白い `.scrim` background:#fff/opacity:.9 を上書き)
 * ------------------------------------------------------------------ */
.wp-lightbox-overlay .scrim {
	background-color: #000 !important;
	opacity: 0.8 !important;
}

/* ------------------------------------------------------------------
 * (5) 拡大表示の操作ボタン (前へ / 次へ / 閉じる) を白 + 半透明の丸背景にして
 *     暗い背景でも見やすくする。
 * ------------------------------------------------------------------ */
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next,
.wp-lightbox-overlay .wp-lightbox-close-button {
	color: #fff !important;
	background: rgba(0, 0, 0, 0.45) !important;
	border-radius: 9999px !important;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next svg,
.wp-lightbox-overlay .wp-lightbox-close-button svg {
	fill: #fff !important;
}