/**
 * AINAS Image Fit - Frontend / Editor Styles
 *
 * 画像ファイル自体は加工せず、CSSの aspect-ratio + object-fit のみで
 * 表示上の比率・見た目を揃える（フロントエンド方式①）。
 *
 * クラスの組み合わせ:
 *   ainas-ratio-3-2 / ainas-ratio-4-3  … 比率
 *   ainas-fit-crop                     … トリミング（中央切り抜き）
 *   ainas-fit-pad                      … 余白を追加（背景色で調整）
 *
 * ギャラリーブロック（core/gallery）に付与された場合は、
 * 内部の core/image（img要素）すべてに子孫セレクタで適用される。
 */

/* ---------- 3:2 ---------- */
.ainas-ratio-3-2.ainas-fit-crop img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.ainas-ratio-3-2.ainas-fit-pad img {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background-color: var( --ainas-bg-color, #000000 );
	width: 100%;
	height: auto;
}

/* ---------- 4:3 ---------- */
.ainas-ratio-4-3.ainas-fit-crop img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.ainas-ratio-4-3.ainas-fit-pad img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var( --ainas-bg-color, #000000 );
	width: 100%;
	height: auto;
}

/* Safari等、aspect-ratio未対応環境向けの簡易フォールバック（対象imgの親要素にoverflow指定） */
.ainas-ratio-3-2 figure,
.ainas-ratio-4-3 figure {
	overflow: hidden;
}